Merge pull request #38 from UofA-Blueprint/ASC-94-page-member

Added member page (caregiver)

src/App.tsx

@@ -31,9 +31,10 @@ import MemberPageBackgroundTestRoute from "./routes/test/MemberPageBackgroundTes
 import AdminLogin from "./routes/admin/AdminLogin";
 import AdminHome from "./routes/admin/AdminHome";
 // import Admin
-
 import CaregiverLogin from "./routes/caregiver/CaregiverLogin";
 import MediaCardTestRoute from "./routes/test/MediaCardTestRoute";
+// User page
+import MemberPage from "./routes/MemberPage";
 import ConfirmationModalTestRoute from "./routes/test/ConfirmationModalTestRoute";
 
 const router = createBrowserRouter([
@@ -149,6 +150,10 @@ const router = createBrowserRouter([
 		path: "/member-background-test",
 		element: <MemberPageBackgroundTestRoute />,
 	},
+	{
+		path: "/",
+		element: <MemberPage />,
+	},
 
 	// Admin Routes
 	{

src/components/Gallery.tsx

@@ -1,110 +1,29 @@
-import React, { useState, useEffect } from "react";
+//#region Imports
 import { CaretLeft } from "@phosphor-icons/react";
 import MediaUploadZone from "./MediaUploadZone";
-import { getStorage, ref, uploadBytesResumable, listAll, getDownloadURL } from "firebase/storage";
-import Button from "@/components/Button";
-import MediaUploadStatus from "./MediaUploadStatus";
-
-interface FileUploadStatus {
-	file: File;
-	progress: number;
-}
+import picture from "@/assets/images/pic1.jpg";
+//#endregion
 
 function Gallery() {
-	const [uploads, setUploads] = useState<FileUploadStatus[]>([]);
-	const [imgList, setImgList] = useState<string[]>([]);
-
-	// Create a root reference
-	const storage = getStorage();
+	//TODO: Configure the local gallery to display images here
+	const imgList: string[] = [picture, picture, picture, picture, picture];
 
-	/**
-	 * Extract current pictures in /images inside firebase storage
-	 */
-	const displayImages = async () => {
-		const listRef = ref(storage, "/images"); 
-		try {
-			const res = await listAll(listRef);
-			const imageUrls = await Promise.all(
-				res.items.map((itemRef) => getDownloadURL(itemRef))
-			);
-			setImgList(imageUrls);
-		} catch (error) {
-			console.error("Error displaying images: ", error);
-		}
-	};
+	//#region Functions
 
 	/**
 	 * Close the gallery
 	 */
 	const handleClose = () => {};
 
-	// Useeffect to call the function to fetch images on component mount
-	useEffect(() => {
-		displayImages(); // 
-	}, []);
-
 	/**
 	 * Handle an image in the gallery being clicked
 	 */
 	const handleImageClicked = () => {};
 
-	// Function to handle adding files and simulate 1-second upload process
-	const handleFilesAdded = (files: File[]) => {
-		files.forEach((file) => {
-			// Create a new upload status object
-			const newUpload: FileUploadStatus = {
-				file,
-				progress: 0, 
-			};
-
-			// Add the new upload to the uploads state
-			setUploads((prevUploads) => [...prevUploads, newUpload]);
-
-			// Create a reference to where the file will be stored
-			const fileRef = ref(storage, `images/${file.name}`);
-
-			// Create a file upload task
-			const uploadTask = uploadBytesResumable(fileRef, file);
-
-			// Monitor the file upload progress
-			uploadTask.on(
-				"state_changed",
-				(snapshot) => {
-					const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
-					console.log(`Upload is ${progress}% done`);
-
-					// Update the progress state for the UI
-					setUploads((prevUploads) =>
-						prevUploads.map((prevUpload) =>
-							prevUpload.file.name === file.name
-								? { ...prevUpload, progress }
-								: prevUpload
-						)
-					);
-				},
-				(error) => {
-					// Handle errors
-					console.error("Upload failed", error);
-				},
-				async () => {
-					try {
-						const downloadURL = await getDownloadURL(fileRef);
-						console.log("File available at", downloadURL);
-
-						// Add the download URL to the image list
-						setImgList((prevImgList) => [...prevImgList, downloadURL]);
-
-
-					} catch (error) {
-						console.error("Error getting download URL:", error);
-					}
-				}
-			);
-		});
-	};
+	//#endregion
 
 	return (
-		<div className="flex flex-col items-center justify-center gap-y-6 max-w-5xl px-6 rounded-xl py-8 bg-white w-5/6">
+		<div className="flex flex-col items-center justify-center gap-y-6 max-w-5xl px-6 rounded-xl py-8 bg-white">
 			{/* Title */}
 			<div className="w-full">
 				<div className="flex gap-x-2 items-center font-display text-2xl font-bold">
@@ -118,20 +37,16 @@ function Gallery() {
 			</div>
 
 			{/* Image gallery */}
-			<div className={`grid h-96 w-full grid-cols-2 md:grid-cols-4 gap-6 items-center overflow-y-auto scroller min-h-[24rem]`}>
-				{imgList.length > 0 ? (
-					imgList.map((img, index) => (
-						<img
-							key={index}
-							src={img}
-							alt="gallery"
-							className="w-56 aspect-square rounded-xl cursor-pointer hover:scale-95 transition ease-in-out duration-200"
-							onClick={handleImageClicked}
-						/>
-					))
-				) : (
-					<p className="col-span-full text-center text-gray-500">No images available</p>
-				)}
+			<div className=" grid h-96 w-full grid-cols-2 md:grid-cols-4 gap-6 items-center overflow-y-auto scroller">
+				{imgList.map((img, index) => (
+					<img
+						key={index}
+						src={img}
+						alt="gallery"
+						className="w-56 aspect-square rounded-xl cursor-pointer hover:scale-95 transition ease-in-out duration-200"
+						onClick={handleImageClicked}
+					/>
+				))}
 			</div>
 
 			{/* Or */}
@@ -143,37 +58,7 @@ function Gallery() {
 
 			{/* Upload media */}
 			<h2 className="w-full text-xl">Upload Media</h2>
-			<MediaUploadZone onFilesAdded={handleFilesAdded} />
-
-			{/* Display upload status */}
-			<div className="w-full flex flex-col gap-4 mt-4">
-				{uploads.map((upload, index) => (
-					<MediaUploadStatus
-						key={index}
-						fileName={upload.file.name}
-						fileSize={upload.file.size}
-						uploadProgress={upload.progress}
-						setUploadProgress={() => {}}
-					/>
-				))}
-			</div>
-
-			{/* Buttons */}
-			<div className="flex flex-row gap-5 w-full">
-				<Button
-					onClick={() => {}}
-					text={"Cancel"}
-					rounded={false}
-					fill={false}
-					className="text-red-600 border-red-600 active:bg-red-600 active:text-red-600 before:bg-red-600 w-2/5"
-				/>
-				<Button
-					onClick={() => {}}
-					disabled={false}
-					text="Add Picture"
-					className="w-3/5"
-				/>
-			</div>
+			<MediaUploadZone />
 		</div>
 	);
 }

src/components/MediaGrid.tsx

@@ -1,19 +1,38 @@
 import { Masonry } from "masonic";
 import MediaCard from "./MediaCard";
 
+interface Media {
+	src: string;
+	caption: string;
+	id: number;
+	date: Date;
+}
+
 interface MediaGridProps {
 	data: Media[];
+	sortOrder: "latest" | "oldest" | null; // Sorting order as a prop
 }
 
-function MediaGrid({ data }: MediaGridProps) {
+function MediaGrid({ data, sortOrder }: MediaGridProps) {
+	// Sort data based on sortOrder
+	const sortedData = sortOrder
+    ? [...data].sort((a, b) => {
+        return sortOrder === "latest" 
+          ? b.date.getTime() - a.date.getTime() // Descending for latest
+          : a.date.getTime() - b.date.getTime(); // Ascending for oldest
+      })
+    : data; // Use default order if sortOrder is null
+
 	return (
-		<Masonry
-			items={data}
-			render={MasonryItem}
-			columnGutter={12}
-			columnWidth={320}
-			overscanBy={5}
-		/>
+		<div className="w-full h-full">
+			<Masonry
+				items={sortedData}
+				render={MasonryItem}
+				columnGutter={12}
+				columnWidth={320}
+				overscanBy={5}
+			/>
+		</div>
 	);
 }
 

src/components/MemberHeader.tsx

@@ -31,7 +31,7 @@ function MemberHeader({
           {profilePicChildren}
         </ProfilePictures>
       </div>
-      <div className=" pl-2 font-bold justify-center flex pb-2 w-20">
+      <div className=" pl-4 font-bold justify-start flex pb-2 w-40 text-2xl ">
         <h1>{username}</h1>
       </div>
     </div>

src/components/NavigationBar.tsx

@@ -42,27 +42,27 @@ export function NavigationBar({
 	//#region Functions
 	function signOut() {
 		// Sign out logic for user
-		if (
-			localStorage.getItem("lastName") &&
-			localStorage.getItem("passcode")
-		) {
+		if (userType === "user") {
+
 			localStorage.removeItem("lastName");
 			localStorage.removeItem("passcode");
 			displayToast("Successfully signed out", "success");
 			setTimeout(() => {
 				navigate("/login");
 			}, 2000);
-		}
 
-		// Sign out logic for admin
-		auth.signOut().then(() => {
-			displayToast("Successfully signed out", "success");
-			setTimeout(() => {
+		} else if (userType === "admin") {
+
+			// Sign out logic for admin
+			auth.signOut().then(() => {
+				displayToast("Successfully signed out", "success");
+				setTimeout(() => {
+					navigate("/admin/login");
+				}, 2000);
 				navigate("/admin/login");
-			}, 2000);
-			navigate("/admin/login");
 		});
 	}
+}
 	//#endregion
 
 	return (