From 894f6fc5f9fb3ab994e3896aa0fe66214cea39c8 Mon Sep 17 00:00:00 2001
From: Farhood Shapouran <farhood.shapouran@teleskop.app>
Date: Thu, 26 Oct 2023 11:21:37 +0300
Subject: [PATCH] chore: change calendar views render method

---
 src/components/Calendar.tsx      | 30 +++++++++++-------------------
 src/components/DaySelector.tsx   |  4 ++--
 src/components/MonthSelector.tsx |  5 +++--
 src/components/YearSelector.tsx  | 12 +++++-------
 4 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 2e41b55..0412869 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -1,35 +1,27 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import { CalendarViews } from '../enums';
+import type { CalendarViews } from '../enums';
 import Header from './Header';
 import YearSelector from './YearSelector';
 import MonthSelector from './MonthSelector';
 import DaySelector from './DaySelector';
 import TimeSelector from './TimeSelector';
 
+const CalendarView: Record<CalendarViews, ReactElement> = {
+  year: <YearSelector />,
+  month: <MonthSelector />,
+  day: <DaySelector />,
+  time: <TimeSelector />,
+};
+
 const Calendar = () => {
-  const { utils, currentDate, selectedDate, calendarView, mode } =
-    useCalendarContext();
-  const days = utils.getMonthDays(currentDate);
-  const currentMonth = utils.getDateMonth(currentDate);
-  const currentYear = utils.getDateYear(currentDate);
-  const selectedYear = utils.getDateYear(selectedDate);
+  const { calendarView, mode } = useCalendarContext();
 
   return (
     <View style={styles.container}>
       {mode !== 'time' ? <Header /> : null}
-      <View style={styles.calendarContainer}>
-        {calendarView === CalendarViews.year ? (
-          <YearSelector currentYear={currentYear} selectedYear={selectedYear} />
-        ) : calendarView === CalendarViews.month ? (
-          <MonthSelector month={currentMonth} />
-        ) : calendarView === CalendarViews.day ? (
-          <DaySelector days={days} />
-        ) : (
-          <TimeSelector />
-        )}
-      </View>
+      <View style={styles.calendarContainer}>{CalendarView[calendarView]}</View>
     </View>
   );
 };
diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx
index b7ec6f1..624e9fb 100644
--- a/src/components/DaySelector.tsx
+++ b/src/components/DaySelector.tsx
@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import type { IDayObject } from '../utils';
 
-const DaySelector = ({ days }: { days: IDayObject[] }) => {
+const DaySelector = () => {
   const { utils, currentDate, selectedDate, onSelectDate, theme } =
     useCalendarContext();
+  const days = utils.getMonthDays(currentDate);
 
   const handleSelectDate = (date: string) => {
     const newDate = utils
diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
index 751d4e6..b44f7d5 100644
--- a/src/components/MonthSelector.tsx
+++ b/src/components/MonthSelector.tsx
@@ -2,8 +2,9 @@ import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 
-const MonthSelector = ({ month }: { month: number }) => {
-  const { utils, onSelectMonth, theme } = useCalendarContext();
+const MonthSelector = () => {
+  const { utils, currentDate, onSelectMonth, theme } = useCalendarContext();
+  const month = utils.getDateMonth(currentDate);
 
   return (
     <View style={styles.container}>
diff --git a/src/components/YearSelector.tsx b/src/components/YearSelector.tsx
index 08cd088..500e1fb 100644
--- a/src/components/YearSelector.tsx
+++ b/src/components/YearSelector.tsx
@@ -2,13 +2,11 @@ import React, { memo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 
-type Props = {
-  currentYear: number;
-  selectedYear: number;
-};
-
-const YearSelector = ({ currentYear, selectedYear }: Props) => {
-  const { onSelectYear, theme } = useCalendarContext();
+const YearSelector = () => {
+  const { utils, currentDate, selectedDate, onSelectYear, theme } =
+    useCalendarContext();
+  const currentYear = utils.getDateYear(currentDate);
+  const selectedYear = utils.getDateYear(selectedDate);
   const rowArray = [1, 2, 3];
   const colArray = [1, 2, 3, 4];