From 88d887dda36c1a8989799a17d13fe5857c523134 Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Thu, 8 Aug 2024 21:52:34 +0200
Subject: [PATCH 1/2] feat: add day/month inc/dec buttons [PT-188059193]

---
 src/grasp-seasons/components/seasons.scss | 17 ++++++++++---
 src/grasp-seasons/components/seasons.tsx  | 30 ++++++++++++++++++++---
 src/utils/daylight-utils.ts               | 29 ++++++++++++++++++++++
 3 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
index c17f603..bafe652 100644
--- a/src/grasp-seasons/components/seasons.scss
+++ b/src/grasp-seasons/components/seasons.scss
@@ -125,9 +125,20 @@ body {
     height: 20px;
   }
 
-  .day {
-    margin-top: 20px;
-    margin-bottom: 12px;
+  .day-row {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 290px;
+
+    .day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 130px;
+    }
   }
 
   .day-slider {
diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
index 260d00e..28dcfe9 100644
--- a/src/grasp-seasons/components/seasons.tsx
+++ b/src/grasp-seasons/components/seasons.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, ChangeEvent, useCallback } from "react";
 import Slider from "./slider/slider";
-import { getSolarNoonIntensity, isValidLatitude, isValidLongitude } from "../../utils/daylight-utils";
+import { changeMonthOfDayOfYear, getSolarNoonIntensity, isValidLatitude, isValidLongitude } from "../../utils/daylight-utils";
 import InfiniteDaySlider from "./slider/infinite-day-slider";
 import MyLocations from "./my-locations";
 import getURLParam from "../utils/utils";
@@ -13,6 +13,7 @@ import { useAnimation } from "../hooks/use-animation";
 import { ILocation } from "../../types";
 
 import ForwardBackIcon from "../../assets/images/forward-back-icon.svg";
+import ForwardBackJumpIcon from "../../assets/images/forward-back-jump-icon.svg";
 
 import "./seasons.scss";
 
@@ -165,6 +166,21 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
     setSimState(prevState => ({ ...prevState, day: ui.value }));
   };
 
+  const handleDayIncrement = (increment: number) => () => {
+    setSimState(prevState => {
+      // Make sure day is within [0, 364] range
+      const day = (prevState.day + increment + 365) % 365;
+      return { ...prevState, day };
+    });
+  };
+
+  const handleMonthIncrement = (monthIncrement: number) => () => {
+    setSimState(prevState => {
+      const day = changeMonthOfDayOfYear(prevState.day, monthIncrement);
+      return { ...prevState, day };
+    });
+  };
+
   const handleSimCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSimState(prevState => ({ ...prevState, [event.target.name as any as keyof ISimState]: event.target.checked }));
     logCheckboxChange(event);
@@ -274,9 +290,15 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             </div>
           </div>
         </div>
-        <div className="day">
-          <label>{ t("~DAY", simLang) }:</label>
-          { getFormattedDay() }
+        <div className="day-row">
+          <SquareButton onClick={handleMonthIncrement(-1)}><ForwardBackJumpIcon /></SquareButton>
+          <SquareButton onClick={handleDayIncrement(-1)}><ForwardBackIcon /></SquareButton>
+          <div className="day">
+            <label>{ t("~DAY", simLang) }:</label>
+            { getFormattedDay() }
+          </div>
+          <SquareButton onClick={handleDayIncrement(1)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+          <SquareButton onClick={handleMonthIncrement(1)}><ForwardBackJumpIcon style={{transform: "rotate(180deg"}} /></SquareButton>
         </div>
         <div className="day-slider">
           <InfiniteDaySlider
diff --git a/src/utils/daylight-utils.ts b/src/utils/daylight-utils.ts
index 797b6b2..062416d 100644
--- a/src/utils/daylight-utils.ts
+++ b/src/utils/daylight-utils.ts
@@ -134,3 +134,32 @@ export function isValidLatitude(latitude: string): boolean {
   const parsed = Number(latitude);
   return !isNaN(parsed) && parsed >= -90 && parsed <= 90;
 }
+
+export function changeMonthOfDayOfYear(dayOfYearIndex: number, monthsToAdd: number): number {
+  if (dayOfYearIndex < 0 || dayOfYearIndex >= 365) {
+      throw new Error("dayOfYearIndex must be between 0 and 364");
+  }
+
+  // Days in each month for a leap year
+  const daysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+  // Calculate the current month and the day of the month
+  let accumulatedDays = 0;
+  let currentMonth = 0;
+  for (currentMonth = 0; currentMonth < daysInMonth.length; currentMonth++) {
+      if (dayOfYearIndex < accumulatedDays + daysInMonth[currentMonth]) {
+          break;
+      }
+      accumulatedDays += daysInMonth[currentMonth];
+  }
+
+  const dayOfMonth = dayOfYearIndex - accumulatedDays;
+  let newMonth = (currentMonth + monthsToAdd + 12) % 12;
+
+  let newDayOfYearIndex = dayOfMonth;
+  for (let i = 0; i < newMonth; i++) {
+      newDayOfYearIndex += daysInMonth[i];
+  }
+
+  return newDayOfYearIndex % 365;
+}

From ed3ce02a23518405b79ad291cd86c49679b429d5 Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Thu, 8 Aug 2024 21:57:12 +0200
Subject: [PATCH 2/2] change default tab back to the Location tab

---
 src/components/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index bdea506..1f73ef2 100755
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -11,7 +11,7 @@ import { Header } from "./header";
 import "../assets/scss/App.scss";
 
 export const App: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"location" | "simulation">("simulation");
+  const [activeTab, setActiveTab] = useState<"location" | "simulation">("location");
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [dayOfYear, setDayOfYear] = useState<string>("280");