refactor: structures (#38)

package.json

@@ -56,6 +56,7 @@
     "@testing-library/user-event": "14.4.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/react-router-dom": "5.3.3",
     "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "5.54.1",
     "@typescript-eslint/parser": "5.54.1",

src/app/error-page.tsx

@@ -0,0 +1,17 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError() as { statusText?: string; message?: string };
+  // eslint-disable-next-line no-console
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

src/app/App.tsx → src/app/routes/root/Root.tsx

@@ -1,8 +1,8 @@
-import "./App.css";
 import Coins from "./feature/Coins/Coins";
 import Counter from "./feature/Counter/Counter";
+import "./Root.css";
 
-function App() {
+function Root() {
   return (
     <>
       <Counter />
@@ -11,4 +11,4 @@ function App() {
   );
 }
 
-export default App;
+export default Root;

src/app/__test__/App.test.tsx → src/app/routes/root/__test__/root.test.tsx

@@ -2,13 +2,13 @@
 import { screen, waitFor } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import renderWithProviders from "../../test-utils";
+import renderWithProviders from "../../../../test-utils";
 
-import App from "../App";
+import Root from "../Root";
 
-describe("App", () => {
+describe("Root", () => {
   it("renders headline", async () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<Root />);
 
     // check if App components renders headline
     expect(

src/app/feature/Coins/CoinsSlice.ts → src/app/routes/root/feature/Coins/CoinsSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
-import type { RootState } from "../../store";
+import type { RootState } from "../../../../store";
 
 export interface Coin {
   id?: number;

src/app/feature/Coins/__test__/CoinsSlice.tst.ts → src/app/routes/root/feature/Coins/__test__/CoinsSlice.tst.ts

@@ -1,4 +1,4 @@
-import store from "../../../store";
+import store from "../../../../../store";
 import { addNewCoin } from "../CoinsSlice";
 
 test("Adds a new coin", () => {

src/app/feature/Counter/Counter.tsx → src/app/routes/root/feature/Counter/Counter.tsx

@@ -1,5 +1,5 @@
-import reactLogo from "../../../assets/react.svg";
-import { useAppDispatch, useAppSelector } from "../../store";
+import reactLogo from "@/assets/react.svg";
+import { useAppDispatch, useAppSelector } from "../../../../store";
 import { increment } from "./CounterSlice";
 
 function Counter() {

src/app/store.ts

@@ -1,8 +1,8 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
-import coinsReducer from "./feature/Coins/CoinsSlice";
-import counterReducer from "./feature/Counter/CounterSlice";
+import coinsReducer from "./routes/root/feature/Coins/CoinsSlice";
+import counterReducer from "./routes/root/feature/Counter/CounterSlice";
 
 const store = configureStore({
   reducer: {

src/main.tsx

@@ -4,8 +4,8 @@ import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import App from "./app/App";
-import Bpp from "./app/Bpp";
+import Bpp from "./app/routes/bpp/Bpp";
+import Root from "./app/routes/root/Root";
 import store from "./app/store";
 import "./main.css";
 
@@ -23,23 +23,29 @@ if (process.env.NODE_ENV === "development") {
   }
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 10,
+    },
+  },
+});
+
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <Root />,
   },
   {
     path: "/bpp",
     element: <Bpp />,
   },
 ]);
 
-const queryClient = new QueryClient();
-
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <Provider store={store}>
-      <QueryClientProvider client={queryClient}>
+      <QueryClientProvider client={queryClient} contextSharing>
         <RouterProvider router={router} />
       </QueryClientProvider>
     </Provider>

src/test-utils.tsx

@@ -1,5 +1,6 @@
 import type { PreloadedState } from "@reduxjs/toolkit";
 import { configureStore } from "@reduxjs/toolkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { RenderOptions } from "@testing-library/react";
 import { render } from "@testing-library/react";
 import React, { PropsWithChildren } from "react";
@@ -8,8 +9,8 @@ import { Provider } from "react-redux";
 import type { RootState } from "./app/store";
 import appStore from "./app/store";
 // As a basic setup, import your same slice reducers
-import coinsReducer from "./app/feature/Coins/CoinsSlice";
-import counterReducer from "./app/feature/Counter/CounterSlice";
+import coinsReducer from "./app/routes/root/feature/Coins/CoinsSlice";
+import counterReducer from "./app/routes/root/feature/Counter/CounterSlice";
 
 // This type interface extends the default options for render from RTL, as well
 // as allows the user to specify other things such as initialState, store.
@@ -31,7 +32,15 @@ function renderWithProviders(
   }: ExtendedRenderOptions = {}
 ) {
   function Wrapper({ children }: PropsWithChildren<{}>): JSX.Element {
-    return <Provider store={store}>{children}</Provider>;
+    const queryClient = new QueryClient();
+
+    return (
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    );
   }
 
   // Return an object with the store and all of RTL's query functions

vite.config.ts

@@ -1,9 +1,15 @@
 import react from "@vitejs/plugin-react";
+import path from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   test: {
     globals: true,
     environment: "jsdom",