more work on calendar

Author: devklick

src/common/utils/dateUtils.ts

@@ -1,3 +1,5 @@
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+
 export function getMonthName(
   monthIndex: number,
   locale = "en-US",
@@ -30,3 +32,60 @@ export function isToday(
     day === today.getDate()
   );
 }
+
+export function startOfDay(date: Date) {
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    0,
+    0,
+    0,
+    0,
+  );
+}
+
+export function startOfDayUTC(date: Date) {
+  return Date.UTC(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    0,
+    0,
+    0,
+    0,
+  );
+}
+
+export function diffBetweenDates(start: Date, end: Date) {
+  const startOfEarlier = startOfDay(start);
+  const startOfEnd = startOfDay(end);
+
+  const utcEarlier = startOfDayUTC(startOfEarlier);
+  const utcLater = startOfDayUTC(startOfEnd);
+
+  return Math.round((utcLater - utcEarlier) / MS_PER_DAY);
+}
+
+export function toLocalISODateString(date: Date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+export function getSpannedDays(start: Date, end: Date): Date[] {
+  const days: Date[] = [];
+  let cursor = startOfDay(start);
+
+  while (cursor < end) {
+    days.push(cursor);
+    cursor = new Date(
+      cursor.getFullYear(),
+      cursor.getMonth(),
+      cursor.getDate() + 1,
+    );
+  }
+
+  return days;
+}

src/components/BorderedApp/BorderedApp.tsx

@@ -32,7 +32,7 @@ export interface BorderedAppContentHandles<T extends HTMLElement> {
    * Function for the app content (such as calculator, calendar etc) to implement
    * and handle keyDown events that fire from the bordered app.
    */
-  onParentKeyDown(e: React.KeyboardEvent): void;
+  onBorderedAppKeyDown?(e: React.KeyboardEvent): void;
   /**
    * A reference to the app content's main element.
    */
@@ -76,7 +76,7 @@ function BorderedApp<
 
   // Listen for keyDown events and send them down to the content rendered inside the bordered app
   const handleKeyDown = (e: KeyboardEvent) =>
-    contentRef.current?.onParentKeyDown(e);
+    contentRef.current?.onBorderedAppKeyDown?.(e);
 
   // Need a ref to point to the app for moving it around the screen
   const appRef = useRef<HTMLDivElement | null>(null);

src/hooks/useDragToResize.ts

@@ -92,7 +92,6 @@ function useDragToResize({
           newWidth >= minDimensions.width &&
           (!maxDimensions || newWidth <= maxDimensions.width)
         ) {
-          console.log("maxwidth", maxDimensions?.width, "new width", newWidth);
           elementRect.current.width = newWidth;
           elementRef.current.style.width = `${elementRect.current.width}px`;
           elementRect.current.left = newLeft;

src/programs/Calculator/Calculator.tsx

@@ -43,7 +43,7 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
     };
 
     useImperativeHandle(ref, () => ({
-      onParentKeyDown(e) {
+      onBorderedAppKeyDown(e) {
         const { key } = e;
 
         if (isDigit(key) || operators.has(key)) {

src/programs/Calendar/Calendar.tsx

@@ -1,7 +1,6 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import useToggle from "../../hooks/useToggle";
 import {
-  StyledCalendarDay,
   StyledCalendarDays,
   StyledCalendarDaysFrame,
   StyledCalendarLayout,
@@ -10,6 +9,8 @@ import useSystemSettings from "../../stores/systemSettingsStore";
 import { BorderedAppContentHandles } from "../../components/BorderedApp/BorderedApp";
 import CalendarNavigation from "./CalendarNavigation/CalendarNavigation";
 import { useCalendar } from "./hooks/useCalendar";
+import CalendarSidebar from "./CalendarSidebar/CalendarSidebar";
+import CalendarDay from "./CalendarDay/CalendarDay";
 
 type CalendarHandles = BorderedAppContentHandles<HTMLDivElement>;
 
@@ -19,74 +20,40 @@ const Calendar = forwardRef<CalendarHandles, CalendarProps>((_props, ref) => {
   const sidebarToggle = useToggle();
   const calendarRef = useRef<HTMLDivElement>(null);
   const calendar = useCalendar();
-  const [mainColor, accentColor, fontColor] = useSystemSettings((s) => [
-    s.mainColor,
-    s.accentColor,
-    s.fontColor,
-  ]);
+  const [accentColor] = useSystemSettings((s) => [s.accentColor]);
 
   useImperativeHandle(ref, () => ({
-    onParentKeyDown() {},
     element: calendarRef.current,
   }));
 
-  useEffect(() => {
-    console.log("sidebar toggle", sidebarToggle.state);
-  }, [sidebarToggle.state]);
-
-  useEffect(() => {
-    if (!calendarRef.current) return;
-    const el = calendarRef.current;
-
-    function onResize(entries: ResizeObserverEntry[]) {
-      const entry = entries[0];
-      if (!entry) return;
-
-      const width = entry.contentRect.width;
-
-      const wide = width >= 600;
-      sidebarToggle.setState(wide);
-    }
-
-    const observer = new ResizeObserver(onResize);
-
-    observer.observe(el);
-
-    return () => {
-      if (el) observer.unobserve(el);
-      observer.disconnect();
-    };
-  });
-
   return (
     <StyledCalendarLayout
       ref={calendarRef}
       sidebarOpen={sidebarToggle.state}
       className="calendar"
     >
       <CalendarNavigation
-        month={calendar.month}
-        year={calendar.year}
+        month={calendar.cursor.getMonth()}
+        year={calendar.cursor.getFullYear()}
         onClickNextMonth={calendar.nextMonth}
         onClickNextYear={calendar.nextYear}
         onClickPrevMonth={calendar.prevMonth}
         onClickPrevYear={calendar.prevYear}
       />
+      <CalendarSidebar date={calendar.cursor} />
       <StyledCalendarDaysFrame frameColor={accentColor}>
         <StyledCalendarDays
           borderColor={accentColor}
           className="calendar__days"
         >
-          {calendar.days.map(({ date, day, isToday, isThisMonth }) => (
-            <StyledCalendarDay
-              backgroundColor={mainColor}
-              color={fontColor}
-              currentMonth={isThisMonth}
-            >
-              <span>{day}</span>
-              <span>{date}</span>
-              {isToday && <span>TODAY</span>}
-            </StyledCalendarDay>
+          {calendar.days.map((day) => (
+            <CalendarDay
+              date={day.date}
+              isThisMonth={day.isThisMonth}
+              isToday={day.isToday}
+              onClick={() => calendar.setCursor(day.date)}
+              key={day.date.toISOString()}
+            />
           ))}
         </StyledCalendarDays>
       </StyledCalendarDaysFrame>

src/programs/Calendar/CalendarDay/CalendarDay.tsx

@@ -0,0 +1,38 @@
+import { getDayName } from "../../../common/utils/dateUtils";
+import useSystemSettings from "../../../stores/systemSettingsStore";
+import { StyledCalendarDay } from "./styles";
+
+interface CalendarDayProps {
+  date: Date;
+  isToday: boolean;
+  isThisMonth: boolean;
+  onClick(): void;
+}
+
+export default function CalendarDay({
+  date,
+  isToday,
+  isThisMonth,
+  onClick,
+}: CalendarDayProps) {
+  const [mainColor, fontColor] = useSystemSettings((s) => [
+    s.mainColor,
+    s.accentColor,
+    s.fontColor,
+  ]);
+  const dayOfWeek = getDayName(date.getDay());
+  const dayOfMonth = date.getDate();
+
+  return (
+    <StyledCalendarDay
+      backgroundColor={mainColor}
+      color={fontColor}
+      currentMonth={isThisMonth}
+      onClick={onClick}
+    >
+      <span>{dayOfWeek}</span>
+      <span>{dayOfMonth}</span>
+      {isToday && <span>TODAY</span>}
+    </StyledCalendarDay>
+  );
+}

src/programs/Calendar/CalendarDay/styles.ts

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+import { darken, lighten } from "polished";
+import { isLight } from "../../../common/utils/colorUtils";
+
+interface StyledCalendarDayProps {
+  backgroundColor: string;
+  color: string;
+  currentMonth: boolean;
+}
+
+export const StyledCalendarDay = styled.div<StyledCalendarDayProps>`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) =>
+    props.currentMonth
+      ? undefined
+      : isLight(props.color)
+        ? darken(0.3, props.color)
+        : lighten(0.3, props.color)};
+  transition: background-color 0.3s;
+  :hover {
+    background-color: ${(props) =>
+      isLight(props.backgroundColor)
+        ? darken(0.1, props.backgroundColor)
+        : lighten(0.1, props.backgroundColor)};
+  }
+`;

src/programs/Calendar/CalendarLauncher/CalendarLauncher.tsx

@@ -13,6 +13,7 @@ function CalendarLauncher(_props: CalendarLauncherProps) {
       windowType={"calendar"}
       WindowTitle="Calendar"
       initialDimensions={{ height: 500, width: 500 }}
+      minDimensions={{ height: 500, width: 500 }}
       menus={[]}
       appContent={<Calendar />}
       icon=""

src/programs/Calendar/CalendarNavigation/styles.tsx

@@ -6,6 +6,7 @@ interface StyledCalendarNavigationProps {}
 export const StyledCalendarNavigation = styled.div<StyledCalendarNavigationProps>`
   width: 100%;
   display: flex;
+  grid-area: nav;
 `;
 
 interface StyledNavigationButtonProps {}

src/programs/Calendar/CalendarSidebar/CalendarSidebar.tsx

@@ -0,0 +1,16 @@
+// import useCalendarEvents from "../hooks/useCalendarEvents";
+import { StyledCalendarSidebar } from "./styles";
+
+interface CalendarSidebarProps {
+  date: Date;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function CalendarSidebar({ date }: CalendarSidebarProps) {
+  // const events = useCalendarEvents({ date });
+  return (
+    <StyledCalendarSidebar className="calendar__side-bar">
+      {date.toISOString()}
+    </StyledCalendarSidebar>
+  );
+}