#79 Product review

frontend/src/App.js

@@ -3,13 +3,17 @@ import { Route, Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "./App.css";
 import RoutesDataUser from "./v1/router/index";
-import { Loading_Pages_Users } from "./v1/user_ui/imports/General_Global_Import";
-import { NotFound, Header } from "./v1/user_ui/imports/Page_Layout_Main_Import";
+import {
+  Loading_Pages_Users,
+  ScrollTop,
+} from "./v1/user_ui/imports/General_Global_Import";
+import { Header, NotFound } from "./v1/user_ui/imports/Page_Layout_Main_Import";
 function App() {
   return (
     <React.Fragment>
       <Suspense fallback={<Loading_Pages_Users />}>
         <ToastContainer position="top-center" />
+        <ScrollTop />
         <Header />
         <Routes>
           {/* User */}

frontend/src/v1/configs/Apis/Carousel_Api/Api_Carousel.js

@@ -0,0 +1,5 @@
+const API_CAROUSEL = {
+  //* GET ALL CAROUSEL
+  GET_ALL_CAROUSEL: "/api/carousel",
+};
+export default API_CAROUSEL;

frontend/src/v1/configs/Apis/Products_Api/Api_Product.js

@@ -0,0 +1,8 @@
+const API_PRODUCT = {
+  //* GET ALL PRODUCT
+  GET_ALL_PRODUCT: "/api/product",
+
+  //* GET DETAIL PRODUCT
+  GET_DETAIL_PRODUCT: "/api/product/detail",
+};
+export default API_PRODUCT;

frontend/src/v1/redux/authentication_slice/AuthenticationSlice.js → frontend/src/v1/redux/authentication_slice/Authentication_Slice.js

@@ -12,14 +12,15 @@ import {
   Register_Users_Initial,
   Reset_Users_Initial,
   Update_Info_Users_Initial,
-} from "../authentication_slice/Api_Redux_Thunk";
+} from "./Api_Redux_Thunk";
 const initialState = {
   loading: false,
   loading_profile: false,
   error: null,
   error_access: null,
   error_profile: null,
   auth: [],
+  auth_changePassword: null,
   accessToken: null,
   profile: null,
   update_users: null,
@@ -34,7 +35,7 @@ const Authentication = createSlice({
       state.profile = null;
     },
     reset_changePassword: (state) => {
-      state.auth = [];
+      state.auth_changePassword = null;
     },
     reset_error: (state) => {
       state.error = null;
@@ -179,7 +180,7 @@ const Authentication = createSlice({
     },
     [Change_Password_Users_Initial.fulfilled]: (state, action) => {
       state.loading = false;
-      state.auth = action.payload.element;
+      state.auth_changePassword = action.payload.element;
     },
     [Change_Password_Users_Initial.rejected]: (state, action) => {
       state.loading = false;

frontend/src/v1/redux/carousel_slice.js/Api_Redux_Thunk_Carousel.js

@@ -0,0 +1,18 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import API_CAROUSEL from "../../configs/Apis/Carousel_Api/Api_Carousel";
+
+export const Get_All_Carousel_Initial = createAsyncThunk(
+  "Carousel/Get/All",
+  async () => {
+    try {
+      const response = await axios.get(`${API_CAROUSEL.GET_ALL_CAROUSEL}`);
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return error.response.data;
+    }
+  }
+);

frontend/src/v1/redux/carousel_slice.js/Carousel_Slice.js

@@ -0,0 +1,33 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { Get_All_Carousel_Initial } from "./Api_Redux_Thunk_Carousel";
+const initialState = {
+  loading: false,
+  error: null,
+  result_carousel: null,
+};
+const Carousels = createSlice({
+  name: "carousels",
+  initialState,
+  reducers: {
+    reset_carousel: (state) => {
+      state.result_carousel = null;
+    },
+  },
+  extraReducers: {
+    //* Get All Carousel
+    [Get_All_Carousel_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Get_All_Carousel_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.result_carousel = action.payload.element.carousels;
+    },
+    [Get_All_Carousel_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+  },
+});
+const Carousels_Slice = Carousels.reducer;
+export const { reset_carousel } = Carousels.actions;
+export default Carousels_Slice;

frontend/src/v1/redux/product_slice/Api_Redux_Thunk_Products.js

@@ -0,0 +1,35 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import API_PRODUCT from "../../configs/Apis/Products_Api/Api_Product";
+
+export const Get_All_Product_Initial = createAsyncThunk(
+  "Product/Get/All",
+  async () => {
+    try {
+      const response = await axios.get(`${API_PRODUCT.GET_ALL_PRODUCT}`);
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return error.response.data;
+    }
+  }
+);
+
+export const Get_Detail_Product_Initial = createAsyncThunk(
+  "Product/Get/Detail",
+  async (id) => {
+    try {
+      const response = await axios.get(
+        `${API_PRODUCT.GET_DETAIL_PRODUCT}/${id}`
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return error.response.data;
+    }
+  }
+);

frontend/src/v1/redux/product_slice/Product_Slice.js

@@ -0,0 +1,52 @@
+import { createSlice } from "@reduxjs/toolkit";
+import {
+  Get_All_Product_Initial,
+  Get_Detail_Product_Initial,
+} from "./Api_Redux_Thunk_Products";
+const initialState = {
+  loading: false,
+  error: null,
+  result_product: null,
+  result_product_detail: null,
+};
+const Products = createSlice({
+  name: "products",
+  initialState,
+  reducers: {
+    reset_product: (state) => {
+      state.result_product = null;
+    },
+    reset_product_detail: (state) => {
+      state.result_product_detail = null;
+    },
+  },
+  extraReducers: {
+    //* Get All Product
+    [Get_All_Product_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Get_All_Product_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.result_product = action.payload.element;
+    },
+    [Get_All_Product_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Get Detail Product
+    [Get_Detail_Product_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Get_Detail_Product_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.result_product_detail = action.payload.element;
+    },
+    [Get_Detail_Product_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+  },
+});
+const Product_Slice = Products.reducer;
+export const { reset_product, reset_product_detail } = Products.actions;
+export default Product_Slice;

frontend/src/v1/redux/store.js

@@ -1,18 +1,19 @@
 import { configureStore } from "@reduxjs/toolkit";
 import logger from "redux-logger";
-import AuthenticationSlice from "./authentication_slice/AuthenticationSlice";
-import Upload_Cloud_Slice from "./upload_Slice/Upload_Slice";
+import AuthenticationSlice from "./authentication_slice/Authentication_Slice";
+import Carousels_Slice from "./carousel_slice.js/Carousel_Slice";
+import Products_Slice from "./product_slice/Product_Slice";
+import Upload_Cloud_Slice from "./upload_slice/Upload_Slice";
 const rootReducer = (state, action) => {
-  if (action.type === "counter/clear") {
-    state = undefined;
-  }
   return AuthenticationSlice(state, action);
 };
 let store;
 store = configureStore({
   reducer: {
     auth_user: AuthenticationSlice,
     upload_cloud: Upload_Cloud_Slice,
+    carousel_user: Carousels_Slice,
+    Products_user: Products_Slice,
     reducer: rootReducer,
   },
 

frontend/src/v1/redux/upload_Slice/Upload_Slice.js

@@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit";
 import {
   Destroy_Cloud_Initial,
   Upload_Cloud_Initial,
-} from "../upload_Slice/Api_Redux_Thunk_Upload";
+} from "./Api_Redux_Thunk_Upload";
 const initialState = {
   loading: false,
   error: null,

frontend/src/v1/redux/upload_slice/Api_Redux_Thunk_Upload.js

@@ -0,0 +1,54 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import API_UPLOAD from "../../configs/Apis/Upload_Api/Api_Upload";
+
+export const Upload_Cloud_Initial = createAsyncThunk(
+  "Upload/Image/Cloud",
+  async ({ formData, accessToken }, { rejectWithValue }) => {
+    const config = {
+      headers: {
+        "content-type": "multipart/form-data",
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    try {
+      const response = await axios.post(
+        `${API_UPLOAD.UPLOAD_IMAGE_CLOUD}`,
+        formData,
+        config
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
+export const Destroy_Cloud_Initial = createAsyncThunk(
+  "Destroy/Image/Cloud",
+  async ({ public_id, accessToken }, { rejectWithValue }) => {
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    try {
+      const response = await axios.post(
+        `${API_UPLOAD.DESTROY_IMAGE_CLOUD}`,
+        {
+          public_id,
+        },
+        config
+      );
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  }
+);

frontend/src/v1/redux/upload_slice/Upload_Slice.js

@@ -0,0 +1,49 @@
+import { createSlice } from "@reduxjs/toolkit";
+import {
+  Destroy_Cloud_Initial,
+  Upload_Cloud_Initial,
+} from "./Api_Redux_Thunk_Upload";
+const initialState = {
+  loading: false,
+  error: null,
+  result: null,
+  result_destroy: null,
+};
+const Upload_Cloud = createSlice({
+  name: "Upload_Cloud",
+  initialState,
+  reducers: {
+    reset_upload: (state) => {
+      state.result = null;
+    },
+  },
+  extraReducers: {
+    //* Upload Cloud
+    [Upload_Cloud_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Upload_Cloud_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.result = action.payload.element;
+    },
+    [Upload_Cloud_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+    //* Destroy Cloud
+    [Destroy_Cloud_Initial.pending]: (state, action) => {
+      state.loading = true;
+    },
+    [Destroy_Cloud_Initial.fulfilled]: (state, action) => {
+      state.loading = false;
+      state.result_destroy = action.payload;
+    },
+    [Destroy_Cloud_Initial.rejected]: (state, action) => {
+      state.loading = false;
+      state.error = action.payload;
+    },
+  },
+});
+const Upload_Cloud_Slice = Upload_Cloud.reducer;
+export const { reset_upload } = Upload_Cloud.actions;
+export default Upload_Cloud_Slice;

frontend/src/v1/router/index.js

@@ -6,7 +6,10 @@ import {
   Reset_Password_Users,
   Profile_USers,
 } from "../user_ui/imports/Authen_Users_Import";
-import { Home_Users } from "../user_ui/imports/Page_Layout_Main_Import";
+import {
+  Detail_Product,
+  Home_Users,
+} from "../user_ui/imports/Page_Layout_Main_Import";
 import User_Private_Router from "../private/user_private_router/User_Private_Router";
 import User_Private_Router_Layout_Main from "../private/user_private_router/User_Private_Router_Layout_Main";
 const RoutesDataUser = [
@@ -39,10 +42,14 @@ const RoutesDataUser = [
   //* Home
   {
     path: "",
-    private: <User_Private_Router_Layout_Main />,
     main: <Home_Users />,
   },
-  //* Home
+  //* Detail Products
+  {
+    path: "product/:id",
+    main: <Detail_Product />,
+  },
+  //* Profile
   {
     path: "profile",
     private: <User_Private_Router_Layout_Main />,