From 578905dfbac6395be12fee39d7806b8f9859ad52 Mon Sep 17 00:00:00 2001 From: ismail Date: Sun, 5 Nov 2023 22:28:33 +0100 Subject: [PATCH] FIX:LAYOUT_BUGS --- .../src/messages/dto/message-format.dto.ts | 3 ++ backend/code/src/messages/messages.service.ts | 2 + .../code/src/Components/Home/assets/Table.tsx | 4 +- .../src/Components/Layout/Assets/Avatar.tsx | 2 +- .../code/src/Components/Layout/Assets/Out.tsx | 13 +++-- .../src/Components/Layout/Assets/Profile.tsx | 18 ++++++- .../src/Components/Layout/Assets/Search.tsx | 50 ++++++++++++++++--- .../Layout/Assets/SearchResults.tsx | 40 --------------- frontend/code/src/Components/Layout/index.tsx | 45 +++++++++++++++-- .../src/Components/Profile/assets/Table.tsx | 9 ++-- .../code/src/Components/Settings/index.tsx | 8 +-- frontend/code/src/index.tsx | 3 +- 12 files changed, 131 insertions(+), 66 deletions(-) delete mode 100644 frontend/code/src/Components/Layout/Assets/SearchResults.tsx diff --git a/backend/code/src/messages/dto/message-format.dto.ts b/backend/code/src/messages/dto/message-format.dto.ts index be954fd..3ec978d 100644 --- a/backend/code/src/messages/dto/message-format.dto.ts +++ b/backend/code/src/messages/dto/message-format.dto.ts @@ -3,12 +3,15 @@ import { Message, User } from '@prisma/client'; import { PICTURE } from 'src/profile/dto/profile.dto'; export class MessageFormatDto { + Username: any; constructor(messageData: Message & { author: Partial }) { this.id = messageData.id; this.content = messageData.content; this.time = messageData.createdAt; this.roomId = messageData.roomId; this.authorId = messageData.authorId; + this.Username = messageData.author.Username; + this.avatar = { thumbnail: `https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_48,w_48/${messageData.author.avatar}`, medium: `https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${messageData.author.avatar}`, diff --git a/backend/code/src/messages/messages.service.ts b/backend/code/src/messages/messages.service.ts index 682f041..861591c 100644 --- a/backend/code/src/messages/messages.service.ts +++ b/backend/code/src/messages/messages.service.ts @@ -79,11 +79,13 @@ export class MessagesService { content: messageDto.content, roomId: channelId, authorId: userId, + }, include: { author: { select: { avatar: true, + Username:true, }, }, }, diff --git a/frontend/code/src/Components/Home/assets/Table.tsx b/frontend/code/src/Components/Home/assets/Table.tsx index 6ff5e5f..3bf0cbf 100644 --- a/frontend/code/src/Components/Home/assets/Table.tsx +++ b/frontend/code/src/Components/Home/assets/Table.tsx @@ -80,7 +80,7 @@ export const Table: FC = () => } + loader={
} endMessage={
No more results!
} hasMore={hasMoreItems.current} scrollableTarget="scrollTarget" @@ -115,7 +115,7 @@ export const Table: FC = () =>
Avatar Tailwind CSS Component
-
{x?.Username}
+
{x?.Username}
diff --git a/frontend/code/src/Components/Layout/Assets/Avatar.tsx b/frontend/code/src/Components/Layout/Assets/Avatar.tsx index 33e912f..7a9d6f3 100644 --- a/frontend/code/src/Components/Layout/Assets/Avatar.tsx +++ b/frontend/code/src/Components/Layout/Assets/Avatar.tsx @@ -10,7 +10,7 @@ export const Avatar = (props:any) =>{
  • Settings
    • -
  • Profile
    • +
  • Profile
    • { process.env.REACT_APP_LOGOUT && user.logout()} to={process.env.REACT_APP_LOGOUT}>
  • Logout
    • diff --git a/frontend/code/src/Components/Layout/Assets/Out.tsx b/frontend/code/src/Components/Layout/Assets/Out.tsx index 3b2c71d..ca221ea 100644 --- a/frontend/code/src/Components/Layout/Assets/Out.tsx +++ b/frontend/code/src/Components/Layout/Assets/Out.tsx @@ -1,14 +1,18 @@ import { classNames } from "../../../Utils/helpers"; - +import { useUserStore } from "../../../Stores/stores"; +import { Link } from "react-router-dom"; type OutProps = React.HTMLAttributes & { selected?: boolean; }; export const Out = ({ selected, className, ...props} : OutProps) => { + const user = useUserStore(); return ( -
    + { process.env?.REACT_APP_LOGOUT && + user.logout()} to={process.env.REACT_APP_LOGOUT}> +
    {
    + + } + ) } diff --git a/frontend/code/src/Components/Layout/Assets/Profile.tsx b/frontend/code/src/Components/Layout/Assets/Profile.tsx index ea2e64b..f7cfef1 100644 --- a/frontend/code/src/Components/Layout/Assets/Profile.tsx +++ b/frontend/code/src/Components/Layout/Assets/Profile.tsx @@ -1,14 +1,30 @@ import {Link} from 'react-router-dom' import { useUserStore } from '../../../Stores/stores' -export const Profile = ({selected} : boolean | any) => { +import { classNames } from "../../../Utils/helpers"; + +type ProfileProps = React.HTMLAttributes & { + selected?: boolean; +}; + +export const Profile = ({ selected, className, ...props }: ProfileProps) => { const userStore = useUserStore(); return ( + +
    +
    ); }; diff --git a/frontend/code/src/Components/Layout/Assets/Search.tsx b/frontend/code/src/Components/Layout/Assets/Search.tsx index 4f660f5..2482b2b 100644 --- a/frontend/code/src/Components/Layout/Assets/Search.tsx +++ b/frontend/code/src/Components/Layout/Assets/Search.tsx @@ -1,7 +1,8 @@ import {useState , ChangeEvent , useEffect} from 'react' import {BiSearch} from 'react-icons/bi' -import { SearchResults } from './SearchResults' - +import { Link } from 'react-router-dom' +import api from '../../../Api/base' +import toast from 'react-hot-toast' function useDebounce(value: T, delay?: number): T { const [debouncedValue, setDebouncedValue] = useState(value) @@ -19,17 +20,54 @@ function useDebounce(value: T, delay?: number): T { export const Search = () => { const [searchText, setSearchText] = useState(""); const DebounceValue = useDebounce(searchText); + const [hidden, setHidden] = useState("hidden"); const onSearchTextChange = (e: ChangeEvent) => setSearchText(e.target.value); - + const [result , setResult] = useState([]); + useEffect(() => + { + const search = async() => { + try { + const res = await api.get("/users/search",{params:{q:DebounceValue}}) + setResult(res.data) + console.log(res.data) + res.data.length ? setHidden("") : setHidden("hidden") + } catch (error) { + toast.error("can't find anyone") + } + } + DebounceValue && search() + },[DebounceValue]) + const clear = () => { + setHidden("hidden");setSearchText("");setResult([]); + } return (
    - {setSearchText("")}} onFocus={()=>{setSearchText("")}} value={searchText}/> +
    -
      - +
        +
        + { result.map((item : any , index : number) => { + return ( + +
      • +
        +
        +
        + +
        +
        + {item.name.first} {item.name.last} +
        +
        • + + ) + }) + } + +
    ) diff --git a/frontend/code/src/Components/Layout/Assets/SearchResults.tsx b/frontend/code/src/Components/Layout/Assets/SearchResults.tsx deleted file mode 100644 index 7512b5c..0000000 --- a/frontend/code/src/Components/Layout/Assets/SearchResults.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useEffect, useState } from "react" -import api from "../../../Api/base" -import { Link } from "react-router-dom"; -export const SearchResults = (props:any) => { - const [result , setResult] = useState([]); - useEffect(() => - { - const search = async() => { - try { - const res = await api.get("/users/search",{params:{q:props.query}}) - setResult(res.data) - console.log(res.data) - } catch (error) { - } - } - props.query && search() - },[props.query]) - return ( -
    - { result.length > 0 && result.map((item : any , index : number) => { - return ( - -
  • -
    -
    -
    - -
    -
    - {item.name.first} {item.name.last} -
    -
    • - - ) - }) - } - {} -
    - ) -} \ No newline at end of file diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx index 494f263..1ffe6c5 100644 --- a/frontend/code/src/Components/Layout/index.tsx +++ b/frontend/code/src/Components/Layout/index.tsx @@ -15,6 +15,7 @@ import { useUserStore } from "../../Stores/stores"; import { useNavigate } from "react-router-dom"; import { FirstLogin } from "../FirstLogin"; import { socket } from "../Chat/Services/SocketsServices"; +import toast from "react-hot-toast"; const routes = [ { path: "Profile/:id" }, @@ -58,12 +59,50 @@ export const Layout: FC = (): JSX.Element => { }; socket.on("connect", onConnect); + socket.on("message",(msg) => { + toast.custom((t) => ( +
    +
    +
    +
    + avatar +
    +
    +

    + {msg.Username} +

    +

    + {msg.content} +

    +
    +
    +
    +
    + +
    +
    + )) + }) log(); return () => { socket.off("connect", onConnect); }; //eslint-disable-next-line }, []); + const path: string = useCurrentPath(); const obj = { x: "30", y: "20" }; return ( @@ -75,7 +114,7 @@ export const Layout: FC = (): JSX.Element => { data-theme="mytheme" className={`h-screen ${!user.profileComplet ? "blur-lg" : ""}`} > -
    +
    @@ -86,7 +125,7 @@ export const Layout: FC = (): JSX.Element => {
    -
    +
    @@ -118,7 +157,7 @@ export const Layout: FC = (): JSX.Element => {
    -
    +
    diff --git a/frontend/code/src/Components/Profile/assets/Table.tsx b/frontend/code/src/Components/Profile/assets/Table.tsx index 7634253..e85dec5 100644 --- a/frontend/code/src/Components/Profile/assets/Table.tsx +++ b/frontend/code/src/Components/Profile/assets/Table.tsx @@ -3,9 +3,9 @@ import { Link } from 'react-router-dom' import { Load , Loading} from '../../Loading/'; import { Logo } from '../../Layout/Assets/Logo'; import InfiniteScroll from 'react-infinite-scroll-component'; +import { NullPlaceHolder } from '../../Chat/Components/RoomChatHelpers'; import api from '../../../Api/base'; import toast from 'react-hot-toast'; - const getColor = (v1 : number , v2:number) => { if (v1 > v2) return "text-lime-400"; if (v1 < v2) return "text-red-400"; @@ -61,10 +61,10 @@ export const Table = (props:any) => },[props.props.props]) console.log(props) return ( -
    + history.length > 0 || loading === true ? (
    } + loader={
    } dataLength={history.length} next={fetchData} className='overflow-auto' @@ -109,7 +109,8 @@ export const Table = (props:any) => -
    +
    ) + :(
    ) ) diff --git a/frontend/code/src/Components/Settings/index.tsx b/frontend/code/src/Components/Settings/index.tsx index 56932df..4ece37e 100644 --- a/frontend/code/src/Components/Settings/index.tsx +++ b/frontend/code/src/Components/Settings/index.tsx @@ -32,14 +32,14 @@ export const Setting = () => { return ( <> -
    +

    Profile Settings

    change preview

    -
    +
    @@ -85,9 +85,9 @@ export const Setting = () => {

    change preview

    -
    +
    -
    +
    {data_names.map((x, index) => { return ( diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx index 1b7cbad..35eb33a 100644 --- a/frontend/code/src/index.tsx +++ b/frontend/code/src/index.tsx @@ -15,8 +15,7 @@ root.render( toastOptions={{ style:{ background:"#7247c8", - color:"white" - + color:"white", }, className: "relative top-[6vh] bg-base-100 text-white", duration: 3000