Fix #123. Major refactoring

audio-engineer · Apr 23, 2024 · 0046b1e · 0046b1e
1 parent 2c7a0e4
commit 0046b1e
Show file tree

Hide file tree

Showing 55 changed files with 1,368 additions and 1,076 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,3 +1,4 @@
+SECRET_KEY=
 NEXT_PUBLIC_FIREBASE_API_KEY=
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
 NEXT_PUBLIC_FIREBASE_DATABASE_URL=

diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
 .idea/
+tsconfig.json
diff --git a/README.md b/README.md
@@ -52,6 +52,18 @@ first:
 npm run prettier && npx eslint .
 ```
 
+To check whether the project can be compiled for production, run the `build` command:
+
+```shell
+NODE_ENV=production npm run build
+```
+
+Then, start the production server with:
+
+```shell
+NODE_ENV=production npm run start
+```
+
 After a finished development cycle, exit the `server` container and run:
 
 ```shell

diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactElement } from "react";
-import AboutPage from "@/components/about-page";
+import AboutPage from "@/components/server/about-page";
 
 const About: FC = (): ReactElement | null => {
   return <AboutPage />;

diff --git a/app/account/page.tsx b/app/account/page.tsx
@@ -1,24 +1,15 @@
-"use client";
-
 import type { FC, ReactElement } from "react";
-import { useContext } from "react";
-import Loader from "@/components/loader";
-import AccountPage from "@/components/account-page";
-import AuthenticationContext from "@/app/authentication-context";
-import { redirect } from "next/navigation";
-
-const Account: FC = (): ReactElement | null => {
-  const { isLoading, user } = useContext(AuthenticationContext);
+import AccountPage from "@/components/client/account-page";
+import { verifySession } from "@/utils/server-actions";
 
-  if (isLoading) {
-    return <Loader />;
-  }
+const Account: FC = async (): Promise<ReactElement | null> => {
+  const session = await verifySession();
 
-  if (!user) {
-    redirect("/");
+  if (!session) {
+    return null;
   }
 
-  return <AccountPage user={user} />;
+  return <AccountPage />;
 };
 
 export default Account;
diff --git a/app/authentication-context.ts b/app/authentication-context.ts
diff --git a/app/color-mode-context.ts b/app/color-mode-context.ts
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,35 +1,31 @@
 import type { Metadata } from "next";
-import type { FC, ReactNode } from "react";
+import type { FC, PropsWithChildren } from "react";
+import MainContainer from "@/components/server/main-container";
+import Providers from "@/components/client/providers";
+import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
+import { theme } from "@/app/theme";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
 import CssBaseline from "@mui/material/CssBaseline";
-import ErrorHandler from "@/utils/error-handler";
-import dynamic from "next/dynamic";
-
-const MainContainer = dynamic(
-  async () => import("@/components/main-container"),
-  {
-    ssr: false,
-  },
-);
+import InitColorSchemeScript from "@/components/client/init-color-scheme-script";
 
 export const metadata: Metadata = {
   title: "ChessTeacher",
   description: "Next-gen Online Chess Instructor",
 };
 
-export interface Children {
-  readonly children: ReactNode;
-}
-
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-const RootLayout: FC<Children> = ({ children }: Readonly<Children>) => {
+const RootLayout: FC<PropsWithChildren> = ({ children }: PropsWithChildren) => {
   return (
     <html lang="en">
       <body>
+        <InitColorSchemeScript />
         <AppRouterCacheProvider>
-          <ErrorHandler />
-          <CssBaseline />
-          <MainContainer>{children}</MainContainer>
+          <CssVarsProvider theme={theme} defaultMode="system">
+            <CssBaseline />
+            <Providers>
+              <MainContainer>{children}</MainContainer>
+            </Providers>
+          </CssVarsProvider>
         </AppRouterCacheProvider>
       </body>
     </html>

diff --git a/app/match/[mid]/page.tsx b/app/match/[mid]/page.tsx
@@ -1,31 +1,29 @@
-"use client";
-
 import type { FC, ReactElement } from "react";
-import { useContext } from "react";
-import { redirect } from "next/navigation";
-import AuthenticationContext from "@/app/authentication-context";
-import MatchPage from "@/components/match-page";
-import Loader from "@/components/loader";
+import MatchPage from "@/components/server/match-page";
 import type { MatchId } from "@/types/database";
+import { verifySession } from "@/utils/server-actions";
+import MatchProvider from "@/components/client/providers/match-provider";
 
 interface MatchProps {
   readonly params: {
     readonly mid: MatchId;
   };
 }
 
-const Match: FC<MatchProps> = ({ params }: MatchProps): ReactElement | null => {
-  const { isLoading, user } = useContext(AuthenticationContext);
-
-  if (isLoading) {
-    return <Loader />;
-  }
+const Match: FC<MatchProps> = async ({
+  params,
+}: MatchProps): Promise<ReactElement | null> => {
+  const session = await verifySession();
 
-  if (!user) {
-    redirect("/");
+  if (!session) {
+    return null;
   }
 
-  return <MatchPage user={user} mid={params.mid} />;
+  return (
+    <MatchProvider mid={params.mid}>
+      <MatchPage />
+    </MatchProvider>
+  );
 };
 
 export default Match;
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,24 +1,16 @@
-"use client";
-
 import type { FC, ReactElement } from "react";
-import { useContext } from "react";
-import Lobby from "@/components/lobby";
-import HomePage from "@/components/home-page";
-import Loader from "@/components/loader";
-import AuthenticationContext from "@/app/authentication-context";
-
-const Home: FC = (): ReactElement | null => {
-  const { isLoading, user } = useContext(AuthenticationContext);
+import HomePage from "@/components/server/home-page";
+import LobbyPage from "@/components/server/lobby-page";
+import { verifySession } from "@/utils/server-actions";
 
-  if (isLoading) {
-    return <Loader />;
-  }
+const Home: FC = async (): Promise<ReactElement | null> => {
+  const session = await verifySession();
 
-  if (!user) {
+  if (!session) {
     return <HomePage />;
   }
 
-  return <Lobby user={user} />;
+  return <LobbyPage />;
 };
 
 export default Home;
diff --git a/app/theme.ts b/app/theme.ts
@@ -1,37 +1,37 @@
+"use client";
+
 import { Roboto } from "next/font/google";
-import type { PaletteMode, PaletteOptions, ThemeOptions } from "@mui/material";
+import type { ColorSystemOptions, CssVarsThemeOptions } from "@mui/material";
+import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
 
 const roboto = Roboto({ subsets: ["latin"], weight: "500" });
 
-const commonPalette: PaletteOptions = {};
+const commonPalette: ColorSystemOptions = {
+  palette: {},
+};
 
-const lightPalette: PaletteOptions = {
+const lightPalette: ColorSystemOptions = {
   ...commonPalette,
-  primary: {
-    main: "#9e8d8d",
+  palette: {
+    primary: {
+      main: "#9e8d8d",
+    },
   },
 };
 
-const darkPalette: PaletteOptions = {
+const darkPalette: ColorSystemOptions = {
   ...commonPalette,
+  palette: {},
 };
 
-export const getThemeOptions = (paletteMode: PaletteMode): ThemeOptions => {
-  let palette: PaletteOptions = {};
-
-  if ("light" === paletteMode) {
-    palette = lightPalette;
-  } else {
-    palette = darkPalette;
-  }
-
-  return {
-    palette: {
-      mode: paletteMode,
-      ...palette,
-    },
-    typography: {
-      fontFamily: roboto.style.fontFamily,
-    },
-  };
+export const cssVarsThemeOptions: CssVarsThemeOptions = {
+  colorSchemes: {
+    dark: { ...darkPalette },
+    light: { ...lightPalette },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
 };
+
+export const theme = extendTheme(cssVarsThemeOptions);
diff --git a/components/account-page.tsx → components/client/account-page.tsx b/components/account-page.tsx → components/client/account-page.tsx
@@ -1,30 +1,32 @@
+"use client";
+
 import type { FC, ReactElement } from "react";
-import type { User } from "@firebase/auth";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
 import {
   Avatar,
-  TextField,
-  InputAdornment,
-  IconButton,
   Grid,
+  IconButton,
+  InputAdornment,
+  TextField,
 } from "@mui/material";
 import LockIcon from "@mui/icons-material/Lock";
 import Box from "@mui/material/Box";
+import { useAuthentication } from "@/contexts/authentication";
+import Loader from "@/components/client/loader";
 
 const firstCharPos = 0;
 
-interface AccountPageProps {
-  readonly user: User;
-}
+const AccountPage: FC = (): ReactElement | null => {
+  const { isUserLoading, user } = useAuthentication();
+
+  if (isUserLoading) {
+    return <Loader />;
+  }
 
-const AccountPage: FC<AccountPageProps> = ({
-  user,
-}: AccountPageProps): ReactElement | null => {
   return (
-    <Container fixed maxWidth="md">
-      <Paper elevation={3} square={false}>
+    <>
+      <Paper elevation={3} square={false} sx={{ mb: "2rem" }}>
         <Box
           p={4}
           gap={4}
@@ -42,18 +44,18 @@ const AccountPage: FC<AccountPageProps> = ({
           </Typography>
           <Box display={"flex"} alignItems={"center"} gap={4}>
             <Avatar
-              alt={user.displayName ?? undefined}
-              src={user.photoURL ?? undefined}
+              alt={user?.displayName ?? ""}
+              src={user?.photoURL ?? ""}
               sx={{ height: 96, width: 96 }}
             >
-              {user.displayName?.charAt(firstCharPos)}
+              {user?.displayName?.charAt(firstCharPos)}
             </Avatar>
             <Box display={"flex"} flexDirection={"column"}>
               <Typography variant={"subtitle1"} sx={{ marginLeft: 2 }}>
                 Username:
               </Typography>
               <Typography variant={"h5"} sx={{ marginLeft: 2 }}>
-                {user.displayName}
+                {user?.displayName}
               </Typography>
             </Box>
           </Box>
@@ -75,7 +77,7 @@ const AccountPage: FC<AccountPageProps> = ({
             <Grid item xs={12} sm={6}>
               <TextField
                 label="Name"
-                value={user.displayName ?? ""}
+                value={user?.displayName ?? ""}
                 disabled
                 InputProps={{
                   endAdornment: (
@@ -91,7 +93,7 @@ const AccountPage: FC<AccountPageProps> = ({
             <Grid item xs={12} sm={6}>
               <TextField
                 label="Email"
-                value={user.email ?? ""}
+                value={user?.email ?? ""}
                 disabled
                 InputProps={{
                   endAdornment: (
@@ -107,7 +109,7 @@ const AccountPage: FC<AccountPageProps> = ({
           </Grid>
         </Box>
       </Paper>
-    </Container>
+    </>
   );
 };