Skip to content

Commit

Permalink
FIX:LAYOUT_BUGS
Browse files Browse the repository at this point in the history
  • Loading branch information
ismail-kharrobi committed Nov 5, 2023
1 parent 9e425af commit 578905d
Show file tree
Hide file tree
Showing 12 changed files with 131 additions and 66 deletions.
3 changes: 3 additions & 0 deletions backend/code/src/messages/dto/message-format.dto.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand Down
2 changes: 2 additions & 0 deletions backend/code/src/messages/messages.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,13 @@ export class MessagesService {
content: messageDto.content,
roomId: channelId,
authorId: userId,

},
include: {
author: {
select: {
avatar: true,
Username:true,
},
},
},
Expand Down
4 changes: 2 additions & 2 deletions frontend/code/src/Components/Home/assets/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Layout/Assets/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 10 additions & 3 deletions frontend/code/src/Components/Layout/Assets/Out.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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>
}
</>

)
}
18 changes: 17 additions & 1 deletion frontend/code/src/Components/Layout/Assets/Profile.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
50 changes: 44 additions & 6 deletions frontend/code/src/Components/Layout/Assets/Search.tsx
Original file line number Diff line number Diff line change
@@ -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)

Expand All @@ -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>
)
Expand Down
40 changes: 0 additions & 40 deletions frontend/code/src/Components/Layout/Assets/SearchResults.tsx

This file was deleted.

45 changes: 42 additions & 3 deletions frontend/code/src/Components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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 (
Expand All @@ -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>
Expand All @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 5 additions & 4 deletions frontend/code/src/Components/Profile/assets/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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>)
)


Expand Down
8 changes: 4 additions & 4 deletions frontend/code/src/Components/Settings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down Expand Up @@ -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]} />
Expand Down
3 changes: 1 addition & 2 deletions frontend/code/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 578905d

Please sign in to comment.