From 092a74237b52f657c2e6b90b6eb020fced580b35 Mon Sep 17 00:00:00 2001
From: Ivan Chub <ivansergchub@gmail.com>
Date: Wed, 24 Jul 2024 15:31:11 -0700
Subject: [PATCH] filter out non-event folders from home screen

---
 .../components/screens/HomeScreen/Folder.tsx  | 37 +++++++++++++------
 .../screens/HomeScreen/HomeScreen.tsx         |  2 +
 .../components/screens/HomeScreen/utils.ts    | 26 +++++++++++--
 .../components/shared/PCDCard.tsx             |  4 +-
 4 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/apps/passport-client/components/screens/HomeScreen/Folder.tsx b/apps/passport-client/components/screens/HomeScreen/Folder.tsx
index f70d7c6210..436fc35466 100644
--- a/apps/passport-client/components/screens/HomeScreen/Folder.tsx
+++ b/apps/passport-client/components/screens/HomeScreen/Folder.tsx
@@ -3,7 +3,7 @@ import { CSSProperties, useCallback } from "react";
 import styled from "styled-components";
 import { usePCDsInFolder } from "../../../src/appHooks";
 import { cn } from "../../../src/util";
-import { EVENT_DATES } from "./utils";
+import { EVENTS } from "./utils";
 
 export function FolderCard({
   folder,
@@ -20,8 +20,9 @@ export function FolderCard({
 
   const pcds = usePCDsInFolder(folder);
 
-  const startDate = EVENT_DATES[folder]?.start;
-  const endDate = EVENT_DATES[folder]?.end;
+  const startDate = EVENTS[folder]?.start;
+  const endDate = EVENTS[folder]?.end;
+  const img = EVENTS[folder]?.image;
 
   let dateStr = null;
 
@@ -34,21 +35,33 @@ export function FolderCard({
       style={style}
       onClick={onClick}
       className={cn(
+        "flex flex-row gap-2",
         "bg-green-700 py-2 px-4 cursor-pointer hover:bg-green-600  transition-all duration-100",
         "rounded font-bold shadow-lg select-none active:ring-2 active:ring-offset-4 active:ring-white ring-opacity-60 ring-offset-[#19473f]",
         "border-none text-lg"
       )}
     >
-      {getNameFromPath(folder)}
-      <div className="font-normal text-sm">
-        {pcds.length} ticket{pcds.length > 1 ? "s" : ""}
-        {dateStr && (
-          <span>
-            {" · "}
-            {dateStr}
-          </span>
-        )}
+      <div className="flex-grow">
+        {getNameFromPath(folder)}
+        <div className="font-normal text-sm">
+          {pcds.length} ticket{pcds.length > 1 ? "s" : ""}
+          {dateStr && (
+            <span>
+              {" · "}
+              {dateStr}
+            </span>
+          )}
+        </div>
       </div>
+      {img && (
+        <div
+          className="w-[100px] rounded"
+          style={{
+            backgroundImage: `url(${img})`,
+            backgroundSize: "cover"
+          }}
+        ></div>
+      )}
     </FolderEntryContainer>
   );
 }
diff --git a/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx b/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx
index 73a61a9ce8..f756b9ab35 100644
--- a/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx
+++ b/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx
@@ -44,6 +44,7 @@ import {
   FolderEntryContainer,
   FolderExplorerContainer
 } from "./Folder";
+import { isEvent } from "./utils";
 
 export const HomeScreen = React.memo(HomeScreenImpl);
 
@@ -187,6 +188,7 @@ export function HomeScreenImpl(): JSX.Element | null {
                     // /FrogCrypto is a special and rendered by <FrogFolder />
                     (folder) => folder !== FrogCryptoFolderName
                   )
+                  .filter(isEvent)
                   .sort((a, b) => a.localeCompare(b))
                   .map((folder) => {
                     return (
diff --git a/apps/passport-client/components/screens/HomeScreen/utils.ts b/apps/passport-client/components/screens/HomeScreen/utils.ts
index b49f8008be..6cb723b4f1 100644
--- a/apps/passport-client/components/screens/HomeScreen/utils.ts
+++ b/apps/passport-client/components/screens/HomeScreen/utils.ts
@@ -1,9 +1,29 @@
-export const EVENT_DATES: Record<string, { start: string; end: string }> = {
+export interface EventInfo {
+  start: string;
+  end: string;
+  image?: string;
+}
+
+export const EVENTS: Record<string, EventInfo> = {
   "ETH Berlin 04": { start: "2023-04-01", end: "2023-04-03" },
   "0xPARC Summer '24": { start: "2023-05-15", end: "2023-05-18" },
-  "Edge Esmeralda": { start: "2023-06-10", end: "2023-06-12" },
+  "Edge Esmeralda": {
+    start: "2023-06-10",
+    end: "2023-06-12",
+    image:
+      "https://cdn.prod.website-files.com/65e8d8e39d148666896efd73/65e8d9c0db3e30b4fd35b335_kuri%201-c.png"
+  },
   "ETH Prague 2024": { start: "2023-07-22", end: "2023-07-25" },
   "ETH LATAM SPS": { start: "2023-08-05", end: "2023-08-07" },
   "ETH Berlin 09": { start: "2023-09-18", end: "2023-09-21" },
-  "Edge City": { start: "2023-10-18", end: "2023-10-21" }
+  "Edge City": {
+    start: "2023-10-18",
+    end: "2023-10-21",
+    image:
+      "https://cdn.prod.website-files.com/65b2cb5abdecf7cd7747e170/65c139390d09b586db66b032_bg-image_v01.png"
+  }
 };
+
+export function isEvent(folder: string): folder is keyof typeof EVENTS {
+  return EVENTS[folder] !== undefined;
+}
diff --git a/apps/passport-client/components/shared/PCDCard.tsx b/apps/passport-client/components/shared/PCDCard.tsx
index 6f0f0c0be2..b750aede75 100644
--- a/apps/passport-client/components/shared/PCDCard.tsx
+++ b/apps/passport-client/components/shared/PCDCard.tsx
@@ -57,7 +57,9 @@ function PCDCardImpl({
       style={!expanded ? { padding: "8px 12px", cursor: "pointer" } : {}}
     >
       {expanded ? (
-        <CardOutlineExpanded className={"border-4 border-blue-950 rounded-lg"}>
+        <CardOutlineExpanded
+          className={"border-4 border-blue-950 rounded-lg shadow-lg"}
+        >
           {!hideHeader && (
             <CardHeader
               isMainIdentity={isMainIdentity}