chore: change files structure

src/components/QuizTemplate.tsx → src/Main.tsx

@@ -1,21 +1,21 @@
 import React, { useState, useEffect } from "react";
-import SelectQuestionsTotal from "./SelectQuestionsTotal";
-import SelectCategory from "./SelectCategory";
-import { ALL_CATEGORIES, QUESTION_NUMS } from "../constants";
-import Results from "./Results";
-import shuffle from "../shuffle-arr";
-
-import FCCLogo from "./FCCLogo";
-import Questions from "./Questions";
-import "../stylesheets/App.css";
+import SelectQuestionsTotal from "./pages/SelectQuestionsTotal";
+import SelectCategory from "./pages/SelectCategory";
+import { ALL_CATEGORIES, QUESTION_NUMS } from "./constants";
+import Results from "./pages/Results";
+import shuffle from "./shuffle-arr";
+
+import FCCLogo from "./components/FCCLogo";
+import Questions from "./pages/Questions";
+import "./stylesheets/App.css";
 import {
   correctModalResponses,
   incorrectModalResponses
-} from "../data/modal-responses";
-import ButtonLink from "./ButtonLink";
+} from "./data/modal-responses";
+import ButtonLink from "./components/ButtonLink";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
-const QuizTemplate: React.FC = () => {
+const Main: React.FC = () => {
   const navigate = useNavigate();
   const [quiz, setQuiz] = useState(ALL_CATEGORIES);
   const [questionNumber, setQuestionNumber] = useState(1);
@@ -222,4 +222,4 @@ const QuizTemplate: React.FC = () => {
     </>
   );
 };
-export default QuizTemplate;
+export default Main;

src/__tests__/App.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import App from "../App";
+import { App } from "../index";
 import { cleanup, render } from "@testing-library/react";
 import { HashRouter as Router } from "react-router-dom";
 import { afterEach, describe, it } from "vitest";

src/__tests__/Results.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Results from "../components/Results";
+import Results from "../pages/Results";
 
 import { render, cleanup } from "@testing-library/react";
 import { vi } from "vitest";

src/__tests__/SelectCategory.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SelectCategory from "../components/SelectCategory";
+import SelectCategory from "../pages/SelectCategory";
 import { render, cleanup, RenderResult } from "@testing-library/react";
 import { expect, afterEach, describe, it } from "vitest";
 

src/__tests__/SelectQuestionsTotal.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SelectQuestionsTotal from "../components/SelectQuestionsTotal";
+import SelectQuestionsTotal from "../pages/SelectQuestionsTotal";
 import { render, cleanup } from "@testing-library/react";
 import { expect, afterEach, describe, it, vi } from "vitest";
 

src/__tests__/WelcomePage.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import WelcomePage from "../components/WelcomePage";
+import WelcomePage from "../pages/WelcomePage";
 import { cleanup, render } from "@testing-library/react";
 import { HashRouter as Router } from "react-router-dom";
 import { afterEach, describe, it } from "vitest";

src/index.tsx

@@ -1,12 +1,25 @@
 import React from "react";
-import ReactDOM from "react-dom/client";
-import Root from "./App";
+import { createRoot } from "react-dom/client";
+import { Route, Routes } from "react-router-dom";
+import WelcomePage from "./pages/WelcomePage";
+import Main from "./Main";
+
 import reportWebVitals from "./reportWebVitals";
 import { RouterProvider, createHashRouter } from "react-router-dom";
 
-const router = createHashRouter([{ path: "*", Component: Root }]);
+export const App: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<WelcomePage />} />
+      <Route path="/quizzes/*" element={<Main />} />
+    </Routes>
+  );
+};
+
+const router = createHashRouter([{ path: "*", Component: App }]);
+const root = document.getElementById("root");
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+createRoot(root || document.createElement("div")).render(
   <React.StrictMode>
     <RouterProvider router={router} />
   </React.StrictMode>

src/components/Questions.tsx → src/pages/Questions.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import QuizModal from "./QuizModal";
+import QuizModal from "../components/QuizModal";
 import React, { useEffect } from "react";
 
 import { QuizProps } from "../types";

src/components/WelcomePage.tsx → src/pages/WelcomePage.tsx

@@ -1,12 +1,12 @@
 import rpgMenu from "../images/rpg-menu.webp";
 import mainCharacter from "../images/main-character.webp";
 import fccBackground from "../images/fcc_background.webp";
-import Navbar from "./Navbar";
-import HeroSection from "./HeroSection";
+import Navbar from "../components/Navbar";
+import HeroSection from "../components/HeroSection";
 import "../stylesheets/HomepageRow.css";
 import React from "react";
 import { ROUNDED_QUESTION_COUNT } from "../constants";
-import ButtonLink from "./ButtonLink";
+import ButtonLink from "../components/ButtonLink";
 
 const WelcomePage: React.FC = () => {
   return (