From 6724512b3ead682fce582d03104090aa1120a08a Mon Sep 17 00:00:00 2001
From: jainarayanan <jainaraya@gmail.com>
Date: Fri, 6 Sep 2024 12:20:43 -0700
Subject: [PATCH] fix linting issues

---
 components/DirectoryLayout.tsx      |  8 ++-
 components/startups/StartupTile.tsx | 80 ++++++++++++++++++++++-------
 2 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/components/DirectoryLayout.tsx b/components/DirectoryLayout.tsx
index a591dcc..7f5b653 100644
--- a/components/DirectoryLayout.tsx
+++ b/components/DirectoryLayout.tsx
@@ -53,7 +53,9 @@ const DirectoryLayout = (props: LayoutProps) => {
     if (!startupsQuery?.data) return [];
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return startupsQuery.data?.filter((project: Project) => {
-      const matchesName = project.name.toLowerCase().includes(startupSearchText.toLowerCase());
+      const matchesName = project.name
+        .toLowerCase()
+        .includes(startupSearchText.toLowerCase());
 
       // const matchesCategory = selectedProjectCategory === "" || project.category === selectedProjectCategory;
 
@@ -64,7 +66,9 @@ const DirectoryLayout = (props: LayoutProps) => {
   return (
     <div className="w-full p-4 md:p-16 flex gap-4 flex-col bg-gray-50">
       <div className="max-w-screen-2xl relative w-full">
-        <h1 className="text-5xl font-figtree font-sans font-semibold mb-4">The Directory</h1>
+        <h1 className="text-5xl font-figtree font-sans font-semibold mb-4">
+          The Directory
+        </h1>
       </div>
       <div className="flex flex-col">
         <input
diff --git a/components/startups/StartupTile.tsx b/components/startups/StartupTile.tsx
index 523ecc2..f830014 100644
--- a/components/startups/StartupTile.tsx
+++ b/components/startups/StartupTile.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { Fragment, useState, useEffect } from "react";
-import { InformationCircleIcon, ExternalLinkIcon, HeartIcon as HeartOutlineIcon } from "@heroicons/react/outline";
+import {
+  InformationCircleIcon,
+  ExternalLinkIcon,
+  HeartIcon as HeartOutlineIcon,
+} from "@heroicons/react/outline";
 import { HeartIcon as HeartFilledIcon } from "@heroicons/react/solid";
 import { Dialog, Transition } from "@headlessui/react";
 import { useQuery } from "react-query";
@@ -15,7 +19,16 @@ interface Favorite {
 }
 
 export default function StartupTile({ startup }: { startup: Startup }) {
-  const { id, name, description, logo, website, industries, profiles, startups_members: profileMetadata } = startup;
+  const {
+    id,
+    name,
+    description,
+    logo,
+    website,
+    industries,
+    profiles,
+    startups_members: profileMetadata,
+  } = startup;
   const [dialogOpen, setDialogOpen] = useState(false);
   const [isFavorite, setIsFavorite] = useState(false);
 
@@ -46,13 +59,19 @@ export default function StartupTile({ startup }: { startup: Startup }) {
     }
 
     if (isFavorite) {
-      const { error } = await supabase.from("favorites").delete().eq("user_id", user.id).eq("startup_id", startup.id);
+      const { error } = await supabase
+        .from("favorites")
+        .delete()
+        .eq("user_id", user.id)
+        .eq("startup_id", startup.id);
 
       if (!error) {
         setIsFavorite(false);
       }
     } else {
-      const { error } = await supabase.from("favorites").insert([{ user_id: user.id, startup_id: startup.id }]);
+      const { error } = await supabase
+        .from("favorites")
+        .insert([{ user_id: user.id, startup_id: startup.id }]);
 
       if (!error) {
         setIsFavorite(true);
@@ -68,7 +87,9 @@ export default function StartupTile({ startup }: { startup: Startup }) {
       const urls: Record<string, string> = {};
       for (const startupMember of profiles) {
         // eslint-disable-next-line no-await-in-loop
-        const { data, error } = await supabase.storage.from("avatars").download(startupMember.id);
+        const { data, error } = await supabase.storage
+          .from("avatars")
+          .download(startupMember.id);
 
         if (error) {
           console.error("Error downloading image");
@@ -93,7 +114,10 @@ export default function StartupTile({ startup }: { startup: Startup }) {
   return (
     <>
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <li onClick={() => setDialogOpen(true)} className="m-0 p-0 list-none rounded-md">
+      <li
+        onClick={() => setDialogOpen(true)}
+        className="m-0 p-0 list-none rounded-md"
+      >
         <div className="bg-white border border-0.5 relative h-0 pb-[75%] overflow-hidden rounded-md group">
           <div className="flex items-center justify-center">
             <img
@@ -105,7 +129,9 @@ export default function StartupTile({ startup }: { startup: Startup }) {
           <div className="flex z-[2] items-end p-[20px] rounded-md absolute bg-gradient-to-b from-transparent to-gray-50/10 hover:bg-black/80 hover:opacity-1 top-0 bottom-0 left-0 right-0">
             <div className="opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-1 items-center justify-between min-w-0">
               <div>
-                <h1 className="font-figtree text-white text-md font-semibold font-sans overflow-hidden">{name}</h1>
+                <h1 className="font-figtree text-white text-md font-semibold font-sans overflow-hidden">
+                  {name}
+                </h1>
                 <h3
                   style={{
                     overflow: "hidden",
@@ -133,7 +159,9 @@ export default function StartupTile({ startup }: { startup: Startup }) {
         </div>
         <div className="flex flex-col gap-2 mt-2">
           <div className="flex">
-            <h1 className="text-black font-xl font-figtree font-semibold">{name}</h1>
+            <h1 className="text-black font-xl font-figtree font-semibold">
+              {name}
+            </h1>
             <button
               type="button"
               onClick={toggleFavorite}
@@ -154,16 +182,22 @@ export default function StartupTile({ startup }: { startup: Startup }) {
           </div>
           <div className="inline-flex">
             {imagesQuery?.data &&
-              Object.entries(imagesQuery?.data).map(([key, value]: [string, string]) => (
-                <span className="avatar rounded-full relative border-[2px] border-[#F8F8F8] w-[30px] overflow-hidden">
-                  <img className="w-full block" src={value} alt="temp" />
-                </span>
-              ))}
+              Object.entries(imagesQuery?.data).map(
+                ([key, value]: [string, string]) => (
+                  <span className="avatar rounded-full relative border-[2px] border-[#F8F8F8] w-[30px] overflow-hidden">
+                    <img className="w-full block" src={value} alt="temp" />
+                  </span>
+                )
+              )}
           </div>
         </div>
       </li>
       <Transition appear show={dialogOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={() => setDialogOpen(false)}>
+        <Dialog
+          as="div"
+          className="relative z-10"
+          onClose={() => setDialogOpen(false)}
+        >
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -190,10 +224,16 @@ export default function StartupTile({ startup }: { startup: Startup }) {
                 <Dialog.Panel className="w-full max-w-xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                   <div className="relative flex flex-col gap-y-4">
                     <div className="flex gap-x-8">
-                      <img src={logo} className="w-32 rounded-lg object-contain" alt={`${name} logo`} />
+                      <img
+                        src={logo}
+                        className="w-32 rounded-lg object-contain"
+                        alt={`${name} logo`}
+                      />
                       <div className="flex flex-col">
                         <div className="flex gap-3">
-                          <h1 className="text-4xl font-bold font-figtree text-gray-900">{name}</h1>
+                          <h1 className="text-4xl font-bold font-figtree text-gray-900">
+                            {name}
+                          </h1>
                         </div>
                         <a
                           href={website}
@@ -235,14 +275,18 @@ export default function StartupTile({ startup }: { startup: Startup }) {
                     </div>
                     {profiles.length > 0 && (
                       <div className="flex flex-col">
-                        <span className="text-primary font-medium text-lg mb-2">People</span>
+                        <span className="text-primary font-medium text-lg mb-2">
+                          People
+                        </span>
                         <div className="grid grid-cols-4 justify-between">
                           {profiles?.map((profile, i) => (
                             <StartupProfileTile
                               startupProfile={profile}
                               startupProfileMetadata={profileMetadata[i]}
                               overrideHeadshotSrc={
-                                imagesQuery?.data?.[profile.id] ? imagesQuery?.data?.[profile.id] : null
+                                imagesQuery?.data?.[profile.id]
+                                  ? imagesQuery?.data?.[profile.id]
+                                  : null
                               }
                             />
                           ))}