Skip to content

Commit

Permalink
fix linting issues
Browse files Browse the repository at this point in the history
  • Loading branch information
JaiNarayanan committed Sep 6, 2024
1 parent 98aaa86 commit 6724512
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 20 deletions.
8 changes: 6 additions & 2 deletions components/DirectoryLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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
Expand Down
80 changes: 62 additions & 18 deletions components/startups/StartupTile.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);

Expand Down Expand Up @@ -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);
Expand All @@ -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");
Expand All @@ -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
Expand All @@ -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",
Expand Down Expand Up @@ -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}
Expand All @@ -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"
Expand All @@ -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}
Expand Down Expand Up @@ -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
}
/>
))}
Expand Down

0 comments on commit 6724512

Please sign in to comment.