Fix search issue.

src/components/PhotoFrame.tsx

@@ -1,5 +1,5 @@
 import router from 'next/router';
-import { DeadCenter, FILE_TYPE } from 'pages/gallery';
+import { DeadCenter, FILE_TYPE, Search } from 'pages/gallery';
 import PreviewCard from 'pages/gallery/components/PreviewCard';
 import React, { useState } from 'react';
 import { Button } from 'react-bootstrap';
@@ -11,6 +11,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
 import CloudUpload from './CloudUpload';
+import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search';
 
 const DATE_CONTAINER_HEIGHT = 45;
 const IMAGE_CONTAINER_HEIGHT = 200;
@@ -102,6 +103,7 @@ interface Props {
     openFileUploader;
     loadingBar;
     searchMode: boolean;
+    search: Search
 }
 
 const PhotoFrame = ({
@@ -116,6 +118,7 @@ const PhotoFrame = ({
     openFileUploader,
     loadingBar,
     searchMode,
+    search,
 }: Props) => {
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
@@ -253,6 +256,12 @@ const PhotoFrame = ({
             dataIndex: index,
         }))
         .filter((item) => {
+            if (search.date && !isSameDayAnyYear(new Date(item.metadata.creationTime / 1000))(search.date)) {
+                return false;
+            }
+            if (search.location && !isInsideBox(item.metadata, search.location)) {
+                return false;
+            }
             if (!idSet.has(item.id)) {
                 if (
                     !router.query.collection ||

src/components/SearchBar.tsx

@@ -4,16 +4,13 @@ import styled from 'styled-components';
 import AsyncSelect from 'react-select/async';
 import { components } from 'react-select';
 import debounce from 'debounce-promise';
-import { File, getLocalFiles } from 'services/fileService';
+import { File } from 'services/fileService';
 import {
     Collection,
     getLocalCollections,
-    getNonEmptyCollections,
 } from 'services/collectionService';
 import { Bbox, parseHumanDate, searchLocation } from 'services/searchService';
 import {
-    getFilesWithCreationDay,
-    getFilesInsideBbox,
     getFormattedDate,
     getDefaultSuggestions,
 } from 'utils/search';
@@ -75,18 +72,19 @@ interface Props {
     isFirstFetch: boolean;
     setOpen: (value) => void;
     loadingBar: any;
-    setFiles: SetFiles;
     setCollections: SetCollections;
+    setSearch: React.Dispatch<React.SetStateAction<{
+        date?: Date,
+        location?: Bbox
+    }>>;
+    files: File[];
 }
 interface Stats {
     resultCount: number;
     timeTaken: number;
 }
 export default function SearchBar(props: Props) {
-    const [allFiles, setAllFiles] = useState<File[]>([]);
-    const [allCollections, setAllCollections] = useState<Collection[]>([]);
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-    const [stats, setStats] = useState<Stats>(null);
     const selectRef = useRef(null);
     useEffect(() => {
         if (props.isOpen) {
@@ -94,14 +92,6 @@ export default function SearchBar(props: Props) {
                 selectRef.current?.focus();
             }, 250);
         }
-        if (!props.isOpen && allFiles?.length > 0) {
-            return;
-        }
-        const main = async () => {
-            setAllFiles(await getLocalFiles());
-            setAllCollections(await getLocalCollections());
-        };
-        main();
     }, [props.isOpen]);
 
     useEffect(() => {
@@ -148,46 +138,35 @@ export default function SearchBar(props: Props) {
         if (!selectedOption) {
             return;
         }
-        const startTime = Date.now();
+        // const startTime = Date.now();
         props.setOpen(true);
-        let resultFiles: File[] = [];
 
         switch (selectedOption.type) {
             case SuggestionType.DATE:
                 const searchedDate = selectedOption.value as Date;
-                const filesWithSameDate = getFilesWithCreationDay(
-                    allFiles,
-                    searchedDate
-                );
-                resultFiles = filesWithSameDate;
+                
+                props.setSearch({
+                    date: searchedDate,
+                })
                 break;
             case SuggestionType.LOCATION:
                 const bbox = selectedOption.value as Bbox;
-
-                const filesTakenAtLocation = getFilesInsideBbox(allFiles, bbox);
-                resultFiles = filesTakenAtLocation;
+                props.setSearch({
+                    location: bbox,
+                })
+                break;
         }
-        props.setFiles(resultFiles);
-        props.setCollections(
-            getNonEmptyCollections(allCollections, resultFiles)
-        );
-        const timeTaken = (Date.now() - startTime) / 1000;
-        setStats({
-            timeTaken,
-            resultCount: resultFiles.length,
-        });
     };
     const resetSearch = () => {
         if (props.isOpen) {
             selectRef.current.select.state.value = null;
             props.loadingBar.current?.continuousStart();
-            props.setFiles(allFiles);
-            props.setCollections(allCollections);
+            // props.setFiles(allFiles);
+            props.setSearch({});
             setTimeout(() => {
                 props.loadingBar.current?.complete();
             }, 10);
             props.setOpen(false);
-            setStats(null);
         }
     };
 
@@ -328,9 +307,6 @@ export default function SearchBar(props: Props) {
                     <SearchIcon />
                 </SearchButton>
             )}
-            {props.isOpen && stats && (
-                <SearchStats>{constants.SEARCH_STATS(stats)}</SearchStats>
-            )}
         </>
     );
 }

src/pages/gallery/index.tsx

@@ -78,6 +78,10 @@ export type selectedState = {
 export type SetFiles = React.Dispatch<React.SetStateAction<File[]>>;
 export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
 export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
+export type Search = {
+    date?: Date;
+    location?: Bbox;
+}
 
 export default function Gallery() {
     const router = useRouter();
@@ -102,6 +106,11 @@ export default function Gallery() {
     const [collectionNamerAttributes, setCollectionNamerAttributes] =
         useState<CollectionNamerAttributes>(null);
     const [collectionNamerView, setCollectionNamerView] = useState(false);
+    const [search, setSearch] = useState<Search>({
+        date: null,
+        location: null,
+    });
+
     const {
         getRootProps,
         getInputProps,
@@ -268,6 +277,11 @@ export default function Gallery() {
         setSinceTime(new Date().getTime());
         selectCollection(null);
     };
+
+    const updateSearch = (search: setSearch) => {
+        setSearch(search);
+        setSinceTime(new Date().getTime());
+    }
     return (
         <FullScreenDropZone
             getRootProps={getRootProps}
@@ -305,8 +319,9 @@ export default function Gallery() {
                 setOpen={setSearchMode}
                 loadingBar={loadingBar}
                 isFirstFetch={isFirstFetch}
-                setFiles={updateFiles}
                 setCollections={setCollections}
+                setSearch={updateSearch}
+                files={files}
             />
             <Collections
                 collections={collections}
@@ -366,6 +381,7 @@ export default function Gallery() {
                 openFileUploader={openFileUploader}
                 loadingBar={loadingBar}
                 searchMode={searchMode}
+                search={search}
             />
             {selected.count > 0 && (
                 <SelectedFileOptions

src/utils/search/index.ts

@@ -1,26 +1,25 @@
 import { Suggestion, SuggestionType } from 'components/SearchBar';
 import { File } from 'services/fileService';
+import { Bbox } from 'services/searchService';
 
-export function getFilesInsideBbox(
-    files: File[],
-    bbox: [number, number, number, number]
+export function isInsideBox(
+    file: { longitude: number, latitude: number },
+    bbox: Bbox,
 ) {
-    return files.filter((file) => {
-        if (file.metadata.latitude == null && file.metadata.longitude == null) {
-            return false;
-        }
-        if (
-            file.metadata.longitude >= bbox[0] &&
-            file.metadata.latitude >= bbox[1] &&
-            file.metadata.longitude <= bbox[2] &&
-            file.metadata.latitude <= bbox[3]
-        ) {
-            return true;
-        }
-    });
+    if (file.latitude == null && file.longitude == null) {
+        return false;
+    }
+    if (
+        file.longitude >= bbox[0] &&
+        file.latitude >= bbox[1] &&
+        file.longitude <= bbox[2] &&
+        file.latitude <= bbox[3]
+    ) {
+        return true;
+    }
 }
 
-const isSameDay = (baseDate) => (compareDate) => {
+export const isSameDay = (baseDate) => (compareDate) => {
     return (
         baseDate.getMonth() === compareDate.getMonth() &&
         baseDate.getDate() === compareDate.getDate()