refactored UploadWidget component

.gitignore

@@ -63,3 +63,6 @@ typings/
 # cypress.io
 frontend/cypress/screenshots
 frontend/cypress/videos
+
+# cloudinary
+cloudinary.config.js

api/controllers/user.js

@@ -24,7 +24,7 @@ const UserController = {
           firstName: user.firstName,
           lastName: user.lastName,
           userName: user.userName,
-          imageUrl: user.imageUrl
+          imageUrl: user.imageUrl,
         };
         res.status(200).json({ user: foundUser, token: token });
       }
@@ -37,7 +37,7 @@ const UserController = {
 
     try {
       const updatedUser = await User.findOneAndUpdate(
-        { _id: userId  },
+        { _id: userId },
         { imageUrl: imageUrl },
         { new: true }
       );

api/models/user.js

@@ -7,7 +7,7 @@ const UserSchema = new mongoose.Schema({
   firstName: { type: String, required: true },
   lastName: { type: String, required: true },
   userName: { type: String, required: true },
-  imageUrl: { type: String },
+  imageUrl: { type: String }
 
 });
 // Before saving the user, hash the password if it has been modified

frontend/.gitignore

@@ -23,3 +23,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

frontend/public/index.html

@@ -15,7 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+    <!--`
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.

frontend/src/components/feed/Feed.js

@@ -26,11 +26,12 @@ const Feed = ({ navigate }) => {
         }
       })
       const data = await response.json();
+
       window.localStorage.setItem("token", data.token);
       setToken(window.localStorage.getItem("token"));
-      console.log(data)
+      // console.log(data)
       setPosts(data.posts);
-      console.log(data.posts);
+      // console.log(data.posts);
   }
 
   const saveNewPost = async () => {
@@ -80,7 +81,7 @@ const Feed = ({ navigate }) => {
         <div id='feed' role="feed">
           {
             posts.slice().reverse().map((post) => {
-              return <Post post={ post } showImage={true}/>
+              return <Post post={ post } showImage={true} key={post._id}/>
             })
           }
         </div>

frontend/src/components/image/UploadWidget.css

@@ -1,6 +1,7 @@
 #container {
-    display: flex;
-    justify-content: center;
+    display: block;
+    margin: 0 auto;
+    text-align: center;
 }
 
 #image {

frontend/src/components/image/UploadWidget.js

@@ -1,101 +1,67 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
 import jwtDecode from "jwt-decode";
 import "./UploadWidget.css";
 
-const UploadWidget = ({ username }) => {
-  const [token, setToken] = useState(window.localStorage.getItem("token"));
+const UploadWidget = ({image}) => {
+  const token = window.localStorage.getItem("token");
   const userId = jwtDecode(token).user_id;
   const cloudinaryRef = useRef();
   const widgetRef = useRef();
-  const defaultImage =
-    "https://www.gravatar.com/avatar/00000000000000000000000000000000?s=100&d=mp";
   const [userImageUrl, setUserImageUrl] = useState("");
 
-  useEffect(() => {
-    // console.log({username})
-    if (token) {
-      fetch(`/user?username=${username}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          window.localStorage.setItem("token", data.token);
-          setToken(window.localStorage.getItem("token"));
-          setUserImageUrl(data.user.imageUrl || defaultImage);
-          // console.log(data.user.imageUrl)
-        });
-    }
-  }, []);
-
-  useEffect(() => {
-    cloudinaryRef.current = window.cloudinary;
-    widgetRef.current = cloudinaryRef.current.createUploadWidget(
-      {
-        cloudName: "dzdwjdv7d",
-        uploadPreset: "cdnf3xhm",
-      },
-      function (error, result) {
-        if (!error && result && result.event === "success") {
-          // console.log(result.info.secure_url);
-          const databaseImage = result.info.secure_url;
-          if (databaseImage !== "" || databaseImage !== undefined) {
-            setUserImageUrl(databaseImage);
-          } else {
-            setUserImageUrl(defaultImage);
-          }
-        }
+  cloudinaryRef.current = window.cloudinary;
+  widgetRef.current = cloudinaryRef.current.createUploadWidget(
+    {
+      cloudName: "dzdwjdv7d",
+      uploadPreset: "cdnf3xhm",
+    },
+    async function (error, result) {
+      if (!error && result && result.event === "success") {
+        const imageUrl = await result.info.secure_url;
+        setUserImageUrl(imageUrl)
+        saveImageUrl(imageUrl)
       }
-    );
-  }, []);
-
-  useEffect(() => {
-    if (userImageUrl) {
-      saveImageUrl();
     }
-  }, [userImageUrl]);
+  );
 
   const openWidget = () => {
     widgetRef.current.open();
   };
 
-  const saveImageUrl = async () => {
-    try {
-      const response = await fetch(`/user`, {
-        method: "PATCH",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          userId: userId,
-          imageUrl: userImageUrl,
-        }),
-      });
-      if (response.ok) {
+  const saveImageUrl = async (url) => {
+    if (token) {
+      try {
+        await fetch(`/user`, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            userId: userId,
+            imageUrl: url,
+          }),
+        });
+
         console.log("URL saved in the database");
-        // setImageSaved(true);
-      } else {
-        console.log("Error saving URL in the database");
+      } catch (error) {
+        console.log("Error saving URL in the database", error);
       }
-    } catch (error) {
-      console.log("Error saving URL in the database", error);
     }
+
   };
 
   return (
     <div id="container">
-      <div id="image">
-        <img
-          src={userImageUrl}
+      <div className="profile-image">
+       <img
+          src={userImageUrl || image}
           alt=""
           style={{ maxWidth: "600px", maxHeight: "400px" }}
         />
-
-        <div id="button">
+      </div>
+      <div id="image-upload-button">
           <button onClick={openWidget}>Upload Image</button>
-        </div>
       </div>
     </div>
   );

frontend/src/components/post/Post.js

@@ -12,7 +12,7 @@ const Post = ({ post, navigate, showImage }) => {
 
   const [likes, setLikes] = useState(post.likes);
   // const [isLiked, setIsLiked] = useState(false);
-
+  
   useEffect(() => {
     if (token) {
       //setUserID(jwtDecode(token).user_id);

frontend/src/components/profile/Profile.js

@@ -12,8 +12,10 @@ const Profile = ({ navigate, params }) => {
   const [lastName, setLastName] = useState("");
   const [token, setToken] = useState(window.localStorage.getItem("token"));
   const [posts, setPosts] = useState([]);
-  const [userID, setUserID] = useState("");
   const [profileID, setProfileID] = useState("");
+  const [image, setImage] = useState("");
+  const defaultImage =
+    "https://www.gravatar.com/avatar/00000000000000000000000000000000?s=100&d=mp";
 
   useEffect(() => {
     if (token) {
@@ -31,6 +33,7 @@ const Profile = ({ navigate, params }) => {
           setLastName(data.user.lastName);
           setUserName(data.user.userName);
           setProfileID(data.user.userId);
+          setImage(data.user.imageUrl || defaultImage)
         });
       fetchPosts();
     } else {
@@ -55,20 +58,20 @@ const Profile = ({ navigate, params }) => {
     return (
       <>
         <Navbar navigate={ navigate }/>
+
         <div id="profile" data-cy="profile">
           <h2>Profile Page</h2>
           <h3>{`${firstName} ${lastName}`} (@{userName})</h3>
         </div>
+
+        <UploadWidget image={image} />
 
-        <UploadWidget username={username} />
-
-        <div data-cy="post" id="feed" role="feed">
+        <div data-cy="post" id="feed" role="feed" >
           {posts
-            .slice()
             .reverse()
             .filter((post) => post.userId === profileID)
             .map((post) => {
-              return <Post post={post} showImage={false}/>;
+              return <Post post={post} showImage={false} key={post._id}/>;
             })}
         </div>
       </>