From c06fc5fe42a180bef67f475c0e666cd356fbcdcb Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 26 Jul 2022 21:40:10 +0300
Subject: [PATCH] WeekLinkTitle with date ranges

---
 app/db/models/calendar.server.ts |  6 +--
 app/routes/calendar/index.tsx    | 65 ++++++++++++++++++++++++++------
 app/styles/calendar.css          |  8 +++-
 app/styles/common.css            |  4 ++
 app/utils/dates.ts               |  7 ++++
 5 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/app/db/models/calendar.server.ts b/app/db/models/calendar.server.ts
index 8632d24cf..812c7b497 100644
--- a/app/db/models/calendar.server.ts
+++ b/app/db/models/calendar.server.ts
@@ -1,8 +1,4 @@
-import {
-  databaseTimestampToDate,
-  dateToDatabaseTimestamp,
-  dateToWeekNumber,
-} from "~/utils/dates";
+import { dateToDatabaseTimestamp } from "~/utils/dates";
 import { sql } from "../sql";
 import type { CalendarEvent, CalendarEventDate, User } from "../types";
 
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index 038c6aa7e..db18fcf59 100644
--- a/app/routes/calendar/index.tsx
+++ b/app/routes/calendar/index.tsx
@@ -20,6 +20,7 @@ import {
   weekNumberToDate,
 } from "~/utils/dates";
 import { discordFullName, makeTitle } from "~/utils/strings";
+import type { Unpacked } from "~/utils/types";
 import { resolveBaseUrl } from "~/utils/urls";
 import { actualNumber } from "~/utils/zod";
 
@@ -151,17 +152,7 @@ function WeekLinks() {
                   tabIndex={hidden ? -1 : 0}
                 >
                   <>
-                    <div>
-                      {week.number === data.currentWeek
-                        ? "This"
-                        : week.number - data.currentWeek === 1
-                        ? "Next"
-                        : week.number - data.currentWeek === -1
-                        ? "Last"
-                        : week.number}{" "}
-                      <br />
-                      Week
-                    </div>
+                    <WeekLinkTitle week={week} />
                     <div
                       className={clsx("calendar__event-count", {
                         invisible: !eventCounts,
@@ -180,6 +171,58 @@ function WeekLinks() {
   );
 }
 
+function WeekLinkTitle({
+  week,
+}: {
+  week: Unpacked<UseDataFunctionReturn<typeof loader>["weeks"]>;
+}) {
+  const data = useLoaderData<typeof loader>();
+  const { i18n } = useTranslation();
+
+  const relativeWeekIdentifier =
+    week.number === data.currentWeek
+      ? "This"
+      : week.number - data.currentWeek === 1
+      ? "Next"
+      : week.number - data.currentWeek === -1
+      ? "Last"
+      : null;
+
+  if (relativeWeekIdentifier) {
+    return (
+      <div className="stack xxs">
+        <div>{relativeWeekIdentifier}</div>
+        <div>Week</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div>
+        {weekNumberToDate({
+          week: week.number,
+          year: week.year,
+        }).toLocaleDateString(i18n.language, {
+          day: "numeric",
+          month: "short",
+        })}
+      </div>
+      <div className="calendar__week__dash">-</div>
+      <div>
+        {weekNumberToDate({
+          week: week.number,
+          year: week.year,
+          position: "end",
+        }).toLocaleDateString(i18n.language, {
+          day: "numeric",
+          month: "short",
+        })}
+      </div>
+    </div>
+  );
+}
+
 function getEventsCountPerWeek(
   startTimes: UseDataFunctionReturn<typeof loader>["nearbyStartTimes"]
 ) {
diff --git a/app/styles/calendar.css b/app/styles/calendar.css
index e5c454edd..e8dbc5268 100644
--- a/app/styles/calendar.css
+++ b/app/styles/calendar.css
@@ -20,11 +20,11 @@
   height: calc(var(--full-size-week-height) - 2rem);
   flex-direction: column;
   justify-content: space-between;
-  padding: var(--s-2);
+  padding: var(--s-1-5);
   background-color: var(--theme-very-transparent);
   border-radius: var(--rounded);
   cursor: pointer;
-  font-size: var(--fonts-xxs);
+  font-size: var(--fonts-xxxs);
   font-weight: var(--bold);
   text-align: center;
 }
@@ -75,6 +75,10 @@
   font-size: var(--fonts-xxs);
 }
 
+.calendar__week__dash {
+  line-height: 0.8;
+}
+
 .calendar__events-container {
   background-color: var(--bg-lighter);
   margin-block-start: var(--s-8);
diff --git a/app/styles/common.css b/app/styles/common.css
index f1aace45e..b129880e0 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -119,6 +119,10 @@
   flex-direction: column;
 }
 
+.stack.xxs {
+  gap: var(--s-1);
+}
+
 .stack.xs {
   gap: var(--s-1-5);
 }
diff --git a/app/utils/dates.ts b/app/utils/dates.ts
index 4c51bc222..99cf509ab 100644
--- a/app/utils/dates.ts
+++ b/app/utils/dates.ts
@@ -16,15 +16,22 @@ export function dateToWeekNumber(date: Date) {
 export function weekNumberToDate({
   week,
   year,
+  position = "start",
 }: {
   week: number;
   year: number;
+  /** start = Date of Monday, end = Date of Sunday */
+  position?: "start" | "end";
 }) {
   // xxx: possible problem of mismatch when server time and local time don't match
   // gotta make sure events which belong to monday are still shown for sunday
   const result = new Date(Date.UTC(year, 0, 4));
+
   result.setDate(
     result.getDate() - (result.getDay() || 7) + 1 + 7 * (week - 1)
   );
+  if (position === "end") {
+    result.setDate(result.getDate() + 6);
+  }
   return result;
 }