From 2b1d2e2dfd3c10c784fb7865983fe4e4d9922261 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Lobo?= Date: Wed, 6 Dec 2023 17:06:32 +0000 Subject: [PATCH 1/2] feat: fetch event dates from schedule --- components/Schedule/index.jsx | 9 +++++++-- layout/Home/components/Hero/Title/index.tsx | 19 ++++++++++++++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/components/Schedule/index.jsx b/components/Schedule/index.jsx index 448e6a2a..c37d794f 100644 --- a/components/Schedule/index.jsx +++ b/components/Schedule/index.jsx @@ -4,6 +4,8 @@ import Day from "./Day"; import { useState, useEffect } from "react"; import { useRouter } from "next/router"; +import scheduleData from "/data/schedule.json"; + function leapYear(year) { return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0; } @@ -87,8 +89,11 @@ function addDate(date, days) { } export default function Schedule(props) { - const min_date = "2023/2/14"; - const max_date = "2023/2/17"; + /* Fetch first and last day of the event from schedule data */ + const eventDates = scheduleData.map((day) => day.date).sort(); + const min_date = eventDates[0]; + const max_date = eventDates[eventDates.length - 1]; + const defaultFilter = props.filters === undefined ? "" : props.filters; //calculate default date diff --git a/layout/Home/components/Hero/Title/index.tsx b/layout/Home/components/Hero/Title/index.tsx index 747a68c2..5290eeaa 100644 --- a/layout/Home/components/Hero/Title/index.tsx +++ b/layout/Home/components/Hero/Title/index.tsx @@ -1,10 +1,27 @@ import TypeWriter from "typewriter-effect"; +import schedule from "@data/schedule.json"; export default function Title() { + /* Parse event dates info from schedule data */ + const dates = schedule.map((day) => day.date).sort(); + const firstDayData = dates[0].split("/"); + + /* Parse year */ + const year = firstDayData[0]; + + /* Parse month */ + const month = new Intl.DateTimeFormat("en-US", { month: "long" }).format( + new Date().setMonth(parseInt(firstDayData[1]) - 1) + ); + + /* Parse first and last day of the event */ + const firstDay = firstDayData.pop(); + const lastDay = dates.pop().split("/").pop(); + return (
- 14-17 February 2023 + {firstDay}-{lastDay} {month} {year}
{/* 2xl:leading-[6.5rem] is intended to only work with the following font - Terminal */}

Date: Thu, 7 Dec 2023 01:43:55 +0000 Subject: [PATCH 2/2] refactor: use dayjs for date parsing --- layout/Home/components/Hero/Title/index.tsx | 18 ++++++------------ package-lock.json | 11 +++++++++++ package.json | 1 + 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/layout/Home/components/Hero/Title/index.tsx b/layout/Home/components/Hero/Title/index.tsx index 5290eeaa..cef62ab5 100644 --- a/layout/Home/components/Hero/Title/index.tsx +++ b/layout/Home/components/Hero/Title/index.tsx @@ -1,27 +1,21 @@ import TypeWriter from "typewriter-effect"; import schedule from "@data/schedule.json"; +import dayjs from "dayjs"; export default function Title() { /* Parse event dates info from schedule data */ const dates = schedule.map((day) => day.date).sort(); - const firstDayData = dates[0].split("/"); - /* Parse year */ - const year = firstDayData[0]; + const firstDayDate = dayjs(dates[0], "YYYY/M/D"); + const lastDayDate = dayjs(dates[dates.length - 1], "YYYY/M/D"); - /* Parse month */ - const month = new Intl.DateTimeFormat("en-US", { month: "long" }).format( - new Date().setMonth(parseInt(firstDayData[1]) - 1) - ); - - /* Parse first and last day of the event */ - const firstDay = firstDayData.pop(); - const lastDay = dates.pop().split("/").pop(); + const month = firstDayDate.format("MMMM"); + const year = firstDayDate.format("YYYY"); return (
- {firstDay}-{lastDay} {month} {year} + {firstDayDate.format("D")}-{lastDayDate.format("D")} {month} {year}
{/* 2xl:leading-[6.5rem] is intended to only work with the following font - Terminal */}