fix: migrate routes to app folder

sell is not working but the others are displaying
ungdev · Nov 27, 2023 · 6177ba9 · 6177ba9
1 parent 337c659
commit 6177ba9
Show file tree

Hide file tree

Showing 17 changed files with 195 additions and 190 deletions.
diff --git a/src/routes/items.scss → src/app/items/page.scss b/src/routes/items.scss → src/app/items/page.scss
diff --git a/src/routes/items.tsx → src/app/items/page.tsx b/src/routes/items.tsx → src/app/items/page.tsx
@@ -1,19 +1,20 @@
-import React, { useState } from 'react';
-
-import './items.scss';
-import Navbar from '../components/navbar';
-import Switch from '../components/switch';
-import { useSelector } from 'react-redux';
-import { Category as CategoryType, IBuyable, State } from '../types';
-import FontAwesome from 'react-fontawesome';
-import { formatPrice } from '@/utils/format';
-import { toggleAvailable } from '@/utils/items';
+"use client";
+import React, { useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import Navbar from "../../components/navbar";
+import Switch from "../../components/switch";
+import { useSelector } from "react-redux";
+import { Category as CategoryType, IBuyable, State } from "../../types";
+import FontAwesome from "react-fontawesome";
+import { formatPrice } from "@/utils/format";
+import { toggleAvailable } from "@/utils/items";
 
 const Item = ({ item }: { item: IBuyable }) => {
   return (
     <div
-      className={'supplements' in item ? 'item' : 'item supplement'}
-      onClick={() => toggleAvailable('supplements' in item ? item.id : `S${item.id}`)}>
+      className={"supplements" in item ? "item" : "item supplement"}
+      onClick={() => toggleAvailable("supplements" in item ? item.id : `S${item.id}`)}>
       <div className="left-side">
         <Switch on={item.available} />
         <span>{item.name}</span>
@@ -31,15 +32,15 @@ const Category = ({ category }: { category: CategoryType }) => {
   return (
     <div className="category">
       <div className="title" onClick={() => setOpen(!isOpen)}>
-        <FontAwesome name={`chevron-right ${isOpen ? 'open' : ''}`} className="icon" />
+        <FontAwesome name={`chevron-right ${isOpen ? "open" : ""}`} className="icon" />
         {category.name}
       </div>
       {isOpen && (
         <div className="items">
           {category.items.map((item, itemIndex) =>
             [item, ...item.supplements].map((entry, entryIndex) => (
               <Item item={entry} key={`${itemIndex}-${entryIndex}`} />
-            )),
+            ))
           )}
         </div>
       )}
@@ -52,7 +53,7 @@ export const itemsAvailable = (categories: Array<CategoryType>) =>
     return acc + curr.items.filter((item) => item.available).length;
   }, 0);
 
-const Items = () => {
+const Page = () => {
   const categories = useSelector((state: State) => state.categories);
 
   return (
@@ -70,4 +71,4 @@ const Items = () => {
   );
 };
 
-export default Items;
+export default Page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,32 +1,32 @@
-import StoreProvider from '@/store';
-import React from 'react';
-import { Flip, ToastContainer } from 'react-toastify';
-import '../../public/fontawesome/css/all.min.css';
+import StoreProvider from "@/store";
+import React from "react";
+import { Flip, ToastContainer } from "react-toastify";
+import "../../public/fontawesome/css/all.min.css";
 
 export const metadata = {
-  charset: 'utf-8',
-  title: 'TurboBouffe',
+  charset: "utf-8",
+  title: "TurboBouffe",
   description: "Site de gestion de la bouffe de l'UA",
   icons: {
-    icon: '/favicon.ico',
-    apple: '/logo192.png',
+    icon: "/favicon.ico",
+    apple: "/logo192.png"
   },
-  themeColor: '#fb560c',
-  manifest: '/manifest.json',
+  themeColor: "#fb560c",
+  manifest: "/manifest.json",
   viewport: {
-    width: 'device-width',
-    initialScale: 1,
-  },
+    width: "device-width",
+    initialScale: 1
+  }
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="fr">
-      <body>
-        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <StoreProvider>{children}</StoreProvider>
-        <ToastContainer autoClose={3000} transition={Flip} hideProgressBar={true} pauseOnHover={true} />
-      </body>
+    <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <StoreProvider>{children}</StoreProvider>
+    <ToastContainer autoClose={3000} transition={Flip} hideProgressBar={true} pauseOnHover={true} />
+    </body>
     </html>
   );
 }
diff --git a/src/routes/login.scss → src/app/login/page.scss b/src/routes/login.scss → src/app/login/page.scss
diff --git a/src/routes/login.tsx → src/app/login/page.tsx b/src/routes/login.tsx → src/app/login/page.tsx
@@ -1,21 +1,22 @@
-import React, { ReactNode, useState } from 'react';
-
-import './login.scss';
-import { useDispatch } from 'react-redux';
-import { tryLogin } from '@/reducers/login';
-import FontAwesome from 'react-fontawesome';
-import { Action } from '@/types';
-
-const Login = () => {
+"use client";
+import React, { ReactNode, useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import { useDispatch } from "react-redux";
+import { tryLogin } from "@/reducers/login";
+import FontAwesome from "react-fontawesome";
+import { Action } from "@/types";
+
+const Page = () => {
   const digits = [
-    ['1', '2', '3'],
-    ['4', '5', '6'],
-    ['7', '8', '9'],
-    [<FontAwesome key="backspace" name="backspace" />, '0', <FontAwesome key="check" name="check" />],
+    ["1", "2", "3"],
+    ["4", "5", "6"],
+    ["7", "8", "9"],
+    [<FontAwesome key="backspace" name="backspace" />, "0", <FontAwesome key="check" name="check" />]
   ];
 
   const dispatch = useDispatch();
-  const [pin, setPin] = useState('');
+  const [pin, setPin] = useState("");
 
   const onClick = async (digit: string | ReactNode) => {
     switch (digit) {
@@ -25,7 +26,7 @@ const Login = () => {
 
       case digits[3][2]:
         dispatch(tryLogin(pin) as unknown as Action);
-        setPin('');
+        setPin("");
         break;
 
       default:
@@ -39,7 +40,7 @@ const Login = () => {
         <span className="title" onClick={() => window.location.reload()}>
           TurboBouffe
         </span>
-        <div className="field">{pin.replace(/./g, '•')}</div>
+        <div className="field">{pin.replace(/./g, "•")}</div>
         <div className="digits">
           {digits.map((digitsRow, index) => (
             <div className="digits-row" key={index}>
@@ -56,4 +57,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default Page;
diff --git a/src/app/page.scss b/src/app/page.scss
@@ -36,3 +36,34 @@ body {
   width: 0; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
 }
+.logout {
+  padding-right: 14px;
+}
+
+#index {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+  height: calc(100% - 50px);
+  font-size: 3em;
+
+  div {
+    height: calc(33% - 20px - 4px);
+    width: calc(50% - 20px - 4px - 20px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--primary);
+    margin: 10px;
+
+    .fa {
+      margin-right: 15px;
+    }
+
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,16 +1,16 @@
-'use client';
-import React from 'react';
-import 'react-toastify/dist/ReactToastify.css';
-import 'moment/locale/fr';
-import './page.scss';
-import moment from 'moment';
-import { useDispatch } from 'react-redux';
-import Navbar from '@/components/navbar';
-import FontAwesome from 'react-fontawesome';
-import { logout } from '@/reducers/login';
-import { Action } from 'redux';
+"use client";
+import React from "react";
+import "react-toastify/dist/ReactToastify.css";
+import "moment/locale/fr";
+import "./page.scss";
+import moment from "moment";
+import { useDispatch } from "react-redux";
+import Navbar from "@/components/navbar";
+import FontAwesome from "react-fontawesome";
+import { logout } from "@/reducers/login";
+import { Action } from "redux";
 
-moment.locale('fr');
+moment.locale("fr");
 
 const App = () => {
   const dispatch = useDispatch();

diff --git a/src/routes/preparation.scss → src/app/preparation/page.scss b/src/routes/preparation.scss → src/app/preparation/page.scss
diff --git a/src/routes/preparation.tsx → src/app/preparation/page.tsx b/src/routes/preparation.tsx → src/app/preparation/page.tsx
@@ -1,27 +1,26 @@
-import React, { useEffect, useState } from 'react';
+"use client";
+import React, { useEffect, useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import Navbar from "../../components/navbar";
+import moment from "moment";
+import FontAwesome from "react-fontawesome";
+import { useSelector } from "react-redux";
+import { Order, State, Status } from "@/types";
+import { downgradeOrder, upgradeOrder } from "@/utils/orders";
+import Modal from "../../components/modals/modal";
+import Loader from "../../components/loader";
+import Separator from "../../components/UI/separator";
+import { useSearchParams } from "next/navigation";
 
-import './preparation.scss';
-import Navbar from '../components/navbar';
-import moment from 'moment';
-import FontAwesome from 'react-fontawesome';
-import { useSelector } from 'react-redux';
-import { Order, State, Status } from '@/types';
-import { downgradeOrder, upgradeOrder } from '@/utils/orders';
-import { useLocation } from 'react-router';
-import queryString from 'query-string';
-import Modal from '../components/modals/modal';
-import Loader from '../components/loader';
-import Separator from '../components/UI/separator';
-
-const Preparation = () => {
-  const location = useLocation();
-  const queryParams = queryString.parse(location.search);
+const Page = () => {
+  const searchParams = useSearchParams();
   let orders = useSelector((state: State) => state.orders);
 
   // Renvoie les commandes contenant au moins un item dans la catégory du paramètre
-  if (queryParams.only) {
+  if (searchParams.has("only")) {
     orders = orders.filter((order) =>
-      order.orderItems.some((orderItem) => orderItem.item.category.key === queryParams.only),
+      order.orderItems.some((orderItem) => orderItem.item.category.key == searchParams.get("only"))
     );
   }
 
@@ -58,7 +57,8 @@ const Preparation = () => {
             setDowngradeMode(false);
             await downgradeOrder(order);
           }
-        } catch (e) {}
+        } catch (e) {
+        }
         setLoading(null);
         setConfirmOrder(null);
       }
@@ -79,7 +79,7 @@ const Preparation = () => {
                 <li key={index}>
                   {orderItem.item.name}
                   <div className="options">
-                    {orderItem.supplements.map((orderSuppl) => orderSuppl.supplement.name).join(', ')}
+                    {orderItem.supplements.map((orderSuppl) => orderSuppl.supplement.name).join(", ")}
                   </div>
                 </li>
               ))}
@@ -89,7 +89,7 @@ const Preparation = () => {
                 <Loader />
               </div>
             ) : (
-              <div className={`next ${downgradeMode ? 'downgrade' : ''}`} onClick={() => editOrder(order)}>
+              <div className={`next ${downgradeMode ? "downgrade" : ""}`} onClick={() => editOrder(order)}>
                 <FontAwesome name="arrow-right" />
               </div>
             )}
@@ -104,8 +104,8 @@ const Preparation = () => {
       <Navbar back="/">
         <div
           onClick={() => setDowngradeMode(!downgradeMode)}
-          className={`preparation-mode-button ${downgradeMode ? 'downgrade' : ''}`}>
-          {!downgradeMode ? 'Aller en arrière' : 'Aller en avant'}
+          className={`preparation-mode-button ${downgradeMode ? "downgrade" : ""}`}>
+          {!downgradeMode ? "Aller en arrière" : "Aller en avant"}
         </div>
       </Navbar>
       <div id="preparation">
@@ -132,20 +132,20 @@ const Preparation = () => {
         )}
         <div className="actions">
           <div className="button cancel" onClick={() => setConfirmOrder(null)}>
-            {loading ? <Loader /> : 'Annuler'}
+            {loading ? <Loader /> : "Annuler"}
           </div>
           <div
             className="button confirm"
             onClick={async () => {
               await editOrder(confirmOrder, true);
               setConfirmOrder(null);
             }}>
-            {loading ? <Loader /> : 'Confirmer'}
+            {loading ? <Loader /> : "Confirmer"}
           </div>
         </div>
       </Modal>
     </>
   );
 };
 
-export default Preparation;
+export default Page;
diff --git a/src/routes/sell.scss → src/app/sell/page.scss b/src/routes/sell.scss → src/app/sell/page.scss