Ig 130

api/controllers/product.controller.ts

@@ -3,22 +3,14 @@ import { TypeOf } from "zod";
 import {
   CreateProductInput,
   createProductSchema,
+  deleteProductSchema,
+  getProductSchema,
+  updateProductSchema,
 } from "../schemaValidators/product.schema";
-import {
-  createProduct,
-  deleteProduct,
-  findAndUpdateProduct,
-  findProduct,
-  findProducts,
-  buyProducts,
-} from "../services/product.service";
+import { createProduct, deleteProduct, findAndUpdateProduct, findProduct, findProducts, buyProducts } from "../services/product.service";
 
 // get product/
-export async function getAllProductsHandler(
-  req: Request<{}, {}, CreateProductInput["body"]>,
-  res: Response,
-  next: any
-) {
+export async function getAllProductsHandler(req: Request<{}, {}, CreateProductInput["body"]>, res: Response, next: any) {
   try {
     const products = await findProducts({});
     if (!products) {
@@ -32,12 +24,7 @@ export async function getAllProductsHandler(
 
 // get product/:id
 
-export async function getSingleProductHandler(
-  // TODO update request so it looks similar to createProductHandler
-  req: Request,
-  res: Response,
-  next: any
-) {
+export async function getSingleProductHandler(req: Request<{}, {}, TypeOf<typeof getProductSchema>>, res: Response, next: any) {
   const id = req.params.id;
   try {
     const product = await findProduct({ id });
@@ -51,10 +38,7 @@ export async function getSingleProductHandler(
 }
 
 // post product/
-export async function createProductHandler(
-  req: Request<{}, {}, TypeOf<typeof createProductSchema>>,
-  res: Response
-) {
+export async function createProductHandler(req: Request<{}, {}, TypeOf<typeof createProductSchema>>, res: Response) {
   const body = req.body.body;
   // const product = await createProduct(...body);
   // return res.send(product);
@@ -63,11 +47,7 @@ export async function createProductHandler(
 
 // patch product/:id
 
-export async function updateSingleProductHandler(
-  // TODO update request so it looks similar to createProductHandler
-  req: Request,
-  res: Response
-) {
+export async function updateSingleProductHandler(req: Request<{}, {}, TypeOf<typeof updateProductSchema>>, res: Response) {
   const body = req.body;
   const id = req.params.id;
   const product = await findProduct({ id });
@@ -84,11 +64,7 @@ export async function updateSingleProductHandler(
 }
 
 // delete product/:id
-export async function deleteProductHandler(
-  // TODO update request so it looks similar to createProductHandler
-  req: Request,
-  res: Response
-) {
+export async function deleteProductHandler(req: Request<{}, {}, TypeOf<typeof deleteProductSchema>>, res: Response) {
   const id = req.params.id;
   const product = await findProduct({ id });
   if (!product) {

api/schemaValidators/product.schema.ts

@@ -1,39 +1,42 @@
 import { z, number, object, string, TypeOf } from "zod";
 
 const payload = {
-    body: z.object({
-        name: string({
-            required_error: 'Name is required'
-        }),
-        price: number({
-            required_error: 'Price is required'
-        }),
-        sportType: string({
-            required_error: 'Sport type is required'
-        }),
-        productCategory: string({
-            required_error: 'Product Category is required'
-        }),
-        brand: string({
-            required_error: 'Brand is required'
-        })
-    })
-}
+  body: z.object({
+    name: string({
+      required_error: "Name is required",
+    }),
+    price: number({
+      required_error: "Price is required",
+    }),
+    sportType: string({
+      required_error: "Sport type is required",
+    }),
+    productCategory: string({
+      required_error: "Product Category is required",
+    }),
+    brand: string({
+      required_error: "Brand is required",
+    }),
+    id: string({
+      required_error: "Id is required",
+    }),
+  }),
+};
 
 const payloadUpdateSchema = {
-body: z.object({ 
-    name: string(),
-    price: number(),
-    sportType: string(),
-    productCategory: string(),
-    brand: string(),
-    description: string(),
-    img: string(),
-}).partial()}
+  body: z
+    .object({
+      name: string(),
+      price: number(),
+      sportType: string(),
+      productCategory: string(),
+      brand: string(),
+      description: string(),
+      img: string(),
+    })
+    .partial(),
+};
 
-// TODO
-// ADD A WAY TO REQUIRE OBJECTID IN REQUEST PARAMS
-
 
 export const createProductSchema = object({...payload})
 export const updateProductSchema = object({...payloadUpdateSchema})

web/src/components/pages/Login/component.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useState, useContext } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
-import { RoutePaths } from '../../../models';
+import { NotificationMode, RoutePaths } from '../../../models';
 import { User } from '../../../models/user';
 import { Api } from '../../../Api';
 import { USER_TOKEN } from '../../../constants';
@@ -10,11 +10,15 @@ import { setLocalStorage } from '../../../utils/localStorage';
 import { Form, FormInput } from '../../shared';
 
 import './style.css';
+import { saveUserDataAction } from '../../../services/actions/userActions';
+import { useDispatch } from 'react-redux';
+import { NotificationContext } from '../../../contexts';
 
-export const LoginPage = (): JSX.Element => {
+export const LoginPage = (): any => {
     const [form, setForm] = useState(new User());
     const [errors, setErrors] = useState(new User());
     const [isLoading, setIsLoading] = useState(false);
+    const { addNotification } = useContext(NotificationContext);
 
     const handleChange = (e: ChangeEvent<{ value: string; name: string }>) => {
         const { name, value } = e.target;
@@ -42,17 +46,20 @@ export const LoginPage = (): JSX.Element => {
     let navigate = useNavigate();
 
     const api = new Api();
+    const dispatch = useDispatch();
 
     const login = async () => {
-        setIsLoading(true);
         try {
-            // TODO save user data to reducer
-            const userData = (await api.post('url..', form)) as User;
+            const userData = (await api.post('/login', form)) as User;
             setLocalStorage(USER_TOKEN, userData.token);
+            dispatch(saveUserDataAction(form));
             navigate(RoutePaths.MainPage);
         } catch (error: any) {
-            // TODO display notification from context
-            console.log(error?.response.data || error?.response.status);
+            return addNotification({
+                mode: NotificationMode.INFO,
+                title: 'Login',
+                message: error,
+            });
         } finally {
             setIsLoading(false);
         }

web/src/components/pages/Register/component.tsx

@@ -1,35 +1,43 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useContext, useState } from 'react';
 
 import { Form, FormInput } from '../../shared';
 
 import { Api } from '../../../Api';
 import { useNavigate } from 'react-router-dom';
-import { RoutePaths, User } from '../../../models';
+import { NotificationMode, RoutePaths, User } from '../../../models';
 
 import { USER_TOKEN } from '../../../constants';
 import { setLocalStorage } from '../../../utils/localStorage';
 
 import './style.css';
+import { saveUserDataAction } from '../../../services/actions/userActions';
+import { useDispatch } from 'react-redux';
+import { NotificationContext } from '../../../contexts';
 
 export const RegisterPage = (): JSX.Element => {
     const [errors, setErrors] = useState(new User());
     const [form, setForm] = useState(new User());
     const [isLoading, setLoading] = useState(false);
+    const { addNotification } = useContext(NotificationContext);
 
     const navigate = useNavigate();
 
     const api = new Api();
+    const dispatch = useDispatch();
 
     async function register() {
         setLoading(true);
         try {
-            // TODO save user data to reducer
-            const userData = (await api.post('url...', form)) as User;
+            const userData = (await api.post('/register', form)) as User;
             setLocalStorage(USER_TOKEN, userData.token);
+            dispatch(saveUserDataAction(form));
             navigate(RoutePaths.MainPage);
         } catch (error: any) {
-            // TODO display notification from context
-            console.log(error?.response.data || error?.response.status);
+            return addNotification({
+                mode: NotificationMode.INFO,
+                title: 'Register',
+                message: error,
+            });
         } finally {
             setLoading(false);
         }

web/src/components/shared/Form/FormInput/component.tsx

@@ -9,6 +9,7 @@ interface Props {
         name: string;
         id?: string;
         className?: string;
+        value?: any;
         type?: 'text' | 'button' | 'checkbox' | 'password' | 'email';
         placeholder?: string;
         onChange: (e: any) => void;

web/src/services/actions/userActions.ts

@@ -1,18 +1,12 @@
 import { User } from '../../models/user';
 
-export const ADD_USER = 'ADD_USER';
-export const REMOVE_USER = 'REMOVE_USER';
+export const SAVE_USER_DATA = 'SAVE_USER_DATA';
 
-export const addUser = (value: User) => {
+export const saveUserDataAction = (user: User) => {
     return {
-        type: ADD_USER,
-        payload: value,
+        type: SAVE_USER_DATA,
+        payload: user,
     };
 };
 
-export const removeUser = (value: User) => {
-    return {
-        type: REMOVE_USER,
-        payload: value,
-    };
-};
+

web/src/services/reducers/combineReducers.ts

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import { cartReducer as cart } from './cart.reducer';
 import { pageResourceReducer as pageResource } from './page-resource.reducer';
+import { userReducer as user } from './user.reducer';
 
 export default combineReducers({
     cart,
-    pageResource
+    pageResource,
+    user,
 });

web/src/services/reducers/user.reducer.ts

@@ -0,0 +1,13 @@
+import { User } from '../../models/user';
+import { SAVE_USER_DATA } from '../actions/userActions';
+
+const initUserState: User = new User();
+
+export function userReducer(state = initUserState, action: any): User {
+    switch (action.type) {
+        case SAVE_USER_DATA:
+            return { ...state, ...action.payload };
+        default:
+            return state;
+    }
+}