From bb172cae65b819985b16b592b235b22f32cb9981 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com> Date: Sat, 18 Mar 2023 19:55:28 +0100 Subject: [PATCH] Added ui & auth data --- app/dashboard/leaderboard/page.tsx | 4 +- app/dashboard/page.tsx | 31 ++++-- app/dashboard/puzzles/[id]/page.tsx | 15 ++- app/dashboard/puzzles/page.tsx | 7 +- app/page.tsx | 1 - styles/globals.css | 12 +++ ui/Avatar.tsx | 43 +++++++- ui/Badge.tsx | 6 ++ ui/Button.tsx | 5 +- ui/Card.tsx | 27 ++++- ui/Input.tsx | 4 +- ui/Leaderboard.tsx | 152 ++++++++++++++++------------ ui/Puzzle.tsx | 2 + ui/Puzzles.tsx | 7 +- ui/Select.tsx | 3 +- ui/UserAuthForm.tsx | 20 ++-- ui/dashboard/Usernav.tsx | 59 +++++++++-- 17 files changed, 294 insertions(+), 104 deletions(-) diff --git a/app/dashboard/leaderboard/page.tsx b/app/dashboard/leaderboard/page.tsx index 6e83730..ba22a15 100644 --- a/app/dashboard/leaderboard/page.tsx +++ b/app/dashboard/leaderboard/page.tsx @@ -1,4 +1,5 @@ import Leaderboard from '@/ui/Leaderboard'; +import { cookies } from 'next/headers'; export const metadata = { title: 'Tableau des scores - Peer-at Code', @@ -6,5 +7,6 @@ export const metadata = { }; export default async function Page() { - return ; + const token = cookies().get('token')?.value; + return ; } diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 29bd481..5d39a7a 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -1,10 +1,12 @@ -import Card from '@/ui/Card'; +'use client'; -export const metadata = { - title: 'Dashboard - Peer-at Code' -}; +import { useMe } from '@/lib/hooks/use-players'; +import Card from '@/ui/Card'; +import cookies from 'js-cookie'; export default function Page() { + const token = cookies.get('token'); + const { data: me, isLoading } = useMe({ token: token! }); return (
@@ -14,9 +16,24 @@ export default function Page() {

Ceci est la page d'accueil du dashboard

- - - + + +
diff --git a/app/dashboard/puzzles/[id]/page.tsx b/app/dashboard/puzzles/[id]/page.tsx index 68664a6..07709ab 100644 --- a/app/dashboard/puzzles/[id]/page.tsx +++ b/app/dashboard/puzzles/[id]/page.tsx @@ -1,3 +1,4 @@ +import { cookies } from 'next/headers'; import { getPuzzle } from '@/lib/puzzles'; import Puzzle from '@/ui/Puzzle'; import type { Metadata } from 'next'; @@ -5,16 +6,26 @@ import { notFound } from 'next/navigation'; export async function generateMetadata({ params }: { params: { id: number } }): Promise { const { id } = params; + const token = cookies().get('token')?.value; - const puzzle = await getPuzzle(id); + if (!token) { + notFound(); + } + + const puzzle = await getPuzzle({ token, id }); return { title: `${puzzle.name} - Peer-at Code` }; } export default async function Page({ params }: { params: { id: number } }) { const { id } = params; + const token = cookies().get('token')?.value; - const puzzle = await getPuzzle(id); + if (!token) { + notFound(); + } + + const puzzle = await getPuzzle({ token, id }); if (!puzzle) { notFound(); diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx index 29f9ba8..29aea34 100644 --- a/app/dashboard/puzzles/page.tsx +++ b/app/dashboard/puzzles/page.tsx @@ -1,3 +1,5 @@ +import { cookies } from 'next/headers'; + import Puzzles from '@/ui/Puzzles'; export const metadata = { @@ -5,9 +7,12 @@ export const metadata = { }; export default async function Page() { + const cookieStore = cookies(); + const token = cookieStore.get('token')?.value; + return (
- +
); } diff --git a/app/page.tsx b/app/page.tsx index 342a155..e67bdaf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,7 +3,6 @@ import Console from '@/ui/Console'; import Image from 'next/image'; export default function Page() { - // TODO: Fix this (image) return (
diff --git a/styles/globals.css b/styles/globals.css index fe01a95..5cc833f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -6,4 +6,16 @@ .console { @apply relative top-0.5 inline-block; } + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0px 1000px hsl(258deg 15% 17%) inset; + transition: background-color 5000s ease-in-out 0s; + } } diff --git a/ui/Avatar.tsx b/ui/Avatar.tsx index 6589c0b..2df4c63 100644 --- a/ui/Avatar.tsx +++ b/ui/Avatar.tsx @@ -1,5 +1,46 @@ import BoringAvatar from 'boring-avatars'; +import Image from 'next/image'; -export default function Avatar({ name, size = 28 }: { name: string; size?: number }) { +import { cn } from '@/lib/utils'; + +export function Avatar({ name, size = 36 }: { name: string; size?: number }) { return ; } + +export function Base64Avatar({ + name, + src, + className +}: { + name: string; + src: string; + className?: string; +}) { + return ( + {name} + ); +} + +export default function AvatarComponent({ + name, + src, + size = 36, + className +}: { + name: string; + src: string; + size?: number; + className?: string; +}) { + return src ? ( + + ) : ( + + ); +} diff --git a/ui/Badge.tsx b/ui/Badge.tsx index a50ee3e..943afc5 100644 --- a/ui/Badge.tsx +++ b/ui/Badge.tsx @@ -4,6 +4,12 @@ import { cn } from '@/lib/utils'; export type Difficulty = 'easy' | 'medium' | 'hard'; +export const DIFFICULTY = { + 1: 'easy', + 2: 'medium', + 3: 'hard' +} + export default function Badge({ title, path, diff --git a/ui/Button.tsx b/ui/Button.tsx index 270ce0f..8e003ea 100644 --- a/ui/Button.tsx +++ b/ui/Button.tsx @@ -10,11 +10,12 @@ const Button = forwardRef<
+ ); + return (
-

{title}

-

{data}

+

{data}

+

{title}

); diff --git a/ui/Input.tsx b/ui/Input.tsx index dd4f0d5..cdede32 100644 --- a/ui/Input.tsx +++ b/ui/Input.tsx @@ -1,5 +1,6 @@ import { forwardRef } from 'react'; import ErrorMessage from './ErrorMessage'; +import Icon from './Icon'; import Label from './Label'; const Input = forwardRef< @@ -14,7 +15,8 @@ const Input = forwardRef< diff --git a/ui/Leaderboard.tsx b/ui/Leaderboard.tsx index 504f4a1..23ab4e0 100644 --- a/ui/Leaderboard.tsx +++ b/ui/Leaderboard.tsx @@ -2,78 +2,102 @@ import { useLeaderboard } from '@/lib/hooks/use-leaderboard'; import { cn } from '@/lib/utils'; -import Avatar from './Avatar'; +import { useMemo, useState } from 'react'; +import AvatarComponent from './Avatar'; import Select from './Select'; -// TODO: Generate this later const scoreColors = ['text-yellow-400', 'text-gray-400', 'text-orange-400']; -// TODO: Generate this later -export const options = [ - { value: '1i1', title: '1I1' }, - { value: '1i2', title: '1I2' }, - { value: '1i3', title: '1I3' }, - { value: '1i4', title: '1I4' }, - { value: '1i5', title: '1I5' }, - { value: '1i6', title: '1I6' }, - { value: '1i7', title: '1I7' }, - { value: '1i8', title: '1I8' } -]; +export default function Leaderboard({ token }: { token: string }) { + const { data, isLoading } = useLeaderboard({ token }); + + const [filter, setFilter] = useState(''); + + let options; + + if (data) { + options = data + .filter((score, index, self) => { + return index === self.findIndex((t) => t.group === score.group) && score.group !== ''; + }) + .sort((a, b) => (a.group > b.group ? 1 : -1)) + .map((score) => ({ value: score.group, title: score.group })); + options.unshift({ value: '', title: 'Tous' }); + options.push({ value: 'no-group', title: 'Sans groupe' }); + } + + const filteredData = useMemo(() => { + if (filter) { + if (filter === 'no-group') { + return data?.filter((score) => score.group === ''); + } + return data?.filter((score) => score.group === filter); + } + return data; + }, [data, filter]); -export default function Leaderboard() { - const { data, isLoading } = useLeaderboard(); return ( -
-
-
-
-
-

Tableau des scores

-

- Suivez la progression des élèves en direct -

-
- setFilter(event.target.value)} + /> + )) || ( + + )} +
+
+
    + {(!isLoading && + filteredData?.map((score, key) => ( +
  • +
    + {key + 1} +
    + +
    + {score.pseudo} + {score.group}
    - ))) || - [...Array(20).keys()].map((i) => ( - - ))} -
-
-
-
+
+
+ Puzzles + {score.completions} +
+
+ Score + {score.score} +
+
+ + ))) || + [...Array(20).keys()].map((i) => ( + + ))} + + + ); } diff --git a/ui/Puzzle.tsx b/ui/Puzzle.tsx index ae66e31..5832bba 100644 --- a/ui/Puzzle.tsx +++ b/ui/Puzzle.tsx @@ -73,12 +73,14 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) { label="Réponse" type="text" placeholder="12" + required {...register('answer')} /> diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx index 42982a2..ce68e88 100644 --- a/ui/Puzzles.tsx +++ b/ui/Puzzles.tsx @@ -4,8 +4,9 @@ import { usePuzzles } from '@/lib/hooks/use-puzzles'; import AppLink from './AppLink'; import Icon from './Icon'; -export default function Puzzles() { - const { data, isLoading } = usePuzzles(); +export default function Puzzles({ token }: { token: string }) { + const { data, isLoading } = usePuzzles({ token }); + console.log(data); return ( <> {(!isLoading && @@ -48,7 +49,7 @@ export default function Puzzles() { />
    - {[...Array(7).keys()].map((j) => ( + {[...Array(6).keys()].map((j) => ( >> + } + //& Partial>> >(({ options, className, label, description, error, ...props }, ref) => ( <>