Fix ui
This commit is contained in:
Théo
parent
bde94762ad
commit
04a9be91bc
3 changed files with 35 additions and 34 deletions
|
|
@ -8,6 +8,7 @@ import { useSWRConfig } from 'swr';
|
|||
import { UserContext } from '@/context/user';
|
||||
import Button from '@/ui/Button';
|
||||
import Select from '@/ui/Select';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
type SettingsData = {
|
||||
name: string;
|
||||
|
|
@ -18,6 +19,7 @@ type SettingsData = {
|
|||
export default function Page() {
|
||||
const { data: me } = useContext(UserContext);
|
||||
const { mutate } = useSWRConfig();
|
||||
const router = useRouter();
|
||||
const { register, handleSubmit } = useForm<SettingsData>({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
|
|
@ -35,6 +37,8 @@ export default function Page() {
|
|||
[];
|
||||
|
||||
async function onSubmit(data: SettingsData) {
|
||||
if (!data) return;
|
||||
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/groupQuit`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
|
|
@ -49,6 +53,9 @@ export default function Page() {
|
|||
|
||||
if (res.ok) {
|
||||
mutate('me');
|
||||
router.push('/dashboard/puzzles');
|
||||
} else if (res.status === 423) {
|
||||
alert("Vous ne pouvez pas quitter un groupe en cours d'évenement");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,16 +60,16 @@ export default function Puzzle({ token, id }: { token: string; id: number }) {
|
|||
}
|
||||
});
|
||||
|
||||
if (res.ok || res.status === 406 || res.status === 423) {
|
||||
if (res.ok || res.status === 403 || res.status === 406 || res.status === 423) {
|
||||
const data = res.ok || res.status === 406 ? ((await res.json()) as Granted) : null;
|
||||
if (data && data.score) {
|
||||
mutate(`puzzles/${puzzle?.id}`);
|
||||
mutate('puzzles');
|
||||
} else if (data && data.tries) setGranted(data);
|
||||
else if (res.ok && data?.success)
|
||||
setGranted({ tries: null, score: null, message: 'Réponse correcte' });
|
||||
else if (res.status === 423)
|
||||
setGranted({ tries: null, score: null, message: 'Réponse incorrecte' });
|
||||
else if (res.status === 403) mutate(`puzzles/${puzzle?.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,18 +55,9 @@ export default function Puzzles({ token }: { token: string }) {
|
|||
if (!chapter.startDate || !chapter.endDate) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const startDate = new Date(chapter.startDate);
|
||||
const now = new Date();
|
||||
|
||||
if (now > startDate) {
|
||||
const minutes = 10 * 60 * 1000;
|
||||
if (now.getTime() - startDate.getTime() < minutes) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
return now.getTime() < startDate.getTime() + 10 * 60 * 1000;
|
||||
}
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
|
|
@ -157,7 +148,7 @@ export default function Puzzles({ token }: { token: string }) {
|
|||
<div className="h-1 w-1/2 rounded-lg bg-gradient-to-tl from-brand to-brand-accent" />
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-1 flex justify-start gap-x-2 md:justify-end">
|
||||
<div className="mt-1 flex justify-start gap-x-2">
|
||||
{isInEventGroup(chapter) && (
|
||||
<>
|
||||
<FilterDifficulty
|
||||
|
|
@ -225,19 +216,13 @@ export default function Puzzles({ token }: { token: string }) {
|
|||
}
|
||||
|
||||
function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
|
||||
function isBeforeStart(chapter: Chapter) {
|
||||
function isStarted(chapter: Chapter) {
|
||||
if (!chapter.startDate || !chapter.endDate) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const startDate = new Date(chapter.startDate);
|
||||
const now = new Date();
|
||||
|
||||
if (now > startDate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
return now > startDate;
|
||||
}
|
||||
return (
|
||||
<li
|
||||
|
|
@ -248,11 +233,11 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
|
|||
'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
|
||||
'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
|
||||
'border-highlight-primary': !puzzle.tags?.length,
|
||||
'cursor-not-allowed': !isBeforeStart(chapter)
|
||||
'cursor-not-allowed': !isStarted(chapter)
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isBeforeStart(chapter) ? (
|
||||
{isStarted(chapter) ? (
|
||||
<AppLink
|
||||
className="flex h-full w-full items-center justify-between p-4"
|
||||
key={puzzle.id}
|
||||
|
|
@ -265,6 +250,8 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
|
|||
({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-6">
|
||||
{puzzle.tags?.length && (
|
||||
<div className="flex gap-x-2 text-sm text-muted">
|
||||
{puzzle.tags
|
||||
|
|
@ -276,35 +263,38 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Icon
|
||||
className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
|
||||
name="arrow-right-line"
|
||||
/>
|
||||
</div>
|
||||
</AppLink>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-between p-4 opacity-50">
|
||||
<div className="flex gap-x-2">
|
||||
<div className="flex w-10/12 flex-col gap-2 lg:w-full lg:flex-row">
|
||||
<span className="text-base font-semibold">
|
||||
{puzzle.name}{' '}
|
||||
<span className="text-sm text-highlight-secondary">
|
||||
({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-6">
|
||||
{puzzle.tags?.length && (
|
||||
<div className="flex gap-x-2 text-sm text-muted">
|
||||
{puzzle.tags
|
||||
.filter((tag) => !['easy', 'medium', 'hard'].includes(tag.name))
|
||||
.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={cn('inline-block rounded-md bg-primary-900 px-2 py-1')}
|
||||
>
|
||||
<span key={i} className="inline-block rounded-md bg-primary-900 px-2 py-1">
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Icon
|
||||
className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
|
||||
name="arrow-right-line"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -361,7 +351,9 @@ function FilterDifficulty({
|
|||
}
|
||||
}, [stored]);
|
||||
|
||||
return <Select className="w-44" options={options} value={filter} onChange={handleChange} />;
|
||||
return (
|
||||
<Select className="w-full sm:w-44" options={options} value={filter} onChange={handleChange} />
|
||||
);
|
||||
}
|
||||
|
||||
function FilterTags({
|
||||
|
|
@ -415,7 +407,9 @@ function FilterTags({
|
|||
}
|
||||
}, [stored]);
|
||||
|
||||
return <Select className="w-44" options={options} value={filter} onChange={handleChange} />;
|
||||
return (
|
||||
<Select className="w-full sm:w-44" options={options} value={filter} onChange={handleChange} />
|
||||
);
|
||||
}
|
||||
|
||||
type GroupData = {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue