Revert "#50 use react routers data fetching mechanism"

Author: debater-coder

README.md

@@ -1,9 +1,6 @@
 # [Timetabl](https://www.timetabl.app)
-
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
-
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 ![GitHub deployments](https://img.shields.io/github/deployments/debater-coder/timetabl-app/production?label=vercel&logo=vercel)
@@ -24,7 +21,7 @@ Timetabl is built on three principles:
 
 3. **Be secure**
    Unlike other bell time apps, Timetabl stores your tokens in HTTPS-only cookies instead of `localStorage`, so that even in the event of an XSS attack, the tokens are secure.
-
+   
 ## Contributors
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

package-lock.json

@@ -40,7 +40,7 @@
     "@react-three/fiber": "^8.9.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@tanstack/query-sync-storage-persister": "^4.0.10",
-    "@tanstack/react-query": "^4.20.4",
+    "@tanstack/react-query": "4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@tanstack/react-query-persist-client": "^4.0.10",
     "@types/react-dom": "^18.0.9",
@@ -62,8 +62,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
-    "react-query-kit": "^1.3.1",
-    "react-router-dom": "^6.5.0",
+    "react-router-dom": "^6.3.0",
     "rollup-plugin-workbox": "^6.2.0",
     "three": "^0.146.0",
     "web-vitals": "^3.0.1",
@@ -82,7 +81,7 @@
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
     "@vercel/node": "^2.6.3",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@vitejs/plugin-react": "^2.0.0",
     "cypress": "^11.2.0",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
@@ -95,6 +94,6 @@
     "npm-run-all": "^4.1.5",
     "prettier": "2.6.2",
     "start-server-and-test": "^1.14.0",
-    "vite": "^4.0.2"
+    "vite": "^3.0.2"
   }
 }

package.json

@@ -2,14 +2,17 @@ import Nav from "../Nav";
 import { Outlet } from "react-router-dom";
 import { Flex } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
+import { ErrorBoundary } from "../ErrorBoundary";
 
 export default () => {
   return (
     <Flex direction={"column"} width={"100vw"} maxW="full" height={"100vh"}>
       <Nav />
       <Box mt={"100px"} />
       <Flex direction={"column"} w="full" h="full" maxH={"calc(100% - 100px)"}>
-        <Outlet />
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
       </Flex>
     </Flex>
   );

src/Auth.tsx

@@ -7,7 +7,7 @@ import {
 import SidebarButton from "../Sidebar/SidebarButton";
 import { motion, PanInfo } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import { pages } from "../../pages";
+import { routes } from "../../routes";
 
 const Flex = motion(ChakraFlex);
 
@@ -80,7 +80,7 @@ export const BottomNavSheet = () => {
         borderTop="none"
         borderColor={useColorModeValue("gray.200", "gray.700")}
       >
-        {pages.pinned.map((routes) => (
+        {routes.pinned.map((routes) => (
           <SidebarButton
             key={routes.path}
             name={routes.name}
@@ -92,7 +92,7 @@ export const BottomNavSheet = () => {
         ))}
       </Flex>
       <SimpleGrid columns={4} w="full">
-        {pages.unpinned.map((routes) => (
+        {routes.unpinned.map((routes) => (
           <SidebarButton
             key={routes.path}
             name={routes.name}

src/components/App/App.tsx

@@ -1,8 +1,8 @@
 import { chakra, useBoolean, useMediaQuery } from "@chakra-ui/react";
 import { DateTime } from "luxon";
 import { useState } from "react";
+import { TimetablPeriod } from "../../hooks/sbhsQuery/use/useDTT";
 import useSettings from "../../hooks/useSettings";
-import { TimetablPeriod } from "../../services/sbhsApi/types";
 import { Period } from "../Period";
 
 export const DTTPeriod = ({

src/components/BottomNavSheet/BottomNavSheet.tsx

@@ -0,0 +1,42 @@
+import { UseQueryResult } from "@tanstack/react-query";
+import handleQuery from "../../utils/handleQuery";
+import QueryError from "../QueryError";
+
+export default function QueryHandler({
+  queries,
+  children,
+}: {
+  queries: Record<string, UseQueryResult>;
+  children: (isLoaded: boolean, data: Record<string, unknown>) => JSX.Element;
+}) {
+  const errors: unknown[] = [];
+  let isLoaded = true;
+
+  Object.entries(queries).forEach(([, query]) => {
+    const { data, error } = query;
+    if (error) {
+      errors.push(error);
+    }
+
+    if (!data) {
+      isLoaded = false;
+    }
+  });
+
+  const data: Record<string, unknown> = {};
+
+  Object.entries(queries).forEach(([key, query]) => {
+    data[key] = query.data;
+  });
+
+  return handleQuery(
+    isLoaded,
+    errors.length,
+    (isLoaded) => <>{children(isLoaded, data)}</>,
+    <>
+      {errors.map((error, index) => (
+        <QueryError key={index} error={error} />
+      ))}
+    </>
+  );
+}

src/components/DTTPeriod/DTTPeriod.tsx

@@ -0,0 +1 @@
+export { default } from "./QueriesHandler";