FIX:LAYOUT_BUGS (#79)

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

@@ -82,11 +82,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