Merge pull request #9 from DadonStyle/dev

Dev

src/components/Background/Background.scss

@@ -1,7 +1,8 @@
 .background-wrapper {
   width: 100svw;
-  height: 100svh;
-  overflow: hidden;
+  height: 1px; // trick to let children inherit height
+  min-height: 100svh;
+  overflow-x: hidden;
   position: relative;
   background-color: inherit;
   display: flex;

src/components/MailDialog/MailDialog.scss

@@ -1,6 +1,8 @@
 .mail-container {
   border-radius: 20px;
   .mail-open-button {
+    color: #324453;
+    color: invert(100%);
     &:hover {
       color: #ffffff;
     }

src/components/MailDialog/MailDialog.tsx

@@ -1,29 +1,22 @@
 import { Box, Button, Dialog, InputLabel, Link, TextareaAutosize, Typography } from "@mui/material";
 import { useState } from "react";
 import { useDebounce } from "use-debounce";
-import { useNavigate } from "react-router-dom";
 import "./MailDialog.scss";
 
 const MailDialog = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [body, setBody] = useState<string>("");
   const [bodyDebounced] = useDebounce(body, 1_000);
-  const navigate = useNavigate();
-
   const subject = "I want to suggest a new question!";
 
   const toggleIsOpen = () => setIsOpen((prev) => !prev);
   const handleOnChange =
     (cb: (item: string) => void) => (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       cb(e.target.value);
     };
-  const onBackClick = () => navigate("/");
 
   return (
     <Box className="mail-container">
-      <Button className="back-button" onClick={onBackClick}>
-        Back
-      </Button>
       <Button className="mail-open-button" onClick={toggleIsOpen}>
         Suggest a question
       </Button>

src/hooks/useGetQuestions.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { QuestionType } from "../constants/types";
+import { getShuffledQuestions } from "../utils/util";
+
+const useGetQuestions = () => {
+  const { category } = useParams<string>();
+  const [questions, setQuestions] = useState<QuestionType[] | null>(null);
+
+  useEffect(() => {
+    if (!category) return;
+    const questions = getShuffledQuestions(category);
+    setQuestions(questions);
+  }, [category]);
+
+  return { questions };
+};
+
+export default useGetQuestions;

src/modules/questionary/Questionary.scss → src/modules/QuestionsContainer/QuestionsContainer.scss

@@ -16,6 +16,11 @@
     justify-content: space-between;
     gap: 1rem;
     width: 100%;
+    .question-top-left-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+    }
     .back-button {
       color: black;
       display: flex;
@@ -28,23 +33,6 @@
   }
   .question-bottom-section {
     width: 100%;
-    .question-header {
-      background-color: #e7f3fe;
-      box-shadow: 0px 2px 4.1px 0px rgba(0, 0, 0, 0.25);
-      border-radius: 14px;
-      padding: 8px 16px;
-      color: rgba(0, 0, 0);
-      width: 100%;
-      margin-bottom: 1rem;
-
-      h3 {
-        color: #000;
-        font-family: 600;
-      }
-    }
-  }
-  .submit-button {
-    padding: 0.5rem 3rem;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    padding: 0.5rem 0;
   }
 }

src/modules/QuestionsContainer/QuestionsContainer.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { useNavigate } from "react-router-dom";
+import QuestionsHandler from "../QuestionsHandler/QuestionsHandler";
+import Streak from "../../components/Streak/Streak";
+import MailDialog from "../../components/MailDialog/MailDialog";
+import useGetQuestions from "../../hooks/useGetQuestions";
+import "./QuestionsContainer.scss";
+
+const QuestionsContainer = () => {
+  const [streak, setStreak] = useState<number>(0);
+  const navigate = useNavigate();
+  const { questions } = useGetQuestions();
+  const onBackClick = () => navigate("/");
+
+  return (
+    <Box className="question-section">
+      <Box className="question-top-section">
+        <Box className="question-top-left-buttons">
+          <Button className="back-button" onClick={onBackClick}>
+            Back
+          </Button>
+          <MailDialog />
+        </Box>
+        <Streak streak={streak} />
+      </Box>
+      <Box className="question-bottom-section">
+        {questions && <QuestionsHandler questions={questions} setStreak={setStreak} />}
+      </Box>
+    </Box>
+  );
+};
+
+export default QuestionsContainer;

src/modules/QuestionsHandler/QuestionsHandler.scss

@@ -0,0 +1,26 @@
+.option-list {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.question-header {
+  background-color: #e7f3fe;
+  box-shadow: 0px 2px 4.1px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 14px;
+  padding: 8px 16px;
+  color: rgba(0, 0, 0);
+  width: 100%;
+  margin-bottom: 1rem;
+
+  h3 {
+    color: #000;
+    font-family: 600;
+  }
+}
+
+.submit-button {
+  padding: 0.5rem 3rem;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}

src/modules/QuestionsHandler/QuestionsHandler.tsx

@@ -0,0 +1,70 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import { Box, Button, Typography } from "@mui/material";
+import OptionButton from "../../components/OptionButton/OptionButton";
+import { QuestionType } from "../../constants/types";
+import { prepSelection } from "../../utils/util";
+import "./QuestionsHandler.scss";
+
+interface QuestionsHandlerProps {
+  questions: QuestionType[];
+  setStreak: Dispatch<SetStateAction<number>>;
+}
+
+const QuestionsHandler = ({ questions, setStreak }: QuestionsHandlerProps) => {
+  const [options, setOptions] = useState(prepSelection(questions[0]));
+  const [questionIndex, setQuestionIndex] = useState<number>(0);
+  const [isAnySelected, setIsAnySelected] = useState<boolean>(false);
+
+  const handleNextQuestion = () => {
+    setIsAnySelected(false);
+    setQuestionIndex((prevIndex) => {
+      let newIndex = prevIndex + 1;
+      if (newIndex > questions.length - 1) newIndex -= questions.length;
+      setOptions(prepSelection(questions[newIndex]));
+      return newIndex;
+    });
+  };
+
+  const handleOptionSelection = (option: string) => () => {
+    setIsAnySelected(true);
+    if (option === questions[questionIndex].answer) {
+      setStreak((prev: number) => prev + 1);
+      return;
+    }
+    setStreak(0);
+  };
+
+  return (
+    <Box>
+      <Box className="question-header">
+        <Typography variant="h3">Question</Typography>
+        <Typography paragraph>{questions[questionIndex].description}</Typography>
+      </Box>
+      <List className="option-list">
+        {options.map((option: string, index: number) => (
+          <ListItem className="option-list-item" key={option}>
+            <OptionButton
+              onClick={handleOptionSelection(option)}
+              text={option}
+              index={index}
+              isCorrectAnswer={option === questions[questionIndex].answer}
+              isAnySelected={isAnySelected}
+            />
+          </ListItem>
+        ))}
+      </List>
+      <Button
+        className="submit-button"
+        type="submit"
+        variant="contained"
+        disabled={!isAnySelected}
+        onClick={handleNextQuestion}
+      >
+        Next
+      </Button>
+    </Box>
+  );
+};
+export default QuestionsHandler;

src/routes/AppRoutes.tsx

@@ -1,24 +1,24 @@
 import { Routes, Route } from "react-router-dom";
-import Questionary from "../modules/questionary/Questionary";
 import Categories from "../modules/category/Categories";
-import AppRoute from "./AppRoute";
+import QuestionsContainer from "../modules/QuestionsContainer/QuestionsContainer";
+import TriviaRoute from "./TriviaRoute";
 
 const AppRoutes = () => (
   <Routes>
     <Route
       path="/"
       element={
-        <AppRoute>
+        <TriviaRoute>
           <Categories />
-        </AppRoute>
+        </TriviaRoute>
       }
     />
     <Route
       path="/:category"
       element={
-        <AppRoute>
-          <Questionary />
-        </AppRoute>
+        <TriviaRoute>
+          <QuestionsContainer />
+        </TriviaRoute>
       }
     />
   </Routes>