feat: fix the calendar section

darraghoriordan · Sep 25, 2023 · 66fa90e · 66fa90e
1 parent 81128b2
commit 66fa90e
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 46 deletions.
diff --git a/src/app/DevHistory/Calendar.tsx b/src/app/DevHistory/Calendar.tsx
@@ -3,51 +3,85 @@ import React, { Fragment, useEffect, useRef } from 'react'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { IncrementAnalysis } from '../../electron/devHistory/models/IncrementAnalysis'
 import { ScheduledItem } from './Components/ScheduleItem'
+import {
+  eachDayOfInterval,
+  endOfMonth,
+  isMonday,
+  isSameMonth,
+  isSunday,
+  isToday,
+  nextSunday,
+  format,
+  previousMonday,
+} from 'date-fns'
 
-const days = [
-  { date: '2021-12-27' },
-  { date: '2021-12-28' },
-  { date: '2021-12-29' },
-  { date: '2021-12-30' },
-  { date: '2021-12-31' },
-  { date: '2022-01-01', isCurrentMonth: true },
-  { date: '2022-01-02', isCurrentMonth: true },
-  { date: '2022-01-03', isCurrentMonth: true },
-  { date: '2022-01-04', isCurrentMonth: true },
-  { date: '2022-01-05', isCurrentMonth: true },
-  { date: '2022-01-06', isCurrentMonth: true },
-  { date: '2022-01-07', isCurrentMonth: true },
-  { date: '2022-01-08', isCurrentMonth: true },
-  { date: '2022-01-09', isCurrentMonth: true },
-  { date: '2022-01-10', isCurrentMonth: true },
-  { date: '2022-01-11', isCurrentMonth: true },
-  { date: '2022-01-12', isCurrentMonth: true },
-  { date: '2022-01-13', isCurrentMonth: true },
-  { date: '2022-01-14', isCurrentMonth: true },
-  { date: '2022-01-15', isCurrentMonth: true },
-  { date: '2022-01-16', isCurrentMonth: true },
-  { date: '2022-01-17', isCurrentMonth: true },
-  { date: '2022-01-18', isCurrentMonth: true },
-  { date: '2022-01-19', isCurrentMonth: true },
-  { date: '2022-01-20', isCurrentMonth: true, isToday: true },
-  { date: '2022-01-21', isCurrentMonth: true },
-  { date: '2022-01-22', isCurrentMonth: true, isSelected: true },
-  { date: '2022-01-23', isCurrentMonth: true },
-  { date: '2022-01-24', isCurrentMonth: true },
-  { date: '2022-01-25', isCurrentMonth: true },
-  { date: '2022-01-26', isCurrentMonth: true },
-  { date: '2022-01-27', isCurrentMonth: true },
-  { date: '2022-01-28', isCurrentMonth: true },
-  { date: '2022-01-29', isCurrentMonth: true },
-  { date: '2022-01-30', isCurrentMonth: true },
-  { date: '2022-01-31', isCurrentMonth: true },
-  { date: '2022-02-01' },
-  { date: '2022-02-02' },
-  { date: '2022-02-03' },
-  { date: '2022-02-04' },
-  { date: '2022-02-05' },
-  { date: '2022-02-06' },
-]
+const firstDayOfMonth = new Date(2023, 8, 1)
+let nearestMonday = new Date(firstDayOfMonth)
+let lastSunday = endOfMonth(nearestMonday)
+
+if (!isMonday(nearestMonday)) {
+  nearestMonday = previousMonday(nearestMonday)
+}
+if (!isSunday(lastSunday)) {
+  lastSunday = nextSunday(lastSunday)
+}
+const newDays = eachDayOfInterval({
+  start: nearestMonday,
+  end: lastSunday,
+})
+
+const days = newDays.map(day => {
+  return {
+    date: format(day, 'yyyy-MM-dd'),
+    isCurrentMonth: isSameMonth(firstDayOfMonth, day),
+    isToday: isToday(day),
+    isSelected: false,
+  }
+})
+// const days = [
+//   { date: '2021-12-27' },
+//   { date: '2021-12-28' },
+//   { date: '2021-12-29' },
+//   { date: '2021-12-30' },
+//   { date: '2021-12-31' },
+//   { date: '2022-01-01', isCurrentMonth: true },
+//   { date: '2022-01-02', isCurrentMonth: true },
+//   { date: '2022-01-03', isCurrentMonth: true },
+//   { date: '2022-01-04', isCurrentMonth: true },
+//   { date: '2022-01-05', isCurrentMonth: true },
+//   { date: '2022-01-06', isCurrentMonth: true },
+//   { date: '2022-01-07', isCurrentMonth: true },
+//   { date: '2022-01-08', isCurrentMonth: true },
+//   { date: '2022-01-09', isCurrentMonth: true },
+//   { date: '2022-01-10', isCurrentMonth: true },
+//   { date: '2022-01-11', isCurrentMonth: true },
+//   { date: '2022-01-12', isCurrentMonth: true },
+//   { date: '2022-01-13', isCurrentMonth: true },
+//   { date: '2022-01-14', isCurrentMonth: true },
+//   { date: '2022-01-15', isCurrentMonth: true },
+//   { date: '2022-01-16', isCurrentMonth: true },
+//   { date: '2022-01-17', isCurrentMonth: true },
+//   { date: '2022-01-18', isCurrentMonth: true },
+//   { date: '2022-01-19', isCurrentMonth: true },
+//   { date: '2022-01-20', isCurrentMonth: true, isToday: true },
+//   { date: '2022-01-21', isCurrentMonth: true },
+//   { date: '2022-01-22', isCurrentMonth: true, isSelected: true },
+//   { date: '2022-01-23', isCurrentMonth: true },
+//   { date: '2022-01-24', isCurrentMonth: true },
+//   { date: '2022-01-25', isCurrentMonth: true },
+//   { date: '2022-01-26', isCurrentMonth: true },
+//   { date: '2022-01-27', isCurrentMonth: true },
+//   { date: '2022-01-28', isCurrentMonth: true },
+//   { date: '2022-01-29', isCurrentMonth: true },
+//   { date: '2022-01-30', isCurrentMonth: true },
+//   { date: '2022-01-31', isCurrentMonth: true },
+//   { date: '2022-02-01' },
+//   { date: '2022-02-02' },
+//   { date: '2022-02-03' },
+//   { date: '2022-02-04' },
+//   { date: '2022-02-05' },
+//   { date: '2022-02-06' },
+// ]
 const times = [
   '12AM',
   '1AM',
@@ -89,8 +123,10 @@ export function calculateTimeDegree(inputTime: Date) {
 }
 export default function Calendar({
   analysis,
+  date,
 }: {
   analysis: IncrementAnalysis[]
+  date: Date
 }) {
   const container = useRef<HTMLDivElement | null>(null)
   const containerNav = useRef<HTMLDivElement | null>(null)
@@ -255,7 +291,9 @@ export default function Calendar({
             <span className="sr-only">Previous month</span>
             <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
           </button>
-          <div className="flex-auto text-sm font-semibold">January 2022</div>
+          <div className="flex-auto text-sm font-semibold">
+            {format(date, 'MMMM yyyy')}
+          </div>
           <button
             type="button"
             className="flex items-center justify-center flex-none text-gray-400 -m-1.5 p-1.5 hover:text-gray-500"

diff --git a/src/app/DevHistory/DevHistoryScreen.tsx b/src/app/DevHistory/DevHistoryScreen.tsx
@@ -70,7 +70,7 @@ export function DevHistoryScreen() {
           {/* <TimeScaleMenu /> */}
         </div>
       </header>
-      {data ? <Calendar analysis={data.analysis} /> : null}
+      {data ? <Calendar date={selectedDate} analysis={data.analysis} /> : null}
     </div>
   )
   return (