updated events

Coding-Bunker · Sep 10, 2024 · e2ae048 · e2ae048
1 parent a575d1f
commit e2ae048
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@getbrevo/brevo": "^2.2.0",
     "@notionhq/client": "^2.2.15",
     "axios": "^1.7.2",
+    "classnames": "^2.5.1",
     "luxon": "^3.5.0",
     "next": "14.2.5",
     "react": "^18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apiClient/NotionApiClient.ts b/src/apiClient/NotionApiClient.ts
@@ -9,6 +9,7 @@ import {
   PartialPageObjectResponse,
   QueryDatabaseResponse,
 } from "@notionhq/client/build/src/api-endpoints"
+import { DateTime } from "luxon"
 
 const NotionApiClient = () => {
   const notionClient = (): NotionClient => {
@@ -47,6 +48,36 @@ const NotionApiClient = () => {
     return data.results?.[0] as PageObjectResponse
   }
 
+  const fetchNextEvent = async (): Promise<
+    | PageObjectResponse
+    | PartialPageObjectResponse
+    | PartialDatabaseObjectResponse
+    | DatabaseObjectResponse
+    | undefined
+  > => {
+    if (!process.env.NOTION_EVENTS_DATABASE) return undefined
+    const data = await notionClient().databases.query({
+      database_id: process.env.NOTION_EVENTS_DATABASE,
+      archived: false,
+      in_trash: false,
+      page_size: 1,
+      sorts: [
+        {
+          direction: "ascending",
+          property: "Date",
+        },
+      ],
+      filter: {
+        property: "Date",
+        date: {
+          after: DateTime.now().toFormat("yyyy-MM-dd"),
+        },
+      },
+    })
+
+    return data.results?.[0]
+  }
+
   const fetchLastEvents = async (): Promise<
     (
       | PageObjectResponse
@@ -67,20 +98,46 @@ const NotionApiClient = () => {
           property: "Date",
         },
       ],
+      filter: {
+        property: "Date",
+        date: {
+          before: DateTime.now().toFormat("yyyy-MM-dd"),
+        },
+      },
     })
 
     return data.results
   }
 
   const fetchEvents = async (): Promise<
-    NotionDatabaseQueryType<NotionDatabaseEventsQueryProperties>
+    (
+      | PageObjectResponse
+      | PartialPageObjectResponse
+      | PartialDatabaseObjectResponse
+      | DatabaseObjectResponse
+    )[]
   > => {
-    const response = await request({
-      url: `v1/databases/${process.env.NOTION_EVENTS_DATABASE}/query`,
-      method: "POST",
+    if (!process.env.NOTION_EVENTS_DATABASE) return []
+    const data = await notionClient().databases.query({
+      database_id: process.env.NOTION_EVENTS_DATABASE,
+      archived: false,
+      in_trash: false,
+      page_size: 1000,
+      sorts: [
+        {
+          direction: "descending",
+          property: "Date",
+        },
+      ],
+      filter: {
+        property: "Date",
+        date: {
+          before: DateTime.now().toFormat("yyyy-MM-dd"),
+        },
+      },
     })
 
-    return response.data
+    return data.results
   }
 
   const fetchCrew = async (): Promise<QueryDatabaseResponse | undefined> => {
@@ -109,6 +166,7 @@ const NotionApiClient = () => {
     fetchCrew,
     addSubscriber,
     fetchLastEvents,
+    fetchNextEvent,
   }
 }
 

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -12,12 +12,21 @@ export const metadata: Metadata = {
 export default async function Page() {
 
     const pageData = await NotionApiClient().fetchEvents()
+    const nextEvent = await NotionApiClient().fetchNextEvent();
 
     return <>
-      <h1 className="text-4xl font-bold mb-8">Tutti i nostri eventi</h1>
-
+      <h1 className="text-4xl font-bold mb-8">I nostri eventi</h1>
+      {nextEvent && 
+          <header className="flex flex-col justify-between gap-2 mt-5 mb-20">
+            <h3 className="text-lg font-bold">Registrati al prossimo evento</h3>
+            <SingleEventCard
+                  className="border-4"
+                  event={nextEvent as PageObjectResponse}
+                />
+          </header>
+      }
       <article className="grid grid-cols-1 gap-4 sm:grid-cols-2 mx-auto">
-        {pageData.results.map((event : any) => (
+        {pageData.map((event : any) => (
             <SingleEventCard
               event={event as PageObjectResponse}
               key={event.id}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -14,6 +14,7 @@ import DiscordImage from "../assets/social/discord.svg";
 
 const Home = async () => {
   const lastEvents = await NotionApiClient().fetchLastEvents();
+  const nextEvent = await NotionApiClient().fetchNextEvent();
 
 
   return (
@@ -33,68 +34,60 @@ const Home = async () => {
           <p>
             Unisciti a noi per crescere, imparare e fare la differenza insieme!
           </p>
-          <div className="custom-breadcrumbs">
-            <ul>
-              <li>
-                <a
+          <div className="flex flex-row gap-6">
+              <a
+                  className="group flex cursor-pointer flex-col gap-2 rounded-md border text-white p-2 transition-all duration-300 hover:bg-white hover:text-purple"
                   href="https://forms.gle/FPca5upst1VTGFP86"
                   rel="noreferrer"
                   target="_blank"
                 >
 
-                  Partnership
+                  Diventa nostro partner
                 </a>
-              </li>
-              <li> 
                 <a
+                  className="group flex cursor-pointer flex-col gap-2 rounded-md border text-white p-2 transition-all duration-300 hover:bg-white hover:text-purple"
                   href="https://forms.gle/okz6VZ9Uv8JcGTiS8"
                   rel="noreferrer"
                   target="_blank"
                 >
-
-                  Cfp
+                  Proponi il tuo talk
                 </a>
-              </li>
-              <li> 
+          </div>
+          <div className="custom-breadcrumbs flex flex-row gap-4 text-right items-center justify-end">
                 <a
                   href="https://www.meetup.com/coding-bunker/"
+                  className="hover:scale-150 transition duration-300"
                   rel="noreferrer"
                   target="_blank"
                 >
 
-                  <Image width={20} height={20} src={MeetupImage} alt="Meetup" />
+                  <Image width={30} height={30} src={MeetupImage} alt="Meetup" />
                 </a>
-              </li>
-              <li>
-
                 <a
                   href="https://github.com/Coding-Bunker"
+                  className="hover:scale-150 transition duration-300"
                   rel="noreferrer"
                   target="_blank"
                 >
-                 <Image width={20} height={20} src={GithubImage} alt="Github" />
+                 <Image width={30} height={30} src={GithubImage} alt="Github" />
                 </a>
-              </li>
-              <li>
-
                 <a
                   href="https://discord.com/invite/9x4FqmTxDu"
+                  className="hover:scale-150 transition duration-300"
                   rel="noreferrer"
                   target="_blank"
-                >
-
-                  <Image width={20} height={20} src={DiscordImage} alt="Discord" />
+                >                  
+                  <Image width={30} height={30} src={DiscordImage} alt="Discord" />
                 </a>
                 <a
                   href="https://t.me/codingbunker"
+                  className="hover:scale-150 transition duration-300"
                   rel="noreferrer"
                   target="_blank"
                 >
 
-                  <Image width={20} height={20} src={TelegramImage} alt="Telegram" />
+                  <Image width={30} height={30} src={TelegramImage} alt="Telegram" />
                 </a>
-              </li>
-            </ul>
           </div>
         </div>
 
@@ -110,8 +103,16 @@ const Home = async () => {
       </article>
 
       <article className="flex flex-col gap-8">
+        {nextEvent && 
+          <header className="flex flex-col justify-between gap-2 mt-10">
+            <h3 className="text-lg font-bold">Registrati al prossimo evento</h3>
+            <SingleEventCard
+                  className="border-4"
+                  event={nextEvent as PageObjectResponse}
+                />
+          </header>
+        }
         <header className="flex w-full flex-row justify-between gap-2 mt-10">
-
           <h3 className="text-lg font-bold">Ultimi eventi</h3>
           <Link
             href="/events"

diff --git a/src/assets/social/instagram.svg b/src/assets/social/instagram.svg
diff --git a/src/components/SingleEventCard.tsx b/src/components/SingleEventCard.tsx
@@ -1,16 +1,18 @@
 import { getPlainTextFromBlock } from "@/utils/NotionFormatter"
 import { PageObjectResponse } from "@notionhq/client/build/src/api-endpoints"
+import classNames from "classnames"
 import Link from "next/link"
 
 export interface SingleEventCardProps{
     event: PageObjectResponse
+    className?: string
 }
 
 
 
-const SingleEventCard : React.FC<SingleEventCardProps> = ({event}) =>{
+const SingleEventCard : React.FC<SingleEventCardProps> = ({event, className}) =>{
 
-    return <Link href={"/events/"+getPlainTextFromBlock(event.properties["slug"])} className="group flex cursor-pointer flex-col gap-2 rounded-md border text-white p-4 transition-all duration-300 hover:-translate-y-1.5">
+    return <Link href={"/events/"+getPlainTextFromBlock(event.properties["slug"])} className={classNames(className, "group flex cursor-pointer flex-col gap-2 rounded-md border text-white p-4 transition-all duration-300 hover:-translate-y-1.5")}>
         <div className="flex w-full justify-between gap-3 flex-row items-start">
             <p className="font-semibold">{getPlainTextFromBlock(event.properties["Name"])}</p>
             <div className="text-white whitespace-nowrap">{getPlainTextFromBlock(event.properties["Date"])}</div>