Deprecate unused components (#157)

Co-authored-by: Won Kim <[email protected]>
Co-authored-by: Johnny Tan <[email protected]>

Author: 3 people

src/app/api/emails/route.client.ts

@@ -1,57 +1,10 @@
 import { z } from "zod";
 import { Email, EmailResponse } from "./route.schema";
+import { TypedRequest } from "@server/type";
 
-/**
- * Describe the interface of SignInRequest.
- */
-type IEmail = z.infer<typeof Email>;
-
-type IEmailResponse = z.infer<typeof EmailResponse>;
-
-/**
- * Extract all the values of "code".
- */
-type EmailResponseCode = z.infer<typeof EmailResponse>["code"];
-
-/**
- * Extends the parameters of fetch() function to give types to the RequestBody.
- */
-interface IRequest extends Omit<RequestInit, "body"> {
-  body: IEmail;
-}
-
-const MOCK_SUCCESS: IEmailResponse = {
-  code: "SUCCESS",
-  message: "Email successfully submitted",
-};
-
-const MOCK_DUPLICATE_EMAIL: IEmailResponse = {
-  code: "DUPLICATE_EMAIL",
-  message: "This email already exists",
-};
-
-const MOCK_INVALID_EMAIL: IEmailResponse = {
-  code: "INVALID_EMAIL",
-  message: "Invalid email submission",
-};
-
-/**
- * If "mock" is given as a parameter, the function can return mocked data for a specific case. This
- * pattern allows frontend developers to use your API before you finished implementing it!
- *
- * In addition, using Zod schemas to parse the response will make the input/output well-typed, making the code cleaner.
- */
 export const createEmailRequest = async (
-  request: IRequest,
-  mock?: EmailResponseCode
+  request: TypedRequest<z.infer<typeof Email>>
 ) => {
-  if (mock === "SUCCESS") {
-    return EmailResponse.parse(MOCK_SUCCESS);
-  } else if (mock === "INVALID_EMAIL") {
-    return EmailResponse.parse(MOCK_INVALID_EMAIL);
-  } else if (mock === "DUPLICATE_EMAIL") {
-    return EmailResponse.parse(MOCK_DUPLICATE_EMAIL);
-  }
   const { body, ...options } = request;
   const response = await fetch("/api/emails", {
     method: "POST",

src/app/private/admin/home/chapters/[chapterId]/users/[userId]/seniors/[seniorId]/page.tsx

@@ -1,7 +1,7 @@
 import PathNav from "@components/PathNav";
-import FileTile from "@components/TileGrid/FileTile";
 import { CardGrid } from "@components/container";
 import { prisma } from "@server/db/client";
+import { File } from "@components/file";
 
 interface Params {
   params: {
@@ -53,13 +53,7 @@ const SeniorPage = async ({ params }: Params) => {
           </>
         }
         tiles={senior.Files.map((file) => (
-          <FileTile
-            key={file.id}
-            id={file.id}
-            date={file.date}
-            url={file.url}
-            Tags={file.Tags}
-          />
+          <File key={file.id} file={file} />
         ))}
       />
     </div>

src/components/FilterDropdown.tsx

@@ -32,6 +32,9 @@ type FilterDropdownProps<T extends Named> = {
   setSelectedItems: Dispatch<SetStateAction<T[]>>;
 };
 
+/**
+ * @deprecated In favour of Dropdown which implements a more generic version.
+ */
 export default function FilterDropdown<T extends Named>({
   items,
   filterMatch,

src/components/LandingFooter.tsx

@@ -1,49 +1,45 @@
 "use client";
 import React, { FormEvent, FocusEvent, useState } from "react";
-import { EmailResponse } from "@api/emails/route.schema";
+import { useApiThrottle } from "@hooks";
+import { createEmailRequest } from "@api/emails/route.client";
+import { Spinner } from "./skeleton";
 
 const LandingFooter = () => {
   const [email, setEmail] = useState<string>("");
-  const [eList, setEList] = useState<Set<string>>(new Set<string>());
 
   const [buttonText, setButtonText] = useState<string>("Join E-List");
   const [buttonStyle, setButtonStyle] = useState<string>(
     "bg-dark-teal hover:-translate-y-0.5"
   );
 
-  function resetButton(target: FocusEvent<HTMLInputElement>) {
-    setButtonStyle("bg-dark-teal hover:-translate-y-0.5");
-    setButtonText("Join E-List");
-  }
-
-  const onEmailSubmit = async (event: FormEvent) => {
-    event.preventDefault();
-
-    // if box isn't empty and content is a valid email, add it to the set
-
-    if (email) {
-      eList.add(email);
-      setEList(eList);
-
-      // use SendGrid 'subscribe' route to send a test email
-      const res = await fetch("/api/emails", {
-        body: JSON.stringify({ email: email }),
-        method: "POST",
-      });
-
-      const responseObject = EmailResponse.parse(await res.json());
-      if (responseObject.code == "INVALID_EMAIL") {
+  const { fetching, fn: throttleCreateEmailRequest } = useApiThrottle({
+    fn: createEmailRequest,
+    callback: (responseObject) => {
+      if (responseObject.code === "INVALID_EMAIL") {
         setButtonText("Invalid Email");
         setButtonStyle("bg-tag-rust"); // no hover
         return;
-      } else if (responseObject.code == "DUPLICATE_EMAIL") {
+      } else if (responseObject.code === "DUPLICATE_EMAIL") {
         setButtonText("Duplicate Email");
         setButtonStyle("bg-tag-rust"); // no hover
         return;
       }
 
       setButtonText("Subscribed!");
       setButtonStyle("bg-dark-teal"); // no hover
+    },
+  });
+
+  function resetButton(target: FocusEvent<HTMLInputElement>) {
+    setButtonStyle("bg-dark-teal hover:-translate-y-0.5");
+    setButtonText("Join E-List");
+  }
+
+  const onEmailSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+
+    if (email !== "") {
+      await throttleCreateEmailRequest({ body: { email: email } });
     } else {
       setButtonText("Invalid Email");
       setButtonStyle("bg-tag-rust"); // no hover
@@ -66,29 +62,33 @@ const LandingFooter = () => {
           is doing:
         </p>
       </div>
-      <form
-        className="mx-auto flex w-3/4 flex-col justify-center gap-[20px] md:flex-row"
-        method="post"
-        onSubmit={onEmailSubmit}
-        autoComplete="off"
-      >
-        <input
-          className="text-gray relative h-[60px] rounded-xl bg-white px-4
-                                 placeholder-dark-gray shadow-md focus:border-dark-teal focus:outline-none md:w-3/4"
-          name="email"
-          placeholder="Enter your e-mail address"
-          onFocus={resetButton}
-          onChange={(event) => {
-            setEmail(event.target.value);
-          }}
-        />
-        <button
-          className={`${buttonStyle} w-auto rounded-xl px-4 py-4 duration-150`}
-          type="submit"
+      {!fetching ? (
+        <form
+          className="mx-auto flex w-3/4 flex-col justify-center gap-[20px] md:flex-row"
+          method="post"
+          onSubmit={onEmailSubmit}
+          autoComplete="off"
         >
-          <span className="align-center text-white">{buttonText}</span>
-        </button>
-      </form>
+          <input
+            className="text-gray relative h-[60px] rounded-xl bg-white px-4
+                                 placeholder-dark-gray shadow-md focus:border-dark-teal focus:outline-none md:w-3/4"
+            name="email"
+            placeholder="Enter your e-mail address"
+            onFocus={resetButton}
+            onChange={(event) => {
+              setEmail(event.target.value);
+            }}
+          />
+          <button
+            className={`${buttonStyle} w-auto rounded-xl px-4 py-4 duration-150`}
+            type="submit"
+          >
+            <span className="align-center text-white">{buttonText}</span>
+          </button>
+        </form>
+      ) : (
+        <Spinner />
+      )}
     </div>
   );
 };