fixed nits and styling bugs (#148)

* fixed nits and styling bugs * Fix error popup * Remove log --------- Co-authored-by: nickbar01234 <[email protected]>
JumboCode · Apr 9, 2024 · 820221b · 820221b
1 parent 8ab1f3e
commit 820221b
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 130 deletions.
diff --git a/src/app/private/[uid]/user/seniors/SeniorsHomePage.tsx b/src/app/private/[uid]/user/seniors/SeniorsHomePage.tsx
@@ -1,17 +1,18 @@
 "use client";
 
 import { UserTile } from "@components/TileGrid";
-import { Senior, User } from "@prisma/client";
+import { Prisma, Senior, User } from "@prisma/client";
 import SearchableContainer from "@components/SearchableContainer";
 import { seniorFullName } from "@utils";
 
+type UserWithSeniors = Prisma.UserGetPayload<{ include: { Seniors: true } }>;
+
 type SeniorsHomePageProps = {
-  seniors: Senior[];
-  user: User;
+  user: UserWithSeniors;
 };
 
-const SeniorsHomePage = ({ seniors, user }: SeniorsHomePageProps) => {
-  const displaySeniors = (elem: Senior, index: number) => (
+const SeniorsHomePage = ({ user }: SeniorsHomePageProps) => {
+  const displaySeniors = (elem: Senior) => (
     <UserTile
       key={elem.id}
       senior={elem}
@@ -22,11 +23,11 @@ const SeniorsHomePage = ({ seniors, user }: SeniorsHomePageProps) => {
   return (
     <>
       <h1 className="font-merriweather pb-6 text-3xl">
-        {`My Assigned Seniors (${seniors.length})`}
+        {`My Assigned Seniors (${user.Seniors.length})`}
       </h1>
       <SearchableContainer
         display={displaySeniors}
-        elements={seniors}
+        elements={user.Seniors}
         emptyNode={
           <h1 className="text-2xl font-light">
             {"You haven't been assigned a Senior yet."}

diff --git a/src/app/private/[uid]/user/seniors/page.tsx b/src/app/private/[uid]/user/seniors/page.tsx
@@ -12,9 +12,7 @@ const UserSeniorsPage = async ({ params }: { params: { uid: string } }) => {
     },
   });
 
-  const seniors = user.Seniors;
-
-  return <SeniorsHomePage seniors={seniors} user={user} />;
+  return <SeniorsHomePage user={user} />;
 };
 
 export default UserSeniorsPage;
diff --git a/src/components/container/Popup.tsx b/src/components/container/Popup.tsx
@@ -6,9 +6,9 @@ interface PopupProps {
 
 const Popup = (props: PopupProps) => {
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
+    <div className="fixed left-0 top-0 z-50 h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
       <div
-        className={`flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9 ${
+        className={`absolute left-1/2 top-1/2 flex h-48 w-[30rem] -translate-x-1/2 -translate-y-1/2 flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9 ${
           props.className ?? ""
         }`}
         onClick={props.onClick}

diff --git a/src/components/senior/DisplaySenior.tsx b/src/components/senior/DisplaySenior.tsx
@@ -31,7 +31,6 @@ const DisplaySenior = (props: DisplayProps) => {
     students.filter((student) => senior.StudentIDs.includes(student.id));
 
   const [assigned, setAssigned] = React.useState(() => getAssignments());
-  console.log(assigned);
   const onSave = async () => {
     await patchSenior({
       body: {
@@ -62,7 +61,9 @@ const DisplaySenior = (props: DisplayProps) => {
       />
       <SearchableContainer
         display={(file) => <File key={file.id} file={file} />}
-        elements={senior.Files}
+        elements={senior.Files.sort(
+          (fileA, fileB) => fileA.date.getTime() - fileB.date.getTime()
+        )}
         search={(file, filter) => formatFileDate(file.date).includes(filter)}
         addElementComponent={
           canAddFile ? (

diff --git a/src/components/user/AddFile.tsx b/src/components/user/AddFile.tsx
@@ -9,6 +9,7 @@ import { File as PrismaFile } from "@prisma/client";
 import { Popup } from "@components/container";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/navigation";
 
 type AddFileProps = {
   showAddFilePopUp: boolean;
@@ -32,7 +33,7 @@ const TagOptions = ({
           <input
             type="checkbox"
             id={tag.name}
-            className="size-40 peer my-5 hidden"
+            className="size-40 my-5 hidden"
             onClick={() => {
               if (!selectedTags.includes(tag) && selectedTags.length < 3) {
                 setSelectedTags([...selectedTags, tag]);
@@ -41,22 +42,17 @@ const TagOptions = ({
               }
             }}
           />
-          {!selectedTags.includes(tag) && (
-            <label
-              htmlFor={tag.name}
-              className="m-2 ml-[-2px] inline-block rounded-full border-2 p-2 hover:bg-white hover:text-[#22555A]"
-            >
-              {tag.name}
-            </label>
-          )}
-          {selectedTags.includes(tag) && (
-            <label
-              htmlFor={tag.name}
-              className="m-2 ml-[-2px] inline-block rounded-full border-2 bg-white p-2 text-[#22555A]"
-            >
-              {tag.name}
-            </label>
-          )}
+          <label
+            htmlFor={tag.name}
+            className={`${
+              selectedTags.includes(tag)
+                ? "bg-white text-[#22555A]"
+                : "hover:bg-white hover:text-[#22555A]"
+            } m-2 ml-[-2px] inline-block rounded-full border-2 
+            p-2`}
+          >
+            {tag.name}
+          </label>
         </div>
       ))}
     </div>
@@ -91,23 +87,17 @@ const AddFile = ({
   setShowAddFilePopUp,
   seniorId,
   files,
-  folder,
 }: AddFileProps) => {
   const currFiles = Object.values(files);
   const excludeDates = currFiles.map((fileObj) => fileObj.date);
   const excludedDatesString = excludeDates.map((dateObj) =>
     dateObj.toDateString()
   );
 
-  const startDate_ = new Date();
+  const [startDate, setStartDate] = useState(new Date());
 
-  while (excludedDatesString.includes(startDate_.toDateString())) {
-    startDate_.setDate(startDate_.getDate() + 1);
-  }
-
-  const [startDate, setStartDate] = useState(startDate_);
-
-  const [confirm, setConfirm] = useState<boolean>(false);
+  const router = useRouter();
+  const [fetching, setFetching] = React.useState(false);
   const [error, setError] = useState<boolean>(false);
   const [selectedTags, setSelectedTags] = useState<TagProps[]>([]);
 
@@ -116,6 +106,11 @@ const AddFile = ({
   };
 
   const callAddFile = async () => {
+    if (fetching) {
+      return;
+    }
+
+    setFetching(true);
     const response = await createFile({
       body: {
         date: startDate,
@@ -125,102 +120,88 @@ const AddFile = ({
         seniorId: seniorId,
       },
     });
+    setFetching(false);
 
-    if (response.code == "SUCCESS") {
-      setConfirm(true);
+    if (response.code === "SUCCESS") {
+      router.refresh();
     } else {
       setError(true);
     }
   };
 
-  return (
-    <>
-      {showAddFilePopUp && (
-        <Popup className="h-fit w-[36rem]">
-          {!confirm && !error ? (
-            <div className="flex flex-col justify-between rounded-[16px] text-white">
-              <div className="mb-5 mt-4 text-3xl font-bold">
-                {" "}
-                Create New File{" "}
-              </div>
-              <div className="text-neutral-600 mb-3 h-[34px] w-full text-2xl font-thin">
-                Select Date
-              </div>
-              <div className="inline-bl w-full">
-                <div className="text-2xl text-[#22555A]">
-                  <DatePicker
-                    showIcon
-                    icon={
-                      <FontAwesomeIcon
-                        icon={faCalendar}
-                        className="text-dark-teal"
-                      />
-                    }
-                    wrapperClassName="w-full relative"
-                    calendarIconClassname="text-3xl text-blue-600 mt-[7px] absolute right-2"
-                    className="mb-4 h-16 w-full cursor-pointer rounded-lg pl-4"
-                    selected={startDate}
-                    onChange={(date) => date && setStartDate(date)}
-                    dateFormat="dd MMMM yyyy"
-                    excludeDates={excludeDates}
-                  />
-                </div>
-              </div>
-              <TagSelector
-                selectedTags={selectedTags}
-                setSelectedTags={setSelectedTags}
-              />
-              <div className="flex w-full flex-row justify-center">
-                <button
-                  className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] bg-white p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white"
-                  onClick={handleCancel}
-                >
-                  Cancel
-                </button>
-                <button
-                  className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white enabled:bg-white disabled:bg-gray-500 disabled:text-gray-700"
-                  disabled={selectedTags.length == 0}
-                  onClick={callAddFile}
-                >
-                  Create
-                </button>
-              </div>
-            </div>
-          ) : (
-            <>
-              {confirm ? (
-                <div className="h-[250px] max-w-[35%] flex-col place-content-center gap-y-10 self-center rounded-lg bg-white p-10 text-center text-lg">
-                  <span>File added successfully!</span>
-                  <div className="flex w-full flex-row justify-center">
-                    <button
-                      className="bg-legacy-teal text-md mx-1 w-full max-w-[10rem] rounded p-3 font-serif font-normal text-white hover:bg-dark-teal"
-                      onClick={() => setShowAddFilePopUp(false)}
-                    >
-                      Confirm
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div className="flex h-[250px] max-w-[35%] flex-col place-content-center gap-y-10 self-center rounded-lg bg-white p-10 text-center text-lg">
-                  <span>
-                    There was an error adding your file. Please reach out to
-                    your club administrator for assistance.
-                  </span>
-                  <div className="flex w-full flex-row justify-center">
-                    <button
-                      className="bg-legacy-teal text-md disabled: mx-1 w-full max-w-[10rem] rounded p-3 font-serif font-normal text-white hover:bg-dark-teal"
-                      onClick={() => setShowAddFilePopUp(false)}
-                    >
-                      Confirm
-                    </button>
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </Popup>
-      )}
-    </>
+  if (!showAddFilePopUp) {
+    return null;
+  }
+
+  return !error ? (
+    <Popup className="h-[32rem] w-full overflow-y-scroll sm:h-[44rem] sm:w-[36rem]">
+      <div className="flex-col justify-between rounded-[16px] text-white">
+        <div className="mb-5 mt-4 text-3xl font-bold"> Create New File</div>
+        <div className="text-neutral-600 mb-3 h-[34px] w-full text-2xl font-thin">
+          Select Date
+        </div>
+        <div className="inline-bl w-full">
+          <div className="text-2xl text-[#22555A]">
+            <DatePicker
+              showIcon
+              icon={
+                <FontAwesomeIcon icon={faCalendar} className="text-dark-teal" />
+              }
+              wrapperClassName="w-full relative"
+              calendarIconClassname="text-3xl text-blue-600 mt-[7px] absolute right-2"
+              className="mb-4 h-16 w-full cursor-pointer rounded-lg pl-4"
+              selected={startDate}
+              onChange={(date) => date && setStartDate(date)}
+              dateFormat="dd MMMM yyyy"
+              excludeDates={excludeDates}
+            />
+            {excludedDatesString.includes(startDate.toDateString()) ? (
+              <p className="text-center text-xs text-red-400">
+                ***ERROR: Please pick a date that you have not created a file
+                for***
+              </p>
+            ) : null}
+          </div>
+        </div>
+        <TagSelector
+          selectedTags={selectedTags}
+          setSelectedTags={setSelectedTags}
+        />
+        <div className="flex w-full flex-row justify-center">
+          <button
+            className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] bg-white p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white"
+            onClick={handleCancel}
+          >
+            Cancel
+          </button>
+          <button
+            className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white enabled:bg-white disabled:bg-gray-500 disabled:text-gray-700"
+            disabled={
+              selectedTags.length == 0 ||
+              excludedDatesString.includes(startDate.toDateString())
+            }
+            onClick={callAddFile}
+          >
+            {!fetching ? "Create" : "Loading..."}
+          </button>
+        </div>
+      </div>
+    </Popup>
+  ) : (
+    <Popup>
+      <div className="flex h-full flex-col items-center justify-between text-white">
+        <span className="text-lg">
+          There was an error adding your file. Please reach out to your club
+          administrator for assistance.
+        </span>
+        <button
+          className="w-full max-w-[10rem] rounded bg-white p-3 font-serif font-normal text-dark-teal"
+          onClick={() => setShowAddFilePopUp(false)}
+        >
+          Confirm
+        </button>
+      </div>
+    </Popup>
   );
 };