Add back and forward buttons for traversing months in the dream calen…

…dar. Also added year limits
bombies · Nov 1, 2023 · 17f7df2 · 17f7df2
1 parent da5d310
commit 17f7df2
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 9 deletions.
diff --git a/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar.tsx b/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar.tsx
@@ -12,6 +12,9 @@ import {SelectItem} from "@nextui-org/react";
 import DreamCalendarDay from "@/app/(site)/(internal)/dashboard/calendar/components/DreamCalendarDay";
 import {useDreamsData} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider";
 import useDayDreams from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDayDreams";
+import {Button} from "@nextui-org/button";
+import DoubleBackIcon from "@/app/(site)/components/icons/DoubleBackIcon";
+import DoubleForwardIcon from "@/app/(site)/components/icons/DoubleForwardIcon";
 
 const DreamCalendar: FC = () => {
     const [[currentYear, currentMonth], setCurrentYearAndMonth] = useState<[number, number]>([new Date().getFullYear(), new Date().getMonth() + 1]);
@@ -29,16 +32,63 @@ const DreamCalendar: FC = () => {
         ...nextMonthDays
     ];
 
-    const selectMonths = useMemo(() => getMonthDropdownOptions(), [])
-    const selectYears = useMemo(() => getYearDropdownOptions(new Date().getUTCFullYear()), [])
 
     const {dreams, tags, characters} = useDreamsData()
     const dayDreams = useDayDreams({dreams: dreams.data})
+    const earliestYear = useMemo(() => dayDreams.length ? new Date(dayDreams[0].timestamp).getFullYear() : undefined, [dayDreams])
+
+    const selectMonths = useMemo(() => getMonthDropdownOptions(), [])
+    const selectYears = useMemo(() => getYearDropdownOptions(new Date().getUTCFullYear(), {
+        startingYear: earliestYear
+    }), [earliestYear])
+
+    const displayPreviousMonth = () => {
+        setCurrentYearAndMonth(([prevYear, prevMonth]) => {
+            let nextYear = prevYear
+            let nextMonth = prevMonth - 1
+
+            if (nextMonth === 0) {
+                nextMonth = 12
+                nextYear = prevYear - 1
+            }
+
+            if (earliestYear && nextYear < earliestYear)
+                return [prevYear, prevMonth]
+
+            return [nextYear, nextMonth]
+        })
+    }
+
+    const displayNextMonth = () => {
+        setCurrentYearAndMonth(([prevYear, prevMonth]) => {
+            let nextYear = prevYear
+            let nextMonth = prevMonth + 1
+
+            if (nextMonth === 13) {
+                nextMonth = 1
+                nextYear = prevYear + 1
+            }
+
+            if (nextYear > new Date().getFullYear())
+                return [prevYear, prevMonth]
+
+            return [nextYear, nextMonth]
+        })
+    }
 
     return (
-        <div id="calendar-root" className="flex flex-col justify-center w-3/4 laptop:w-5/6">
+        <div id="calendar-root" className="flex flex-col justify-center w-3/4 laptop:w-5/6 phone:w-[90%]">
             <div id="calendar-nav" className="flex justify-center mb-12 gap-4">
-                <div className="flex w-1/2 phone:w-full gap-2">
+                <div className="flex w-3/4 phone:w-full gap-2">
+                    <Button
+                        disableRipple
+                        isIconOnly
+                        color="default"
+                        variant="light"
+                        onPress={displayPreviousMonth}
+                    >
+                        <DoubleBackIcon width={16}/>
+                    </Button>
                     <Select
                         classNames={{
                             trigger: "py-0",
@@ -59,7 +109,7 @@ const DreamCalendar: FC = () => {
                                         key={item.key}
                                         color="primary"
                                         variant="flat"
-                                        className="max-w-[6rem]"
+                                        className="max-w-[10rem]"
                                         classNames={{
                                             content: "overflow-ellipsis whitespace-nowrap overflow-hidden font-semibold"
                                         }}
@@ -101,7 +151,7 @@ const DreamCalendar: FC = () => {
                                         key={item.key}
                                         color="primary"
                                         variant="flat"
-                                        className="max-w-[6rem]"
+                                        className="max-w-[10rem]"
                                         classNames={{
                                             content: "overflow-ellipsis whitespace-nowrap overflow-hidden font-semibold"
                                         }}
@@ -122,6 +172,15 @@ const DreamCalendar: FC = () => {
                             </SelectItem>
                         )}
                     </Select>
+                    <Button
+                        disableRipple
+                        isIconOnly
+                        color="default"
+                        variant="light"
+                        onPress={displayNextMonth}
+                    >
+                        <DoubleForwardIcon width={16}/>
+                    </Button>
                 </div>
             </div>
             <div id="days_of_week" className="grid grid-cols-7 mb-4 tablet:hidden">

diff --git a/src/app/(site)/(internal)/dashboard/calendar/utils/calendar-utils.ts b/src/app/(site)/(internal)/dashboard/calendar/utils/calendar-utils.ts
@@ -16,9 +16,14 @@ export const daysOfWeek = [
     "Saturday"
 ];
 
-export function getYearDropdownOptions(currentYear: number): CalendarDropdownOptions[] {
-    let minYear = currentYear - 4;
-    let maxYear = currentYear + 5;
+export function getYearDropdownOptions(currentYear: number, opts?: {
+    maxOffset?: number,
+    minOffset?: number,
+    startingYear?: number,
+    endingYear?: number,
+}): CalendarDropdownOptions[] {
+    let minYear = opts?.startingYear ?? currentYear - Math.abs(opts?.minOffset ?? 0);
+    let maxYear = opts?.endingYear ?? currentYear + Math.abs(opts?.maxOffset ?? 0);
     return range(minYear, maxYear + 1).map((y) => ({label: `${y}`, value: y}));
 }
 

diff --git a/src/app/(site)/components/icons/DoubleBackIcon.tsx b/src/app/(site)/components/icons/DoubleBackIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import {IconProps} from "@/app/(site)/components/icons/icon-utils";
+import clsx from "clsx";
+
+const DoubleBackIcon = ({className, fill, width, height}: IconProps) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlSpace="preserve"
+        width={width ?? 24}
+        height={height ?? width ?? 24}
+        viewBox="0 0 512 512"
+    >
+        <path
+            className={clsx("self-center", className)}
+            fill={clsx(fill ?? "currentColor")}
+            d="m297.2 478 20.7-21.6L108.7 256 317.9 55.6 297.2 34 65.5 256l231.7 222zM194.1 256 425.8 34l20.7 21.6L237.3 256l209.2 200.4-20.7 21.6-231.7-222z"/>
+    </svg>
+)
+export default DoubleBackIcon
diff --git a/src/app/(site)/components/icons/DoubleForwardIcon.tsx b/src/app/(site)/components/icons/DoubleForwardIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import {IconProps} from "@/app/(site)/components/icons/icon-utils";
+import clsx from "clsx";
+
+const DoubleForwardIcon = ({className, fill, width, height}: IconProps) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={width ?? 24}
+        height={height ?? width ?? 24}
+        data-name="Layer 1"
+        viewBox="0 0 512 512"
+    >
+        <path
+            className={clsx("self-center", className)}
+            fill={clsx(fill ?? "currentColor")}
+            d="m214.78 478-20.67-21.57L403.27 256 194.11 55.57 214.78 34l231.68 222Zm103.11-222L86.22 34 65.54 55.57 274.7 256 65.54 456.43 86.22 478Z"/>
+    </svg>
+)
+export default DoubleForwardIcon