upload new files today

coderschoolmentee · Oct 2, 2024 · 1d5dca8 · 1d5dca8
1 parent 0910942
commit 1d5dca8
Show file tree

Hide file tree

Showing 23 changed files with 718 additions and 338 deletions.
diff --git a/src/app/apiService.js b/src/app/apiService.js
@@ -19,7 +19,7 @@ apiService.interceptors.request.use(
 apiService.interceptors.response.use(
   (response) => {
     console.log("RESPONSE", response);
-    return response;
+    return response.data;
   },
   function (error) {
     console.log("RESPONSE ERROR", { error });

diff --git a/src/app/store.js b/src/app/store.js
@@ -0,0 +1,15 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+import userReducer from "../features/User/userSlice";
+import videoReducer from "../features/Video/videoSlice";
+
+const rootReducer = {
+  user: userReducer,
+  video: videoReducer,
+};
+
+const store = configureStore({
+  reducer: rootReducer,
+});
+
+export default store;
diff --git a/src/components/MaterialMultiCheck/index.js b/src/components/MaterialMultiCheck/index.js
diff --git a/src/components/SearchTable/index.js b/src/components/SearchTable/index.js
@@ -39,15 +39,11 @@ function SearchTable() {
 
   const {
     handleSubmit,
-    reset,
-    setError,
-    formState: { errors, isSubmitting },
+    formState: { isSubmitting },
   } = methods;
 
   const navigate = useNavigate();
 
-  const location = useLocation();
-
   const onSubmit = async (data) => {
     console.log("Submitted Data", data);
   };
@@ -74,6 +70,7 @@ function SearchTable() {
                 <Grid className="grid_box" size={4}>
                   <FTextField name="videoTitle" label="Video Title" />
                 </Grid>
+
                 <Grid className="grid_box" size={4}>
                   <FSelect name="duration" label="Duration">
                     {DURATION_OPTION.map((option) => (
@@ -83,6 +80,7 @@ function SearchTable() {
                     ))}
                   </FSelect>
                 </Grid>
+
                 <Grid className="grid_box" size={4}>
                   <FSelect name="difficulty" label="Difficulty">
                     {DIFFICULTY_OPTION.map((option) => (
@@ -92,6 +90,7 @@ function SearchTable() {
                     ))}
                   </FSelect>
                 </Grid>
+
                 <Grid className="grid_box" size={4}>
                   <FSelect name="category" label="Category">
                     {CATEGORY_OPTION.map((option) => (
@@ -101,6 +100,7 @@ function SearchTable() {
                     ))}
                   </FSelect>
                 </Grid>
+
                 <Grid className="grid_box" size={4}>
                   <FSelect name="material" label="Material">
                     {MATERIAL_OPTION.map((option) => (
@@ -110,6 +110,7 @@ function SearchTable() {
                     ))}
                   </FSelect>
                 </Grid>
+
                 <Grid className="grid_box" size={4}>
                   <FSelect name="tools" label="Tools">
                     {TOOLS_OPTION.map((option) => (
@@ -119,6 +120,7 @@ function SearchTable() {
                     ))}
                   </FSelect>
                 </Grid>
+
                 <Grid className="grid_box" size={4}>
                   <LoadingButton
                     className="resultBtn"

diff --git a/src/components/ToolsMulticheck/ToolsMultipleSelect.scss b/src/components/ToolsMulticheck/ToolsMultipleSelect.scss
@@ -0,0 +1,13 @@
+.toolOption_box {
+  width: 100%;
+  height: 40px;
+  max-width: 875px;
+  .MuiOutlinedInput-input {
+    display: flex !important;
+    gap: 1px;
+    align-items: baseline;
+    .MuiListItemText-root {
+      flex: none;
+    }
+  }
+}
diff --git a/src/components/ToolsMulticheck/index.js b/src/components/ToolsMulticheck/index.js
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { TOOLS_OPTION } from "../../constants/hompage.constants";
+import { Controller, useFormContext } from "react-hook-form";
+import "./ToolsMultipleSelect.scss";
+
+import MenuItem from "@mui/material/MenuItem";
+import ListItemText from "@mui/material/ListItemText";
+import Select from "@mui/material/Select";
+
+const ToolsMultipleSelect = ({ name, field, ...other }) => {
+  const [toolName, setToolName] = React.useState([]);
+  const { control } = useFormContext();
+
+  const handleChange = (event) => {
+    console.log("🚀 Puritin ~ handleChange ~ event:", event.target.value);
+    setToolName(event.target.value);
+  };
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <Select
+          className="toolOption_box"
+          {...field}
+          multiple
+          displayEmpty
+          error={!!error}
+          value={toolName}
+          onChange={handleChange}
+          renderValue={
+            toolName.length > 0 ? undefined : () => <em>Select your tool(s)</em>
+          }
+          {...other}
+        >
+          {TOOLS_OPTION.map((tool) => (
+            <MenuItem key={tool.value} value={tool.value}>
+              {/* <Checkbox checked={toolName.includes(tool.label)} /> */}
+              <ListItemText primary={tool.label} />
+            </MenuItem>
+          ))}
+        </Select>
+      )}
+    />
+  );
+};
+
+export default ToolsMultipleSelect;
diff --git a/src/constants/API.constants.js b/src/constants/API.constants.js
@@ -2,4 +2,6 @@ export const API = {
   REGISTER: "/users",
   LOGIN: "/users/login",
   GET_USER_INFO: "/users/currentUser",
+  UPDATE_USER_INFO: "/users",
+  CREATE_VIDEO: "/videos",
 };
diff --git a/src/constants/hompage.constants.js b/src/constants/hompage.constants.js
@@ -1,5 +1,5 @@
 export const DURATION_OPTION = [
-  { value: "none", label: "None" },
+  { value: "", label: "None" },
   { value: "2h", label: "< 2 Hour" },
   { value: "4h", label: "2 - 4 Hours" },
   { value: "8h", label: "4 - 8 Hours" },
@@ -10,14 +10,14 @@ export const DURATION_OPTION = [
 ];
 
 export const DIFFICULTY_OPTION = [
-  { value: "none", label: "None" },
+  { value: "", label: "None" },
   { value: "easy", label: "Easy" },
   { value: "medium", label: "Medium" },
   { value: "hard", label: "Hard" },
 ];
 
 export const CATEGORY_OPTION = [
-  { value: "none", label: "None" },
+  { value: "", label: "None" },
   { value: "art", label: "Art" },
   { value: "clothes", label: "Clothes" },
   {
@@ -31,8 +31,44 @@ export const CATEGORY_OPTION = [
   { value: "pottery", label: "Pottery" },
 ];
 
+export const COLLECTION_OPTION = [
+  { value: "", label: "None" },
+  {
+    value: "christmas",
+    label: "Christmas Decoration",
+  },
+  {
+    value: "soap",
+    label: "Natural Soap",
+  },
+  {
+    value: "earings",
+    label: "Earings",
+  },
+  {
+    value: "vases",
+    label: "Vases",
+  },
+  {
+    value: "candle",
+    label: "Candle",
+  },
+  {
+    value: "art",
+    label: "Art",
+  },
+  {
+    value: "necklace",
+    label: "Necklace",
+  },
+  {
+    value: "chairs",
+    label: "Chairs",
+  },
+];
+
 export const MATERIAL_OPTION = [
-  { value: "none", label: "None" },
+  { value: "", label: "None" },
   { value: "adhesive", label: "Adhesive" },
   { value: "brick", label: "Brick" },
   { value: "glass", label: "Glass" },
@@ -47,7 +83,7 @@ export const MATERIAL_OPTION = [
 ];
 
 export const TOOLS_OPTION = [
-  { value: "none", label: "None" },
+  { value: "", label: "None" },
   { value: "drill", label: "Drill" },
   { value: "hammer", label: "Hammer" },
   { value: "saw", label: "Saw" },

diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
@@ -3,6 +3,7 @@ import apiService from "../app/apiService";
 // import isValidToken from "../utils/jwt";
 import { API } from "../constants/API.constants";
 import isValidToken from "../ultis/jwt";
+import { useSelector } from "react-redux";
 
 const initialState = {
   isInitialized: false,
@@ -14,6 +15,7 @@ const INITIALIZE = "AUTH.INITIALIZE";
 const LOGIN_SUCCESS = "AUTH.LOGIN_SUCCESS";
 const REGISTER_SUCCESS = "AUTH.REGISTER_SUCCESS";
 const LOGOUT = "AUTH.LOGOUT";
+const UPDATE_SUCCESS = "AUTH.UPDATE_SUCCESS";
 
 const reducer = (state, action) => {
   switch (action.type) {
@@ -43,6 +45,11 @@ const reducer = (state, action) => {
         isAuthenticated: false,
         user: null,
       };
+    case UPDATE_SUCCESS:
+      return {
+        ...state,
+        user: action.payload.user,
+      };
     default:
       return state;
   }
@@ -68,9 +75,11 @@ const setSession = (accessToken, remember) => {
 function AuthProvider({ children }) {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const { updateUserInfo } = useSelector((state) => state.user);
+
   const login = async ({ email, password, remember }, callback) => {
     const response = await apiService.post(API.LOGIN, { email, password });
-    const { user, accessToken } = response.data.data;
+    const { user, accessToken } = response.data;
 
     setSession(accessToken, remember);
 
@@ -147,6 +156,17 @@ function AuthProvider({ children }) {
     initialize();
   }, []);
 
+  useEffect(() => {
+    if (updateUserInfo) {
+      console.log("🚀 Puritin ~ useEffect ~ updateUserInfo:", updateUserInfo);
+
+      dispatch({
+        type: UPDATE_SUCCESS,
+        payload: { user: updateUserInfo },
+      });
+    }
+  }, [updateUserInfo]);
+
   return (
     <AuthContext.Provider value={{ ...state, login, register, logout }}>
       {children}

diff --git a/src/features/User/UploadAvatar/UploadAvatar.scss b/src/features/User/UploadAvatar/UploadAvatar.scss
@@ -0,0 +1,20 @@
+.avatar_box {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  .photoIcon_box {
+    position: absolute;
+    visibility: hidden;
+  }
+  &:hover {
+    filter: brightness(50%);
+    .photoIcon_box {
+      top: 40%;
+      left: 38%;
+      visibility: visible;
+    }
+  }
+}