restructure and modularize for better readability

meetulr · Mar 18, 2024 · 85f2fce · 85f2fce
1 parent 599d333
commit 85f2fce
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 117 deletions.
diff --git a/src/screens/OrganizationEvents/CustomRecurrenceModal.tsx b/src/screens/OrganizationEvents/CustomRecurrenceModal.tsx
@@ -11,11 +11,12 @@ import {
   endsOn,
   frequencies,
   recurrenceEndOptions,
-} from 'utils/recurrenceRuleUtils';
+} from 'utils/recurrenceUtils';
 import type {
   InterfaceRecurrenceRule,
+  RecurrenceEndOption,
   WeekDays,
-} from 'utils/recurrenceRuleUtils';
+} from 'utils/recurrenceUtils';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 
@@ -46,18 +47,18 @@ const CustomRecurrenceModal: React.FC<InterfaceCustomRecurrenceModalProps> = ({
 }) => {
   const { frequency, weekDays } = recurrenceRuleState;
   const [selectedRecurrenceEndOption, setSelectedRecurrenceEndOption] =
-    useState<string>(endsNever);
+    useState<RecurrenceEndOption>(endsNever);
 
   useEffect(() => {
     if (endDate) {
       setSelectedRecurrenceEndOption(endsOn);
     }
   }, [endDate]);
 
-  const handleEndsOnOptionChange = (
+  const handleRecurrenceEndOptionChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ): void => {
-    const selectedRecurrenceEndOption = e.target.value;
+    const selectedRecurrenceEndOption = e.target.value as RecurrenceEndOption;
     setSelectedRecurrenceEndOption(selectedRecurrenceEndOption);
     if (selectedRecurrenceEndOption === endsNever) {
       setEndDate(null);
@@ -214,10 +215,10 @@ const CustomRecurrenceModal: React.FC<InterfaceCustomRecurrenceModalProps> = ({
                       type="radio"
                       id={`radio-${index}`}
                       label={t(option)}
-                      name="recurrenceEnd"
+                      name="recurrenceEndOption"
                       className="d-inline-block me-5"
                       value={option}
-                      onChange={handleEndsOnOptionChange}
+                      onChange={handleRecurrenceEndOptionChange}
                       defaultChecked={option === selectedRecurrenceEndOption}
                       data-testid={`${option}`}
                     />

diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx
@@ -25,8 +25,8 @@ import {
   Days,
   getRecurrenceRuleText,
   mondayToFriday,
-} from 'utils/recurrenceRuleUtils';
-import type { InterfaceRecurrenceRule } from 'utils/recurrenceRuleUtils';
+} from 'utils/recurrenceUtils';
+import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
 
 const timeToDayJs = (time: string): Dayjs => {
   const dateTimeString = dayjs().format('YYYY-MM-DD') + ' ' + time;

diff --git a/src/utils/recurrenceUtils/index.ts b/src/utils/recurrenceUtils/index.ts
@@ -0,0 +1,3 @@
+export * from './recurrenceTypes';
+export * from './recurrenceConstants';
+export * from './recurrenceUtilityFunctions';
diff --git a/src/utils/recurrenceUtils/recurrenceConstants.ts b/src/utils/recurrenceUtils/recurrenceConstants.ts
@@ -0,0 +1,63 @@
+/*
+  Recurrence constants
+*/
+
+import { RecurrenceEndOption, WeekDays } from './recurrenceTypes';
+
+// recurrence days options to select from in the UI
+export const daysOptions = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+// recurrence days array
+export const Days = [
+  WeekDays.SU,
+  WeekDays.MO,
+  WeekDays.TU,
+  WeekDays.WE,
+  WeekDays.TH,
+  WeekDays.FR,
+  WeekDays.SA,
+];
+
+// recurrence end options array
+export const recurrenceEndOptions = [
+  RecurrenceEndOption.never,
+  RecurrenceEndOption.on,
+  RecurrenceEndOption.after,
+];
+
+// constants for recurrence end options
+export const endsNever = RecurrenceEndOption.never;
+export const endsOn = RecurrenceEndOption.on;
+export const endsAfter = RecurrenceEndOption.after;
+
+// array of week days containing 'MO' to 'FR
+export const mondayToFriday = Days.filter(
+  (day) => day !== WeekDays.SA && day !== WeekDays.SU,
+);
+
+// names of week days
+export const dayNames = {
+  [WeekDays.SU]: 'Sunday',
+  [WeekDays.MO]: 'Monday',
+  [WeekDays.TU]: 'Tuesday',
+  [WeekDays.WE]: 'Wednesday',
+  [WeekDays.TH]: 'Thursday',
+  [WeekDays.FR]: 'Friday',
+  [WeekDays.SA]: 'Saturday',
+};
+
+// names of months
+export const monthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
diff --git a/src/utils/recurrenceUtils/recurrenceTypes.ts b/src/utils/recurrenceUtils/recurrenceTypes.ts
@@ -0,0 +1,45 @@
+/*
+  Recurrence types
+*/
+
+// interface for the recurrenceRuleData that we would send to the backend
+export interface InterfaceRecurrenceRule {
+  frequency: Frequency;
+  weekDays: WeekDays[];
+  count: number | undefined;
+}
+
+// recurrence frequency
+export enum Frequency {
+  DAILY = 'DAILY',
+  WEEKLY = 'WEEKLY',
+  MONTHLY = 'MONTHLY',
+  YEARLY = 'YEARLY',
+}
+
+// recurrence frequency mapping
+export const frequencies = {
+  [Frequency.DAILY]: 'Day',
+  [Frequency.WEEKLY]: 'Week',
+  [Frequency.MONTHLY]: 'Month',
+  [Frequency.YEARLY]: 'Year',
+};
+
+// recurrence week days
+export enum WeekDays {
+  SU = 'SU',
+  MO = 'MO',
+  TU = 'TU',
+  WE = 'WE',
+  TH = 'TH',
+  FR = 'FR',
+  SA = 'SA',
+}
+
+// recurrence end options
+// i.e. whether it 'never' ends, ends 'on' a certain date, or 'after' a certain number of occurences
+export enum RecurrenceEndOption {
+  never = 'never',
+  on = 'on',
+  after = 'after',
+}
diff --git a/src/utils/recurrenceRuleUtils.ts → ...rrenceUtils/recurrenceUtilityFunctions.ts b/src/utils/recurrenceRuleUtils.ts → ...rrenceUtils/recurrenceUtilityFunctions.ts
@@ -1,115 +1,12 @@
-/*
-  Recurrence types
-*/
-
-// interface for the recurrenceRuleData that we would send to the backend
-export interface InterfaceRecurrenceRule {
-  frequency: Frequency;
-  weekDays: WeekDays[];
-  count: number | undefined;
-}
-
-// recurrence frequency
-export enum Frequency {
-  DAILY = 'DAILY',
-  WEEKLY = 'WEEKLY',
-  MONTHLY = 'MONTHLY',
-  YEARLY = 'YEARLY',
-}
-
-// recurrence frequency mapping
-export const frequencies = {
-  [Frequency.DAILY]: 'Day',
-  [Frequency.WEEKLY]: 'Week',
-  [Frequency.MONTHLY]: 'Month',
-  [Frequency.YEARLY]: 'Year',
-};
-
-// recurrence week days
-export enum WeekDays {
-  SU = 'SU',
-  MO = 'MO',
-  TU = 'TU',
-  WE = 'WE',
-  TH = 'TH',
-  FR = 'FR',
-  SA = 'SA',
-}
-
-// recurrence end options
-// i.e. whether it 'never' ends, ends 'on' a certain date, or 'after' a certain number of occurences
-export enum RecurrenceEndOption {
-  never = 'never',
-  on = 'on',
-  after = 'after',
-}
-
-/*
-  Recurrence constants
-*/
-
-// recurrence days options to select from in the UI
-export const daysOptions = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-
-// recurrence days array
-export const Days = [
-  WeekDays.SU,
-  WeekDays.MO,
-  WeekDays.TU,
-  WeekDays.WE,
-  WeekDays.TH,
-  WeekDays.FR,
-  WeekDays.SA,
-];
-
-// recurrence end options array
-export const recurrenceEndOptions = [
-  RecurrenceEndOption.never,
-  RecurrenceEndOption.on,
-  RecurrenceEndOption.after,
-];
-
-// constants for recurrence end options
-export const endsNever = RecurrenceEndOption.never;
-export const endsOn = RecurrenceEndOption.on;
-export const endsAfter = RecurrenceEndOption.after;
-
-// array of week days containing 'MO' to 'FR
-export const mondayToFriday = Days.filter(
-  (day) => day !== WeekDays.SA && day !== WeekDays.SU,
-);
-
-// names of week days
-const dayNames = {
-  [WeekDays.SU]: 'Sunday',
-  [WeekDays.MO]: 'Monday',
-  [WeekDays.TU]: 'Tuesday',
-  [WeekDays.WE]: 'Wednesday',
-  [WeekDays.TH]: 'Thursday',
-  [WeekDays.FR]: 'Friday',
-  [WeekDays.SA]: 'Saturday',
-};
-
-// names of months
-const monthNames = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
 /*
    Recurrence utility functions
 */
 // function that generates the recurrence rule text to display
+
+import { dayNames, mondayToFriday, monthNames } from './recurrenceConstants';
+import { Frequency } from './recurrenceTypes';
+import type { WeekDays, InterfaceRecurrenceRule } from './recurrenceTypes';
+
 // e.g. - 'Weekly on Sunday, until Feburary 23, 2029'
 export const getRecurrenceRuleText = (
   recurrenceRuleState: InterfaceRecurrenceRule,