Display user saved images (#123)

* images saved by user now shown in gallery component * UI change
csci-499-sp24 · May 8, 2024 · 4fea5cf · 4fea5cf
1 parent 220d480
commit 4fea5cf
Showing 1 changed file with 55 additions and 25 deletions.
diff --git a/client/pages/profile/index.js b/client/pages/profile/index.js
@@ -5,7 +5,7 @@ import RHeader from "@/components/header";
 import UpdateUsername from "@/components/changeusername";
 import { Button, Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input } from "reactstrap";
 import ChangePassword from "@/components/changepassword";
-
+import FilesApi from "@/Api/FilesApi";
 
 const ProfileCard = () => {
 
@@ -15,6 +15,8 @@ const ProfileCard = () => {
   const [showUpdateUsername, setShowUpdateUsername] = useState(false);
   const [imagesExpanded, setImagesExpanded] = useState(false);
   const imagesContainerRef = useRef(null); 
+  const [images, setImages] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   const toggleImagesExpanded = () => {
     setImagesExpanded(!imagesExpanded);
@@ -48,7 +50,41 @@ const ProfileCard = () => {
 
     fetchUsername();
     }, []);
-const toggleUpdateUsernameModal = () => {
+
+    useEffect(() => {
+      const fetchImages = async () => {
+          const userId = sessionStorage.getItem('uid');
+          const response = await FilesApi.get(`/user/${userId}`);
+          setImages(response.data);
+          setLoading(false);
+      };
+
+      fetchImages();
+    }, []);
+
+    const renderImages = () => {
+      if (loading) {
+        return <div>Loading...</div>;
+      }
+
+      if (images.length === 0) {
+        // If no images found for the user, render default image
+        return (
+          <div className="w-64 h-32 bg-gray-200 m-2 rounded-md flex items-center justify-center">
+            <span>No images found</span>
+          </div>
+        );
+      }
+
+      return images.map((image) => (
+        <div key={image._id} className="w-70 h-32 m-2 rounded-md overflow-hidden">
+          <img src={image.fileURL} alt={`Image ${image._id}`} className="w-full h-full object-cover" />
+        </div>
+      ));
+    };
+
+
+  const toggleUpdateUsernameModal = () => {
         setModalOpen(!modalOpen);
       };
 
@@ -59,7 +95,19 @@ const toggleUpdateUsernameModal = () => {
         <RHeader/>
 
       <div className="p-8 bg-white shadow mt-24">
-        <div className="grid grid-cols-1 md:grid-cols-3">
+
+        <div className="mt-40 text-center border-b pb-12">
+
+          <div className="px-25 display-flex place-content-center w-48 h-48 bg-indigo-100 mx-auto rounded-full shadow-2xl -mt-24 mb-4 flex items-center justify-center text-indigo-500">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-24 w-24" viewBox="0 0 20 20" fill="#B8860B">
+              <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <h1 className="text-4xl font-medium text-gray-700 mb-5">
+                {username}
+          </h1>
+
+          <div className="grid grid-cols-1 md:grid-cols-3">
           <div className="grid grid-cols-3 text-center order-last md:order-first mt-20 md:mt-0"></div>
           <div className="place-content-center"></div>
           <div className="space-x-8 flex justify-between mt-32 md:mt-0 md:justify-center">
@@ -72,16 +120,6 @@ const toggleUpdateUsernameModal = () => {
                         </div>
           </div>
         </div>
-        <div className="mt-40 text-center border-b pb-12">
-
-          <div className="px-25 display-flex place-content-center w-48 h-48 bg-indigo-100 mx-auto rounded-full shadow-2xl -mt-24 mb-4 flex items-center justify-center text-indigo-500">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-24 w-24" viewBox="0 0 20 20" fill="#B8860B">
-              <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
-            </svg>
-          </div>
-          <h1 className="text-4xl font-medium text-gray-700">
-                {username}
-          </h1>
           <p className="mt-8 text-gray-500"><b>Enjoy Stylizing your best Selfies</b></p>
           <p className="mt-2 text-gray-500"><b>FaceStylizer is a Non-Profit Organization</b></p>
         </div>
@@ -97,16 +135,8 @@ const toggleUpdateUsernameModal = () => {
           </button>
           {imagesExpanded && (
             <div className="mt-4">
-              <div className="flex flex-wrap justify-center">
-                <div className="w-32 h-32 bg-gray-200 m-2 rounded-md flex items-center justify-center">
-                  <span>Image 1</span>
-                </div>
-                <div className="w-32 h-32 bg-gray-200 m-2 rounded-md flex items-center justify-center">
-                  <span>Image 2</span>
-                </div>
-                <div className="w-32 h-32 bg-gray-200 m-2 rounded-md flex items-center justify-center">
-                  <span>Image 3</span>
-                </div>
+              <div className="flex flex-wrap flex-col items-center justify-center">
+                {renderImages()}
               </div>
             </div>
           )}
@@ -115,10 +145,10 @@ const toggleUpdateUsernameModal = () => {
 
           <button
             onClick={handleNavigateHome}
-             className="mt-5 rounded-sm py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white focus:shadow-outline focus:outline-none animate-bounce text-base flex items-center justify-center"
+             className="mt-5 rounded-sm py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white focus:shadow-outline focus:outline-none text-base flex items-center justify-center"
             style={{ maxWidth: "100px", overflow: "hidden", margin: "0 auto" }}
           >
-            FaceStylize
+            FaceStylizer
           </button>
         </div>
       </div>