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

user/login page created #82

Merged
merged 2 commits into from
Nov 21, 2023
Merged

user/login page created #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac145a0
user/login page
leobesnard Nov 21, 2023
17928c3
Apply automatic changes
leobesnard Nov 21, 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
2 changes: 1 addition & 1 deletion front/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="src/assets/pongIconWhithe.png" />
<link rel="icon" type="image/svg+xml" href="/src/assets/pongIconWhithe.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Pong</title>
</head>
Expand Down
6 changes: 2 additions & 4 deletions front/src/components/GameHistoryTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ interface HistoryProps {

export const GameHistoryTable: FC<HistoryProps> = ({ login }) => {
const [currentPage, setCurrentPage] = useState(1);
let totalPages, startIndex, endIndex, visibleGameHistory, reverseArray;
let totalPages, startIndex, endIndex, visibleGameHistory, reverseArray, won;
const {
data: games,
isLoading,
isError,
} = useApi().get('get games', 'game/all') as UseQueryResult<gameDto[]>;
} = useApi().get('get games', `game/all/${login}`) as UseQueryResult<gameDto[]>;

if (isLoading) {
return <div>Loading...</div>;
Expand All @@ -38,8 +38,6 @@ export const GameHistoryTable: FC<HistoryProps> = ({ login }) => {
visibleGameHistory = reverseArray.slice(startIndex, endIndex);
}

console.log(games);

const handlePageChange = (page: number) => {
setCurrentPage(page);
};
Expand Down
6 changes: 6 additions & 0 deletions front/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import Main from './components/Main';
import OauthCallback from './pages/OauthCallback';
import TwoFaActivation from './pages/TwoFaActivation';
import TwoFaLogin from './pages/TwoFaLogin';
import User from './pages/User';

const container = document.getElementById('root');
const root = createRoot(container!);
Expand Down Expand Up @@ -57,6 +58,11 @@ const router = createBrowserRouter([
element: <TwoFaActivation />,
loader: privateGuard,
},
{
path: '/user/:login',
element: <User />,
loader: privateGuard,
},
],
},
{
Expand Down
100 changes: 100 additions & 0 deletions front/src/pages/User.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { useState } from 'react';
import { UseQueryResult } from 'react-query';
import { useParams } from 'react-router-dom';

import { GameHistoryTable } from '@/components/GameHistoryTable';
import { gameDto } from '@/dto/gameDto';
import { userDto } from '@/dto/userDto';
import { useApi } from '@/hooks/useApi';

function User() {
const routeParams = useParams();
const [username, setUsername] = useState('');
const [description, setDescription] = useState('');
const [File, setFile] = useState<File | null>(null);
const [banner, setBanner] = useState<File | null>(null);

const { data: games } = useApi().get(
'get user win',
`game/all/${routeParams.login}`,
) as UseQueryResult<gameDto[]>;

const {
data: user,
isLoading,
isError,
} = useApi().get(
'get user profile',
`user/profile/${routeParams.login}`,
) as UseQueryResult<userDto>;

if (isLoading) {
return <div>Loading...</div>;
}
if (isError) {
return <div>Error...</div>;
}

const win = games?.filter((g) => g.winner.login === routeParams.login).length;
const lose = games?.filter((g) => g.loser.login === routeParams.login).length;

return (
<>
<div
className="h-40 w-screen"
style={{
backgroundImage: `url(${user?.bannerPath})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
}}
></div>
<div className="absolute left-40 top-40 hidden items-end gap-4 sm:flex">
<div className="flex gap-4">
<img
className="h-32 w-32 rounded-full object-cover"
src={user?.imagePath ? user?.imagePath : user?.intraImageURL}
alt="Profile picture"
/>
<div className="flex flex-col items-start justify-end gap-2">
<span className="left-0 text-2xl font-bold text-white-1">
{user?.displayName ? user?.displayName : user?.login}
</span>
<span className="text-white-3">
{user?.description ? user?.description : 'Edit your description'}
</span>
</div>
<span className=" flex items-end justify-center text-white-3">
W : {win ? win : 0} L : {lose ? lose : 0}
</span>
</div>
</div>
<div className="absolute left-16 top-40 flex justify-center gap-4 sm:hidden">
<div className="flex gap-4">
<img
className="h-32 w-32 rounded-full object-cover "
src={user?.imagePath ? user?.imagePath : user?.intraImageURL}
alt="profile pic"
/>
<div className="flex flex-col items-start justify-end gap-2">
<span className="left-0 text-2xl font-bold text-white-1">
{user?.displayName ? user?.displayName : user?.login}
</span>
<span className="text-white-3">
{user?.description ? user?.description : 'Edit your description'}
</span>
</div>
<div className="flex items-end justify-center gap-1 text-white-3">
<span className=" flex items-end justify-center">W : {win ? win : 0}</span>
{' '}
<span> L : {lose ? lose : 0}</span>
</div>
</div>
</div>
<div className="flex w-screen items-center justify-center pt-32">
<GameHistoryTable login={user?.login}></GameHistoryTable>
</div>
</>
);
}

export default User;