Merge pull request #36 from UofA-Blueprint/ASC-44-add-member

New Modal Features & Button Touchups
UofA-Blueprint · Oct 22, 2024 · 522762c · 522762c
2 parents fd9ca14 + aec0adf
commit 522762c
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 34 deletions.
diff --git a/src/components/AddMember.tsx b/src/components/AddMember.tsx
@@ -16,15 +16,33 @@ interface AddMemberProps {
 function AddMember({ isOpen, onClose }: AddMemberProps) {
 	const [nameError, setNameError] = useState<boolean>(false);
 	const [idError, setIdError] = useState<boolean>(false);
+	const [name, setName] = useState<string>("");
+	const [id, setId] = useState<string>("");
 
 	// Content style
 	const content = "flex flex-col gap-6";
 
+	// Function to add member
+	const addMember = () => () => {
+		if (!nameError && !idError) {
+			resetAndClose();
+		}
+	};
+
+	const resetAndClose = () => () => {
+		setNameError(false);
+		setIdError(false);
+		setName("");
+		setId("");
+		onClose();
+	};
+
 	return (
 		<Modal
 			isOpen={isOpen}
-			onClose={onClose}
+			onClose={resetAndClose()}
 			title="Add Member"
+			disableCloseOnClickOutside={true}
 			content={
 				<div className={clsx(content)}>
 					<InputField
@@ -34,7 +52,7 @@ function AddMember({ isOpen, onClose }: AddMemberProps) {
 						required={true}
 						placeholder={"John Doe"}
 						setError={setNameError}
-						setInput={() => {}}
+						setInput={setName}
 					/>
 					<InputField
 						type="text"
@@ -43,7 +61,7 @@ function AddMember({ isOpen, onClose }: AddMemberProps) {
 						required={true}
 						placeholder="12345678"
 						setError={setIdError}
-						setInput={() => {}}
+						setInput={setId}
 					/>
 					<MemberProfilePicture />
 				</div>
@@ -53,7 +71,7 @@ function AddMember({ isOpen, onClose }: AddMemberProps) {
 					<Button
 						shape="medium"
 						text="Add Member"
-						onClick={onClose}
+						onClick={addMember()}
 					/>
 					{(idError || nameError) && (
 						<div className="flex flex-row justify-start items-center gap-1 text-red-500 text-body-sm">

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -57,6 +57,8 @@ function Button({
 	const disabledButton =
 		"bg-neutrals-light-500 text-neutrals-dark-200 border-transparent cursor-not-allowed";
 
+	const textStyle = "text-body-reg text-center min-w-max";
+
 	return (
 		<button
 			ref={buttonRef}
@@ -76,8 +78,8 @@ function Button({
 			)}
 			onClick={onClick}
 		>
-			{icon}
-			{text}
+			<span>{icon}</span>
+			<span className={clsx(textStyle)}>{text}</span>
 		</button>
 	);
 }

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { useEffect, useRef, useCallback } from "react";
 import { X } from "@phosphor-icons/react";
 
@@ -56,8 +57,22 @@ function Modal({
 		xl: "w-[37.5rem]",
 	};
 
+	// Background style
+	const background =
+		"fixed inset-0 flex items-center justify-center bg-black bg-opacity-25";
+
 	// Body style
-	const body = `flex flex-col p-8 gap-4 bg-neutrals-light-100 rounded-lg max-w-[80vw] max-h-[95vh] overflow-auto`;
+	const body =
+		"flex flex-col p-8 gap-4 bg-neutrals-light-100 rounded-lg max-w-[80vw] max-h-[95vh] overflow-auto scale-95";
+
+	// Transition style
+	const transition = "transition-all duration-200 ease-in-out";
+
+	// Closed style
+	const closed = "opacity-0 shadow-none pointer-events-none";
+
+	// Open style
+	const open = "opacity-100 shadow-lg pointer-events-auto scale-100";
 
 	// Header style
 	const header = "flex flex-row w-full justify-between items-center";
@@ -118,31 +133,36 @@ function Modal({
 		return () => document.removeEventListener("keydown", handleKeyDown);
 	}, [isOpen, closeable, disableCloseOnEscape, onClose]);
 
-	// Encapsulates the visibility of the modal in a prop
-	if (!isOpen) return null;
-
 	return (
 		<div
-			ref={modalRef}
-			className={clsx(body, sizes[size])}
+			className={twMerge(
+				clsx(background, closed, transition, isOpen && open),
+			)}
 		>
-			<div className={clsx(header)}>
-				<div className={clsx(headerTitle)}>
-					<i className={clsx(headerTitleIcon)}>{icon}</i>
-					<h3>{title}</h3>
-				</div>
-				{closeable && !hideCloseButton && (
-					<div
-						className={clsx(closeButton)}
-						onClick={onClose}
-					>
-						<X size={32} />
-					</div>
+			<div
+				ref={modalRef}
+				className={twMerge(
+					clsx(body, sizes[size], closed, transition, isOpen && open),
 				)}
-			</div>
-			<div className={clsx(form)}>
-				{content}
-				{actions}
+			>
+				<div className={clsx(header)}>
+					<div className={clsx(headerTitle)}>
+						<i className={clsx(headerTitleIcon)}>{icon}</i>
+						<h3>{title}</h3>
+					</div>
+					{closeable && !hideCloseButton && (
+						<div
+							className={clsx(closeButton)}
+							onClick={onClose}
+						>
+							<X size={32} />
+						</div>
+					)}
+				</div>
+				<div className={clsx(form)}>
+					{content}
+					{actions}
+				</div>
 			</div>
 		</div>
 	);

diff --git a/src/routes/admin/AdminHome.tsx b/src/routes/admin/AdminHome.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Plus, CaretDown } from "@phosphor-icons/react";
 import { ToastContainer } from "react-toastify";
+import AddMember from "@/components/AddMember";
 import "react-toastify/dist/ReactToastify.css";
 
 import { initializeApp } from "firebase/app";
@@ -67,13 +68,17 @@ export default function AdminHome() {
 	// Search
 	const [searchTerm, setSearchTerm] = useState<string>("");
 
+	// Add member modal control
+	const [isAddMemberModalOpen, setIsAddMemberModalOpen] =
+		useState<boolean>(false);
+
 	//#region functions
 	const fetchMembers = async () => {
 		const [category, order] = Object.entries(sortBy)[0];
 		try {
 			let q;
 			if (lastDoc) {
-				console.log("Fetching more members"); 
+				console.log("Fetching more members");
 				q = await getDocs(
 					query(
 						usersRef,
@@ -219,27 +224,34 @@ export default function AdminHome() {
 
 			<div className="mx-8 my-2 md:mx-16 md:my-4 flex flex-col">
 				<div className="flex flex-row">
-					<div className="w-full">
+					<div className="flex flex-col min-w-max grow">
 						<div className="text-h1">All Members</div>
 						<div className="text-body-reg text-primary-dark">
 							Total Storage Used: {totalStorageUsed} MB
 						</div>
 					</div>
-					<div className="flex items-end">
-						<div className="flex flex-row gap-4">
-							<div className="h-[3rem] w-[20rem]">
+					<div className="flex items-end justify-end grow">
+						<div className="flex flex-row gap-4 grow justify-end">
+							<div className="h-12 max-w-[20rem] grow">
 								<SearchBar
 									setSearch={setSearchTerm}
 									handleClick={searchMember}
 								/>
 							</div>
-							<div className="w-[11rem]">
+							<div className="min-w-max">
 								<Button
 									text="Add Member"
 									shape="medium"
 									icon={<Plus size={24} />}
+									onClick={() =>
+										setIsAddMemberModalOpen(true)
+									}
 								/>
 							</div>
+							<AddMember
+								isOpen={isAddMemberModalOpen}
+								onClose={() => setIsAddMemberModalOpen(false)}
+							/>
 						</div>
 					</div>
 				</div>