code review fixes

appsmithorg · Jan 7, 2025 · c41781c · c41781c
1 parent 70f2b28
commit c41781c
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 39 deletions.
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts
@@ -5,7 +5,7 @@ import {
 } from "../../../../../support/Objects/ObjectsCore";
 
 // TODO: Enable when issue(github.com/appsmithorg/appsmith/issues/36419) is solved.
-describe(
+describe.skip(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Stats Widget`,
   { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts
@@ -5,7 +5,7 @@ import {
 } from "../../../../../support/Objects/ObjectsCore";
 
 // TODO: Enable when issue(github.com/appsmithorg/appsmith/issues/36419) is solved.
-describe(
+describe.skip(
   `${ANVIL_EDITOR_TEST}: Anvil tests for Switch Widget`,
   { tags: ["@tag.Anvil", "@tag.Visual"] },
   () => {

diff --git a/...ient/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx b/...ient/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx
@@ -5,32 +5,15 @@ import { ListBoxItem, Select } from "@appsmith/wds";
 import type { CalendarState } from "@react-stately/calendar";
 
 import styles from "./styles.module.css";
+import { useValidMonths } from "../utils/calendar";
 
 export function CalendarMonthDropdown({ state }: { state: CalendarState }) {
-  const months = [];
   const formatter = useDateFormatter({
     month: "long",
     timeZone: state.timeZone,
   });
 
-  const numMonths = state.focusedDate.calendar.getMonthsInYear(
-    state.focusedDate,
-  );
-
-  for (let i = 1; i <= numMonths; i++) {
-    const date = state.focusedDate.set({ month: i });
-
-    // Skip months outside valid range
-    if (state.minValue && date.compare(state.minValue) < 0) {
-      continue;
-    }
-
-    if (state.maxValue && date.compare(state.maxValue) > 0) {
-      continue;
-    }
-
-    months.push(formatter.format(date.toDate(state.timeZone)));
-  }
+  const months = useValidMonths(state, formatter);
 
   const onChange = (value: Key | null) => {
     const date = state.focusedDate.set({ month: Number(value) });

diff --git a/...lient/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx b/...lient/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx
@@ -1,25 +1,12 @@
-import { ListBoxItem, Select } from "@appsmith/wds";
-import { useDateFormatter } from "@react-aria/i18n";
-import type { CalendarState } from "@react-stately/calendar";
 import React from "react";
 import type { Key } from "react";
+import { ListBoxItem, Select } from "@appsmith/wds";
+import type { CalendarState } from "@react-stately/calendar";
 
-export function CalendarYearDropdown({ state }: { state: CalendarState }) {
-  const years: { value: CalendarState["focusedDate"]; formatted: string }[] =
-    [];
-  const formatter = useDateFormatter({
-    year: "numeric",
-    timeZone: state.timeZone,
-  });
-
-  for (let i = -20; i <= 20; i++) {
-    const date = state.focusedDate.add({ years: i });
+import { useYearOptions } from "../utils/calendar";
 
-    years.push({
-      value: date,
-      formatted: formatter.format(date.toDate(state.timeZone)),
-    });
-  }
+export function CalendarYearDropdown({ state }: { state: CalendarState }) {
+  const years = useYearOptions(state);
 
   const onChange = (value: Key | null) => {
     const index = Number(value);

diff --git a/app/client/packages/design-system/widgets/src/components/Calendar/utils/calendar.ts b/app/client/packages/design-system/widgets/src/components/Calendar/utils/calendar.ts
@@ -0,0 +1,52 @@
+import { useDateFormatter } from "@react-aria/i18n";
+import type { CalendarState } from "@react-stately/calendar";
+
+export function useYearOptions(state: CalendarState) {
+  const formatter = useDateFormatter({
+    year: "numeric",
+    timeZone: state.timeZone,
+  });
+
+  const years: { value: CalendarState["focusedDate"]; formatted: string }[] =
+    [];
+
+  const YEAR_RANGE = 20;
+
+  for (let i = -YEAR_RANGE; i <= YEAR_RANGE; i++) {
+    const date = state.focusedDate.add({ years: i });
+
+    years.push({
+      value: date,
+      formatted: formatter.format(date.toDate(state.timeZone)),
+    });
+  }
+
+  return years;
+}
+
+export function useValidMonths(
+  state: CalendarState,
+  formatter: Intl.DateTimeFormat,
+) {
+  const months = [];
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(
+    state.focusedDate,
+  );
+
+  for (let i = 1; i <= numMonths; i++) {
+    const date = state.focusedDate.set({ month: i });
+
+    // Skip months outside valid range
+    if (state.minValue && date.compare(state.minValue) < 0) {
+      continue;
+    }
+
+    if (state.maxValue && date.compare(state.maxValue) > 0) {
+      continue;
+    }
+
+    months.push(formatter.format(date.toDate(state.timeZone)));
+  }
+
+  return months;
+}