Refactor/app cleanup (#20)

* refactor: 🚚 Move hooks into usecases

Hooks makes more sense as usecases and reposiories can handle different API protocols like GraphQL etc

* refactor: ♻️ authprovider

* refactor: 🧑‍💻 use enum

* feat: 🔧 use env to set api endpoint

* feat: ✨ Global error handler, form validations

Use zod library for form validations.
Global error handler to display API error messages.

* refactor: 🔥 rm duplicate toTask

client-app/.env.example

@@ -1 +1,5 @@
-PORT=3000
+PORT=3000
+REACT_APP_CLIENT_ID=webapp_id
+# The secret will be removed once we moved to PKCE. currently its in review
+REACT_APP_CLIENT_SECRET=web_app_secret
+REACT_APP_API=http://localhost:3000

client-app/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@headlessui/react": "^2.1.0",
     "@heroicons/react": "^2.1.4",
+    "@hookform/resolvers": "^3.9.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.45.1",
     "@testing-library/jest-dom": "^5.17.0",
@@ -21,8 +22,10 @@
     "react-hook-form": "^7.52.0",
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zod": "^3.23.8"
   },
   "scripts": {
     "start": "react-scripts start",

client-app/src/App.tsx

@@ -1,65 +1,16 @@
-import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Root from "./routes/root";
-import ErrorPage from "./error-page";
-import Tasks from "./presentation/pages/Tasks";
-import Login from "./presentation/pages/Login";
-import Signup from "./presentation/pages/Signup";
-import { AuthProvider } from "./AuthContext";
-import ProtectedRoute from "./ProtectedRoute";
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Root />,
-    errorElement: <ErrorPage />,
-    children: [
-      {
-        path: "/",
-        element: (
-          <ProtectedRoute>
-            <Tasks />
-          </ProtectedRoute>
-        ),
-      },
-      {
-        path: "login",
-        element: <Login />,
-      },
-      {
-        path: "signup",
-        element: <Signup />,
-      },
-    ],
-  },
-]);
-
-const queryClient = new QueryClient();
+import { RouterProvider } from "react-router-dom";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "./application/providers/AuthProvider";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import router from "./routes";
+import queryClient from "./query-client";
 
 function App() {
-  // return (
-  //   <div className="App">
-  //     <header className="App-header">
-  //       <img src={logo} className="App-logo" alt="logo" />
-  //       <p>
-  //         Edit <code>src/App.tsx</code> and save to reload.
-  //       </p>
-  //       <a
-  //         className="App-link"
-  //         href="https://reactjs.org"
-  //         target="_blank"
-  //         rel="noopener noreferrer"
-  //       >
-  //         Learn React
-  //       </a>
-  //     </header>
-  //   </div>
-  // );
   return (
     <>
+      <ToastContainer />
       <QueryClientProvider client={queryClient}>
         <AuthProvider>
           <RouterProvider router={router} />

client-app/src/application/hooks/useAuth.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AuthContext } from "../../AuthContext";
+import { AuthContext } from "../providers/AuthProvider";
 
 export function useAuth() {
   return React.useContext(AuthContext);