From 91cbbfc3ebba076eb540f0694c019217c59823b6 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 18 Nov 2021 22:20:53 +0530
Subject: [PATCH] refactor date picker into seperate component

---
 src/components/EnteDateTimePicker.tsx    | 37 ++++++++++++++++++++++++
 src/components/PhotoSwipe/PhotoSwipe.tsx | 34 ++++------------------
 2 files changed, 43 insertions(+), 28 deletions(-)
 create mode 100644 src/components/EnteDateTimePicker.tsx

diff --git a/src/components/EnteDateTimePicker.tsx b/src/components/EnteDateTimePicker.tsx
new file mode 100644
index 000000000..de4d37f71
--- /dev/null
+++ b/src/components/EnteDateTimePicker.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+    MIN_EDITED_CREATION_TIME,
+    MAX_EDITED_CREATION_TIME,
+    ALL_TIME,
+} from 'services/fileService';
+
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+const isSameDay = (first, second) =>
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate();
+
+const EnteDateTimePicker = ({ isInEditMode, pickedTime, handleChange }) => (
+    <DatePicker
+        open={isInEditMode}
+        selected={pickedTime}
+        onChange={handleChange}
+        timeInputLabel="Time:"
+        dateFormat="dd/MM/yyyy h:mm aa"
+        showTimeSelect
+        autoFocus
+        minDate={MIN_EDITED_CREATION_TIME}
+        maxDate={MAX_EDITED_CREATION_TIME}
+        maxTime={
+            isSameDay(pickedTime, new Date())
+                ? MAX_EDITED_CREATION_TIME
+                : ALL_TIME
+        }
+        minTime={MIN_EDITED_CREATION_TIME}
+        fixedHeight
+        withPortal></DatePicker>
+);
+
+export default EnteDateTimePicker;
diff --git a/src/components/PhotoSwipe/PhotoSwipe.tsx b/src/components/PhotoSwipe/PhotoSwipe.tsx
index a7f90d77a..58fd6852b 100644
--- a/src/components/PhotoSwipe/PhotoSwipe.tsx
+++ b/src/components/PhotoSwipe/PhotoSwipe.tsx
@@ -8,11 +8,8 @@ import {
     removeFromFavorites,
 } from 'services/collectionService';
 import {
-    ALL_TIME,
     File,
     MAX_EDITED_FILE_NAME_LENGTH,
-    MAX_EDITED_CREATION_TIME,
-    MIN_EDITED_CREATION_TIME,
     updatePublicMagicMetadata,
 } from 'services/fileService';
 import constants from 'utils/strings/constants';
@@ -41,14 +38,13 @@ import {
 } from 'components/Container';
 import { logError } from 'utils/sentry';
 
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import CloseIcon from 'components/icons/CloseIcon';
 import TickIcon from 'components/icons/TickIcon';
 import { FreeFlowText } from 'components/RecoveryKeyModal';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 import EnteSpinner from 'components/EnteSpinner';
+import EnteDateTimePicker from 'components/EnteDateTimePicker';
 
 interface Iprops {
     isOpen: boolean;
@@ -87,11 +83,6 @@ const renderInfoItem = (label: string, value: string | JSX.Element) => (
     </Row>
 );
 
-const isSameDay = (first, second) =>
-    first.getFullYear() === second.getFullYear() &&
-    first.getMonth() === second.getMonth() &&
-    first.getDate() === second.getDate();
-
 function RenderCreationTime({
     file,
     scheduleUpdate,
@@ -145,24 +136,11 @@ function RenderCreationTime({
                 <Label width="30%">{constants.CREATION_TIME}</Label>
                 <Value width={isInEditMode ? '50%' : '60%'}>
                     {isInEditMode ? (
-                        <DatePicker
-                            open={isInEditMode}
-                            selected={pickedTime}
-                            onChange={handleChange}
-                            timeInputLabel="Time:"
-                            dateFormat="dd/MM/yyyy h:mm aa"
-                            showTimeSelect
-                            autoFocus
-                            minDate={MIN_EDITED_CREATION_TIME}
-                            maxDate={MAX_EDITED_CREATION_TIME}
-                            maxTime={
-                                isSameDay(pickedTime, new Date())
-                                    ? MAX_EDITED_CREATION_TIME
-                                    : ALL_TIME
-                            }
-                            minTime={MIN_EDITED_CREATION_TIME}
-                            fixedHeight
-                            withPortal></DatePicker>
+                        <EnteDateTimePicker
+                            isInEditMode={isInEditMode}
+                            pickedTime={pickedTime}
+                            handleChange={handleChange}
+                        />
                     ) : (
                         formatDateTime(pickedTime)
                     )}