upload files

.env

@@ -1 +1,4 @@
-REACT_APP_BACKEND_API = "https://diy-backend.onrender.com/api"
+REACT_APP_BACKEND_API = "https://diy-backend.onrender.com/api"
+
+REACT_APP_CLOUDINARY_CLOUD_NAME="dguiswfoo"
+REACT_APP_CLOUDINARY_UPLOAD_PRESET="kyowgelt"

src/app/config.js

@@ -1 +1,7 @@
 export const BASE_URL = process.env.REACT_APP_BACKEND_API;
+
+export const CLOUDINARY_CLOUD_NAME =
+  process.env.REACT_APP_CLOUDINARY_CLOUD_NAME;
+
+export const CLOUDINARY_UPLOAD_PRESET =
+  process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET;

src/constants/API.constants.js

@@ -1,5 +1,5 @@
 export const API = {
   REGISTER: "/users",
   LOGIN: "/users/login",
-  GET_USER_INFO: "/user/currentUser",
+  GET_USER_INFO: "/users/currentUser",
 };

src/contexts/AuthContext.js

@@ -51,12 +51,10 @@ const reducer = (state, action) => {
 const AuthContext = createContext({ ...initialState });
 
 const setSession = (accessToken, remember) => {
-  console.log("🚀 Puritin ~ setSession ~ remember:", remember);
-  console.log("🚀 Puritin ~ setSession ~ accessToken:", accessToken);
-  if (accessToken && remember === true) {
+  if (accessToken && !!remember) {
     window.localStorage.setItem("accessToken", accessToken);
     apiService.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
-  } else if (accessToken && remember === false) {
+  } else if (accessToken && !remember) {
     window.localStorage.removeItem("accessToken");
     window.sessionStorage.setItem("accessToken", accessToken);
     apiService.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
@@ -119,7 +117,6 @@ function AuthProvider({ children }) {
         const sessionToken = window.sessionStorage.getItem("accessToken");
         const accessToken = storageToken || sessionToken;
         const remember = !!storageToken;
-        console.log("🚀 Puritin ~ initialize ~ remember:", remember);
 
         if (accessToken && isValidToken(accessToken)) {
           setSession(accessToken, remember);

src/pages/RegisterPage/index.js

@@ -81,7 +81,6 @@ function RegisterPage() {
       toast.error(error.message);
     }
     //trim data first name, lastname and email
-    console.log("Register", data);
   };
 
   return (

src/pages/UserPage/index.js

@@ -10,6 +10,7 @@ import { TabContext, TabList } from "@mui/lab";
 import { styled } from "@mui/material/styles";
 
 import useAuth from "../../hooks/useAuth";
+import { cloudinaryUpload } from "../../ultis/cloudinary";
 
 const VisuallyHiddenInput = styled("input")({
   clip: "rect(0 0 0 0)",
@@ -27,14 +28,19 @@ function UserPage() {
   const [value, setValue] = useState("1");
 
   const { user } = useAuth();
-  console.log("🚀 Puritin ~ UserPage ~ user:", user);
 
   const navigate = useNavigate();
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
+  const handleChangeAvatar = async (image) => {
+    console.log("🚀 Puritin ~ handleChangeAvatar ~ image:", image);
+    const imageUrl = await cloudinaryUpload(image);
+    console.log("🚀 Puritin ~ handleChangeAvatar ~ imageUrl:", imageUrl);
+  };
+
   return (
     <>
       <div className="userPage_container">
@@ -50,9 +56,7 @@ function UserPage() {
               </div>
               <VisuallyHiddenInput
                 type="file"
-                onChange={(event) =>
-                  console.log("file upload", event.target.files)
-                }
+                onChange={(event) => handleChangeAvatar(event.target.files)}
                 multiple
               />
             </Button>

src/pages/VideoPage/index.js

@@ -6,7 +6,14 @@ function VideoPage() {
   return (
     <div className="videoPage_container">
       <div className="leftSideVideoPage_container">
-        <div className="player_box" style={{ position: "relative" }}></div>
+        <div className="player_box" style={{ position: "relative" }}>
+          <img
+            src="images/art3.png"
+            alt="test"
+            width={"100%"}
+            height={"100%"}
+          />
+        </div>
         <div className="below_player_box"></div>
       </div>
       <div className="rightSideVideoPage_container"></div>

src/routes/AuthRequire/index.js

@@ -11,10 +11,6 @@ function AuthRequire({ children }) {
 
   const location = useLocation();
 
-  if (!isAuthenticated) {
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
-
   if (!isInitialized) {
     return (
       <div>
@@ -23,6 +19,10 @@ function AuthRequire({ children }) {
     );
   }
 
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
   return children;
 }
 

src/ultis/cloudinary.js

@@ -0,0 +1,25 @@
+import { CLOUDINARY_CLOUD_NAME, CLOUDINARY_UPLOAD_PRESET } from "../app/config";
+import axios from "axios";
+
+export const cloudinaryUpload = async (image) => {
+  if (!image) return "";
+
+  try {
+    const formData = new FormData();
+
+    formData.append("file", image);
+    formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET);
+    console.log("🚀 Puritin ~ cloudinaryUpload ~ formData:", formData);
+
+    const response = await axios({
+      url: `https://api.cloudinary.com/v1_1/${CLOUDINARY_CLOUD_NAME}/image/upload`,
+      data: formData,
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+
+    const imageUrl = response.data.secure_url;
+    return imageUrl;
+  } catch (error) {
+    console.log("🚀 Puritin ~ cloudinaryUpload ~ error:", error);
+  }
+};