Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ADD:zustand #35

Merged
merged 4 commits into from
Sep 18, 2023
Merged

ADD:zustand #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
311e162
ADD:gzip
ismail-kharrobi Sep 15, 2023
75bd7e0
ADD:dynamic settings
ismail-kharrobi Sep 15, 2023
3a80356
ADD:Settings page
ismail-kharrobi Sep 17, 2023
3a68513
ADD:zustand
ismail-kharrobi Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 98 additions & 1 deletion frontend/code/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion frontend/code/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-spring/web": "^9.7.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand All @@ -19,7 +20,8 @@
"react-icons": "^4.10.1",
"react-scripts": "^5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"zustand": "^4.4.1"
},
"scripts": {
"start": "FORK_TS_CHECKER=false react-scripts start",
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const Home : FC = () : JSX.Element =>{
return (
<>

<div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1">
<div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1 bg-accent">
<div className='flex justify-center relative items-start pt-6 h-2/6 max-h-48 sm:max-h-96 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
<img className='w-full h-full object-cover object-top rounded-3xl' alt='leaderboard hero' src={herosvg} />
<Link to={"/Play"}><Button/></Link>
Expand Down
48 changes: 6 additions & 42 deletions frontend/code/src/Components/Layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import { Out } from './Assets/Out'
import { FC,PropsWithChildren } from 'react'
import { Outlet ,} from 'react-router'
import { matchRoutes, useLocation } from "react-router-dom"
import { userContext , UserType } from '../../Context'
import { useContext , useEffect } from 'react'
import { useUserStore } from '../../Stores/stores'
import { useEffect } from 'react'

const routes = [{ path: "Profile/:id" } , {path : "Settings"} , {path : "Home"}, {path:"Chat"} , {path:"Play"}]

Expand All @@ -24,50 +24,14 @@ const useCurrentPath = () => {

export const Layout : FC<PropsWithChildren> = () : JSX.Element =>
{
const {user , login} :any = useContext(userContext)
useEffect(() => {
if (user.isLogged === false){
const fetchUser = async() => {
const res = await fetch("https://randomuser.me/api");
const data = await res.json();
const user_data = data.results[0];
console.log(user_data)

const userInitialValue : UserType= {
isLogged:true,
id:user_data.id.value,
name:{
first:user_data.name.first,
last:user_data.name.last
},
picture:{
thumbnail:user_data.picture.thumbnail,
medium:user_data.picture.medium,
large:user_data.picture.large
},

email:user_data.email,
token:'',
tfa:false,
friendListIds:[],
banListIds:[],
achivments:[],
dmsIds:[],
history:[],
chatRoomsJoinedIds:[]

}
console.log(userInitialValue)
login(userInitialValue)
}
fetchUser()
}
})
const user = useUserStore();

useEffect(() => {user.auth.login();},[user.auth])
const path : string = useCurrentPath()
const obj = {x:"30",y:"20"}
return (
<>
<div data-theme="mytheme" className=' h-screen bg-slate-50 '>
<div data-theme="mytheme" className=' h-screen '>

<div className=' flex flex-row w-screen h-[8vh] bg-base-200'>
<div className='flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full'>
Expand Down
Binary file modified frontend/code/src/Components/Profile/assets/Hero.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions frontend/code/src/Components/Profile/assets/svg/threedots.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 25 additions & 15 deletions frontend/code/src/Components/Profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,17 @@ import { Share } from './assets/ShareB'
import { Message } from './assets/MessageB'
import { History } from './History'
import Hero from './assets/Hero.gif'
import { useState , useEffect , useContext} from 'react'
import { useState , useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { Load } from '../Loading/'
import Newbie from '../Badges/Newbie.svg'
import Master from '../Badges/Master.svg'
import Ultimate from '../Badges/Ultimate.svg'
import { userContext } from '../../Context'
import { Edit } from './assets/Edit'
import { useUserStore } from '../../Stores/stores'
import dots from './assets/svg/threedots.svg'
export const Profile = () =>{
const {user} :any = useContext(userContext);
const user = useUserStore();
const params = useParams()
console.log(`params : ${params.id} type ${typeof(params.id)}`)
const [users, setUsers] = useState<null | any>(undefined);
Expand All @@ -35,7 +36,7 @@ export const Profile = () =>{

return (
<>
<div className=" flex flex-col items-center h-full min-h-screen">
<div className=" flex flex-col items-center h-full min-h-screen bg-accent">
<div className='relative pt-12 h-auto max-h-[30vh] min-h-[16vh] md:min-h-[28vh] xl:min-h-[33vh] w-[85vw]'>

<div className='relative h-full w-full md:px-32 bg-[#2b3bfb] rounded-t-3xl'><img className='flex-1 w-full h-auto object-scale-down md:object-top object-bottom rounded-t-3xl' src={Hero} alt="bg hero"></img>
Expand All @@ -52,29 +53,38 @@ export const Profile = () =>{
</div>
</div>
</div>
<div className='relative flex flex-col gap-y-2 sm:gap-y-0 pl-4 sm:pt-12 pt-6 text-neutral font-montserrat bg-base-200 justify-start items-start h-[15%] xl:h-[25%] xl:min-h-[25%] min-h-[20%] rounded-b-3xl w-[85vw] overflow-scroll no-scrollbar'>
<div className='relative flex flex-col gap-y-4 sm:gap-y-0 pl-4 text-neutral font-montserrat bg-base-200 justify-start items-start h-[15%] xl:h-[30%] xl:min-h-[27%] min-h-[25%] rounded-b-3xl w-[85vw] overflow-scroll no-scrollbar'>
{
users?.name?.first ? <h6>{users?.name?.first} </h6>: <Load/>
users?.name?.first ? <h6 className='sm:pt-12 pt-6 font-poppins font-bold text-xl'>{users?.name?.first} {users.name.last} </h6>: <Load/>
} <div className="flex justify-center items-center gap-x-2">
<File/>
<span className='text-xs font-mono '>bio bla bla bla</span>
<span className='text-sm pt-4 font-mono '>{user.bio}</span>
</div>
<div className=" w-full flex flex-col sm:flex-row sm:flex-wrap sm:justify-between items-center gap-x-4 h-2/6">
<div className="flex flex-col gap-y-2 flex-0 sm:flex-row sm:gap-x-4 justify-center items-center sm:justify-start sm:items-start sm:w-[25vw]">
{params.id !== "me" ?
<div className=" w-full h-full flex flex-col sm:flex-row sm:flex-wrap sm:justify-between gap-x-4">
<div className="flex flex-col gap-y-0 items-center h-full sm:flex-row sm:gap-x-4 justify-center sm:justify-start sm:items-end pb-4 sm:w-[25vw]">
{
params.id !== "me" ?
(<><Message/>
<Share/></>)
:
(
<Link to={"/Settings"}><Edit/></Link>
)

}
</div>
<div className="flex flex-row gap-x-4 justify-center items-center w-72 sm:w-auto sm:pr-4 sm:pt-0 pt-4">
<img className={`h-[10vh] sm:h-[16vh] `} src={Newbie} alt="newbie badge" />
<img className={`h-[10vh] sm:h-[16vh] opacity-30`} src={Master} alt="Master badge" />
<img className={`h-[10vh] sm:h-[16vh] `} src={Ultimate} alt="Ultimate badge" />
<div className="flex h-full w-full flex-row gap-x-4 justify-center sm:justify-start items-center sm:w-auto sm:pr-4 sm:pt-0 pt-4 ">
<img className={`h-[9vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[15vh] 2xl:h-[16vh] `} src={Newbie} alt="newbie badge" />
<img className={`h-[9vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[15vh] 2xl:h-[16vh] opacity-30`} src={Master} alt="Master badge" />
<img className={`h-[9vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[15vh] 2xl:h-[16vh] `} src={Ultimate} alt="Ultimate badge" />
<div className="flex h-full items-start cursor-pointer dropdown dropdown-end">
<label tabIndex={0} className="btn m-1">
<img src={dots} alt="three dots" />
</label>
<ul tabIndex={0} className="relative top-14 dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
<li className='hover:bg-primary hover:rounded-xl transform duration-500'><div>Block</div></li>
<li className='hover:bg-primary hover:rounded-xl transform duration-500'><div>Send friend request</div></li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Settings/assets/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const Avatar = (props:any) => {
return (
<div className="avatar">
<div className="w-24 rounded-full">
<div className="w-16 sm:w-24 xl:w-32 rounded-full">
<img src={props.picture} alt="avatar" />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Settings/assets/Edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const Edit = () => {
return (
<svg className="hover:cursor-pointer hover:fill-primary-content" width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className="hover:cursor-pointer hover:fill-primary-content h-8 w-8 sm:w-10 sm:h-10" width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="19.7264" cy="19" rx="19.1812" ry="19" fill="#7139CE"/>
<path d="M21.2409 14.5L14.6066 21.0716L14.6066 21.0716C14.3919 21.2842 14.2846 21.3905 14.214 21.5215C14.1433 21.6525 14.1134 21.8005 14.0536 22.0967L13.313 25.7648C13.2459 26.0973 13.2123 26.2636 13.3067 26.3583C13.4012 26.4531 13.5675 26.4202 13.9003 26.3542L17.6214 25.6171C17.9147 25.559 18.0613 25.5299 18.1914 25.4608C18.3215 25.3917 18.4278 25.2865 18.6402 25.0761L18.6402 25.0761L25.279 18.5L21.2409 14.5Z" fill="white"/>
<path d="M21.9348 13.9679L14.652 21.182C14.64 21.1938 14.6281 21.2055 14.6163 21.2173C14.4551 21.3764 14.3002 21.5294 14.1907 21.7214C14.0811 21.9134 14.0281 22.1246 13.973 22.3442C13.9689 22.3604 13.9649 22.3766 13.9607 22.3929L13.2914 25.0452C13.2889 25.0548 13.2865 25.0645 13.284 25.0743C13.245 25.2283 13.201 25.4025 13.1861 25.5507C13.1696 25.7158 13.1704 26.015 13.4112 26.2569L13.8364 25.8336L13.4112 26.2569C13.6519 26.4987 13.9512 26.5008 14.1163 26.4851C14.2646 26.4709 14.439 26.4276 14.5931 26.3893C14.603 26.3869 14.6127 26.3845 14.6223 26.3821L17.3165 25.7149C17.3326 25.7109 17.3487 25.707 17.3647 25.703C17.5826 25.6494 17.792 25.5979 17.9829 25.4906C18.1738 25.3834 18.3268 25.2314 18.486 25.0733C18.4977 25.0617 18.5094 25.05 18.5212 25.0383L25.781 17.8472L25.8081 17.8203C26.1227 17.5088 26.4005 17.2336 26.5943 16.9818C26.8043 16.709 26.9722 16.3938 26.9722 16C26.9722 15.6062 26.8043 15.291 26.5943 15.0182C26.4005 14.7664 26.1227 14.4912 25.8081 14.1797L25.781 14.1528L25.5943 13.9679L25.5675 13.9414C25.2585 13.6352 24.9852 13.3645 24.7355 13.1757C24.4647 12.9708 24.1528 12.8075 23.7646 12.8075C23.3763 12.8075 23.0645 12.9708 22.7936 13.1757C22.5439 13.3645 22.2706 13.6352 21.9616 13.9414L21.9348 13.9679Z" stroke="white" strokeWidth="1.2"/>
Expand Down
Loading
Loading