ref: DropDown, api fetch, feat edit, env

+ .env.dev public/ -|index.html -|manifest.json src/ -|components/ -|AddMenu/index.js -|AddResto/index.js -|DropDown/index.js -|EditProfile/index.js -|Header/index.js -|LandingPage/ -|LandingPage.styled.js -|index.js -|RouterSetup.js -|config/api.js -|utils/socket.js + Changing `DropDown` style fix the index, also changing when owner resto will redirect to create resto when click AddResto if not yet have resto. + Api fetch fix after owner save creating resto fetch again to save resto to global state, also fix fetching about image sync with backend that move use cloudinary. + Fix components fetching sync with cloudinary also fix shifting layouts . + This commit refactor code deprecated and fix some bug styles, fix some state fetching, and add new feat edit.
EXPITC · May 24, 2023 · fe00248 · fe00248
1 parent eb63e28
commit fe00248
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 49 deletions.
diff --git a/.env.dev b/.env.dev
@@ -0,0 +1,8 @@
+# MAPBOX
+REACT_APP_MAPBOX_TOKEN=""
+
+# Socket Io
+REACT_APP_BE="" 
+
+# AXIOS
+REACT_APP_API_ENDPOINT=""
diff --git a/public/index.html b/public/index.html
@@ -2,11 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      rel="icon"
+      href="https://regeld.com/desi/wp-content/uploads/2019/07/sircle_d_orange.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="foodways" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="apple-touch-icon"
+      href="https://regeld.com/desi/wp-content/uploads/2019/07/sircle_d_orange.png"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/public/manifest.json b/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Foodways",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "https://regeld.com/desi/wp-content/uploads/2019/07/sircle_d_orange.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "pleasePutLogoAtPublic.png",
+      "src": "https://regeld.com/desi/wp-content/uploads/2019/07/sircle_d_orange.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "https://regeld.com/desi/wp-content/uploads/2019/07/sircle_d_orange.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/components/AddMenu/index.js b/src/components/AddMenu/index.js
@@ -7,19 +7,22 @@ import { Wrapper, WrapperMain, Flex } from "./AddMenu.styled";
 import { useNavigate, useParams } from "react-router";
 import { UserContext } from "../../Context/userContext";
 
-const AddMenu = (Edit) => {
-  const { id } = useParams();
+const AddMenu = ({ Edit = false }) => {
   const navigate = useNavigate();
+  const { id } = useParams();
   const { state } = useContext(UserContext);
+
   const restoId = state.user?.resto?.id;
+
   const [form, setForm] = useState({
     title: "",
     image: "",
     price: "",
   });
-  const [curretImage, setCurretImage] = useState("");
 
+  const [curretImage, setCurretImage] = useState("");
   const [pre, setPre] = useState(Clip);
+  const [isLoading, setLoading] = useState(false);
 
   const handleChange = (e) => {
     setForm({
@@ -37,6 +40,7 @@ const AddMenu = (Edit) => {
   };
   const handleSubmit = useCallback(
     (e) => {
+      setLoading(true);
       (async () => {
         try {
           e.preventDefault();
@@ -51,7 +55,9 @@ const AddMenu = (Edit) => {
             formData.set("image", form?.image[0], form?.image[0]?.name);
           }
           formData.set("price", form.price);
-          Edit
+          console.log(!!Edit, "WHAT??");
+          console.log(Edit ? "hey" : "hoo");
+          !!Edit
             ? await API.patch("/product/" + id, formData, config)
             : await API.post("/add/product", formData, config);
           if (Edit) return navigate("/resto/" + restoId);
@@ -61,6 +67,7 @@ const AddMenu = (Edit) => {
             price: "",
           });
           setPre(Clip);
+          setLoading(false);
         } catch (err) {
           handleError(err);
         }
@@ -133,7 +140,9 @@ const AddMenu = (Edit) => {
           value={form.price}
         />
         <WrapperMain>
-          <button onClick={handleSubmit}>Save</button>
+          <button onClick={handleSubmit}>
+            {isLoading ? "Loading..." : "Save"}
+          </button>
         </WrapperMain>
       </Wrapper>
     </>

diff --git a/src/components/AddResto/index.js b/src/components/AddResto/index.js
@@ -12,11 +12,16 @@ import { useNavigate } from "react-router-dom";
 
 const AddResto = () => {
   const navigate = useNavigate();
-  const { state } = useContext(UserContext);
+
+  const { state, dispatch } = useContext(UserContext);
   const { user } = state;
+  const isResto = !!user?.resto;
+
   const [showMap, setShowMap] = useState(false);
+
+  const [isLoading, setLoading] = useState(false);
+
   const toggle = useCallback(() => setShowMap(!showMap), [showMap]);
-  const isResto = !!user?.resto;
 
   const [form, setForm] = useState({
     title: user?.resto?.title || "",
@@ -72,6 +77,7 @@ const AddResto = () => {
 
   const handleSubmit = useCallback(
     (e) => {
+      setLoading(true);
       const restoAPI = isResto ? "/resto" : "/add/resto";
       (async () => {
         try {
@@ -96,13 +102,25 @@ const AddResto = () => {
             ? `/resto/${user.resto.id}`
             : `/Resto/${res.data.data.resto.response.id}`;
 
+          if (!isResto) {
+            // Refect user new resto in global state
+            await API.get("/login")
+              .then((res) =>
+                dispatch({
+                  status: "login",
+                  payload: res.data,
+                })
+              )
+              .catch((err) => console.error(err));
+          }
+
           navigate(redirectUrl);
         } catch (err) {
           handleError(err);
         }
       })();
     },
-    [form.img, form.loc, form.title, navigate, isResto, user?.resto]
+    [form.img, form.loc, form.title, navigate, isResto, user?.resto, dispatch]
   );
 
   return (
@@ -140,14 +158,17 @@ const AddResto = () => {
               placeholder="Location"
               className="firsts"
               defaultValue={address}
+              disabled
             />
             <button className="secondbtn" onClick={toggle}>
               Select On Map
               <img src={map} alt="map" />
             </button>
           </Flex>
           <WrapperMain>
-            <button onClick={handleSubmit}>Save</button>
+            <button onClick={handleSubmit}>
+              {isLoading ? "Loading..." : "Save"}
+            </button>
           </WrapperMain>
         </Wrapper>
       </Wrappper>

diff --git a/src/components/DropDown/index.js b/src/components/DropDown/index.js
@@ -31,7 +31,7 @@ const DropDown = ({ logout, handleDropdown }) => {
                   <p>Profile Partner</p>
                 </JustWrap>
               </Link>
-              <Link to="/Add-Menu">
+              <Link to={!!user?.resto ? "/Add-Menu" : "/Resto"}>
                 <JustWrap>
                   <Icon src={foodIcon} />
                   <p>Add Menu</p>

diff --git a/src/components/EditProfile/index.js b/src/components/EditProfile/index.js
@@ -170,7 +170,8 @@ const EditProfile = () => {
             name="location"
             placeholder="Location"
             className="firsts"
-            value={response?.display_name}
+            defaultValue={response?.display_name}
+            disabled
           />
           <button className="secondbtn" onClick={toggle}>
             Select On Map

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -23,6 +23,7 @@ const Header = ({ trigger, noTroll }) => {
     return state;
   }, [state]);
   const isOwner = user?.role === "owner" ? true : false;
+  const restoId = user?.resto?.id || "";
 
   const [total, setTotal] = useState(0);
 
@@ -47,25 +48,25 @@ const Header = ({ trigger, noTroll }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [trigger, isLogin]);
 
-  const [resto, setResto] = useState(null);
+  // const [resto, setResto] = useState(null);
 
-  useEffect(() => {
-    if (!isLogin) return;
-    const controller = new AbortController();
-    const signal = controller.signal;
-    (async () => {
-      await API.get(`/resto`, { signal })
-        .then((res) => {
-          if (!res) return;
-          setResto(res.data.data.resto.data);
-        })
-        .catch((err) => {
-          handleError(err);
-        });
-    })();
-    return () => controller.abort();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLogin]);
+  // useEffect(() => {
+  //   if (!isLogin) return;
+  //   const controller = new AbortController();
+  //   const signal = controller.signal;
+  //   (async () => {
+  //     await API.get(`/resto`, { signal })
+  //       .then((res) => {
+  //         if (!res) return;
+  //         setResto(res.data.data.resto.data);
+  //       })
+  //       .catch((err) => {
+  //         handleError(err);
+  //       });
+  //   })();
+  //   return () => controller.abort();
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [isLogin]);
 
   return (
     <>
@@ -79,7 +80,7 @@ const Header = ({ trigger, noTroll }) => {
             {isLogin ? (
               <>
                 {isOwner ? (
-                  <Link className="cart" to={`/Resto/${user?.resto?.id}`}>
+                  <Link className="cart" to={`/Resto/${restoId}`}>
                     <img
                       style={{ width: "50px", height: "50px" }}
                       src={Shop}

diff --git a/src/components/LandingPage/LandingPage.styled.js b/src/components/LandingPage/LandingPage.styled.js
@@ -249,15 +249,15 @@ export const CardResto = styled.div`
   }
 `;
 export const CardNear = styled.div`
-  max-width: 245px;
-  min-width: 245px;
-  min-height: 260px;
+  width: 245px;
+  height: 295px;
   background: #ffffff;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 10px;
+  padding-bottom: 0;
   cursor: pointer;
   p {
     font-family: "serif";
@@ -278,8 +278,8 @@ export const CardNear = styled.div`
   > img {
     background: #222;
     min-width: 100%;
-    height: 160px;
     margin-bottom: 0;
+    height: 160px;
     border-radius: 5px;
   }
 
@@ -290,9 +290,11 @@ export const CardNear = styled.div`
     div {
       display: flex;
       align-items: center;
+      margin-top: 5px;
       img {
         width: 30px;
         height: 50%;
+        margin-right: 5px;
       }
       p {
         font-family: "Abhaya Libre ExtraBold";

diff --git a/src/components/LandingPage/index.js b/src/components/LandingPage/index.js
@@ -272,7 +272,7 @@ const LandingPage = () => {
                       <h3>{menu.title}</h3>
                       <div className="wrapInformation">
                         <div>
-                          <img src={menu.seller.restos.img} alt="img logo" />
+                          <img src={menu.seller.restos.img} alt="logo" />
                           <p>{menu.seller.restos.title}</p>
                         </div>
                         <div>

diff --git a/src/components/RouterSetup.js b/src/components/RouterSetup.js
@@ -53,8 +53,13 @@ const RouterSetup = () => {
             {isOwner ? (
               <>
                 <Route path="/Transaction" element={<TransactionPage />} />
-                <Route path="/Add-Menu" element={<AddMenu />} />
-                <Route path="/Edit-Menu/:id" element={<AddMenu Edit />} />
+                {!!user?.resto && (
+                  <>
+                    <Route path="/Add-Menu" element={<AddMenu />} />
+                    <Route path="/Edit-Menu/:id" element={<AddMenu Edit />} />
+                  </>
+                )}
+
                 <Route path="/Resto" element={<AddResto />} />
               </>
             ) : (

diff --git a/src/config/api.js b/src/config/api.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 
 export const API = axios.create({
-  baseURL: "http://localhost:5001/api/v1/",
+  baseURL: process.env.REACT_APP_API_ENDPOINT,
 });
 
 // export const setAuthToken = (token) => {
@@ -14,15 +14,15 @@ export const API = axios.create({
 
 export const handleError = (err) => {
   if (err.response) {
-    console.log(err.response?.data);
-    console.log(err.response?.data?.message);
-    console.log(err.response?.status);
+    console.error(err.response?.data);
+    console.error(err.response?.data?.message);
+    console.error(err.response?.status);
   }
   if (err.response?.status === 401) {
     alert(err.response.data.err);
   }
   if (err.response === 404) {
-    console.log("page not found");
+    console.info("page not found");
   } else if (err.request) {
     console.error(err.request);
     console.error(err.massage);

diff --git a/src/utils/socket.js b/src/utils/socket.js
@@ -1,9 +1,9 @@
 import { io } from "socket.io-client";
 
 const socket = (userId) => {
-  return io("http://localhost:5001", {
+  return io(process.env.REACT_APP_BE, {
     cors: {
-      origin: "http://localhost:5001",
+      origin: process.env.REACT_APP_BE,
       methods: ["GET", "POST"],
     },
     transports: ["websocket"],