From 363805bed7941394892e4709af42846d1d85f45d Mon Sep 17 00:00:00 2001 From: Pushkar Anand Date: Thu, 27 May 2021 02:06:02 +0530 Subject: [PATCH] Fix search issue. --- src/components/PhotoFrame.tsx | 11 ++++++- src/components/SearchBar.tsx | 58 ++++++++++------------------------- src/pages/gallery/index.tsx | 18 ++++++++++- src/utils/search/index.ts | 33 ++++++++++---------- 4 files changed, 60 insertions(+), 60 deletions(-) diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index dee3c5ee3..a385435d5 100644 --- a/src/components/PhotoFrame.tsx +++ b/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(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 || diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 18275b429..60e274fca 100644 --- a/src/components/SearchBar.tsx +++ b/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>; + files: File[]; } interface Stats { resultCount: number; timeTaken: number; } export default function SearchBar(props: Props) { - const [allFiles, setAllFiles] = useState([]); - const [allCollections, setAllCollections] = useState([]); const [windowWidth, setWindowWidth] = useState(window.innerWidth); - const [stats, setStats] = useState(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) { )} - {props.isOpen && stats && ( - {constants.SEARCH_STATS(stats)} - )} ); } diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index c3f3a9c07..3ea2c2852 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -78,6 +78,10 @@ export type selectedState = { export type SetFiles = React.Dispatch>; export type SetCollections = React.Dispatch>; export type SetLoading = React.Dispatch>; +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(null); const [collectionNamerView, setCollectionNamerView] = useState(false); + const [search, setSearch] = useState({ + 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 ( {selected.count > 0 && ( { - 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()