FIX:LAYOUT_BUGS

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<User> }) {
     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}`,

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,
           },
         },
       },

frontend/code/src/Components/Home/assets/Table.tsx

@@ -80,7 +80,7 @@ export const Table: FC = () =>
         <InfiniteScroll
                     dataLength={users.length}
                     next={fetchItems}
-                    loader={<div className='flex items-center justify-center w-full '><Logo x={"6"} y={"6"}/></div>}
+                    loader={<div className='flex items-center justify-center w-full '><Logo x={"12"} y={"12"}/></div>}
                     endMessage={<div className='p-4 flex justify-center items-center font-montserrat text-neutral'>No more results!</div>}
                     hasMore={hasMoreItems.current} 
                     scrollableTarget="scrollTarget"
@@ -115,7 +115,7 @@ export const Table: FC = () =>
                       <div className="w-10 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
                       <img src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${x?.avatar}`} alt="Avatar Tailwind CSS Component" />                      </div>
                     </div>
-                    <div className="flex font-montserrat w-12 text-neutral font-semibold">{x?.Username}</div>
+                    <div className="flex font-montserrat w-20 text-neutral font-semibold ">{x?.Username}</div>
                     </div>
                     </Link>
                     </td>

frontend/code/src/Components/Layout/Assets/Avatar.tsx

@@ -10,7 +10,7 @@ export const Avatar = (props:any) =>{
         </div>
         <ul tabIndex={0} className="dropdown-content z-50 right-0 top-10 menu p-2  shadow bg-base-100 rounded-box w-52">
             <Link to={"Settings"}><li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Settings</div></li></Link>
-            <Link to={"Profile/me"}><li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Profile</div></li></Link>
+            <Link to={`Profile/${user.id}`}><li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Profile</div></li></Link>
             {
                 process.env.REACT_APP_LOGOUT &&
                 <Link onClick={() => user.logout()} to={process.env.REACT_APP_LOGOUT}> <li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Logout</div></li></Link>

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<HTMLDivElement> & {
     selected?: boolean;
   };
 export const Out = ({ selected, className, ...props} : OutProps) => {
+  const user = useUserStore();
     return (
-        <div
-
+      <>
+      { process.env?.REACT_APP_LOGOUT &&
+        <Link onClick={() => user.logout()} to={process.env.REACT_APP_LOGOUT}>
+      <div
         className={classNames(
             "h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
             selected && "bg-secondary",
@@ -20,6 +24,9 @@ export const Out = ({ selected, className, ...props} : OutProps) => {
             <path d="M16 12L16.7809 11.3753L17.2806 12L16.7809 12.6247L16 12ZM4 13C3.44771 13 3 12.5523 3 12C3 11.4477 3.44771 11 4 11V13ZM12.7809 6.3753L16.7809 11.3753L15.2191 12.6247L11.2191 7.6247L12.7809 6.3753ZM16.7809 12.6247L12.7809 17.6247L11.2191 16.3753L15.2191 11.3753L16.7809 12.6247ZM16 13H4V11H16V13Z" fill="#BDBDBD"/>
             </svg>
         </div>
+        </Link>
+      }
+      </>
 
     )
 }

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<HTMLDivElement> & {
+  selected?: boolean;
+};
+
+export const Profile = ({ selected, className, ...props }: ProfileProps) => {
     const userStore = useUserStore();
     return (
+
     <Link to={`Profile/${userStore?.id}`}>
+      <div
+        className={classNames(
+          "h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
+          selected && "bg-secondary",
+          className
+        )}
+        {...props}
+      >
         <div className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${selected && 'bg-secondary'}`}>
             <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
             <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>
             </svg>
         </div>
+      </div>
     </Link>
   );
 };

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<T>(value: T, delay?: number): T {
     const [debouncedValue, setDebouncedValue] = useState<T>(value)
 
@@ -19,17 +20,54 @@ function useDebounce<T>(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<HTMLInputElement>) => 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 (
 
         <div className='dropdown hover:cursor-pointer hidden  sm:flex sm:items-center absolute w-80 right-52'>
 
-            <input tabIndex={0} type="text" placeholder="Search" className={`input w-80 h-8 md:w-full mr-4 md:h-12`} onChange={onSearchTextChange} onBlur={() => {setSearchText("")}} onFocus={()=>{setSearchText("")}} value={searchText}/>
+            <input tabIndex={0} type="text" placeholder="Search" className={`input w-80 h-8 sm:w-full mr-4 sm:h-12`} onChange={onSearchTextChange}  value={searchText}/>
 
             <div className='relative right-14 top-0 w-12 '><BiSearch size="1.4em" /></div>
-             <ul tabIndex={0} className="dropdown-content z-[9999] menu p-2 shadow bg-base-100 rounded-box w-full top-12">
-                <SearchResults query={DebounceValue} />
+             <ul tabIndex={0} className={`dropdown-content z-[9999] menu p-2 shadow bg-base-100 rounded-box w-full top-12 ${hidden}`}>
+             <div className="flex flex-col w-full h-full bg-base-100 z-50">
+         { result.map((item : any , index : number) => {
+            return (
+                <Link key={index} to={`Profile/${item.id}`} onClick={clear}>
+                    <li className="hover:bg-primary hover:rounded-xl transform duration-500 h-full w-full z-[10000]">
+                        <div className="flex items-center gap-2">
+                        <div className="avatar">
+                            <div className="w-auto rounded-full gap-4 ring ring-primary ring-offset-base-100 ring-offset-2">
+                                <img alt="" src={item.avatar.thumbnail} />
+                            </div>
+                            </div>
+                            <span >{item.name.first} {item.name.last}</span>
+                        </div>
+                    </li>
+                </Link>
+            )
+            }) 
+         }
+
+        </div>
             </ul>
         </div> 
     )

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<PropsWithChildren> = (): JSX.Element => {
     };
 
     socket.on("connect", onConnect);
+    socket.on("message",(msg) => {
+      toast.custom((t) => (
+        <div
+          className={`${
+            t.visible ? 'animate-enter' : 'animate-leave'
+          } max-w-md w-full transition-opacity ease-in  bg-indigo-900 shadow-lg rounded-lg pointer-events-auto flex ring-1 relative top-[6vh] ring-black ring-opacity-5`}
+        >
+          <div className="flex-1 w-0 p-4">
+            <div className="flex items-start">
+              <div className="flex-shrink-0 pt-0.5">
+                <img
+                  className="h-10 w-10 rounded-full"
+                  src={`${msg.avatar.medium}`}
+                  alt="avatar"
+                />
+              </div>
+              <div className="ml-3 flex-1">
+                <p className="font-bold font-poppins text-neutral">
+                  {msg.Username}
+                </p>
+                <p className="mt-1 font-medium font-poppins  text-black">
+                  {msg.content}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex border-l border-gray-200">
+            <button
+              onClick={() => toast.dismiss(t.id)}
+              className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-neutral hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      ))
+    })
     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<PropsWithChildren> = (): JSX.Element => {
           data-theme="mytheme"
           className={`h-screen ${!user.profileComplet ? "blur-lg" : ""}`}
         >
-          <div className=" flex flex-row  w-screen h-[8vh]  bg-base-200">
+          <div className=" flex flex-row  w-screen h-[9vh]  bg-base-200">
             <div className="flex justify-start items-center z-50 pl-1  sm:pl-2  h-full w-full">
               <Logo {...obj} />
             </div>
@@ -86,7 +125,7 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
             </div>
           </div>
           <div className="flex bg-base-200">
-            <div className="sm:flex flex-col hidden justify-around items-stretch h-[92vh] bg-base-200 overflow-auto md:pt-10 w-20 min-w-[5rem] max-w-[5rem]">
+            <div className="sm:flex flex-col hidden justify-around items-stretch h-[91vh] bg-base-200 md:pt-20 w-20 min-w-[5.5rem] max-w-[6rem]">
               <div className="flex flex-col justify-evenly content-start gap-y-10 pb-44">
                 <Dash selected={path === "Home"} className="mx-auto" />
                 <Game selected={path === "Play"} className="mx-auto" />
@@ -118,7 +157,7 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
                 <Settings selected={path === "Settings"} />
               </button>
             </div>
-            <div className="sm:-ml-4 sm:w-[92vw] xl:w-[96vw] md:w-[93.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[92vh]  bg-accent sm:rounded-tl-2xl overflow-auto no-scrollbar" id='scrollTarget'>
+            <div className="sm:-ml-4 sm:w-[92vw] xl:w-[95.5vw]  md:w-[93.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[91vh]  bg-accent sm:rounded-tl-2xl overflow-auto no-scrollbar" id='scrollTarget'>
                 <Outlet />
 
             </div>

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 (
-        <div className='w-full h-full overflow-auto'>
+        history.length > 0 || loading === true ? (<div className='w-full h-full overflow-auto'>
           <InfiniteScroll
             hasMore={hasMore}
-            loader={<div className='flex items-center justify-center'><Logo x={"6"} y={"6"}/></div>}
+            loader={<div className='flex items-center w-full h-full justify-center'><Logo x={"16"} y={"16"}/></div>}
             dataLength={history.length}
             next={fetchData}
             className='overflow-auto'
@@ -109,7 +109,8 @@ export const Table = (props:any) =>
               </table>
 
           </InfiniteScroll>
-          </div>
+          </div>)
+          :(<div className='flex items-center justify-center w-full h-full font-montserrat text-neutral'><NullPlaceHolder message='No History Available'/></div>)
         )
 
 

frontend/code/src/Components/Settings/index.tsx

@@ -32,14 +32,14 @@ export const Setting = () => {
 
   return (
     <>
-      <div className="flex h-[90vh] w-full font-poppins font-medium ">
+      <div className="flex h-[90vh] w-full font-poppins font-medium overflow-hidden">
         <h1 className="pt-6 pl-6 font-poppins font-medium text-xl text-neutral">
           Profile Settings
         </h1>
         <div className=" h-[82%] w-[90%] flex flex-col absolute bottom-0 right-0 bg-base-200 rounded-tl-2xl">
           <h2 className="pt-4 pl-4 text-neutral ">change preview</h2>
           <div className="flex justify-center h-1/3 w-full pt-8">
-            <div className="flex flex-col sm:flex-row  items-center gap-4 sm:justify-between justify-center overflow-scroll no-scrollbar  w-[90%]  max-h-[30vh] h-[20vh]  bg-base-100 border-solid border-gray-400 border-2  rounded-3xl">
+            <div className="flex flex-col sm:flex-row  items-center gap-4 sm:justify-between justify-center overflow-hidden no-scrollbar  w-[90%]  max-h-[30vh] h-[25vh]  bg-base-100 border-solid border-gray-400 border-2  rounded-3xl">
               <div className="flex justify-between items-center  gap-x-10 px-2 sm:px-0">
                 <div className="relative sm:pl-10 pt-6 sm:pt-0">
                   <UploadLogic/>
@@ -85,9 +85,9 @@ export const Setting = () => {
           </div>
 
           <h2 className="pt-4 pl-4 text-neutral">change preview</h2>
-          <div className="flex justify-center  overflow-auto no-scrollbar  h-full w-full pt-8">
+          <div className="flex justify-center  h-full w-full pt-8 overflow-hidden">
             <div className="flex flex-col sm:flex-row justify-between w-[90%] h-[50vh] sm:max-h-[50vh] max-h-[40vh] bg-base-100 border-solid border-gray-400 border-2  rounded-3xl">
-              <div className="overflow-scroll no-scrollbar h-full gap-4 p-6 flex-wrap shrink grid md:grid-cols-2  grid-cols-1 justify-between w-full">
+              <div className="h-full gap-4 p-6 flex-wrap shrink grid md:grid-cols-2 overflow-auto grid-cols-1 justify-between w-full">
                 {data_names.map((x, index) => {
                   return (
                     <Inputs key={index} name={x} data={data_content[index]} payload={payload_objects[index]} />

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