Merge changes and fix conflicts

guanquann · guanquann · commit 2b998cc40071 · 2024-09-20T11:34:50.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ dist-ssr
 
 # Editor directories and files
 .vscode/*
+!.vscode/settings.json
 !.vscode/extensions.json
 .idea
 .DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "prettier.tabWidth": 2
+  }
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,11 +16,13 @@
     "@mui/icons-material": "^6.1.0",
     "@mui/material": "^6.1.0",
     "@uiw/react-md-editor": "^4.0.4",
+    "axios": "^1.7.7",
     "firebase": "^10.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
     "react-toastify": "^10.0.5",
+    "markdown-to-jsx": "^7.5.0",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
@@ -33,7 +35,7 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.6.2",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
   }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,12 +1,19 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Layout from "./components/Layout";
 import NewQuestion from "./pages/NewQuestion";
+import QuestionDetail from "./pages/QuestionDetail";
+import PageNotFound from "./pages/Error";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/question" element={<>question page list</>} />
-        <Route path="/question/new" element={<NewQuestion />} />
+        <Route path="/" element={<Layout />}>
+          <Route path="/questions" element={<>question page list</>} />
+          <Route path="/questions/new" element={<NewQuestion />} />
+          <Route path="/questions/:questionId" element={<QuestionDetail />} />
+          <Route path="*" element={<PageNotFound />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );
diff --git a/frontend/src/components/AppMargin/index.tsx b/frontend/src/components/AppMargin/index.tsx
@@ -0,0 +1,23 @@
+import { Box } from "@mui/material";
+import { FunctionComponent, ReactNode } from "react";
+
+type AppMarginProps = { classname?: string; children: ReactNode };
+
+const AppMargin: FunctionComponent<AppMarginProps> = (
+  props: AppMarginProps
+) => {
+  const { classname, children } = props;
+  return (
+    <Box
+      className={classname}
+      sx={(theme) => ({
+        marginLeft: theme.spacing(16),
+        marginRight: theme.spacing(16),
+      })}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default AppMargin;
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import { FunctionComponent } from "react";
+import { Outlet } from "react-router-dom";
+import Navbar from "../Navbar";
+
+const Layout: FunctionComponent = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100vh",
+        // minInlineSize: "100vw",
+      }}
+    >
+      <Navbar />
+      <Outlet />
+    </Box>
+  );
+};
+
+export default Layout;
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
@@ -0,0 +1,55 @@
+import { AppBar, Box, Link, Toolbar, Typography } from "@mui/material";
+import { grey } from "@mui/material/colors";
+import { FunctionComponent } from "react";
+import AppMargin from "../AppMargin";
+import { useNavigate } from "react-router-dom";
+
+type NavbarItem = { label: string; link: string };
+
+type NavbarProps = { navbarItems?: Array<NavbarItem> };
+
+const Navbar: FunctionComponent<NavbarProps> = (props: NavbarProps) => {
+  const { navbarItems = [{ label: "Questions", link: "/" }] } = props;
+  const navigate = useNavigate();
+
+  return (
+    <AppBar
+      component={"nav"}
+      position="sticky"
+      sx={{
+        backgroundColor: "common.white",
+        color: "primary.main",
+        boxShadow: "none",
+        borderBottom: "1px solid",
+        borderColor: grey[300],
+      }}
+    >
+      <AppMargin>
+        <Toolbar>
+          <Typography
+            component={Box}
+            variant="h5"
+            sx={[{ flexGrow: 1, "&:hover": { cursor: "pointer" } }]}
+            onClick={() => navigate("/")}
+          >
+            PeerPrep
+          </Typography>
+          <Box>
+            {navbarItems.map((item) => (
+              <Link
+                key={item.label}
+                href={item.link}
+                underline="none"
+                sx={{ color: "common.black" }}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </Box>
+        </Toolbar>
+      </AppMargin>
+    </AppBar>
+  );
+};
+
+export default Navbar;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -3,10 +3,12 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import theme from "./theme";
 import { ThemeProvider } from "@mui/material/styles";
+import { CssBaseline } from "@mui/material";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeProvider theme={theme}>
+      <CssBaseline />
       <App />
     </ThemeProvider>
   </StrictMode>
diff --git a/frontend/src/pages/Error/index.module.css b/frontend/src/pages/Error/index.module.css
@@ -0,0 +1,10 @@
+.fullheight {
+  flex: 1;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/frontend/src/pages/Error/index.tsx b/frontend/src/pages/Error/index.tsx
@@ -0,0 +1,26 @@
+import { FunctionComponent } from "react";
+import AppMargin from "../../components/AppMargin";
+import { Box, Typography } from "@mui/material";
+import classes from "./index.module.css";
+
+const PageNotFound: FunctionComponent = () => {
+  return (
+    <AppMargin classname={`${classes.fullheight} ${classes.center}`}>
+      <Box>
+        <Typography
+          component={"h1"}
+          variant="h3"
+          textAlign={"center"}
+          sx={(theme) => ({ marginBottom: theme.spacing(4) })}
+        >
+          Oops, page not found...
+        </Typography>
+        <Typography textAlign={"center"}>
+          Unfortunately, we can't find what you're looking for 😥
+        </Typography>
+      </Box>
+    </AppMargin>
+  );
+};
+
+export default PageNotFound;
diff --git a/frontend/src/pages/NewQuestion/index.tsx b/frontend/src/pages/NewQuestion/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Autocomplete, Box, Button, IconButton, Stack, TextField } from "@mui/material";
+import { Autocomplete, Button, IconButton, Stack, TextField } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -9,6 +9,7 @@ import { v4 as uuidv4 } from "uuid";
 import { storage } from "../../firebase";
 import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
 
+import AppMargin from "../../components/AppMargin";
 import QuestionMarkdown from "../../components/QuestionMarkdown";
 import QuestionImageContainer from "../../components/QuestionImageContainer";
 
@@ -49,7 +50,7 @@ const NewQuestion = () => {
         return;
       }
     }
-    navigate("/question");
+    navigate("/questions");
   };
 
   // File upload adapted from https://firebase.google.com/docs/storage/web/upload-files#web_2
@@ -122,8 +123,8 @@ const NewQuestion = () => {
   };
 
   return (
-    <Box maxWidth={"70vw"} margin={"auto"}>
-      <IconButton onClick={handleBack}>
+    <AppMargin>
+      <IconButton onClick={handleBack} sx={{ marginTop: 2 }}>
         <ArrowBackIcon />
       </IconButton>
 
@@ -166,7 +167,7 @@ const NewQuestion = () => {
 
       <QuestionMarkdown markdownText={markdownText} setMarkdownText={setMarkdownText} />
 
-      <Stack spacing={2} direction="row" paddingTop={2}>
+      <Stack spacing={2} direction="row" paddingTop={2} paddingBottom={8}>
         <Button variant="contained" fullWidth onClick={handleSubmit}>
           Submit Question
         </Button>
@@ -176,7 +177,7 @@ const NewQuestion = () => {
       </Stack>
 
       <ToastContainer position="bottom-right" />
-    </Box>
+    </AppMargin>
   );
 };
 
diff --git a/frontend/src/pages/QuestionDetail/index.tsx b/frontend/src/pages/QuestionDetail/index.tsx
@@ -0,0 +1,129 @@
+import {
+  Box,
+  Chip,
+  List,
+  ListItem,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { FunctionComponent, useEffect, useReducer } from "react";
+import { useParams } from "react-router-dom";
+import Markdown from "markdown-to-jsx";
+import AppMargin from "../../components/AppMargin";
+import reducer, {
+  getQuestionById,
+  initialState,
+} from "../../reducers/questionReducer";
+import { grey } from "@mui/material/colors";
+
+const QuestionDetail: FunctionComponent = () => {
+  const { questionId } = useParams<{ questionId: string }>();
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const theme = useTheme();
+
+  useEffect(() => {
+    if (!questionId) {
+      return;
+    }
+    getQuestionById(questionId, dispatch);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!state.selectedQuestion) {
+    return;
+  }
+
+  return (
+    <AppMargin>
+      <Box sx={{ marginTop: theme.spacing(4), marginBottom: theme.spacing(4) }}>
+        <Box
+          sx={{ marginTop: theme.spacing(4), marginBottom: theme.spacing(4) }}
+        >
+          <Typography component={"h1"} variant="h3">
+            {state.selectedQuestion.title}
+          </Typography>
+          <Stack direction={"row"} sx={{ marginTop: theme.spacing(2) }}>
+            <Chip
+              key={state.selectedQuestion.complexity}
+              label={state.selectedQuestion.complexity}
+              color="primary"
+              sx={{
+                marginLeft: theme.spacing(1),
+                marginRight: theme.spacing(1),
+              }}
+            />
+            {state.selectedQuestion.categories.map((cat) => (
+              <Chip
+                key={cat}
+                label={cat}
+                sx={{
+                  marginLeft: theme.spacing(1),
+                  marginRight: theme.spacing(1),
+                }}
+              />
+            ))}
+          </Stack>
+        </Box>
+        <Markdown
+          options={{
+            overrides: {
+              h1: {
+                component: Typography,
+                props: { component: "h1", variant: "h4" },
+              },
+              h2: {
+                component: Typography,
+                props: { component: "h2", variant: "h5" },
+              },
+              h3: {
+                component: Typography,
+                props: { component: "h3", variant: "h6" },
+              },
+              p: {
+                component: Typography,
+              },
+              ol: {
+                component: List,
+                props: {
+                  component: "ol",
+                  sx: {
+                    paddingLeft: theme.spacing(4),
+                    listStyleType: "decimal",
+                  },
+                },
+              },
+              ul: {
+                component: List,
+                props: {
+                  component: "ul",
+                  sx: {
+                    paddingLeft: theme.spacing(4),
+                    listStyleType: "disc",
+                  },
+                },
+              },
+              li: {
+                component: ListItem,
+                props: { sx: { display: "list-item" } },
+              },
+              code: {
+                props: {
+                  style: {
+                    backgroundColor: grey[200],
+                    padding: "0.2em",
+                    borderRadius: "0.4em",
+                  },
+                },
+              },
+            },
+          }}
+        >
+          {state.selectedQuestion.description}
+        </Markdown>
+      </Box>
+    </AppMargin>
+  );
+};
+
+export default QuestionDetail;
diff --git a/frontend/src/reducers/questionReducer.ts b/frontend/src/reducers/questionReducer.ts
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
