chore: change calendar views render method

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>
   );
 };

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

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}>

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];