Start calendar implementation

.gitignore

@@ -37,6 +37,7 @@ yarn-error.log*
 next-env.d.ts
 
 .idea
+.turbo
 
 /private
 /.react-email

package.json

@@ -27,6 +27,7 @@
     "aws-sdk": "^2.1483.0",
     "axios": "^1.5.1",
     "bcrypt": "^5.1.1",
+    "dayjs": "^1.11.10",
     "framer-motion": "^10.16.4",
     "jsonwebtoken": "^9.0.2",
     "next": "^13.5.6",
@@ -35,6 +36,7 @@
     "next-nprogress-bar": "^2.1.2",
     "next-themes": "^0.2.1",
     "nodemailer": "^6.9.7",
+    "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-email": "1.9.5",
@@ -52,6 +54,7 @@
     "@types/multer": "^1.4.9",
     "@types/node": "^20",
     "@types/nodemailer": "^6.4.13",
+    "@types/ramda": "^0.29.7",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",

src/app/(site)/(internal)/dashboard/calendar/components/Calendar.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import {FC, useState} from "react";
+import Select from "@/app/(site)/components/inputs/Select";
+import {
+    createDaysForCurrentMonth,
+    createDaysForNextMonth, createDaysForPreviousMonth,
+    daysOfWeek
+} from "@/app/(site)/(internal)/dashboard/calendar/utils/calendar-utils";
+
+const Calendar: FC = () => {
+    const [[year, month], setCurrentYearAndMonth] = useState<[number, number]>([new Date().getFullYear(), new Date().getMonth() + 1]);
+
+    let currentMonthDays = createDaysForCurrentMonth(year, month);
+    let previousMonthDays = createDaysForPreviousMonth(
+        year,
+        month,
+        currentMonthDays
+    );
+    let nextMonthDays = createDaysForNextMonth(year, month, currentMonthDays);
+    let calendarGridDayObjects = [
+        ...previousMonthDays,
+        ...currentMonthDays,
+        ...nextMonthDays
+    ];
+
+    return (
+        <div id="calendar-root" className="flex flex-col justify-center w-3/4 phone:w-5/6">
+            <div id="calendar-nav" className="flex justify-center mb-12 gap-4">
+                <div className="flex w-1/2 gap-2">
+                    <Select
+                        label="Month"
+                        id="month_selector"
+                        items={[]}
+                    >
+                        {(item) => <></>}
+                    </Select>
+                    <Select
+                        label="Year"
+                        id="year_selector"
+                        items={[]}
+                    >
+                        {(item) => <></>}
+                    </Select>
+                </div>
+
+            </div>
+            <div id="days_of_week" className="grid grid-cols-7 mb-4 tablet:hidden">
+                {daysOfWeek.map((day, i) => (
+                    <p
+                        className="text-center font-semibold"
+                        key={i}
+                    >
+                        {day}
+                    </p>
+
+                ))}
+            </div>
+            <div id="days_of_week"
+                 className="grid grid-cols-7 bg-primary p-2 font-semibold text-xl phone:text-medium tablet:border-x-1 tablet:border-primary tablet-min:hidden">
+                {daysOfWeek.map((day, i) => (
+                    <p
+                        key={i}
+                        className="text-center font-semibold"
+                    >
+                        {day.charAt(0)}
+                    </p>
+
+                ))}
+            </div>
+            <div id="days-grid" className="grid grid-cols-7 tablet:border-x-1 tablet:border-primary">
+                {
+                    calendarGridDayObjects.map(day => (
+                        <div
+                            key={day.dateString}
+                            className="h-fit border border-primary tablet:border-0 tablet:border-b-1"
+                        >
+                            <div
+                                className="bg-primary tablet:bg-[#9E23FF1A] p-2 font-semibold text-xl phone:text-medium">
+                                {day.dayOfMonth}
+                            </div>
+                            <div className="p-2 bg-[#9E23FF1A]">
+                                hi
+                            </div>
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Calendar

src/app/(site)/(internal)/dashboard/calendar/page.tsx

@@ -0,0 +1,13 @@
+import {FC, Fragment} from "react";
+import Calendar from "@/app/(site)/(internal)/dashboard/calendar/components/Calendar";
+
+const CalendarPage: FC = () => {
+    return (
+        <Fragment>
+            <h1 className="font-bold text-7xl phone:text-5xl mb-24 phone:mb-10">Dream Calendar</h1>
+            <Calendar/>
+        </Fragment>
+    )
+}
+
+export default CalendarPage

src/app/(site)/(internal)/dashboard/calendar/utils/calendar-utils.ts

@@ -0,0 +1,100 @@
+import { range } from "ramda";
+import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+
+dayjs.extend(weekday);
+dayjs.extend(weekOfYear);
+
+export const daysOfWeek = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+];
+
+export function getYearDropdownOptions(currentYear: number) {
+    let minYear = currentYear - 4;
+    let maxYear = currentYear + 5;
+    return range(minYear, maxYear + 1).map((y) => ({ label: `${y}`, value: y }));
+}
+
+export function getMonthDropdownOptions() {
+    return range(1, 13).map((m) => ({
+        value: m,
+        label: dayjs()
+            .month(m - 1)
+            .format("MMMM")
+    }));
+}
+
+export function getNumberOfDaysInMonth(year: number, month: number) {
+    return dayjs(`${year}-${month}-01`).daysInMonth();
+}
+
+export function createDaysForCurrentMonth(year: number, month: number) {
+    return [...Array(getNumberOfDaysInMonth(year, month))].map((_, index) => {
+        return {
+            dateString: dayjs(`${year}-${month}-${index + 1}`).format("YYYY-MM-DD"),
+            dayOfMonth: index + 1,
+            isCurrentMonth: true
+        };
+    });
+}
+
+export function createDaysForPreviousMonth(year: number, month: number, currentMonthDays: any[]) {
+    const firstDayOfTheMonthWeekday = getWeekday(currentMonthDays[0].dateString);
+    const previousMonth = dayjs(`${year}-${month}-01`).subtract(1, "month");
+
+    const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday;
+
+    const previousMonthLastMondayDayOfMonth = dayjs(
+        currentMonthDays[0].dateString
+    )
+        .subtract(visibleNumberOfDaysFromPreviousMonth, "day")
+        .date();
+
+    return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((_, index) => {
+        return {
+            dateString: dayjs(
+                `${previousMonth.year()}-${previousMonth.month() + 1}-${
+                    previousMonthLastMondayDayOfMonth + index
+                }`
+            ).format("YYYY-MM-DD"),
+            dayOfMonth: previousMonthLastMondayDayOfMonth + index,
+            isCurrentMonth: false,
+            isPreviousMonth: true
+        };
+    });
+}
+
+export function createDaysForNextMonth(year: number, month: number, currentMonthDays: any) {
+    const lastDayOfTheMonthWeekday = getWeekday(
+        `${year}-${month}-${currentMonthDays.length}`
+    );
+    const nextMonth = dayjs(`${year}-${month}-01`).add(1, "month");
+    const visibleNumberOfDaysFromNextMonth = 6 - lastDayOfTheMonthWeekday;
+
+    return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => {
+        return {
+            dateString: dayjs(
+                `${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`
+            ).format("YYYY-MM-DD"),
+            dayOfMonth: index + 1,
+            isCurrentMonth: false,
+            isNextMonth: true
+        };
+    });
+}
+
+// sunday === 0, saturday === 6
+export function getWeekday(dateString: string) {
+    return dayjs(dateString).weekday();
+}
+
+export function isWeekendDay(dateString: string) {
+    return [6, 0].includes(getWeekday(dateString));
+}

src/app/(site)/(internal)/dashboard/components/DashboardSidebar.tsx

@@ -21,7 +21,7 @@ const DashboardSidebar: FC = () => {
                 <SidebarItem
                     startContent={<CalendarIcon />}
                     title="Dream Calendar"
-                    href="/dashboard"
+                    href="/dashboard/calendar"
                 />
                 <SidebarItem
                     startContent={<SearchFilledIcon />}

src/app/(site)/(internal)/settings/account/components/DeleteAccountButton.tsx

@@ -6,15 +6,15 @@ import ConfirmationModal from "@/app/(site)/components/ConfirmationModal";
 import {AnimatePresence, motion} from "framer-motion";
 import Input from "@/app/(site)/components/inputs/Input";
 import {signOut, useSession} from "next-auth/react";
-import {deleteMutator} from "@/utils/client/client-utils";
+import {deleteMutatorWithArgs} from "@/utils/client/client-utils";
 import {DeleteSelfDto} from "@/app/api/me/self-user.dto";
 import useSWRMutation from "swr/mutation";
 import {Member} from "@prisma/client";
 import toast from "react-hot-toast";
 import {AxiosError} from "axios";
 
 const DeleteAccount = () => (
-    useSWRMutation('/api/me', deleteMutator<DeleteSelfDto, Member>())
+    useSWRMutation('/api/me', deleteMutatorWithArgs<DeleteSelfDto, Member>())
 )
 
 const DeleteAccountButton: FC = () => {

src/utils/client/client-utils.tsx

@@ -21,7 +21,8 @@ export type MutatorArgs<T> = {
 export const postMutator = <B, R>() => (url: string, {arg}: MutatorArgs<B>) => axios.post<R>(url, arg.body)
 export const patchMutator = <B, R>() => (url: string, {arg}: MutatorArgs<B>) => axios.patch<R>(url, arg.body)
 
-export const deleteMutator = <B extends Record<string, string>, R>() => (url: string, args?: MutatorArgs<B>) => axios.delete<R>(`${url}${args ? "?" + new URLSearchParams(args.arg.body).toString() : ""}`)
+export const deleteMutatorWithArgs = <B extends Record<string, string> | undefined, R>() => (url: string, args?: MutatorArgs<B>) => axios.delete<R>(`${url}${args ? "?" + new URLSearchParams(args.arg.body).toString() : ""}`)
+export const deleteMutator = <R,>() => (url: string) => axios.delete<R>(url)
 
 
 export function handleAxiosError(error: any): undefined {

turbo.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "pipeline": {
+    "build": {
+      "outputs": [".next/**", "!.next/cache/**"]
+    },
+    "lint": {}
+  }
+}