Added event feature (#42)

* enhance: Enhanced ui & completed calendar month-mode * feat: Added moon phase & astro, worked on responsivness for medium screens * feat: Added moon phase, astro hide/show control feature * fix: Fixed select dropdown height bug * chore: Minor UI adustments * feat: YearMode, WeekMode & Enhance layouts for better mobile screen view * fix: Fixed type error during build time * feat: Implemented event calendar * chore: Updated GUIDE_FOR_ADDING_EVENT_CALENDAR.md * chore: Synced forked repo * chore: Added event reader function * chore: Updated GUIDE_FOR_ADDING_EVENT_CALENDAR.md * chore: Updated GUIDE_FOR_ADDING_EVENT_CALENDAR.md
myanmarcyberyouths · Oct 21, 2023 · c258a95 · c258a95
1 parent 264a7cd
commit c258a95
Show file tree

Hide file tree

Showing 30 changed files with 484 additions and 124 deletions.
diff --git a/apps/myanmar_calendar/src/assets/styles/scroll.css b/apps/myanmar_calendar/src/assets/styles/scroll.css
@@ -6,6 +6,25 @@ html {
   overflow-x: hidden;
 }
 
+.__scrollbar-xs {
+  scrollbar-width: thin;
+  scrollbar-width: none;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow: overlay;
+}
+.__scrollbar-xs::-webkit-scrollbar {
+  width: 3px;
+  height: 3.5px;
+}
+.__scrollbar-xs::-webkit-scrollbar-thumb {
+  border-radius: 1.2rem;
+  background-color: #bfbfbf;
+}
+.__scrollbar-xs::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
+}
+
 .__scrollbar-sm {
   scrollbar-width: thin;
   overflow-y: scroll;
@@ -42,10 +61,10 @@ html {
 }
 .__scrollbar-md::-webkit-scrollbar-thumb {
   border-radius: 1.2rem;
-  background-color: #b8b8b8;
+  background-color: #c8c8c8;
 }
 .__scrollbar-md::-webkit-scrollbar-thumb:hover {
-  background-color: #a7a7a7;
+  background-color: #b0b0b0;
 }
 
 .__scrollbar-lg {

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx
@@ -1,12 +1,14 @@
+import { ScrollArea, ScrollBar, ScrollViewport } from "@/components/ui/areas/ScrollArea";
+import event_calendars from "@/event_calendars";
 import { cn } from "@/lib/utils";
 import { CalendarStateInterface } from "@/store/calendarState";
 import { setDayDialongTargetDay } from "@/store/modelControlState";
-import { LANGUAGE_ENUM } from "@/type-models/calendarState.type";
+import { brightenColor } from "@/utils/brightenColor";
 import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber";
-import { getLocalTime } from "@/utils/helpers";
+import { modifyColorOpacity } from "@/utils/modifyColorOpacity";
 import { englishToMyanmarDate, i18n } from "burma-calendar";
 import { format, isSameMonth, isSameWeek, isToday, lastDayOfMonth } from "date-fns";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 
 interface MonthCellT {
@@ -16,7 +18,7 @@ interface MonthCellT {
 
 function MonthCell({ day, calendarState }: MonthCellT) {
   const dispatch = useDispatch();
-  const { calendarLanguage, activeDate, preferance } = calendarState;
+  const { calendarLanguage, activeDate, preferance, eventCalendars } = calendarState;
   const [dayIsToday, setDayIsToday] = useState(false);
 
   let activeDateObj = new Date(activeDate);
@@ -25,27 +27,36 @@ function MonthCell({ day, calendarState }: MonthCellT) {
   const dayIsInEndWeek = isSameWeek(lastDayOfMonth(activeDateObj), day);
 
   const mmDate = i18n(engToMyanmarNumber(englishToMyanmarDate(day).date), "myanmar", "myanmar" as any);
-  const myanmar_calendar = englishToMyanmarDate(day);
-  const moonAlign = myanmar_calendar.moonPhase === "လပြည့်" || myanmar_calendar.moonPhase === "လကွယ်";
+  const myanmarDate = englishToMyanmarDate(day);
+  const moonAlign = myanmarDate.moonPhase === "လပြည့်" || myanmarDate.moonPhase === "လကွယ်";
 
   React.useEffect(() => {
     setDayIsToday(isToday(day));
   }, [day]);
 
+  // Eg; event_calendars(day, ["international", "publicHolidays"])
+  const checkedEvents = event_calendars(
+    day,
+    Object.keys(eventCalendars).filter((calendar) => {
+      if (eventCalendars[calendar].checked === true) return calendar;
+    })
+  );
+
   return (
+    // min-h-[8.5rem]
     <div
       className={cn(
-        "border-b border-r flex flex-col items-stretch border-gray-300 p-2 py-[0.25rem] pb-[0.3rem]  min-h-[8.5rem] hover:bg-gray-50",
+        "border-b border-r flex gap-1 flex-col items-stretch border-gray-300 p-2 py-[0.25rem] pb-[0.3rem]  min-h-[8.5rem] hover:bg-gray-50",
         dayIsInEndWeek ? "min-h-[8.65rem] pb-[0.45rem]" : ""
       )}
       onClick={() => {
         dispatch(setDayDialongTargetDay(day.toISOString()));
       }}>
       {/* ------ CELL TOP ------- */}
-      <div className=" flex justify-between items-start ">
+      <div className=" flex justify-between items-start">
         <time
           dateTime={format(day, "yyyy-MM-dd")}
-          className={cn("flex justify-start -mt-[0.05rem] text-gray-500 flex-1 text-[0.92rem] leading-5", dayBelongsInActiveMonth ? "text-gray-500" : "text-gray-300")}>
+          className={cn("flex justify-start -mt-[0.05rem] text-gray-500 flex-1 text-[0.975rem] leading-5", dayBelongsInActiveMonth ? "text-gray-500" : "text-gray-300")}>
           {mmDate}
         </time>
         <time
@@ -62,37 +73,74 @@ function MonthCell({ day, calendarState }: MonthCellT) {
           )}
         </time>
         {/* ASTRO */}
-        <div className={cn("flex flex-1 self-stretch min-w-[1.5rem] justify-end items-center gap-1 transition-all", preferance.astro ? "opacity-100" : "opacity-0")}>
+        <div className={cn("flex flex-1 self-stretch min-w-[1.5rem] justify-end items-center gap-1 transition-all", preferance.astroEvent ? "opacity-100" : "opacity-0")}>
           {/* long text on large screen */}
-          <span className={`hidden md3:inline text-[0.65rem] whitespace-nowrap ${myanmar_calendar.pyathada ? "text-red-500" : "text-blue-500"}`}>
-            {myanmar_calendar.pyathada || myanmar_calendar.yatyaza}
-          </span>
+          <span className={`hidden md3:inline text-[0.65rem] whitespace-nowrap ${myanmarDate.pyathada ? "text-red-500" : "text-blue-500"}`}>{myanmarDate.pyathada || myanmarDate.yatyaza}</span>
           {/* short text on small screen */}
-          <span className={`inline md3:hidden text-[0.65rem] ${myanmar_calendar.pyathada ? "text-red-400" : "text-blue-500"}`}>{myanmar_calendar.pyathada ? "ပြ" : "ရာ"}</span>
+          <span className={`inline md3:hidden text-[0.65rem] ${myanmarDate.pyathada ? "text-red-400" : "text-blue-500"}`}>{myanmarDate.pyathada ? "ပြ" : "ရာ"}</span>
         </div>
       </div>
 
       {/* ------ CELL MIDDLE ------- */}
-      <div className="flex-1 "></div>
+      {/* <ScrollArea
+        className="flex-1 h-fit w-full overflow-hidden"
+        type="hover"
+        scrollHideDelay={100}>
+      <ScrollViewport className="max-h-full w-full"> */}
+      <div className="flex-1 __scrollbar-xs">
+        <ul className=" space-y-[0.15rem] ">
+          {checkedEvents.map((eventCalendar) => (
+            <>
+              {eventCalendar.events.map((event) => (
+                // h-[1.25rem]
+                <li
+                  key={event}
+                  className="rounded-sm flex items-start py-[0.335rem]   px-1 gap-1 bg-gray-100"
+                  style={{
+                    backgroundColor: modifyColorOpacity(eventCalendars[eventCalendar.eventType].tagColor, 0.15),
+                    // backgroundColor: brightenColor(eventCalendars[eventCalendar.eventType].tagColor, 85),
+                  }}>
+                  <span
+                    className="inline-block w-[0.35rem] h-[0.35rem] rounded-full bg-gray-500 mt-[0.15rem] flex-shrink-0"
+                    style={{
+                      backgroundColor: eventCalendars[eventCalendar.eventType].tagColor,
+                    }}></span>
+                  <span
+                    className="text-[0.7rem] text-gray-600 -mt-[0.1rem] font-semibold leading-[0.7rem]"
+                    style={{
+                      color: eventCalendars[eventCalendar.eventType].tagColor,
+                    }}>
+                    {event}
+                  </span>
+                </li>
+              ))}
+            </>
+          ))}
+        </ul>
+      </div>
+      {/* <ScrollBar
+            className=""
+            thumbClassName="bg-gray-300"
+          />
+        </ScrollViewport>
+      </ScrollArea> */}
 
       {/* ------ CELL BOTTOM ------- */}
-      <div className="flex justify-between items-center h-[1.1rem]">
-        <ul>
-          <li>
-            <p></p>
-          </li>
-        </ul>
-        {/* MOON PHASE */}
-        <div className={cn("flex gap-1 items-center transition-all", preferance.moonPhase ? "opacity-100" : "opacity-0")}>
-          {(mmDate == "၁" || moonAlign) && (
-            <span className="hidden md2:inline text-[0.68rem] leading-[1.3rem] text-gray-600 whitespace-nowrap overflow-x-hidden">
-              {myanmar_calendar.month}
-              {myanmar_calendar.moonPhase}
-            </span>
-          )}
-          {moonAlign && <span className={`w-[0.91rem] h-[0.91rem] flex-shrink-0  rounded-full ${myanmar_calendar.moonPhase === "လပြည့်" ? "bg-red-500" : "bg-gray-600"}`}></span>}
+      {(mmDate == "၁" || moonAlign) && preferance.moonPhase && (
+        <div className="flex justify-between items-center h-[1.1rem] flex-shrink-0">
+          <div></div>
+          {/* MOON PHASE */}
+          <div className={cn("flex gap-1 items-center transition-all", preferance.moonPhase ? "opacity-100" : "opacity-0")}>
+            {(mmDate == "၁" || moonAlign) && (
+              <span className="hidden md2:inline text-[0.68rem] leading-[1.3rem] text-gray-600 whitespace-nowrap overflow-x-hidden">
+                {myanmarDate.month}
+                {myanmarDate.moonPhase}
+              </span>
+            )}
+            {moonAlign && <span className={`w-[0.91rem] h-[0.91rem] flex-shrink-0  rounded-full ${myanmarDate.moonPhase === "လပြည့်" ? "bg-red-500" : "bg-gray-600"}`}></span>}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthMode.tsx
@@ -9,12 +9,8 @@ import { cn } from "@/lib/utils";
 
 function MonthMode() {
   const calendarState = useSelector((state: RootState) => state.calendarState);
-  const { activeDate, calendarLanguage, ...rest } = calendarState;
-  const [activeDateObj, setActiveDateObj] = useState<Date>();
-
-  useEffect(() => {
-    setActiveDateObj(new Date(activeDate));
-  }, [activeDate]);
+  const { activeDate } = calendarState;
+  let activeDateObj = new Date(activeDate);
 
   let days = eachDayOfInterval({
     start: startOfWeek(startOfMonth(getLocalTime(activeDateObj))),
@@ -36,7 +32,8 @@ function MonthMode() {
         ))}
       </div>
       {/* min-h-[41rem] */}
-      <div className="w-full h-[calc(100%-2.25rem)]  grid grid-cols-[repeat(7,minmax(auto,1fr))] grid-flow-row-dense">
+      {/* grid-rows-[repeat(auto-fill,minmax(1fr,auto))] */}
+      <div className="w-full h-[calc(100%-2.25rem)]  grid grid-cols-[repeat(7,minmax(auto,1fr))] grid-flow-row auto-rows-[1fr]">
         {days.map((day, dayIdx) => (
           <MonthCell
             key={day.toString()}

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumn.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumn.tsx
@@ -22,17 +22,17 @@ function WeekColumn({ day, calendarState }: WeekColumnPropsI) {
           {myanmar_calendar.moonPhase} <span className="text-sm mb-[0.1rem] ml-1">{mmDate}</span>
         </span>
       </div> */}
-      {/* <div className="p-2">
-        {preferance.astro && (myanmar_calendar.pyathada || myanmar_calendar.yatyaza) && (
+      <div className="p-2">
+        {preferance.astroEvent && (myanmar_calendar.pyathada || myanmar_calendar.yatyaza) && (
           <span
             className={cn(
-              "h-[2.5rem] bg-gray-100 w-full px-2 flex items-center justify-center text-[0.825rem] font-semibold rounded-md",
+              "h-[2.3rem] bg-gray-100 w-full px-2 flex items-center justify-center text-[0.825rem] font-semibold rounded-md",
               myanmar_calendar.pyathada ? "text-red-400 bg-red-50" : "text-blue-500 bg-blue-50"
             )}>
             {myanmar_calendar.pyathada || myanmar_calendar.yatyaza}
           </span>
         )}
-      </div> */}
+      </div>
     </div>
   );
 }

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumnHead.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumnHead.tsx
@@ -34,7 +34,7 @@ function WeekColumnHead({ day, scrollReachedTop }: { day: Date; scrollReachedTop
         <div className="p-1 px-[0.35rem] pb-[0.3rem]">
           <time
             dateTime={format(day, "yyyy-MM-dd")}
-            className="h-[2rem] w-full px-2 flex items-center justify-center text-[0.825rem] bg-[#efefef] text-[#929499] font-semibold rounded-md">
+            className="h-[2rem] w-full px-2 flex items-center justify-center text-[0.825rem] bg-[#efefef] text-gray-500 font-semibold rounded-md">
             <span className="text-[0.825rem] font-semibold ">
               {myanmar_calendar.month}
               {myanmar_calendar.moonPhase}

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekMode.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import CommingSoonBanner from "../CommingSoonBanner";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/store";
@@ -13,10 +13,13 @@ import WeekColumnHead from "./WeekColumnHead";
 function WeekMode() {
   const dispatch = useDispatch();
   const calendarState = useSelector((state: RootState) => state.calendarState);
+  const { activeDate } = calendarState;
+
+  const activeDateObj = new Date(activeDate);
 
   const days = eachDayOfInterval({
-    start: startOfWeek(new Date(calendarState.activeDate)),
-    end: endOfWeek(new Date(calendarState.activeDate)),
+    start: startOfWeek(activeDateObj),
+    end: endOfWeek(activeDateObj),
   });
 
   // Scroll Events Handling

diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearMode.tsx
@@ -6,10 +6,7 @@ import { RootState } from "@/store";
 
 function YearMode() {
   const { activeDate } = useSelector((state: RootState) => state.calendarState);
-  const [activeDateObj, setActiveDateObj] = useState<Date>(new Date());
-  useEffect(() => {
-    setActiveDateObj(new Date(activeDate));
-  }, [activeDate]);
+  let activeDateObj = new Date(activeDate);
 
   const months = eachMonthOfInterval({
     start: startOfYear(activeDateObj),

diff --git a/apps/myanmar_calendar/src/components/layouts/Navbar/ActiveDateIndicator.tsx b/apps/myanmar_calendar/src/components/layouts/Navbar/ActiveDateIndicator.tsx
@@ -26,7 +26,7 @@ function ActiveDateIndicator() {
           dateTime={format(activeDateObj, "yyyy-MM-dd")}
           className="text-[1.1rem] text-gray-700">
           {i18n("Myanmar Year", "english", calendarLanguage as any)} {i18n(engToMyanmarNumber(englishToMyanmarDate(firstDayCurrentMonth).year), "myanmar", calendarLanguage as any)}{" "}
-          {i18n("Ku", "english", calendarLanguage as any)}
+          {i18n("Ku", "english", calendarLanguage as any)}{" "}
           {calendarMode !== CALENDAR_MODE_ENUM.YEAR && (
             <>
               {i18n(englishToMyanmarDate(firstDayCurrentMonth).month, "myanmar", calendarLanguage as any)}

diff --git a/...youts/Sidebar/CalendarPropListControl.tsx → ...ayouts/Sidebar/CalendarPreferanceList.tsx b/...youts/Sidebar/CalendarPropListControl.tsx → ...ayouts/Sidebar/CalendarPreferanceList.tsx
@@ -4,7 +4,7 @@ import { updateCalendarPreferanceState } from "@/store/calendarState";
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-function CalendarPropListControl() {
+function CalendarPreferanceList() {
   const dispatch = useDispatch();
   const calendarPreferance = useSelector((state: RootState) => state.calendarState.preferance);
 
@@ -32,4 +32,4 @@ function CalendarPropListControl() {
   );
 }
 
-export default CalendarPropListControl;
+export default CalendarPreferanceList;
diff --git a/...outs/Sidebar/EventCalendarListControl.tsx → ...nts/layouts/Sidebar/EventCalendarList.tsx b/...outs/Sidebar/EventCalendarListControl.tsx → ...nts/layouts/Sidebar/EventCalendarList.tsx
@@ -1,17 +1,17 @@
 import { CheckList, CheckListItem } from "@/components/ui/lists/CheckList";
 import { RootState } from "@/store";
 import { updateEventCalendars } from "@/store/calendarState";
-import { EVENT_CALENDARS } from "@/utils/constants";
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-function EventCalendarListControl() {
+function EventCalendarList() {
   const dispatch = useDispatch();
   const eventCalendars = useSelector((state: RootState) => state.calendarState.eventCalendars);
 
   const handleCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
     console.log(event.target.checked);
     console.log(event.target.name);
+
     dispatch(
       updateEventCalendars({
         event: event.target.name,
@@ -27,13 +27,13 @@ function EventCalendarListControl() {
           key={propKey}
           name={propKey}
           id={"show_" + propKey}
-          checked={eventCalendars[propKey]}
+          checked={eventCalendars[propKey].checked}
           onChange={handleCheck}
-          tagColor={EVENT_CALENDARS[propKey].tagColor}
+          tagColor={eventCalendars[propKey].tagColor}
         />
       ))}
     </CheckList>
   );
 }
 
-export default EventCalendarListControl;
+export default EventCalendarList;
diff --git a/apps/myanmar_calendar/src/components/layouts/Sidebar/Sidebar.tsx b/apps/myanmar_calendar/src/components/layouts/Sidebar/Sidebar.tsx
@@ -8,10 +8,8 @@ import SidebarToggleBtn from "@/components/ui/buttons/SidebarToggleBtn";
 import { BsArrowLeftShort } from "react-icons/bs";
 import useOnClickOutside from "@/hooks/useOnClickOutside";
 import { setSidebarOpenState } from "@/store/systemState";
-import CalendarPropListControl from "./CalendarPropListControl";
-import EventCalendarListControl from "./EventCalendarListControl";
-import useWindowResize from "@/hooks/useWindowResize";
-import { MIN_WIDTHS } from "@/utils/constants";
+import CalendarPreferanceList from "./CalendarPreferanceList";
+import EventCalendarList from "./EventCalendarList";
 
 function Sidebar() {
   const dispatch = useDispatch();
@@ -45,8 +43,8 @@ function Sidebar() {
         </div>
         {/* => SystemLanguageSelectBox */}
         {/* => DateJumper */}
-        <CalendarPropListControl />
-        {/* <EventCalendarListControl /> */}
+        <CalendarPreferanceList />
+        <EventCalendarList />
       </div>
     </section>
   );