From 0d86a0dc3fc2d79032ea45e164f449f6139175c3 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 14 Jun 2022 13:57:38 +0530
Subject: [PATCH] update edit creation time date picker

---
 src/components/EnteDateTimePicker.tsx         | 59 ++++++++-----------
 src/components/FixCreationTime/options.tsx    |  5 +-
 .../InfoDialog/RenderCreationTime.tsx         | 15 ++---
 src/constants/file/index.ts                   |  1 -
 src/utils/file/index.ts                       |  2 +-
 5 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/src/components/EnteDateTimePicker.tsx b/src/components/EnteDateTimePicker.tsx
index 164417fd9..2f9d91abc 100644
--- a/src/components/EnteDateTimePicker.tsx
+++ b/src/components/EnteDateTimePicker.tsx
@@ -1,50 +1,37 @@
 import React from 'react';
 
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import {
     MIN_EDITED_CREATION_TIME,
     MAX_EDITED_CREATION_TIME,
-    ALL_TIME,
 } from 'constants/file';
-
-const isSameDay = (first, second) =>
-    first.getFullYear() === second.getFullYear() &&
-    first.getMonth() === second.getMonth() &&
-    first.getDate() === second.getDate();
+import { TextField } from '@mui/material';
+import {
+    LocalizationProvider,
+    DesktopDateTimePicker,
+} from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 
 interface Props {
     loading?: boolean;
-    isInEditMode: boolean;
-    pickedTime: Date;
-    handleChange: (date: Date) => void;
+    value: Date;
+    label?: string;
+    onChange: (date: Date) => void;
 }
 
-const EnteDateTimePicker = ({
-    loading,
-    isInEditMode,
-    pickedTime,
-    handleChange,
-}: Props) => (
-    <DatePicker
-        disabled={loading}
-        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>
+const EnteDateTimePicker = ({ loading, value, onChange }: Props) => (
+    <>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DesktopDateTimePicker
+                maxDateTime={MAX_EDITED_CREATION_TIME}
+                minDateTime={MIN_EDITED_CREATION_TIME}
+                disabled={loading}
+                PopperProps={{ sx: { zIndex: '1502' } }}
+                value={value}
+                onChange={onChange}
+                renderInput={(params) => <TextField {...params} />}
+            />
+        </LocalizationProvider>
+    </>
 );
 
 export default EnteDateTimePicker;
diff --git a/src/components/FixCreationTime/options.tsx b/src/components/FixCreationTime/options.tsx
index 673260aef..31242b102 100644
--- a/src/components/FixCreationTime/options.tsx
+++ b/src/components/FixCreationTime/options.tsx
@@ -69,9 +69,8 @@ export default function FixCreationTimeOptions({ handleChange, values }) {
                 {Number(values.option) === FIX_OPTIONS.CUSTOM_TIME && (
                     <Value width="40%">
                         <EnteDateTimePicker
-                            isInEditMode
-                            pickedTime={new Date(values.customTime)}
-                            handleChange={(x: Date) =>
+                            value={new Date(values.customTime)}
+                            onChange={(x: Date) =>
                                 handleChange('customTime')(x.toUTCString())
                             }
                         />
diff --git a/src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx b/src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx
index b27152d04..1bdfb4935 100644
--- a/src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx
+++ b/src/components/PhotoSwipe/InfoDialog/RenderCreationTime.tsx
@@ -12,8 +12,8 @@ import { IconButton, Label, Row, Value } from 'components/Container';
 import { logError } from 'utils/sentry';
 import CloseIcon from '@mui/icons-material/Close';
 import TickIcon from '@mui/icons-material/Done';
-import EnteDateTimePicker from 'components/EnteDateTimePicker';
 import { SmallLoadingSpinner } from '../styledComponents/SmallLoadingSpinner';
+import EnteDateTimePicker from 'components/EnteDateTimePicker';
 
 export function RenderCreationTime({
     shouldDisableEdits,
@@ -81,12 +81,13 @@ export function RenderCreationTime({
                             : '70%'
                     }>
                     {isInEditMode ? (
-                        <EnteDateTimePicker
-                            loading={loading}
-                            isInEditMode={isInEditMode}
-                            pickedTime={pickedTime}
-                            handleChange={handleChange}
-                        />
+                        <>
+                            <EnteDateTimePicker
+                                loading={loading}
+                                value={pickedTime}
+                                onChange={handleChange}
+                            />
+                        </>
                     ) : (
                         formatDateTime(pickedTime)
                     )}
diff --git a/src/constants/file/index.ts b/src/constants/file/index.ts
index a7aa4121a..93f8eb81b 100644
--- a/src/constants/file/index.ts
+++ b/src/constants/file/index.ts
@@ -1,6 +1,5 @@
 export const MIN_EDITED_CREATION_TIME = new Date(1800, 0, 1);
 export const MAX_EDITED_CREATION_TIME = new Date();
-export const ALL_TIME = new Date(1800, 0, 1, 23, 59, 59);
 
 export const MAX_EDITED_FILE_NAME_LENGTH = 100;
 export const MAX_TRASH_BATCH_SIZE = 1000;
diff --git a/src/utils/file/index.ts b/src/utils/file/index.ts
index bdadaa8b3..3bb4bccfa 100644
--- a/src/utils/file/index.ts
+++ b/src/utils/file/index.ts
@@ -202,7 +202,7 @@ export function formatDateTime(date: number | Date) {
         day: 'numeric',
     });
     const timeFormat = new Intl.DateTimeFormat('en-IN', {
-        timeStyle: 'medium',
+        timeStyle: 'short',
     });
     return `${dateTimeFormat.format(date)} ${timeFormat.format(date)}`;
 }