diff --git a/apps/myanmar_calendar/src/assets/styles/globals.css b/apps/myanmar_calendar/src/assets/styles/globals.css index 8dbd92f..143e94e 100644 --- a/apps/myanmar_calendar/src/assets/styles/globals.css +++ b/apps/myanmar_calendar/src/assets/styles/globals.css @@ -72,12 +72,8 @@ /* outline: 1px solid violet; */ @apply border-border; } - html { - overflow: hidden; - } body { @apply bg-background text-foreground; - overflow: hidden; } button { diff --git a/apps/myanmar_calendar/src/assets/styles/scroll.css b/apps/myanmar_calendar/src/assets/styles/scroll.css index ac99245..7d67a6b 100644 --- a/apps/myanmar_calendar/src/assets/styles/scroll.css +++ b/apps/myanmar_calendar/src/assets/styles/scroll.css @@ -30,7 +30,7 @@ html { /* SCROLLBAR 2 */ .__scrollbar-md { scrollbar-width: thin; - /* overflow-x: hidden; */ + overflow-x: hidden; overflow-y: scroll; overflow: overlay; } diff --git a/apps/myanmar_calendar/src/components/MyanmarCalendar.tsx b/apps/myanmar_calendar/src/components/MyanmarCalendar.tsx index 5fc711a..c005e8d 100644 --- a/apps/myanmar_calendar/src/components/MyanmarCalendar.tsx +++ b/apps/myanmar_calendar/src/components/MyanmarCalendar.tsx @@ -9,7 +9,7 @@ import LanguageMenu, { Language } from "./LanguageMenu"; import DayDialog from "./modals/DayDialog"; import { getLocalTime } from "@/utils/helpers"; import useKeyPress from "../hooks/useKeyPress"; -import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/menus/context-menu"; +import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/context-menu"; const colStartClasses = ["", "col-start-2", "col-start-3", "col-start-4", "col-start-5", "col-start-6", "col-start-7"]; diff --git a/apps/myanmar_calendar/src/components/MyanmarCalendar2.tsx b/apps/myanmar_calendar/src/components/MyanmarCalendar2.tsx index ef90b67..dbc0754 100644 --- a/apps/myanmar_calendar/src/components/MyanmarCalendar2.tsx +++ b/apps/myanmar_calendar/src/components/MyanmarCalendar2.tsx @@ -7,7 +7,7 @@ function MyanmarCalendar2() { return ( <>
-
+
diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx index d234253..a74ff9e 100644 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx +++ b/apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx @@ -2,9 +2,9 @@ import { RootState } from "@/store"; import React from "react"; import { useSelector } from "react-redux"; -import WeekMode from "./WeekMode/WeekMode"; -import MonthMode from "./MonthMode/MonthMode"; -import YearMode from "./YearMode/YearMode"; +import WeekMode from "./WeekMode"; +import MonthMode from "./MonthMode"; +import YearMode from "./YearMode"; const calendar_modes = { W: , @@ -15,11 +15,7 @@ const calendar_modes = { function Calendar() { const calendarMode = useSelector((state: RootState) => state.calendarState.calendarMode); - return ( -
- {calendar_modes[calendarMode]} -
- ); + return
{calendar_modes[calendarMode]}
; } export default Calendar; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/Cells/MonthCell.tsx similarity index 68% rename from apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx rename to apps/myanmar_calendar/src/components/layouts/Calendar/Cells/MonthCell.tsx index 753a657..1a2855f 100644 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx +++ b/apps/myanmar_calendar/src/components/layouts/Calendar/Cells/MonthCell.tsx @@ -5,8 +5,8 @@ import { LANGUAGE_ENUM } from "@/type-models/calendarState.type"; import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber"; import { getLocalTime } from "@/utils/helpers"; import { englishToMyanmarDate, i18n } from "burma-calendar"; -import { format, isSameMonth, isSameWeek, isToday, lastDayOfMonth } from "date-fns"; -import React, { useState } from "react"; +import { format, isSameMonth, isThisMonth, isToday } from "date-fns"; +import React from "react"; import { useDispatch } from "react-redux"; interface MonthCellT { @@ -15,54 +15,39 @@ interface MonthCellT { } function MonthCell({ day, calendarState }: MonthCellT) { + const { calendarLanguage, activeDate, monthCellProps } = calendarState; const dispatch = useDispatch(); - const { calendarLanguage, activeDate, preferance } = calendarState; - const [dayIsToday, setDayIsToday] = useState(false); - - let activeDateObj = new Date(activeDate); - - const dayBelongsInActiveMonth = isSameMonth(day, activeDateObj); - const dayIsInEndWeek = isSameWeek(lastDayOfMonth(activeDateObj), day); + const dayIsToday = isToday(getLocalTime(day)); + const dayIncludeInActiveMonth = isSameMonth(day, new Date(activeDate)); const mmDate = i18n(engToMyanmarNumber(englishToMyanmarDate(day).date), "myanmar", "myanmar" as any); const myanmar_calendar = englishToMyanmarDate(day); const moonAlign = myanmar_calendar.moonPhase === "လပြည့်" || myanmar_calendar.moonPhase === "လကွယ်"; - React.useEffect(() => { - setDayIsToday(isToday(day)); - }, [day]); - return (
{ dispatch(setDayDialongTargetDay(day.toISOString())); }}> {/* ------ CELL TOP ------- */}
- + {/* ASTRO */} -
+
{/* long text on large screen */} {myanmar_calendar.pyathada || myanmar_calendar.yatyaza} @@ -77,13 +62,9 @@ function MonthCell({ day, calendarState }: MonthCellT) { {/* ------ CELL BOTTOM ------- */}
-
    -
  • -

    -
    • -
+
{/* MOON PHASE */} -
+
{(mmDate == "၁" || moonAlign) && ( {myanmar_calendar.month} diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/Cells/YearCell.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/Cells/YearCell.tsx new file mode 100644 index 0000000..24248bc --- /dev/null +++ b/apps/myanmar_calendar/src/components/layouts/Calendar/Cells/YearCell.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +function YearCell() { + return
YearCell
; +} + +export default YearCell; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode.tsx similarity index 84% rename from apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthMode.tsx rename to apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode.tsx index d897d03..44098e0 100644 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthMode.tsx +++ b/apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode.tsx @@ -2,20 +2,16 @@ import { RootState } from "@/store"; import { WEEK_DAYS } from "@/utils/constants"; import { getLocalTime } from "@/utils/helpers"; import { eachDayOfInterval, endOfMonth, endOfWeek, startOfMonth, startOfWeek } from "date-fns"; -import React, { useEffect, useState } from "react"; +import React from "react"; import { useSelector } from "react-redux"; -import MonthCell from "./MonthCell"; +import MonthCell from "./Cells/MonthCell"; import { cn } from "@/lib/utils"; function MonthMode() { const calendarState = useSelector((state: RootState) => state.calendarState); const { activeDate, calendarLanguage, ...rest } = calendarState; - const [activeDateObj, setActiveDateObj] = useState(); - - useEffect(() => { - setActiveDateObj(new Date(activeDate)); - }, [activeDate]); + const activeDateObj = new Date(activeDate); let days = eachDayOfInterval({ start: startOfWeek(startOfMonth(getLocalTime(activeDateObj))), end: endOfWeek(endOfMonth(getLocalTime(activeDateObj))), @@ -36,7 +32,7 @@ function MonthMode() { ))}
{/* min-h-[41rem] */} -
+
{days.map((day, dayIdx) => ( ; +} + +export default WeekMode; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumn.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumn.tsx deleted file mode 100644 index 8fbe6c5..0000000 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumn.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { cn } from "@/lib/utils"; -import { CalendarStateInterface } from "@/store/calendarState"; -import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber"; -import { englishToMyanmarDate, i18n } from "burma-calendar"; -import React from "react"; - -interface WeekColumnPropsI { - day: Date; - calendarState: CalendarStateInterface; -} - -function WeekColumn({ day, calendarState }: WeekColumnPropsI) { - const { preferance } = calendarState; - const myanmar_calendar = englishToMyanmarDate(day); - const mmDate = i18n(engToMyanmarNumber(myanmar_calendar.date), "myanmar", "myanmar" as any); - - return ( -
- {/*
- - {myanmar_calendar.month} - {myanmar_calendar.moonPhase} {mmDate} - -
*/} - {/*
- {preferance.astro && (myanmar_calendar.pyathada || myanmar_calendar.yatyaza) && ( - - {myanmar_calendar.pyathada || myanmar_calendar.yatyaza} - - )} -
*/} -
- ); -} - -export default WeekColumn; - -// function MainFeatureCell() { -// return
-// } diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumnHead.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumnHead.tsx deleted file mode 100644 index 98117c3..0000000 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekColumnHead.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { cn } from "@/lib/utils"; -import { setDayDialongTargetDay } from "@/store/modelControlState"; -import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber"; -import { englishToMyanmarDate, i18n } from "burma-calendar"; -import { format, isToday, isWeekend } from "date-fns"; -import React from "react"; -import { useDispatch } from "react-redux"; - -function WeekColumnHead({ day, scrollReachedTop }: { day: Date; scrollReachedTop: boolean }) { - const dispatch = useDispatch(); - const dayIsToday = isToday(day); - const myanmar_calendar = englishToMyanmarDate(day); - const mmDate = i18n(engToMyanmarNumber(myanmar_calendar.date), "myanmar", "myanmar" as any); - - return ( -
-
-
{format(day, "iii")}
- -
-
-
- -
-
-
- ); -} - -export default WeekColumnHead; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekMode.tsx deleted file mode 100644 index cde170d..0000000 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/WeekMode/WeekMode.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useState } from "react"; -import CommingSoonBanner from "../CommingSoonBanner"; -import { useDispatch, useSelector } from "react-redux"; -import { RootState } from "@/store"; -import { eachDayOfInterval, endOfWeek, format, isToday, startOfWeek } from "date-fns"; -import { ScrollArea, ScrollBar, ScrollViewport } from "@/components/ui/areas/ScrollArea"; -import useScrollEvent from "@/hooks/useScrollEvent"; -import { cn } from "@/lib/utils"; -import { setDayDialongTargetDay } from "@/store/modelControlState"; -import WeekColumn from "./WeekColumn"; -import WeekColumnHead from "./WeekColumnHead"; - -function WeekMode() { - const dispatch = useDispatch(); - const calendarState = useSelector((state: RootState) => state.calendarState); - - const days = eachDayOfInterval({ - start: startOfWeek(new Date(calendarState.activeDate)), - end: endOfWeek(new Date(calendarState.activeDate)), - }); - - // Scroll Events Handling - const [scrollReachedTop, setScrollReachedTop] = useState(true); - - const scrollViewportRef = useScrollEvent(({ offsetHeight, scrollHeight, scrollTop }) => { - if (scrollTop < 7) { - setScrollReachedTop(true); - } else { - setScrollReachedTop(false); - } - }); - - // console.log("WeekMode render"); - - return ( - <> -
- {days.map((day) => ( - - ))} -
- - -
- {days.map((day) => { - return ( - - ); - })} -
- - - - - ); -} - -export default WeekMode; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode.tsx new file mode 100644 index 0000000..f6ba7e9 --- /dev/null +++ b/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import CommingSoonBanner from "./CommingSoonBanner"; + +function YearMode() { + return ; +} + +export default YearMode; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearCell.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearCell.tsx deleted file mode 100644 index 5d451f7..0000000 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearCell.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { cn } from "@/lib/utils"; -import { RootState } from "@/store"; -import { setActiveDate, setCalendarMode } from "@/store/calendarState"; -import { setDayDialongTargetDay } from "@/store/modelControlState"; -import { CALENDAR_MODE_ENUM } from "@/type-models/calendarState.type"; -import { CALENDAR_MODE, MIN_WIDTHS, WEEK_DAYS } from "@/utils/constants"; -import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isThisMonth, isToday, nextDay, startOfMonth, startOfWeek } from "date-fns"; -import React, { useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; - -function YearCell({ month }: { month: Date }) { - // let monthName = month.toLocaleString("en-US", { month: "long" }); - - const enterMobileMode = useSelector((state: RootState) => state.systemState.enterMobileMode); - const dispatch = useDispatch(); - const endOfTheMonth = endOfMonth(month); - - let days = eachDayOfInterval({ - start: startOfWeek(startOfMonth(month)), - end: endOfWeek(nextDay(endOfTheMonth, 0)), - }); - - // const monthIsThisMonth = isThisMonth(month); - - const handleViewMonth = () => { - dispatch(setCalendarMode(CALENDAR_MODE_ENUM.MONTH)); - dispatch(setActiveDate(month.toISOString())); - }; - - return ( -
-
- { - e.preventDefault(); - if (enterMobileMode) return; - handleViewMonth(); - }}> - {format(month, "MMMM")} - -
- {Object.values(WEEK_DAYS).map((weekDay) => ( - - {weekDay.long[0]} - - ))} -
-
- {days.splice(0, 42).map((day) => { - const dayIsToday = isToday(day); - const dayBelongInMonth = isSameMonth(day, month); - return ( - - ); - })} -
-
-
- ); -} - -export default YearCell; diff --git a/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearMode.tsx b/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearMode.tsx deleted file mode 100644 index ca3f29c..0000000 --- a/apps/myanmar_calendar/src/components/layouts/Calendar/YearMode/YearMode.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { eachMonthOfInterval, endOfYear, startOfYear } from "date-fns"; -import YearCell from "./YearCell"; -import { useSelector } from "react-redux"; -import { RootState } from "@/store"; - -function YearMode() { - const { activeDate } = useSelector((state: RootState) => state.calendarState); - const [activeDateObj, setActiveDateObj] = useState(new Date()); - useEffect(() => { - setActiveDateObj(new Date(activeDate)); - }, [activeDate]); - - const months = eachMonthOfInterval({ - start: startOfYear(activeDateObj), - end: endOfYear(activeDateObj), - }); - - return ( -
- {months.map((month) => { - return ( - - ); - })} -
- ); -} - -export default YearMode; diff --git a/apps/myanmar_calendar/src/components/layouts/Navbar/ActiveDateIndicator.tsx b/apps/myanmar_calendar/src/components/layouts/Navbar/ActiveDateIndicator.tsx index ff02be6..a377626 100644 --- a/apps/myanmar_calendar/src/components/layouts/Navbar/ActiveDateIndicator.tsx +++ b/apps/myanmar_calendar/src/components/layouts/Navbar/ActiveDateIndicator.tsx @@ -1,5 +1,4 @@ import { RootState } from "@/store"; -import { CALENDAR_MODE_ENUM } from "@/type-models/calendarState.type"; import { engToMyanmarNumber } from "@/utils/engToMyanmarNumber"; import { englishToMyanmarDate, i18n } from "burma-calendar"; import { add, format, startOfMonth } from "date-fns"; @@ -7,7 +6,7 @@ import React from "react"; import { useSelector } from "react-redux"; function ActiveDateIndicator() { - const { activeDate, calendarLanguage, calendarMode } = useSelector((state: RootState) => state.calendarState); + const { activeDate, calendarLanguage } = useSelector((state: RootState) => state.calendarState); const activeDateObj = new Date(activeDate); @@ -17,24 +16,17 @@ function ActiveDateIndicator() {

- - + {i18n("Ku", "english", calendarLanguage as any)} {i18n(englishToMyanmarDate(firstDayCurrentMonth).month, "myanmar", calendarLanguage as any)} + {" - "} + {i18n(englishToMyanmarDate(add(firstDayCurrentMonth, { months: 1 })).month, "myanmar", calendarLanguage as any)} +

); diff --git a/apps/myanmar_calendar/src/components/layouts/Navbar/CalendarModeSelectBox.tsx b/apps/myanmar_calendar/src/components/layouts/Navbar/CalendarModeSelectBox.tsx index 0b17433..42b7f1f 100644 --- a/apps/myanmar_calendar/src/components/layouts/Navbar/CalendarModeSelectBox.tsx +++ b/apps/myanmar_calendar/src/components/layouts/Navbar/CalendarModeSelectBox.tsx @@ -1,27 +1,20 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/selectBoxes/PrimarySelect"; import { RootState } from "@/store"; import { setCalendarMode } from "@/store/calendarState"; -import { CALENDAR_MODE_ENUM } from "@/type-models/calendarState.type"; -import { CALENDAR_MODE, MIN_WIDTHS } from "@/utils/constants"; -import React, { useEffect, useState } from "react"; +import { CALENDAR_MODE } from "@/utils/constants"; +import React, { useState } from "react"; import { BiCaretDown } from "react-icons/bi"; import { FaCalendarAlt } from "react-icons/fa"; import { useDispatch, useSelector } from "react-redux"; function CalendarModeSelectBox() { const dispatch = useDispatch(); - const enterMobileMode = useSelector((state: RootState) => state.systemState.enterMobileMode); const calendarMode = useSelector((state: RootState) => state.calendarState.calendarMode); - const selectHandler = (value: CALENDAR_MODE_ENUM) => { + const selectHandler = (value) => { dispatch(setCalendarMode(value)); }; - useEffect(() => { - if (enterMobileMode) selectHandler(CALENDAR_MODE_ENUM.YEAR); - }, [enterMobileMode]); - - if (enterMobileMode) return <>; return ( - -
- {camelToSentenceCase(props.name)} - - - ); -} diff --git a/apps/myanmar_calendar/src/components/ui/selectBoxes/PrimarySelect.tsx b/apps/myanmar_calendar/src/components/ui/selectBoxes/PrimarySelect.tsx index a6e08a7..43d00fe 100644 --- a/apps/myanmar_calendar/src/components/ui/selectBoxes/PrimarySelect.tsx +++ b/apps/myanmar_calendar/src/components/ui/selectBoxes/PrimarySelect.tsx @@ -1,104 +1,103 @@ import React from "react"; import * as SelectPrimitive from "@radix-ui/react-select"; -import { ScrollArea, ScrollBar, ScrollViewport } from "../areas/ScrollArea"; -import { cn } from "@/lib/utils"; -import { BsCheckLg } from "react-icons/bs"; +import {ScrollArea} from "../areas/ScrollArea"; +import {cn} from "@/lib/utils"; +import {BsCheckLg} from "react-icons/bs"; const Select = SelectPrimitive.Root; const SelectGroup = SelectPrimitive.Group; const SelectTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { + React.ElementRef, + React.ComponentPropsWithoutRef & { config?: {}; - } ->(({ className, children, config: {} = {}, ...props }, ref) => { - return ( - - {children} - - - ); +} +>(({className, children, config: {} = {}, ...props}, ref) => { + return ( + + {children} + + + ); }); SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; -const SelectValue = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( - +const SelectValue = React.forwardRef, React.ComponentPropsWithoutRef>(({className, ...props}, ref) => ( + )); +SelectValue.displayName = SelectPrimitive.Value.displayName; + const SelectContent = React.forwardRef, React.ComponentPropsWithoutRef>( - ({ className, children, position = "popper", align = "start", ...props }, ref) => ( - - - - - {children} - - - - - - ) + ({className, children, position = "popper", align = "start", ...props}, ref) => ( + + + + {children} + + + + ) ); SelectContent.displayName = SelectPrimitive.Content.displayName; -const SelectLabel = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( - +const SelectLabel = React.forwardRef, React.ComponentPropsWithoutRef>(({className, ...props}, ref) => ( + )); SelectLabel.displayName = SelectPrimitive.Label.displayName; const SelectItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { + React.ElementRef, + React.ComponentPropsWithoutRef & { showIndicator?: boolean; - } ->(({ className, children, showIndicator = false, ...props }, ref) => ( - - {showIndicator && ( - +} +>(({className, children, showIndicator = false, ...props}, ref) => ( + + {showIndicator && ( + - + - )} + )} - {children} - + {children} + )); SelectItem.displayName = SelectPrimitive.Item.displayName; -const SelectSeparator = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( - +const SelectSeparator = React.forwardRef, React.ComponentPropsWithoutRef>(({className, ...props}, ref) => ( + )); SelectSeparator.displayName = SelectPrimitive.Separator.displayName; -export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }; +export {Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator}; diff --git a/apps/myanmar_calendar/src/hooks/useOnClickOutside.ts b/apps/myanmar_calendar/src/hooks/useOnClickOutside.ts index 291c775..423e890 100644 --- a/apps/myanmar_calendar/src/hooks/useOnClickOutside.ts +++ b/apps/myanmar_calendar/src/hooks/useOnClickOutside.ts @@ -1,6 +1,6 @@ import { useEffect, useRef } from "react"; -function useOnClickOutside(handler: () => void, disabled = false, event: "mouseup" | "mousedown" = "mouseup") { +function useOnClickOutside(handler: () => void, disabled = false, event = "mouseup") { const ref = useRef(); useEffect(() => { diff --git a/apps/myanmar_calendar/src/hooks/useScrollEvent.ts b/apps/myanmar_calendar/src/hooks/useScrollEvent.ts deleted file mode 100644 index 5bee364..0000000 --- a/apps/myanmar_calendar/src/hooks/useScrollEvent.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { useRef, useEffect } from "react"; - -type ScrollCusomCallbackType = { - offsetHeight: number; - scrollHeight: number; - scrollTop: number; -}; - -function useScrollEvent( - customCallback: (props: ScrollCusomCallbackType) => void, - callBacks?: { - untilOverflow: () => void; - reachedTop: () => void; - reachedBottom: () => void; - } -) { - const scrollRef = useRef(); - - // Fire CustomCallback untill overflow - useEffect(() => { - if (!scrollRef.current) return; - if (!callBacks?.untilOverflow) return; - const { offsetHeight, scrollHeight } = scrollRef.current as HTMLDivElement; - - if (offsetHeight === scrollHeight) { - console.log(offsetHeight, scrollHeight); - callBacks?.untilOverflow(); - } - }, [scrollRef, customCallback, callBacks?.untilOverflow]); - - let scrollTimeout = useRef(); - - useEffect(() => { - const scrollHandler = () => { - const { offsetHeight, scrollHeight, scrollTop } = scrollRef.current as HTMLDivElement; - // console.log(offsetHeight, scrollHeight, scrollTop); - - customCallback({ - offsetHeight, - scrollHeight, - scrollTop, - }); - - // Fire Callback fn on scroll reached bottom - if (callBacks?.reachedBottom) { - if (Math.floor(scrollHeight - scrollTop) === offsetHeight) { - if (scrollTimeout.current !== null) { - clearTimeout(scrollTimeout.current); - } - scrollTimeout.current = setTimeout(() => { - callBacks?.reachedBottom(); - }, 200); - } - } - - // Fire Callback fn on scroll reached top - if (callBacks?.reachedTop) { - if (scrollTop === 0) { - if (scrollTimeout.current !== null) { - clearTimeout(scrollTimeout.current); - } - scrollTimeout.current = setTimeout(() => { - callBacks?.reachedTop(); - }, 50); - } - } - }; - - scrollRef.current?.addEventListener("scroll", scrollHandler); - - return () => { - scrollRef.current?.removeEventListener("scroll", scrollHandler); - }; - }, [customCallback, scrollRef, callBacks?.reachedBottom, callBacks?.reachedTop]); - - return scrollRef; -} - -export default useScrollEvent; diff --git a/apps/myanmar_calendar/src/hooks/useSetupApp.ts b/apps/myanmar_calendar/src/hooks/useSetupApp.ts deleted file mode 100644 index 436f905..0000000 --- a/apps/myanmar_calendar/src/hooks/useSetupApp.ts +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useCallback } from "react"; -import useWindowResize from "./useWindowResize"; -import { MIN_WIDTHS } from "@/utils/constants"; -import { useDispatch } from "react-redux"; -import { setEnterMobileMode, setSidebarOpenState } from "@/store/systemState"; - -function useSetupApp() { - const dispatch = useDispatch(); - - // Browser Resize Handler, Responsive purpose - useWindowResize( - useCallback(() => { - if (window.innerWidth < MIN_WIDTHS.sm2) { - dispatch(setEnterMobileMode(true)); - } - - if (window.innerWidth >= MIN_WIDTHS.sm2) { - dispatch(setEnterMobileMode(false)); - } - - if (window.innerWidth < MIN_WIDTHS.xl) { - console.log("mid screen"); - dispatch(setSidebarOpenState(false)); - } else { - dispatch(setSidebarOpenState(true)); - } - }, [dispatch]) - ); -} - -export default useSetupApp; diff --git a/apps/myanmar_calendar/src/hooks/useSetupCalendarState.ts b/apps/myanmar_calendar/src/hooks/useSetupCalendarState.ts index 07957bf..b2daeb5 100644 --- a/apps/myanmar_calendar/src/hooks/useSetupCalendarState.ts +++ b/apps/myanmar_calendar/src/hooks/useSetupCalendarState.ts @@ -5,11 +5,10 @@ import { setActiveDate } from "@/store/calendarState"; import { getLocalTime } from "@/utils/helpers"; function useSetupCalendarState() { - let today = getLocalTime(new Date()); + let today = getLocalTime(); const dispatch = useDispatch(); - // let dayUpdateInterval useEffect(() => { dispatch(setActiveDate(today.toISOString())); }, [dispatch, today]); diff --git a/apps/myanmar_calendar/src/hooks/useWindowResize.ts b/apps/myanmar_calendar/src/hooks/useWindowResize.ts deleted file mode 100644 index 0987540..0000000 --- a/apps/myanmar_calendar/src/hooks/useWindowResize.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useEffect, useState } from "react"; - -function useWindowResize(callback: () => void, disabled = false) { - useEffect(() => { - const handleResize = () => { - if (disabled) return; - callback(); - }; - - handleResize(); - - window.addEventListener("resize", handleResize); - - return () => { - window.removeEventListener("resize", handleResize); - }; - }, [callback, disabled]); -} - -export default useWindowResize; diff --git a/apps/myanmar_calendar/src/hooks/useWindowSize.ts b/apps/myanmar_calendar/src/hooks/useWindowSize.ts new file mode 100644 index 0000000..40e94dc --- /dev/null +++ b/apps/myanmar_calendar/src/hooks/useWindowSize.ts @@ -0,0 +1,35 @@ +import { useEffect, useState } from "react"; + +function useWindowSize( + callback?: () => void, + callFnOn?: { + condition: "greater" | "lesser"; + width: number; + height: number; + } +) { + const [windowWidth, setWindowWidth] = useState(0); + const [windowHeight, setWindowHeight] = useState(0); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + setWindowHeight(window.innerHeight); + callback && callback(); + }; + handleResize(); + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, [callback]); + + return { + windowWidth, + windowHeight, + }; +} + +export default useWindowSize; diff --git a/apps/myanmar_calendar/src/pages/_document.tsx b/apps/myanmar_calendar/src/pages/_document.tsx index c46c1a1..3c02e92 100644 --- a/apps/myanmar_calendar/src/pages/_document.tsx +++ b/apps/myanmar_calendar/src/pages/_document.tsx @@ -1,58 +1,26 @@ -import { Html, Head, Main, NextScript } from "next/document"; +import {Html, Head, Main, NextScript} from 'next/document'; export default function Document() { - return ( - - - Myanmar Calendar - First digital calendar of Myanmar - - - - - - - - - - - - -
- - - - ); + return ( + + + Myanmar Calendar - First digital calendar of Myanmar + + + + + + + + + + + + +
+ + + + ); } diff --git a/apps/myanmar_calendar/src/store/calendarState.ts b/apps/myanmar_calendar/src/store/calendarState.ts index 8d21627..ce532e6 100644 --- a/apps/myanmar_calendar/src/store/calendarState.ts +++ b/apps/myanmar_calendar/src/store/calendarState.ts @@ -6,26 +6,24 @@ export interface CalendarStateInterface { calendarMode: CALENDAR_MODE_ENUM; activeDate: string; calendarLanguage: LANGUAGE_ENUM; - preferance: CellPreferanceT; - eventCalendars: Record; + monthCellProps: CellPreferanceT; + calendarEvents: Record; } const initialState: CalendarStateInterface = { calendarMode: CALENDAR_MODE_ENUM.MONTH, activeDate: new Date().toISOString(), - calendarLanguage: LANGUAGE_ENUM.MYANMAR, - preferance: { + calendarLanguage: LANGUAGE_ENUM.ENGLISH, + monthCellProps: { moonPhase: true, astro: true, }, - eventCalendars: { + calendarEvents: { publicHolidays: true, myanmar: true, - international: true, mon: true, shan: true, karen: true, - kachin: true, }, }; export const calendarSlice = createSlice({ @@ -45,20 +43,20 @@ export const calendarSlice = createSlice({ state.calendarLanguage = action.payload; }, - updateCalendarPreferanceState: (state, { payload }: PayloadAction<{ cellProp: string; value: boolean }>) => { - state.preferance[payload.cellProp] = payload.value; + updateMonthCellPropsState: (state, { payload }: PayloadAction<{ cellProp: string; value: boolean }>) => { + state.monthCellProps[payload.cellProp] = payload.value; // state.monthCellProps = { // ...state.monthCellProps, // ...payload, // }; }, - updateEventCalendars: (state, { payload }: PayloadAction<{ event: string; value: boolean }>) => { - state.eventCalendars[payload.event] = payload.value; + updateCalendarEvents: (state, { payload }: PayloadAction<{ event: string; value: boolean }>) => { + state.calendarEvents[payload.event] = payload.value; }, }, }); -export const { setCalendarMode, setActiveDate, updateActiveDate, setCalendarLanguage, updateCalendarPreferanceState, updateEventCalendars } = calendarSlice.actions; +export const { setCalendarMode, setActiveDate, updateActiveDate, setCalendarLanguage, updateMonthCellPropsState, updateCalendarEvents } = calendarSlice.actions; export default calendarSlice.reducer; diff --git a/apps/myanmar_calendar/src/store/systemState.ts b/apps/myanmar_calendar/src/store/systemState.ts index 7f0ba52..cd5f2b6 100644 --- a/apps/myanmar_calendar/src/store/systemState.ts +++ b/apps/myanmar_calendar/src/store/systemState.ts @@ -4,14 +4,12 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; interface SystemStateInterface { sidebarOpen: boolean; darkModeOn: boolean; - enterMobileMode: boolean; systemLanguage: LANGUAGE_ENUM; } const initialState: SystemStateInterface = { - sidebarOpen: false, + sidebarOpen: true, darkModeOn: false, - enterMobileMode: false, systemLanguage: LANGUAGE_ENUM.ENGLISH, }; @@ -20,17 +18,14 @@ export const systemSlice = createSlice({ initialState, reducers: { setSidebarOpenState: (state, { payload }: PayloadAction) => { - state.sidebarOpen = payload === undefined ? !state.sidebarOpen : payload; + state.sidebarOpen = payload || !state.sidebarOpen; }, setSystemLanguage: (state, { payload }: PayloadAction) => { state.systemLanguage = payload; }, - setEnterMobileMode: (state, { payload }: PayloadAction) => { - state.enterMobileMode = payload; - }, }, }); -export const { setSidebarOpenState, setSystemLanguage, setEnterMobileMode } = systemSlice.actions; +export const { setSidebarOpenState, setSystemLanguage } = systemSlice.actions; export default systemSlice.reducer; diff --git a/apps/myanmar_calendar/src/utils/constants.ts b/apps/myanmar_calendar/src/utils/constants.ts index abd025c..8af2eef 100644 --- a/apps/myanmar_calendar/src/utils/constants.ts +++ b/apps/myanmar_calendar/src/utils/constants.ts @@ -1,19 +1,3 @@ -export const WEEK_DAYS = { - sun: { long: "sunday", short: "sun" }, - mon: { long: "monday", short: "mon" }, - tue: { long: "tuesday", short: "tue" }, - wed: { long: "wednesday", short: "wed" }, - thu: { long: "thurday", short: "thu" }, - fri: { long: "friday", short: "fri" }, - sat: { long: "saturday", short: "sat" }, -}; - -export const CALENDAR_MODE = { - W: "week", - M: "month", - Y: "year", -}; - export const LANGUAGES = { english: { label: "english", @@ -47,51 +31,23 @@ export const LANGUAGES = { // }, } as const; -export const EVENT_CALENDARS = { - publicHolidays: { - label: "public holidays", - tagColor: "#7cb342", - }, - myanmar: { - label: "mon", - tagColor: "#f4511e", - }, - international: { - label: "mon", - tagColor: "#039be5", - }, - mon: { - label: "mon", - tagColor: "#f6bf26", - }, - shan: { - label: "shan", - tagColor: "#d81b60", - }, - karen: { - label: "karen", - tagColor: "#007b83", - }, - kachin: { - label: "kachin", - tagColor: "#9e69af", - }, -} as const; +export const WEEK_DAYS = { + sun: { long: "sunday", short: "sun" }, + mon: { long: "monday", short: "mon" }, + tue: { long: "tuesday", short: "tue" }, + wed: { long: "wednesday", short: "wed" }, + thu: { long: "thurday", short: "thu" }, + fri: { long: "friday", short: "fri" }, + sat: { long: "saturday", short: "sat" }, +}; -export const MIN_WIDTHS = { - sm: 440, // ts default - sm1: 540, - sm2: 640, - md: 768, // ts default - md1: 800, - md2: 920, - md3: 980, - lg: 1024, // ts default - lg1: 1064, - lg2: 1165, - lg3: 1220, - xl: 1280, // ts default - xl1: 1380, - xl2: 1450, - xl3: 1536, +export const CALENDAR_MODE = { + W: "week", + M: "month", + Y: "year", }; +// export const CALENDAR_MODE = { +// week: CALENDAR_MODE_ENUM.WEEK, +// month: CALENDAR_MODE_ENUM.MONTH, +// year: CALENDAR_MODE_ENUM.YEAR, +// }; diff --git a/apps/myanmar_calendar/src/utils/helpers.ts b/apps/myanmar_calendar/src/utils/helpers.ts index be47996..9279f4b 100644 --- a/apps/myanmar_calendar/src/utils/helpers.ts +++ b/apps/myanmar_calendar/src/utils/helpers.ts @@ -1,5 +1,6 @@ import { utcToZonedTime } from "date-fns-tz"; export function getLocalTime(date?: Date) { - return utcToZonedTime(date ? new Date(date) : new Date(), "Asia/Rangoon"); + date = date || new Date(); + return utcToZonedTime(new Date(date), "Asia/Rangoon"); } diff --git a/apps/myanmar_calendar/tailwind.config.js b/apps/myanmar_calendar/tailwind.config.js index d255e18..a536d01 100644 --- a/apps/myanmar_calendar/tailwind.config.js +++ b/apps/myanmar_calendar/tailwind.config.js @@ -54,18 +54,18 @@ module.exports = { "input-lg": "3rem", }, screens: { - sm: "440px", // tw default + sm: "440px", // ts default sm1: "540px", sm2: "640px", - md: "768px", // tw default + md: "768px", // ts default md1: "800px", md2: "920px", md3: "980px", - lg: "1024px", // tw default + lg: "1024px", // ts default lg1: "1064px", lg2: "1165px", lg3: "1220px", - xl: "1280px", // tw default + xl: "1280px", // ts default xl1: "1380px", xl2: "1450px", xl3: "1536px",