From b43abafa1c711381967b20fea49bc97238363dff Mon Sep 17 00:00:00 2001 From: Thiago Chaves Date: Sat, 16 Jul 2022 01:02:26 +0300 Subject: [PATCH] Fix top nagivation flickering, add 404 page --- src/components/Page/Page.tsx | 18 ++++---- src/pages/404.tsx | 10 +++++ src/pages/_app.tsx | 12 ++++- src/pages/expression-sets/details.tsx | 12 +++-- src/pages/expression-sets/index.tsx | 8 +++- src/pages/expression-sets/practice.tsx | 54 +++++++++++++---------- src/pages/index.tsx | 4 +- src/views/PageWithError/PageWithError.tsx | 5 ++- 8 files changed, 82 insertions(+), 41 deletions(-) create mode 100644 src/pages/404.tsx diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index e2c8dba..8ed9d7a 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -1,17 +1,17 @@ +import Head from "next/head"; import { PropsWithChildren } from "react"; -import { Navigation } from "../Navigation"; export interface PageProps { - className?: string; + title: string; } -export function Page({ className, children }: PropsWithChildren) { +export function Page({ title, children }: PropsWithChildren) { return ( -
-
- -
-
{children}
-
+ <> + + {title} + + {children} + ); } diff --git a/src/pages/404.tsx b/src/pages/404.tsx new file mode 100644 index 0000000..c32f5f5 --- /dev/null +++ b/src/pages/404.tsx @@ -0,0 +1,10 @@ +import type { NextPage } from "next"; +import { PageWithError } from "../views/PageWithError"; + +const PageTitle = "Flash Card App - 404"; + +const Page404: NextPage = () => { + return ; +}; + +export default Page404; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bd5af44..22f6f7c 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,7 +1,17 @@ import "../styles/globals.css"; import "../styles/components.css"; import type { AppProps } from "next/app"; +import { Navigation } from "../components"; export default function MyApp({ Component, pageProps }: AppProps) { - return ; + return ( +
+
+ +
+
+ +
+
+ ); } diff --git a/src/pages/expression-sets/details.tsx b/src/pages/expression-sets/details.tsx index 586d03b..5039f2a 100644 --- a/src/pages/expression-sets/details.tsx +++ b/src/pages/expression-sets/details.tsx @@ -8,6 +8,10 @@ import { useExpressionSetQueryId } from "../../hooks/useExpressionSetQueryId"; import { useExpressionsInSet } from "../../hooks/useExpressionsInSet"; import { PageWithError } from "../../views/PageWithError/PageWithError"; +function pageTitle(name?: string) { + return `Flash Card App - ${name || "Sets"}`; +} + const ExpressionSetDetailsPage: NextPage = () => { const expression_set_id = useExpressionSetQueryId(); const expression_set = useExpressionSet(expression_set_id); @@ -15,13 +19,15 @@ const ExpressionSetDetailsPage: NextPage = () => { // Fallback for expression set not found if (!expression_set) { - return ; + return ( + + ); } // Fallback for expression set empty if (expressions.length === 0) return ( - +
{ ); return ( - +
{ const expression_sets = useExpressionSets(); if (!expression_sets?.length) { - return ; + return ( + + ); } return ( - +
{expression_sets.map(({ id, name, description }) => ( { // Query info @@ -36,10 +38,17 @@ const ExpressionPracticePage: NextPage = () => { // Fallback views for expression set content not found if (!expression_set_id) { - return ; + return ( + + ); } if (!expression) { - return ; + return ( + + ); } return ( @@ -63,7 +72,7 @@ function ExpressionCardPracticeView({ }: ExpressionCardPracticeViewProps) { const [revealed, setRevealed] = useState(false); return ( - +
{ - () => { - if (expression_set_id === 1) { - const filter_ids = query["filter-ids"] - ? `${query["filter-ids"]} ${expression_id}` - : `${expression_id}`; - push({ - pathname, - query: { - ...query, - "filter-ids": filter_ids, - }, - }); - } else { - assignExpressionToSet({ - expression_id, - expression_set_id: Math.max(1, expression_set_id - 1), - }); - } - }; - }, [expression_id, expression_set_id, pathname, query, push]); + if (expression_set_id === 1) { + const filter_ids = query["filter-ids"] + ? `${query["filter-ids"]} ${expression_id}` + : `${expression_id}`; + push({ + pathname, + query: { + ...query, + "filter-ids": filter_ids, + }, + }); + } else { + assignExpressionToSet({ + expression_id, + expression_set_id: Math.max(1, expression_set_id - 1), + }); + } + }, [expression_id, expression_set_id, pathname, push, query]); + return (