Fix search issue.
This commit is contained in:
parent
5724124d0f
commit
363805bed7
|
@ -1,5 +1,5 @@
|
||||||
import router from 'next/router';
|
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 PreviewCard from 'pages/gallery/components/PreviewCard';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Button } from 'react-bootstrap';
|
import { Button } from 'react-bootstrap';
|
||||||
|
@ -11,6 +11,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
|
||||||
import { VariableSizeList as List } from 'react-window';
|
import { VariableSizeList as List } from 'react-window';
|
||||||
import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
|
import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
|
||||||
import CloudUpload from './CloudUpload';
|
import CloudUpload from './CloudUpload';
|
||||||
|
import { isInsideBox, isSameDay as isSameDayAnyYear } from 'utils/search';
|
||||||
|
|
||||||
const DATE_CONTAINER_HEIGHT = 45;
|
const DATE_CONTAINER_HEIGHT = 45;
|
||||||
const IMAGE_CONTAINER_HEIGHT = 200;
|
const IMAGE_CONTAINER_HEIGHT = 200;
|
||||||
|
@ -102,6 +103,7 @@ interface Props {
|
||||||
openFileUploader;
|
openFileUploader;
|
||||||
loadingBar;
|
loadingBar;
|
||||||
searchMode: boolean;
|
searchMode: boolean;
|
||||||
|
search: Search
|
||||||
}
|
}
|
||||||
|
|
||||||
const PhotoFrame = ({
|
const PhotoFrame = ({
|
||||||
|
@ -116,6 +118,7 @@ const PhotoFrame = ({
|
||||||
openFileUploader,
|
openFileUploader,
|
||||||
loadingBar,
|
loadingBar,
|
||||||
searchMode,
|
searchMode,
|
||||||
|
search,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||||
|
@ -253,6 +256,12 @@ const PhotoFrame = ({
|
||||||
dataIndex: index,
|
dataIndex: index,
|
||||||
}))
|
}))
|
||||||
.filter((item) => {
|
.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 (!idSet.has(item.id)) {
|
||||||
if (
|
if (
|
||||||
!router.query.collection ||
|
!router.query.collection ||
|
||||||
|
|
|
@ -4,16 +4,13 @@ import styled from 'styled-components';
|
||||||
import AsyncSelect from 'react-select/async';
|
import AsyncSelect from 'react-select/async';
|
||||||
import { components } from 'react-select';
|
import { components } from 'react-select';
|
||||||
import debounce from 'debounce-promise';
|
import debounce from 'debounce-promise';
|
||||||
import { File, getLocalFiles } from 'services/fileService';
|
import { File } from 'services/fileService';
|
||||||
import {
|
import {
|
||||||
Collection,
|
Collection,
|
||||||
getLocalCollections,
|
getLocalCollections,
|
||||||
getNonEmptyCollections,
|
|
||||||
} from 'services/collectionService';
|
} from 'services/collectionService';
|
||||||
import { Bbox, parseHumanDate, searchLocation } from 'services/searchService';
|
import { Bbox, parseHumanDate, searchLocation } from 'services/searchService';
|
||||||
import {
|
import {
|
||||||
getFilesWithCreationDay,
|
|
||||||
getFilesInsideBbox,
|
|
||||||
getFormattedDate,
|
getFormattedDate,
|
||||||
getDefaultSuggestions,
|
getDefaultSuggestions,
|
||||||
} from 'utils/search';
|
} from 'utils/search';
|
||||||
|
@ -75,18 +72,19 @@ interface Props {
|
||||||
isFirstFetch: boolean;
|
isFirstFetch: boolean;
|
||||||
setOpen: (value) => void;
|
setOpen: (value) => void;
|
||||||
loadingBar: any;
|
loadingBar: any;
|
||||||
setFiles: SetFiles;
|
|
||||||
setCollections: SetCollections;
|
setCollections: SetCollections;
|
||||||
|
setSearch: React.Dispatch<React.SetStateAction<{
|
||||||
|
date?: Date,
|
||||||
|
location?: Bbox
|
||||||
|
}>>;
|
||||||
|
files: File[];
|
||||||
}
|
}
|
||||||
interface Stats {
|
interface Stats {
|
||||||
resultCount: number;
|
resultCount: number;
|
||||||
timeTaken: number;
|
timeTaken: number;
|
||||||
}
|
}
|
||||||
export default function SearchBar(props: Props) {
|
export default function SearchBar(props: Props) {
|
||||||
const [allFiles, setAllFiles] = useState<File[]>([]);
|
|
||||||
const [allCollections, setAllCollections] = useState<Collection[]>([]);
|
|
||||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||||
const [stats, setStats] = useState<Stats>(null);
|
|
||||||
const selectRef = useRef(null);
|
const selectRef = useRef(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.isOpen) {
|
if (props.isOpen) {
|
||||||
|
@ -94,14 +92,6 @@ export default function SearchBar(props: Props) {
|
||||||
selectRef.current?.focus();
|
selectRef.current?.focus();
|
||||||
}, 250);
|
}, 250);
|
||||||
}
|
}
|
||||||
if (!props.isOpen && allFiles?.length > 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const main = async () => {
|
|
||||||
setAllFiles(await getLocalFiles());
|
|
||||||
setAllCollections(await getLocalCollections());
|
|
||||||
};
|
|
||||||
main();
|
|
||||||
}, [props.isOpen]);
|
}, [props.isOpen]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -148,46 +138,35 @@ export default function SearchBar(props: Props) {
|
||||||
if (!selectedOption) {
|
if (!selectedOption) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const startTime = Date.now();
|
// const startTime = Date.now();
|
||||||
props.setOpen(true);
|
props.setOpen(true);
|
||||||
let resultFiles: File[] = [];
|
|
||||||
|
|
||||||
switch (selectedOption.type) {
|
switch (selectedOption.type) {
|
||||||
case SuggestionType.DATE:
|
case SuggestionType.DATE:
|
||||||
const searchedDate = selectedOption.value as Date;
|
const searchedDate = selectedOption.value as Date;
|
||||||
const filesWithSameDate = getFilesWithCreationDay(
|
|
||||||
allFiles,
|
props.setSearch({
|
||||||
searchedDate
|
date: searchedDate,
|
||||||
);
|
})
|
||||||
resultFiles = filesWithSameDate;
|
|
||||||
break;
|
break;
|
||||||
case SuggestionType.LOCATION:
|
case SuggestionType.LOCATION:
|
||||||
const bbox = selectedOption.value as Bbox;
|
const bbox = selectedOption.value as Bbox;
|
||||||
|
props.setSearch({
|
||||||
const filesTakenAtLocation = getFilesInsideBbox(allFiles, bbox);
|
location: bbox,
|
||||||
resultFiles = filesTakenAtLocation;
|
})
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
props.setFiles(resultFiles);
|
|
||||||
props.setCollections(
|
|
||||||
getNonEmptyCollections(allCollections, resultFiles)
|
|
||||||
);
|
|
||||||
const timeTaken = (Date.now() - startTime) / 1000;
|
|
||||||
setStats({
|
|
||||||
timeTaken,
|
|
||||||
resultCount: resultFiles.length,
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
const resetSearch = () => {
|
const resetSearch = () => {
|
||||||
if (props.isOpen) {
|
if (props.isOpen) {
|
||||||
selectRef.current.select.state.value = null;
|
selectRef.current.select.state.value = null;
|
||||||
props.loadingBar.current?.continuousStart();
|
props.loadingBar.current?.continuousStart();
|
||||||
props.setFiles(allFiles);
|
// props.setFiles(allFiles);
|
||||||
props.setCollections(allCollections);
|
props.setSearch({});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
props.loadingBar.current?.complete();
|
props.loadingBar.current?.complete();
|
||||||
}, 10);
|
}, 10);
|
||||||
props.setOpen(false);
|
props.setOpen(false);
|
||||||
setStats(null);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -328,9 +307,6 @@ export default function SearchBar(props: Props) {
|
||||||
<SearchIcon />
|
<SearchIcon />
|
||||||
</SearchButton>
|
</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 SetFiles = React.Dispatch<React.SetStateAction<File[]>>;
|
||||||
export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
|
export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
|
||||||
export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
|
export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
|
||||||
|
export type Search = {
|
||||||
|
date?: Date;
|
||||||
|
location?: Bbox;
|
||||||
|
}
|
||||||
|
|
||||||
export default function Gallery() {
|
export default function Gallery() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -102,6 +106,11 @@ export default function Gallery() {
|
||||||
const [collectionNamerAttributes, setCollectionNamerAttributes] =
|
const [collectionNamerAttributes, setCollectionNamerAttributes] =
|
||||||
useState<CollectionNamerAttributes>(null);
|
useState<CollectionNamerAttributes>(null);
|
||||||
const [collectionNamerView, setCollectionNamerView] = useState(false);
|
const [collectionNamerView, setCollectionNamerView] = useState(false);
|
||||||
|
const [search, setSearch] = useState<Search>({
|
||||||
|
date: null,
|
||||||
|
location: null,
|
||||||
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
getRootProps,
|
getRootProps,
|
||||||
getInputProps,
|
getInputProps,
|
||||||
|
@ -268,6 +277,11 @@ export default function Gallery() {
|
||||||
setSinceTime(new Date().getTime());
|
setSinceTime(new Date().getTime());
|
||||||
selectCollection(null);
|
selectCollection(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateSearch = (search: setSearch) => {
|
||||||
|
setSearch(search);
|
||||||
|
setSinceTime(new Date().getTime());
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<FullScreenDropZone
|
<FullScreenDropZone
|
||||||
getRootProps={getRootProps}
|
getRootProps={getRootProps}
|
||||||
|
@ -305,8 +319,9 @@ export default function Gallery() {
|
||||||
setOpen={setSearchMode}
|
setOpen={setSearchMode}
|
||||||
loadingBar={loadingBar}
|
loadingBar={loadingBar}
|
||||||
isFirstFetch={isFirstFetch}
|
isFirstFetch={isFirstFetch}
|
||||||
setFiles={updateFiles}
|
|
||||||
setCollections={setCollections}
|
setCollections={setCollections}
|
||||||
|
setSearch={updateSearch}
|
||||||
|
files={files}
|
||||||
/>
|
/>
|
||||||
<Collections
|
<Collections
|
||||||
collections={collections}
|
collections={collections}
|
||||||
|
@ -366,6 +381,7 @@ export default function Gallery() {
|
||||||
openFileUploader={openFileUploader}
|
openFileUploader={openFileUploader}
|
||||||
loadingBar={loadingBar}
|
loadingBar={loadingBar}
|
||||||
searchMode={searchMode}
|
searchMode={searchMode}
|
||||||
|
search={search}
|
||||||
/>
|
/>
|
||||||
{selected.count > 0 && (
|
{selected.count > 0 && (
|
||||||
<SelectedFileOptions
|
<SelectedFileOptions
|
||||||
|
|
|
@ -1,26 +1,25 @@
|
||||||
import { Suggestion, SuggestionType } from 'components/SearchBar';
|
import { Suggestion, SuggestionType } from 'components/SearchBar';
|
||||||
import { File } from 'services/fileService';
|
import { File } from 'services/fileService';
|
||||||
|
import { Bbox } from 'services/searchService';
|
||||||
|
|
||||||
export function getFilesInsideBbox(
|
export function isInsideBox(
|
||||||
files: File[],
|
file: { longitude: number, latitude: number },
|
||||||
bbox: [number, number, number, number]
|
bbox: Bbox,
|
||||||
) {
|
) {
|
||||||
return files.filter((file) => {
|
if (file.latitude == null && file.longitude == null) {
|
||||||
if (file.metadata.latitude == null && file.metadata.longitude == null) {
|
return false;
|
||||||
return false;
|
}
|
||||||
}
|
if (
|
||||||
if (
|
file.longitude >= bbox[0] &&
|
||||||
file.metadata.longitude >= bbox[0] &&
|
file.latitude >= bbox[1] &&
|
||||||
file.metadata.latitude >= bbox[1] &&
|
file.longitude <= bbox[2] &&
|
||||||
file.metadata.longitude <= bbox[2] &&
|
file.latitude <= bbox[3]
|
||||||
file.metadata.latitude <= bbox[3]
|
) {
|
||||||
) {
|
return true;
|
||||||
return true;
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const isSameDay = (baseDate) => (compareDate) => {
|
export const isSameDay = (baseDate) => (compareDate) => {
|
||||||
return (
|
return (
|
||||||
baseDate.getMonth() === compareDate.getMonth() &&
|
baseDate.getMonth() === compareDate.getMonth() &&
|
||||||
baseDate.getDate() === compareDate.getDate()
|
baseDate.getDate() === compareDate.getDate()
|
||||||
|
|
Loading…
Reference in a new issue