update searchBar

src/components/SearchBar.tsx

@@ -1,9 +1,13 @@
 import { Formik } from 'formik';
+import { SetCollections, SetFiles } from 'pages/gallery';
 import React from 'react';
 import { Form } from 'react-bootstrap';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
 import * as Yup from 'yup';
+import { File } from 'services/fileService';
+import * as chrono from 'chrono-node';
+import { getNonEmptyCollections } from 'services/collectionService';
 
 const Wrapper = styled.div<{ open: boolean }>`
     background-color: #111;
@@ -27,16 +31,50 @@ interface formValues {
     searchPhrase: string;
 }
 interface Props {
-    open: boolean;
+    isOpen: boolean;
     setOpen: (value) => void;
+    loadingBar: any;
+    files: File[];
+    setFiles: SetFiles;
+    setCollections: SetCollections;
+    restoreGallery: () => Promise<void>;
 }
 export default function SearchBar(props: Props) {
+    const isSameDay = (baseDate) => (compareDate) => {
         return (
-        <Wrapper open={props.open}>
-            <div style={{ flex: 1, margin: '10px' }}>
+            baseDate.getMonth() === compareDate.getMonth() &&
+            baseDate.getDate() === compareDate.getDate()
+        );
+    };
+
+    const searchFiles = async (values: formValues) => {
+        const searchDate = chrono.parseDate(values.searchPhrase);
+        console.log(searchDate);
+        const searchDateComparer = isSameDay(searchDate);
+        const filesWithSameDate = props.files.filter((file) => {
+            if (
+                searchDateComparer(new Date(file.metadata.creationTime / 1000))
+            ) {
+                console.log(new Date(file.metadata.creationTime / 1000));
+                return true;
+            }
+            return false;
+        });
+        props.setFiles(filesWithSameDate);
+        props.setCollections((collection) =>
+            getNonEmptyCollections(collection, filesWithSameDate)
+        );
+    };
+    const closeSearchBar = async ({ resetForm }) => {
+        props.setOpen(false);
+        resetForm();
+        await props.restoreGallery();
+    };
+    return (
+        <Wrapper open={props.isOpen}>
             <Formik<formValues>
                 initialValues={{ searchPhrase: '' }}
-                    onSubmit={() => console.log('search attempted')}
+                onSubmit={searchFiles}
                 validationSchema={Yup.object().shape({
                     searchPhrase: Yup.string().required(constants.REQUIRED),
                 })}
@@ -49,7 +87,16 @@ export default function SearchBar(props: Props) {
                     errors,
                     handleChange,
                     handleSubmit,
+                    resetForm,
                 }) => (
+                    <>
+                        <div
+                            style={{
+                                flex: 1,
+                                maxWidth: '700px',
+                                margin: '10px',
+                            }}
+                        >
                             <Form noValidate onSubmit={handleSubmit}>
                                 <Form.Control
                                     type={'search'}
@@ -57,12 +104,11 @@ export default function SearchBar(props: Props) {
                                     value={values.searchPhrase}
                                     onChange={handleChange('searchPhrase')}
                                     isInvalid={Boolean(
-                                    touched.searchPhrase && errors.searchPhrase
+                                        touched.searchPhrase &&
+                                            errors.searchPhrase
                                     )}
                                 />
                             </Form>
-                    )}
-                </Formik>
                         </div>
                         <div
                             style={{
@@ -71,7 +117,9 @@ export default function SearchBar(props: Props) {
                                 alignItems: 'center',
                                 cursor: 'pointer',
                             }}
-                onClick={() => props.setOpen(false)}
+                            onClick={async () =>
+                                await closeSearchBar({ resetForm })
+                            }
                         >
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -82,6 +130,9 @@ export default function SearchBar(props: Props) {
                                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
                             </svg>
                         </div>
+                    </>
+                )}
+            </Formik>
         </Wrapper>
     );
 }