feat: replace luxon with date-fns, gate holiday mode to jan/dec

Author: brandongregoryscott

package-lock.json

@@ -16,6 +16,7 @@
         "@mantine/hooks": "4.2.1",
         "@octokit/rest": "18.12.0",
         "@supabase/supabase-js": "1.35.4",
+        "date-fns": "2.29.3",
         "evergreen-ui": "6.13.2",
         "glamor": "2.20.40",
         "harmonics": "1.1.0",
@@ -24,7 +25,6 @@
         "jotai": "1.11.2",
         "keymirror": "0.1.1",
         "lodash": "4.17.21",
-        "luxon": "3.0.1",
         "opus-media-recorder": "0.8.0",
         "react": "18.1.0",
         "react-beautiful-dnd": "13.1.0",
@@ -57,7 +57,6 @@
         "@types/jest": "26.0.24",
         "@types/keymirror": "0.1.1",
         "@types/lodash": "4.14.172",
-        "@types/luxon": "2.0.5",
         "@types/node": "12.20.19",
         "@types/pluralize": "0.0.29",
         "@types/react": "17.0.18",

package.json

@@ -13,6 +13,7 @@ import { Sitemap } from "sitemap";
 import { useLogout } from "hooks/supabase/use-logout";
 import { useGlobalState } from "hooks/use-global-state";
 import { useTheme } from "hooks/use-theme";
+import { isJanuaryOrDecember } from "utils/date-utils";
 
 interface ProfileMenuProps {
     onAboutDialogClick: () => void;
@@ -24,7 +25,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = (props: ProfileMenuProps) => {
     const { onAboutDialogClick, onHelpDialogClick, onClose } = props;
     const { isAuthenticated, globalState, setGlobalState } = useGlobalState();
     const { colors } = useTheme();
-    const handleLogoutsettled = useCallback(
+    const handleLogoutSettled = useCallback(
         () =>
             setGlobalState((prev) =>
                 prev.merge({
@@ -34,7 +35,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = (props: ProfileMenuProps) => {
             ),
         [setGlobalState]
     );
-    const { mutate: logout } = useLogout({ onSettled: handleLogoutsettled });
+    const { mutate: logout } = useLogout({ onSettled: handleLogoutSettled });
     const { navigate } = useRouter();
 
     const handleAboutDialogClick = useCallback(() => {
@@ -78,11 +79,14 @@ const ProfileMenu: React.FC<ProfileMenuProps> = (props: ProfileMenuProps) => {
 
     return (
         <Menu>
-            <Menu.Item
-                icon={<SnowflakeIcon color={snowflakeIconColor} />}
-                onSelect={handleToggleHolidayMode}>
-                Holiday Mode
-            </Menu.Item>
+            {isJanuaryOrDecember() && (
+                <Menu.Item
+                    icon={<SnowflakeIcon color={snowflakeIconColor} />}
+                    onSelect={handleToggleHolidayMode}>
+                    Holiday Mode
+                </Menu.Item>
+            )}
+
             <Menu.Item icon={InfoSignIcon} onSelect={handleAboutDialogClick}>
                 About
             </Menu.Item>

src/components/sidebar/profile-menu.tsx

@@ -1,13 +1,23 @@
-import { DateTime } from "luxon";
 import { isNilOrEmpty } from "utils/collection-utils";
-
-const getCurrentTime = () => new Date().toISOString();
+import format from "date-fns/format";
+import parseISO from "date-fns/parseISO";
+import getMonth from "date-fns/getMonth";
 
 const formatUpdatedOn = (updated_on?: string): string =>
     isNilOrEmpty(updated_on)
         ? "--"
-        : DateTime.fromISO(updated_on!).toLocaleString(
-              DateTime.DATETIME_MED_WITH_WEEKDAY
-          );
+        : format(parseISO(updated_on), "E, d LLL u, p");
+
+const getCurrentTime = () => new Date().toISOString();
+
+const isJanuaryOrDecember = (): boolean => {
+    const currentMonth = getMonth(new Date());
+
+    // Months in the Date constructor are index-based
+    const december = getMonth(new Date(2023, 11, 1));
+    const january = getMonth(new Date(2023, 0, 1));
+
+    return currentMonth === december || currentMonth === january;
+};
 
-export { getCurrentTime, formatUpdatedOn };
+export { formatUpdatedOn, getCurrentTime, isJanuaryOrDecember };