fix some warnings, add index files

vtabashniuk · Apr 29, 2024 · 7aca112 · 7aca112
1 parent 02b0e39
commit 7aca112
Show file tree

Hide file tree

Showing 28 changed files with 88 additions and 117 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "millionaire",
   "version": "0.1.0",
   "private": false,
-  "homepage": "https://vtabashniuk/github.io/millionaire",
+  "homepage": "https://vtabashniuk.github.io/millionaire",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/public/index.html b/public/index.html
@@ -30,7 +30,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
       rel="stylesheet"
     />
-    <title>React App</title>
+    <title>Millionaire</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,22 +1,9 @@
+import { Outlet } from "react-router-dom";
 
 export default function App() {
-
   return (
-    // <div className="App">
-    //   <header className="App-header">
-    //     <p>
-    //       Edit <code>src/App.js</code> and save to reload.
-    //     </p>
-    //     <a
-    //       className="App-link"
-    //       href="https://reactjs.org"
-    //       target="_blank"
-    //       rel="noopener noreferrer"
-    //     >
-    //       Learn React
-    //     </a>
-    //   </header>
-    // </div>
-    null
+    <>
+      <Outlet />
+    </>
   );
 }
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Context/MobileProvider.js b/src/Context/MobileProvider.js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { MobileContext } from "./MobileContext";
+import PropTypes from "prop-types";
 
 export const MobileProvider = ({ children }) => {
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
@@ -19,4 +20,8 @@ export const MobileProvider = ({ children }) => {
   return (
     <MobileContext.Provider value={isMobile}>{children}</MobileContext.Provider>
   );
-};
+};
+
+MobileProvider.propTypes = {
+  children: PropTypes.element.isRequired,
+};
diff --git a/src/components/BurgerMenu/BurgerMenu.jsx b/src/components/BurgerMenu/BurgerMenu.jsx
@@ -1,7 +1,8 @@
+import PropTypes from "prop-types";
+import icons from "img/svg/icons.svg";
 import styles from "./BurgerMenu.module.scss";
-import icons from "../../img/svg/icons.svg";
 
-const BurgerMenu = ({ isOpen, onClick }) => {
+export const BurgerMenu = ({ isOpen, onClick }) => {
   return (
     <button
       type="button"
@@ -28,4 +29,13 @@ const BurgerMenu = ({ isOpen, onClick }) => {
     </button>
   );
 };
-export default BurgerMenu;
+
+BurgerMenu.defaultProps = {
+  isOpen: false,
+  onClick: () => {},
+};
+
+BurgerMenu.propTypes = {
+  isOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+};
diff --git a/src/components/BurgerMenu/index.js b/src/components/BurgerMenu/index.js
@@ -0,0 +1 @@
+export { BurgerMenu } from "./BurgerMenu";
diff --git a/src/components/PointMenu/PointMenu.jsx b/src/components/PointMenu/PointMenu.jsx
@@ -1,6 +1,7 @@
+import PropTypes from "prop-types";
 import styles from "./PointMenu.module.scss";
 
-const PointMenu = ({ questions, points, id }) => {
+export const PointMenu = ({ questions, points, id }) => {
   const getClassList = (item) => {
     const classes = [styles.pointListItem];
 
@@ -18,10 +19,7 @@ const PointMenu = ({ questions, points, id }) => {
     <>
       <ul className={styles.pointList}>
         {questions.toReversed().map((item) => (
-          <li
-            key={item.amount}
-            className={getClassList(item)}
-          >
+          <li key={item.amount} className={getClassList(item)}>
             {Number(item.amount).toLocaleString("en", {
               style: "currency",
               currency: "USD",
@@ -34,4 +32,8 @@ const PointMenu = ({ questions, points, id }) => {
   );
 };
 
-export default PointMenu;
+PointMenu.propTypes = {
+  questions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  points: PropTypes.number.isRequired,
+  id: PropTypes.number.isRequired,
+};
diff --git a/src/components/PointMenu/index.js b/src/components/PointMenu/index.js
@@ -0,0 +1 @@
+export { PointMenu } from "./PointMenu";
diff --git a/src/components/ResponsiveImage/ResponsiveImage.jsx b/src/components/ResponsiveImage/ResponsiveImage.jsx
@@ -1,10 +1,9 @@
 import { useContext } from "react";
-import { mobileImages, desktopImages } from "../../img";
-import { MobileContext } from "../../Context";
+import { MobileContext } from "Context";
+import { mobileImages, desktopImages } from "img";
 
-const ResponsiveImage = () => {
+export const ResponsiveImage = () => {
   const isMobile = useContext(MobileContext);
-
   const images = isMobile ? mobileImages : desktopImages;
 
   return (
@@ -21,5 +20,3 @@ const ResponsiveImage = () => {
     </picture>
   );
 };
-
-export default ResponsiveImage;
diff --git a/src/components/ResponsiveImage/index.js b/src/components/ResponsiveImage/index.js
@@ -0,0 +1 @@
+export { ResponsiveImage } from "./ResponsiveImage";
diff --git a/src/components/StartGameButton/StartGameButton.jsx b/src/components/StartGameButton/StartGameButton.jsx
@@ -1,12 +1,15 @@
 import { NavLink } from "react-router-dom";
+import PropTypes from "prop-types";
 import styles from "./StartGameButton.module.scss";
 
-const StartGameButton = ({ title }) => {
+export const StartGameButton = ({ title }) => {
   return (
-    <NavLink to={"/game"} className={styles.button}>
+    <NavLink to={"/millionaire/game"} className={styles.button}>
       {title}
     </NavLink>
   );
 };
 
-export default StartGameButton;
+StartGameButton.propTypes = {
+  title: PropTypes.string.isRequired,
+};
diff --git a/src/components/StartGameButton/index.js b/src/components/StartGameButton/index.js
@@ -0,0 +1 @@
+export { StartGameButton } from "./StartGameButton";
diff --git a/src/index.js b/src/index.js
@@ -1,32 +1,33 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { MobileProvider } from "Context/MobileProvider";
+import App from "App";
+import { Home } from "pages/Home";
+import { Game } from "pages/Game";
+import { End } from "pages/End";
 import "./styles/main.scss";
-// import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-import { MobileProvider } from "./Context/MobileProvider";
-import Home from "./pages/Home/Home";
-import Game from "./pages/Game/Game";
-import End from "./pages/End/End";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 const router = createBrowserRouter([
-  { path: "/", element: <Home /> },
-  { path: "/game", element: <Game /> },
-  { path: "/end", element: <End /> },
+  {
+    path: "millionaire",
+    element: <App />,
+    children: [
+      { path: "", element: <Home /> },
+      { path: "game", element: <Game /> },
+      { path: "end", element: <End /> },
+    ],
+  },
 ]);
 
 root.render(
   <React.StrictMode>
-    <MobileProvider >
-      <RouterProvider router={router} />
-      {/* <App /> */}
+    <MobileProvider>
+      <RouterProvider router={router}>
+        <App />
+      </RouterProvider>
     </MobileProvider>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/End/End.jsx b/src/pages/End/End.jsx
@@ -1,9 +1,9 @@
 import { useLocation } from "react-router-dom";
-import ResponsiveImage from "../../components/ResponsiveImage/ResponsiveImage";
-import StartGameButton from "../../components/StartGameButton/StartGameButton";
+import { ResponsiveImage } from "components/ResponsiveImage";
+import { StartGameButton } from "components/StartGameButton";
 import styles from "./End.module.scss";
 
-const End = () => {
+export const End = () => {
   const location = useLocation();
 
   return (
@@ -28,5 +28,3 @@ const End = () => {
     </>
   );
 };
-
-export default End;
diff --git a/src/pages/End/index.js b/src/pages/End/index.js
@@ -0,0 +1 @@
+export { End } from "./End";
diff --git a/src/pages/Game/Game.jsx b/src/pages/Game/Game.jsx
@@ -1,12 +1,12 @@
 import { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import { MobileContext } from "../../Context";
+import { MobileContext } from "Context";
+import data from "questions.json";
+import { BurgerMenu } from "components/BurgerMenu";
+import { PointMenu } from "components/PointMenu";
 import styles from "./Game.module.scss";
-import data from "../../questions.json";
-import BurgerMenu from "../../components/BurgerMenu/BurgerMenu";
-import PointMenu from "../../components/PointMenu/PointMenu";
 
-const Game = () => {
+export const Game = () => {
   const isMobile = useContext(MobileContext);
   const navigate = useNavigate();
   const [pointsMenu, setPointsMenu] = useState(false);
@@ -25,19 +25,18 @@ const Game = () => {
     if (answer.toLowerCase() === correct_answer.toLowerCase()) {
       setCorrectOption(answer);
       setTimeout(() => {
+        setPoints(amount);
+        setDisabledOption(false);
         if (questionId < questions.length - 1) {
           setQuestionId((prevId) => (prevId += 1));
-          setPoints(amount);
-          setDisabledOption(false);
         } else {
-          setPoints(amount);
-          navigate("/end", { state: { amount } });
+          navigate("/millionaire/end", { state: { amount } });
         }
       }, 750);
     } else {
       setWrongOption(answer);
       setTimeout(() => {
-        navigate("/end", { state: { amount: points } });
+        navigate("/millionaire/end", { state: { amount: points } });
       }, 750);
     }
   };
@@ -101,5 +100,3 @@ const Game = () => {
     </>
   );
 };
-
-export default Game;
diff --git a/src/pages/Game/index.js b/src/pages/Game/index.js
@@ -0,0 +1 @@
+export { Game } from "./Game";
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,8 +1,8 @@
-import ResponsiveImage from "../../components/ResponsiveImage/ResponsiveImage";
-import StartGameButton from "../../components/StartGameButton/StartGameButton";
+import { ResponsiveImage } from "components/ResponsiveImage";
+import { StartGameButton } from "components/StartGameButton";
 import styles from "./Home.module.scss";
 
-const Home = () => {
+export const Home = () => {
   return (
     <>
       <div className={styles.container}>
@@ -18,5 +18,3 @@ const Home = () => {
     </>
   );
 };
-
-export default Home;
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
@@ -0,0 +1 @@
+export { Home } from "./Home";
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/setupTests.js b/src/setupTests.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ResponsiveImage } from "./ResponsiveImage";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { StartGameButton } from "./StartGameButton";