Feat/add redux

.env.example

@@ -1,2 +1,2 @@
 REACT_APP_GOOGLE_MAPS_API_KEY=--your-google-maps-api-key--
-VITE_API_SERVER_URL=http://localhost:3000/api
+VITE_API_SERVER_URL=http://192.168.0.17:3000/api

package.json

@@ -27,6 +27,7 @@
     "@ionic/react": "^8.5.0",
     "@ionic/react-router": "^8.5.0",
     "@mui/material": "^7.3.1",
+    "@reduxjs/toolkit": "^2.9.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "class-transformer": "^0.5.1",
@@ -35,8 +36,10 @@
     "jwt-decode": "^4.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "react-redux": "^9.2.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
+    "redux": "^5.0.1",
     "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
@@ -47,6 +50,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
+    "@types/react-redux": "^7.1.34",
     "@vitejs/plugin-legacy": "^5.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "cypress": "^13.5.0",

src/App.tsx

@@ -1,6 +1,6 @@
-import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
+import { IonApp, IonPage, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { Redirect, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import Menu from './components/Menu/Menu';
 
 /* Core CSS required for Ionic components to work properly */
@@ -33,42 +33,46 @@ import '@ionic/react/css/palettes/dark.system.css';
 /* Theme variables */
 import './theme/variables.css';
 import './App.css';
-import Services from './pages/Services/Services';
-import Supplyers from './pages/Supplyers/Supplyers';
-import Customers from './pages/Customers/Customers';
-import Login from './pages/Login/Login';
-import AdminPage from './pages/Admin/Admin';
+import { Provider } from 'react-redux';
+import { store } from './redux/store/store';
+import { routes } from './routes/routes';
 
 setupIonicReact();
 
 const App: React.FC = () => {
   return (
     <IonApp>
-      <IonReactRouter>
-        <IonSplitPane contentId="main">
-          <Menu />
-          <IonRouterOutlet id="main">
-            <Route path="/" exact={true}>
-              <Redirect to="/Services" />
-            </Route>
-            <Route path="/Services" exact={true}>
-              <Services />
-            </Route>
-            <Route path="/Supplyers" exact={true}>
-              <Supplyers />
-            </Route>
-            <Route path="/Customers" exact={true}>
-              <Customers />
-            </Route>
-            <Route path="/Login" exact={true}>
-              <Login />
-            </Route>
-            <Route path="/Admin" exact={true}>
-              <AdminPage />
-            </Route>
-          </IonRouterOutlet>
-        </IonSplitPane>
-      </IonReactRouter>
+      <Provider store={store}>
+        <IonReactRouter>
+          <IonSplitPane contentId="main">
+            <Menu />
+            <IonRouterOutlet id="main">
+              {routes.map((route) => (
+                <Route
+                  key={route.path}
+                  path={route.path}
+                  exact={true}
+                  render={(props) => (
+                    <IonPage>
+                      {route.guard ? (
+                        <route.guard options={route.guardOptions || {}}>
+                          <route.layout {...route.layoutProps}>
+                            <route.component {...props} />
+                          </route.layout>
+                        </route.guard>
+                      ) : (
+                        <route.layout {...route.layoutProps}>
+                          <route.component {...props} />
+                        </route.layout>
+                      )}
+                    </IonPage>
+                  )}
+                />
+              ))}
+            </IonRouterOutlet>
+          </IonSplitPane>
+        </IonReactRouter>
+      </Provider>
     </IonApp>
   );
 };

src/api/constants.ts

@@ -10,5 +10,6 @@ export const ENDPOINTS: TEndpoints = {
   },
   users: {
     getAll: { url: () => 'users', method: 'GET', options: { auth: true } },
+    getById: { url: (params) => `users/${params?.id}`, method: 'GET', options: { auth: true } },
   },
 };

src/api/services/auth-service.ts

@@ -4,8 +4,8 @@ import { ResponseTokenDto } from '../dto/auth/response-token.dto';
 import { ENDPOINTS } from "../constants";
 
 export class AuthService {
-  async login(credentials: AuthDto, setTokens: (tokens: ResponseTokenDto) => void) {
+  async signIn(credentials: AuthDto): Promise<ResponseTokenDto> {
     const tokens = await transport.post<ResponseTokenDto>(ENDPOINTS.auth.signin.url(), credentials);
-    setTokens(tokens);
+    return tokens;
   }
 }

src/api/services/users-service.ts

@@ -4,8 +4,13 @@ import { UserDto } from '../dto/users/user.dto';
 import { IListResponse } from '../../interfaces/list-response.interface';
 
 export class UsersService {
-  async getAll() {
+  async getAll(): Promise<IListResponse<UserDto>> {
     const response = await transport.useEndpoint<IListResponse<UserDto>>(ENDPOINTS.users.getAll);
     return response;
   }
+
+  async getById(id: string): Promise<UserDto> {
+    const response = await transport.useEndpoint<UserDto>(ENDPOINTS.users.getById, null, { id });
+    return response;
+  }
 }

src/api/types.ts

@@ -4,7 +4,7 @@ export type TransportOptions = {
 };
 
 export type TEndpoint = {
-  url: (params?: Record<string, string>) => string;
+  url: (params?: { [key: string]: string }) => string;
   options: TransportOptions;
   method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
 };