Fix search issue.
This commit is contained in:
parent
5724124d0f
commit
363805bed7
|
@ -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 ||
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in a new issue