From 7fc86af1f69f95987187fda91339bf9f34c3632d Mon Sep 17 00:00:00 2001
From: Manuel Brandstetter <manuel.brandstetter@inovex.de>
Date: Wed, 8 Jan 2025 10:53:37 +0100
Subject: [PATCH] refactor: show snowfall in December and January

---
 .../SettingsDialog/Appearance/Appearance.tsx   |  5 ++++-
 .../__snapshots__/Appearance.test.tsx.snap     | 18 ++++++++++++++++++
 .../SnowfallWrapper/SnowfallWrapper.tsx        | 16 ++++++++++------
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/SettingsDialog/Appearance/Appearance.tsx b/src/components/SettingsDialog/Appearance/Appearance.tsx
index 8064c377a7..813eb94f7b 100644
--- a/src/components/SettingsDialog/Appearance/Appearance.tsx
+++ b/src/components/SettingsDialog/Appearance/Appearance.tsx
@@ -17,6 +17,9 @@ export const Appearance = () => {
   const activeMenuItem: MenuItemConfig = useOutletContext();
   const currentMonth = new Date().getMonth();
 
+  // Snowfall is enabled only in December and January
+  const isDecemberOrJanuary = currentMonth === 11 || currentMonth === 0;
+
   return (
     <div className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
       <header className="settings-dialog__header">
@@ -25,7 +28,7 @@ export const Appearance = () => {
       <div className="appearance-container">
         <ThemeSettings />
         {/** Since snowfall is only enabled in December, we only show the snowfall settings in December too */}
-        {currentMonth === 11 && <SnowfallSettings />}
+        {isDecemberOrJanuary && <SnowfallSettings />}
         <NotificationSettings />
         <BoardReactionsSettings />
         <SkinToneSelector />
diff --git a/src/components/SettingsDialog/Appearance/__tests__/__snapshots__/Appearance.test.tsx.snap b/src/components/SettingsDialog/Appearance/__tests__/__snapshots__/Appearance.test.tsx.snap
index 6ab2868bf4..0549d64105 100644
--- a/src/components/SettingsDialog/Appearance/__tests__/__snapshots__/Appearance.test.tsx.snap
+++ b/src/components/SettingsDialog/Appearance/__tests__/__snapshots__/Appearance.test.tsx.snap
@@ -110,6 +110,24 @@ exports[`Appearance should render all Settings correctly 1`] = `
         </label>
       </form>
     </div>
+    <section>
+      <button
+        aria-checked="false"
+        aria-label="Show snowfall"
+        class="settings-option-button"
+        role="switch"
+        type="button"
+      >
+        <span
+          class="settings-option-button__label"
+        >
+          Show snowfall
+        </span>
+        <div
+          class="toggle"
+        />
+      </button>
+    </section>
     <section>
       <button
         aria-checked="true"
diff --git a/src/components/SnowfallWrapper/SnowfallWrapper.tsx b/src/components/SnowfallWrapper/SnowfallWrapper.tsx
index 21c2846e67..68810de4f1 100644
--- a/src/components/SnowfallWrapper/SnowfallWrapper.tsx
+++ b/src/components/SnowfallWrapper/SnowfallWrapper.tsx
@@ -14,16 +14,20 @@ export const SnowfallWrapper = () => {
   const currentMonth = new Date().getMonth();
 
   useEffect(() => {
+    // Festive greetings are displayed only once, when the month changes to December
     if (currentMonth === 11 && snowfallNotificationEnabled) {
       Toast.info({title: t("Snowfall.toastTitle"), message: t("Snowfall.toastMessage")});
     }
     dispatch(setSnowfallNotification(false));
   }, [currentMonth, dispatch, snowfallNotificationEnabled, t]);
 
-  return (
-    <>
-      {/** Snowfall is only enabled in December */}
-      {snowfallEnabled && currentMonth === 11 && <Snowfall color="#99bcff" />}
-    </>
-  );
+  // Snowfall is enabled only in December and January
+  const isDecemberOrJanuary = currentMonth === 11 || currentMonth === 0;
+
+  // If snowfall is disabled or it's not December or January, return null
+  if (!snowfallEnabled || !isDecemberOrJanuary) {
+    return null;
+  }
+
+  return <Snowfall color="#99bcff" />;
 };