Merge pull request #39 from UofA-Blueprint/ASC-95

ASC-95

src/App.tsx

@@ -26,16 +26,18 @@ import MemberProfilePictureTest from "@/routes/test/MemberProfilePictureTest";
 import AddMemberTestRoute from "@/routes/test/AddMemberTestRoute";
 import EditMemberTestRoute from "@/routes/test/EditMemberTestRoute";
 import MemberPageBackgroundTestRoute from "./routes/test/MemberPageBackgroundTestRoute";
+import MediaCardTestRoute from "./routes/test/MediaCardTestRoute";
+import ConfirmationModalTestRoute from "./routes/test/ConfirmationModalTestRoute";
 
 // routes
+// Admin
 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";
+import AdminPage from "./routes/admin/AdminPage";
+
 // User page
+import CaregiverLogin from "./routes/caregiver/CaregiverLogin";
 import MemberPage from "./routes/MemberPage";
-import ConfirmationModalTestRoute from "./routes/test/ConfirmationModalTestRoute";
 
 const router = createBrowserRouter([
 	{
@@ -164,6 +166,10 @@ const router = createBrowserRouter([
 		path: "/admin/login",
 		element: <AdminLogin />,
 	},
+	{
+		path: "/admin/members/:id",
+		element: <AdminPage />,
+	},
 
 	// Caregiver Routes
 	{

src/components/MediaCard.tsx

@@ -3,6 +3,7 @@ import { Copy, Check, WarningCircle } from "@phosphor-icons/react";
 import { useLayoutEffect, useRef, useState } from "react";
 import Button from "./Button";
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 
 interface MediaCardProps {
 	src: string;
@@ -18,13 +19,7 @@ const options: Intl.DateTimeFormatOptions = {
 	day: "numeric",
 };
 
-function MediaCard({
-	src,
-	caption,
-	date,
-	id,
-	selectable = false,
-}: MediaCardProps) {
+function MediaCard({ src, caption, date, id, selectable }: MediaCardProps) {
 	const [isEditingCaption, setIsEditingCaption] = useState(false);
 	const [newCaption, setNewCaption] = useState<string | null | undefined>(
 		caption,
@@ -85,7 +80,12 @@ function MediaCard({
 					className={clsx("object-fit rounded-t-lg")}
 				/>
 			</div>
-			<div className="bg-white p-2 rounded-b-lg flex flex-col gap-4">
+			<div
+				className={twMerge(
+					"bg-white rounded-b-lg flex flex-col gap-4 focus:outline-none",
+					isEditingCaption ? "" : "p-4",
+				)}
+			>
 				{!isEditingCaption ? (
 					<div
 						className="text-body-reg whitespace-pre-line"
@@ -94,9 +94,9 @@ function MediaCard({
 						{newCaption}
 					</div>
 				) : (
-					<div className="flex flex-col justify-center bg-neutrals-light-300">
+					<div className="flex flex-col justify-center bg-neutrals-light-300 rounded-lg">
 						<textarea
-							className="w-full bg-neutrals-light-300 p-2 resize-none overflow-hidden"
+							className="w-full bg-neutrals-light-300 p-4 resize-none overflow-hidden"
 							defaultValue={
 								newCaption || caption || "Add Text..."
 							}

src/components/MediaGrid.tsx

@@ -10,18 +10,19 @@ interface Media {
 
 interface MediaGridProps {
 	data: Media[];
-	sortOrder: "latest" | "oldest" | null; // Sorting order as a prop
+	sortOrder: string | null; // Sorting order as a prop
+	selectable: boolean;
 }
 
-function MediaGrid({ data, sortOrder }: MediaGridProps) {
+function MediaGrid({ data, sortOrder, selectable }: 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
+		? [...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 (
 		<div className="w-full h-full">

src/components/MemberHeader.tsx

@@ -1,41 +1,90 @@
-// MemberHeader.tsx
-import { ReactNode } from "react";
+//# region Imports
 import ProfilePictures from "./ProfilePictures";
 import { twMerge } from "tailwind-merge";
+import * as Icon from "@phosphor-icons/react";
+//#endregion
 
+//#region Interfaces
 interface MemberHeaderProp {
-  profilePicChildren: ReactNode;
-  backgroundColor:
-    | "tulip"
-    | "gold"
-    | "lime"
-    | "jade"
-    | "water"
-    | "air"
-    | "lilac"
-    | "candy";
-  username: string;
+	profilePicture: {
+		type: "img" | "icon" | string;
+		src: string;
+		backgroundColor?: string;
+	};
+
+	username: string;
+
+	// Optional
+	usernameExtra?: string; // Additional CSS classes for the username
+	className?: string; // Additional CSS classes for the component
 }
+//#endregion
+
+//#region helpers
+function selectIcon(type: string) {
+	const iconStyling =
+		"w-full h-full rounded-full p-2 object-cover text-white";
+	switch (type) {
+		case "PawPrint":
+			return <Icon.PawPrint className={iconStyling} />;
+		case "Tree":
+			return <Icon.Tree className={iconStyling} />;
+		case "Pizza":
+			return <Icon.Pizza className={iconStyling} />;
+		case "Camera":
+			return <Icon.Camera className={iconStyling} />;
+		case "Atom":
+			return <Icon.Atom className={iconStyling} />;
+		case "Binoculars":
+			return <Icon.Binoculars className={iconStyling} />;
+		case "SoccerBall":
+			return <Icon.SoccerBall className={iconStyling} />;
+		case "Coffee":
+			return <Icon.Coffee className={iconStyling} />;
+	}
+}
+//#endregion
 
 function MemberHeader({
-  profilePicChildren,
-  backgroundColor,
-  username,
+	profilePicture,
+	username,
+	usernameExtra,
+	className,
 }: MemberHeaderProp) {
-  return (
-    <div
-      className={twMerge("flex flex-col md:flex-row items-center w-full h-36")}
-    >
-      <div className="w-32 h-32">
-        <ProfilePictures backgroundColor={backgroundColor}>
-          {profilePicChildren}
-        </ProfilePictures>
-      </div>
-      <div className=" pl-4 font-bold justify-start flex pb-2 w-40 text-2xl ">
-        <h1>{username}</h1>
-      </div>
-    </div>
-  );
+	return (
+		<div
+			className={twMerge(
+				"flex flex-col lg:flex-row items-center w-full",
+				className,
+			)}
+		>
+			{/* Profile Picture */}
+			<ProfilePictures
+				className="w-36 md:w-44 aspect-square"
+				backgroundColor={profilePicture?.backgroundColor}
+			>
+				{profilePicture?.type === "img" ? (
+					<img
+						src={profilePicture?.src}
+						alt="profile"
+						className="w-full h-full rounded-full object-cover"
+					/>
+				) : (
+					selectIcon(profilePicture?.src as string)
+				)}
+			</ProfilePictures>
+
+			{/* Username */}
+			<div
+				className={twMerge(
+					"font-bold justify-center pt-4 md:pl-8 lg:pt-0 md:justify-start flex whitespace-nowrap font-display",
+					usernameExtra,
+				)}
+			>
+				<h1>{username}</h1>
+			</div>
+		</div>
+	);
 }
 
 export default MemberHeader;

src/components/MemberTable.tsx

@@ -1,5 +1,6 @@
 //#region imports
 import { twMerge } from "tailwind-merge";
+import { useNavigate } from "react-router-dom";
 import { UserCircle, Folder, ArrowsClockwise } from "@phosphor-icons/react";
 import * as Icon from "@phosphor-icons/react";
 
@@ -17,6 +18,7 @@ interface MemberTableProps {
 }
 
 export interface memberData {
+	id: string;
 	profilePicture: {
 		type: "img" | "icon" | string;
 		src: string;
@@ -64,8 +66,10 @@ export function MemberTable({
 	sortbyStorageUsed,
 	sortbyLastUpdated,
 }: MemberTableProps) {
+	const navigate = useNavigate();
+
 	function handleClick(row: any) {
-		alert(`Clicked ${row.name}`);
+		navigate(`/admin/members/${row.id}`);
 	}
 
 	return (

src/components/NavigationBar.tsx

@@ -43,26 +43,23 @@ export function NavigationBar({
 	function signOut() {
 		// Sign out logic for user
 		if (userType === "user") {
-
 			localStorage.removeItem("lastName");
 			localStorage.removeItem("passcode");
 			displayToast("Successfully signed out", "success");
 			setTimeout(() => {
 				navigate("/login");
 			}, 2000);
-
 		} 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");
-		});
+			});
+		}
 	}
-}
 	//#endregion
 
 	return (
@@ -91,7 +88,7 @@ export function NavigationBar({
 				<div className="space-x-[40px] flex">
 					{userType === "admin" ? (
 						<a
-							href="/dashboard"
+							href="/admin"
 							className="hover:text-primary-main hidden sm:block transition ease-in-out duration-75 font-display font-semibold"
 						>
 							Members

src/components/SearchBar.tsx

@@ -7,10 +7,11 @@ import { capitalizeSearchTerm } from "@/utils";
 interface SearchBarProps {
 	setSearch: React.Dispatch<React.SetStateAction<string>>;
 	handleClick: () => void;
+	placeholder?: string;
 }
 //#endregion
 
-function SearchBar({ setSearch, handleClick }: SearchBarProps) {
+function SearchBar({ setSearch, handleClick, placeholder }: SearchBarProps) {
 	const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
 		if (e.key === "Enter") {
 			handleClick();
@@ -20,15 +21,15 @@ function SearchBar({ setSearch, handleClick }: SearchBarProps) {
 	return (
 		<div className="flex flex-row h-full w-full">
 			<input
-				placeholder="Search by member name"
-				className="px-4 md:px-8 rounded-l-lg bg-slate-100 h-full w-full"
+				placeholder={placeholder}
+				className="px-4 md:px-8 rounded-l-xl bg-slate-100 h-full w-full"
 				onChange={(e) =>
 					setSearch(capitalizeSearchTerm(e.target.value))
 				}
 				onKeyDown={(e) => handleEnterKey(e)}
 			/>
 			<button
-				className="rounded-r-lg bg-primary-main px-3 hover:bg-primary-light cursor-pointer"
+				className="rounded-r-xl bg-primary-main px-3 hover:bg-primary-light cursor-pointer"
 				onClick={handleClick}
 			>
 				<MagnifyingGlass