From d79ce4d9d70c9cf0b93fadbfa833da4bfc40fc8e Mon Sep 17 00:00:00 2001
From: Verity <veritywong90@gmail.com>
Date: Wed, 27 Sep 2023 12:07:01 +0100
Subject: [PATCH 1/3] refactored UploadWidget component

---
 api/controllers/user.js                       |   4 +-
 api/models/user.js                            |   2 +-
 frontend/public/index.html                    |   2 +-
 frontend/src/components/feed/Feed.js          |   7 +-
 .../src/components/image/UploadWidget.css     |   5 +-
 frontend/src/components/image/UploadWidget.js | 110 ++++++------------
 frontend/src/components/post/Post.js          |   2 +-
 frontend/src/components/profile/Profile.js    |  11 +-
 8 files changed, 57 insertions(+), 86 deletions(-)

diff --git a/api/controllers/user.js b/api/controllers/user.js
index ede631d..568c91d 100644
--- a/api/controllers/user.js
+++ b/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 }
       );
diff --git a/api/models/user.js b/api/models/user.js
index e05a330..2d3baf5 100644
--- a/api/models/user.js
+++ b/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
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 3013aa4..2d2ae76 100644
--- a/frontend/public/index.html
+++ b/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.
diff --git a/frontend/src/components/feed/Feed.js b/frontend/src/components/feed/Feed.js
index c1755b4..4583982 100644
--- a/frontend/src/components/feed/Feed.js
+++ b/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>
diff --git a/frontend/src/components/image/UploadWidget.css b/frontend/src/components/image/UploadWidget.css
index c9ba326..e641bf6 100644
--- a/frontend/src/components/image/UploadWidget.css
+++ b/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 {
diff --git a/frontend/src/components/image/UploadWidget.js b/frontend/src/components/image/UploadWidget.js
index 7e798f3..f02e129 100644
--- a/frontend/src/components/image/UploadWidget.js
+++ b/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>
   );
diff --git a/frontend/src/components/post/Post.js b/frontend/src/components/post/Post.js
index 628d76a..45a6e47 100644
--- a/frontend/src/components/post/Post.js
+++ b/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);
diff --git a/frontend/src/components/profile/Profile.js b/frontend/src/components/profile/Profile.js
index 70f615a..c8cf2f0 100644
--- a/frontend/src/components/profile/Profile.js
+++ b/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)
         });
       fetchPosts();
     } else {
@@ -55,16 +58,16 @@ 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 username={username} />
+       
+        <UploadWidget image={image} />
 
         <div data-cy="post" id="feed" role="feed">
           {posts
-            .slice()
             .reverse()
             .filter((post) => post.userId === profileID)
             .map((post) => {

From ed67ed6d7f2039116b848caa5822c8f530aac26b Mon Sep 17 00:00:00 2001
From: Verity <veritywong90@gmail.com>
Date: Wed, 27 Sep 2023 16:58:08 +0100
Subject: [PATCH 2/3] use state for image updated to render default image if
 none in database

---
 frontend/src/components/profile/Profile.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/profile/Profile.js b/frontend/src/components/profile/Profile.js
index c8cf2f0..5bfe834 100644
--- a/frontend/src/components/profile/Profile.js
+++ b/frontend/src/components/profile/Profile.js
@@ -33,7 +33,7 @@ const Profile = ({ navigate, params }) => {
           setLastName(data.user.lastName);
           setUserName(data.user.userName);
           setProfileID(data.user.userId);
-          setImage(data.user.imageUrl)
+          setImage(data.user.imageUrl || defaultImage)
         });
       fetchPosts();
     } else {
@@ -66,12 +66,12 @@ const Profile = ({ navigate, params }) => {
        
         <UploadWidget image={image} />
 
-        <div data-cy="post" id="feed" role="feed">
+        <div data-cy="post" id="feed" role="feed" >
           {posts
             .reverse()
             .filter((post) => post.userId === profileID)
             .map((post) => {
-              return <Post post={post} showImage={false}/>;
+              return <Post post={post} showImage={false} key={post._id}/>;
             })}
         </div>
       </>

From 6e2363f9a787370aaef9d3223896465a86b3579d Mon Sep 17 00:00:00 2001
From: Verity <veritywong90@gmail.com>
Date: Fri, 29 Sep 2023 17:08:50 +0100
Subject: [PATCH 3/3] gitignore updated

---
 .gitignore          | 3 +++
 frontend/.gitignore | 1 +
 2 files changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index 2b521d8..290e511 100644
--- a/.gitignore
+++ b/.gitignore
@@ -63,3 +63,6 @@ typings/
 # cypress.io
 frontend/cypress/screenshots
 frontend/cypress/videos
+
+# cloudinary
+cloudinary.config.js
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 1111bc1..2d00a32 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -23,3 +23,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+