2021-05-27 08:27:32 +00:00
|
|
|
import { Search, SearchStats, SetCollections } from 'pages/gallery';
|
2021-05-20 09:04:48 +00:00
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
2021-05-18 04:32:37 +00:00
|
|
|
import styled from 'styled-components';
|
2021-05-21 09:46:56 +00:00
|
|
|
import AsyncSelect from 'react-select/async';
|
2021-05-21 10:41:22 +00:00
|
|
|
import { components } from 'react-select';
|
2021-05-24 12:04:37 +00:00
|
|
|
import debounce from 'debounce-promise';
|
2021-05-26 20:36:02 +00:00
|
|
|
import { File } from 'services/fileService';
|
2021-05-28 16:25:19 +00:00
|
|
|
import {
|
|
|
|
Bbox,
|
|
|
|
getHolidaySuggestion,
|
|
|
|
getYearSuggestion,
|
|
|
|
parseHumanDate,
|
|
|
|
searchLocation,
|
|
|
|
} from 'services/searchService';
|
|
|
|
import { getFormattedDate } from 'utils/search';
|
2021-05-21 09:46:56 +00:00
|
|
|
import constants from 'utils/strings/constants';
|
2021-05-21 10:41:22 +00:00
|
|
|
import LocationIcon from './LocationIcon';
|
|
|
|
import DateIcon from './DateIcon';
|
2021-05-24 15:52:07 +00:00
|
|
|
import SearchIcon from './SearchIcon';
|
2021-05-25 08:49:20 +00:00
|
|
|
import CrossIcon from './CrossIcon';
|
2021-05-18 04:32:37 +00:00
|
|
|
|
2021-05-28 14:26:35 +00:00
|
|
|
const Wrapper = styled.div<{ width: number; isDisabled: boolean }>`
|
2021-05-26 06:21:50 +00:00
|
|
|
position: fixed;
|
|
|
|
z-index: 1000;
|
|
|
|
top: 0;
|
2021-05-26 14:08:44 +00:00
|
|
|
left: ${(props) => `max(0px, 50% - min(360px,${props.width / 2}px))`};
|
2021-05-26 06:21:50 +00:00
|
|
|
width: 100%;
|
2021-05-26 11:30:08 +00:00
|
|
|
max-width: 720px;
|
2021-05-26 06:21:50 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0 5%;
|
2021-05-18 04:32:37 +00:00
|
|
|
background-color: #111;
|
|
|
|
color: #fff;
|
|
|
|
min-height: 64px;
|
2021-05-28 14:26:35 +00:00
|
|
|
transition: opacity 1s ease;
|
|
|
|
opacity: ${(props) => (props.isDisabled ? 0 : 1)};
|
2021-05-18 04:32:37 +00:00
|
|
|
margin-bottom: 10px;
|
2021-05-26 06:21:50 +00:00
|
|
|
`;
|
|
|
|
|
2021-05-28 14:26:35 +00:00
|
|
|
const SearchButton = styled.div<{ isDisabled: boolean }>`
|
2021-05-26 06:21:50 +00:00
|
|
|
top: 1px;
|
|
|
|
z-index: 100;
|
|
|
|
right: 80px;
|
|
|
|
color: #fff;
|
2021-05-28 14:26:35 +00:00
|
|
|
cursor: pointer;
|
|
|
|
transition: opacity 1s ease;
|
|
|
|
opacity: ${(props) => (props.isDisabled ? 0 : 1)};
|
2021-05-26 06:21:50 +00:00
|
|
|
min-height: 64px;
|
2021-05-18 04:32:37 +00:00
|
|
|
position: fixed;
|
2021-05-18 07:47:03 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2021-05-18 04:32:37 +00:00
|
|
|
`;
|
2021-05-26 07:10:36 +00:00
|
|
|
|
2021-05-27 08:27:32 +00:00
|
|
|
const SearchStatsContainer = styled.div`
|
2021-05-26 07:10:36 +00:00
|
|
|
display: flex;
|
2021-05-26 07:50:52 +00:00
|
|
|
justify-content: center;
|
2021-05-26 07:10:36 +00:00
|
|
|
align-items: center;
|
2021-05-26 07:50:52 +00:00
|
|
|
color: #979797;
|
2021-05-27 12:38:32 +00:00
|
|
|
margin-bottom: 8px;
|
2021-05-26 07:10:36 +00:00
|
|
|
`;
|
|
|
|
|
2021-05-26 07:47:19 +00:00
|
|
|
export enum SuggestionType {
|
2021-05-21 09:46:56 +00:00
|
|
|
DATE,
|
|
|
|
LOCATION,
|
|
|
|
}
|
2021-05-28 16:25:19 +00:00
|
|
|
export interface DateValue {
|
|
|
|
date?: number;
|
|
|
|
month?: number;
|
|
|
|
year?: number;
|
|
|
|
}
|
2021-05-26 07:47:19 +00:00
|
|
|
export interface Suggestion {
|
2021-05-24 12:19:18 +00:00
|
|
|
type: SuggestionType;
|
2021-05-21 09:46:56 +00:00
|
|
|
label: string;
|
2021-05-28 16:25:19 +00:00
|
|
|
value: Bbox | DateValue;
|
2021-05-18 07:47:03 +00:00
|
|
|
}
|
|
|
|
interface Props {
|
2021-05-18 14:20:15 +00:00
|
|
|
isOpen: boolean;
|
2021-05-26 16:48:29 +00:00
|
|
|
isFirstFetch: boolean;
|
2021-05-18 07:47:03 +00:00
|
|
|
setOpen: (value) => void;
|
2021-05-18 14:20:15 +00:00
|
|
|
loadingBar: any;
|
|
|
|
setCollections: SetCollections;
|
2021-05-27 08:27:32 +00:00
|
|
|
setSearch: (search: Search) => void;
|
2021-05-26 20:36:02 +00:00
|
|
|
files: File[];
|
2021-05-27 08:27:32 +00:00
|
|
|
searchStats: SearchStats;
|
2021-05-26 07:10:36 +00:00
|
|
|
}
|
2021-05-18 07:47:03 +00:00
|
|
|
export default function SearchBar(props: Props) {
|
2021-05-26 06:21:50 +00:00
|
|
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
2021-05-25 08:08:57 +00:00
|
|
|
const selectRef = useRef(null);
|
2021-05-20 08:00:02 +00:00
|
|
|
useEffect(() => {
|
2021-05-26 12:49:39 +00:00
|
|
|
if (props.isOpen) {
|
|
|
|
setTimeout(() => {
|
|
|
|
selectRef.current?.focus();
|
|
|
|
}, 250);
|
|
|
|
}
|
2021-05-24 13:54:14 +00:00
|
|
|
}, [props.isOpen]);
|
2021-05-18 14:20:15 +00:00
|
|
|
|
2021-05-26 06:21:50 +00:00
|
|
|
useEffect(() => {
|
|
|
|
window.addEventListener('resize', () =>
|
|
|
|
setWindowWidth(window.innerWidth)
|
|
|
|
);
|
|
|
|
});
|
2021-05-25 08:08:57 +00:00
|
|
|
//==========================
|
|
|
|
// Functionality
|
|
|
|
//==========================
|
2021-05-26 11:37:01 +00:00
|
|
|
const getAutoCompleteSuggestions = async (searchPhrase: string) => {
|
2021-05-28 16:25:19 +00:00
|
|
|
searchPhrase = searchPhrase.trim();
|
2021-05-24 12:22:05 +00:00
|
|
|
if (!searchPhrase?.length) {
|
2021-05-28 16:25:19 +00:00
|
|
|
return [];
|
2021-05-24 12:22:05 +00:00
|
|
|
}
|
2021-05-28 16:25:19 +00:00
|
|
|
let option = [
|
|
|
|
...getHolidaySuggestion(searchPhrase),
|
|
|
|
...getYearSuggestion(searchPhrase),
|
|
|
|
];
|
|
|
|
|
|
|
|
const searchedDates = parseHumanDate(searchPhrase);
|
|
|
|
|
|
|
|
option.push(
|
|
|
|
...searchedDates.map((searchedDate) => ({
|
2021-05-24 12:19:18 +00:00
|
|
|
type: SuggestionType.DATE,
|
2021-05-21 09:46:56 +00:00
|
|
|
value: searchedDate,
|
2021-05-24 12:19:18 +00:00
|
|
|
label: getFormattedDate(searchedDate),
|
2021-05-28 16:25:19 +00:00
|
|
|
}))
|
|
|
|
);
|
|
|
|
|
2021-05-21 09:46:56 +00:00
|
|
|
const searchResults = await searchLocation(searchPhrase);
|
|
|
|
option.push(
|
|
|
|
...searchResults.map(
|
|
|
|
(searchResult) =>
|
2021-05-26 16:48:29 +00:00
|
|
|
({
|
|
|
|
type: SuggestionType.LOCATION,
|
|
|
|
value: searchResult.bbox,
|
|
|
|
label: searchResult.place,
|
|
|
|
} as Suggestion)
|
2021-05-21 09:46:56 +00:00
|
|
|
)
|
|
|
|
);
|
|
|
|
return option;
|
|
|
|
};
|
2021-05-20 08:19:37 +00:00
|
|
|
|
2021-05-26 11:37:01 +00:00
|
|
|
const getOptions = debounce(getAutoCompleteSuggestions, 250);
|
2021-05-24 12:04:37 +00:00
|
|
|
|
2021-05-24 12:19:18 +00:00
|
|
|
const filterFiles = (selectedOption: Suggestion) => {
|
2021-05-21 09:46:56 +00:00
|
|
|
if (!selectedOption) {
|
|
|
|
return;
|
|
|
|
}
|
2021-05-26 20:36:02 +00:00
|
|
|
// const startTime = Date.now();
|
2021-05-25 06:20:18 +00:00
|
|
|
props.setOpen(true);
|
2021-05-20 08:19:37 +00:00
|
|
|
|
2021-05-21 09:46:56 +00:00
|
|
|
switch (selectedOption.type) {
|
2021-05-24 12:19:18 +00:00
|
|
|
case SuggestionType.DATE:
|
2021-05-28 16:25:19 +00:00
|
|
|
const searchedDate = selectedOption.value as DateValue;
|
2021-05-27 08:27:32 +00:00
|
|
|
|
2021-05-26 20:36:02 +00:00
|
|
|
props.setSearch({
|
|
|
|
date: searchedDate,
|
2021-05-27 08:27:32 +00:00
|
|
|
});
|
2021-05-21 11:14:13 +00:00
|
|
|
break;
|
2021-05-24 12:19:18 +00:00
|
|
|
case SuggestionType.LOCATION:
|
2021-05-21 09:46:56 +00:00
|
|
|
const bbox = selectedOption.value as Bbox;
|
2021-05-26 20:36:02 +00:00
|
|
|
props.setSearch({
|
|
|
|
location: bbox,
|
2021-05-27 08:27:32 +00:00
|
|
|
});
|
2021-05-26 20:36:02 +00:00
|
|
|
break;
|
2021-05-20 08:00:02 +00:00
|
|
|
}
|
2021-05-18 14:20:15 +00:00
|
|
|
};
|
2021-05-24 15:52:07 +00:00
|
|
|
const resetSearch = () => {
|
2021-05-25 08:49:20 +00:00
|
|
|
if (props.isOpen) {
|
2021-05-25 09:16:20 +00:00
|
|
|
selectRef.current.select.state.value = null;
|
2021-05-25 08:49:20 +00:00
|
|
|
props.loadingBar.current?.continuousStart();
|
2021-05-26 20:36:02 +00:00
|
|
|
// props.setFiles(allFiles);
|
|
|
|
props.setSearch({});
|
2021-05-25 08:49:20 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
props.loadingBar.current?.complete();
|
2021-05-25 09:16:20 +00:00
|
|
|
}, 10);
|
2021-05-25 08:49:20 +00:00
|
|
|
props.setOpen(false);
|
|
|
|
}
|
2021-05-18 14:20:15 +00:00
|
|
|
};
|
2021-05-21 09:46:56 +00:00
|
|
|
|
2021-05-25 08:08:57 +00:00
|
|
|
//==========================
|
|
|
|
// UI
|
|
|
|
//==========================
|
|
|
|
|
2021-05-24 12:19:18 +00:00
|
|
|
const getIconByType = (type: SuggestionType) =>
|
|
|
|
type === SuggestionType.DATE ? <DateIcon /> : <LocationIcon />;
|
2021-05-21 13:29:06 +00:00
|
|
|
|
2021-05-24 12:19:18 +00:00
|
|
|
const LabelWithIcon = (props: { type: SuggestionType; label: string }) => (
|
2021-05-21 13:29:06 +00:00
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
2021-05-26 15:31:36 +00:00
|
|
|
<span style={{ paddingRight: '10px', paddingBottom: '4px' }}>
|
2021-05-21 13:29:06 +00:00
|
|
|
{getIconByType(props.type)}
|
|
|
|
</span>
|
|
|
|
<span>{props.label}</span>
|
|
|
|
</div>
|
2021-05-21 10:41:22 +00:00
|
|
|
);
|
2021-05-26 15:22:01 +00:00
|
|
|
const { Option, Control } = components;
|
|
|
|
|
2021-05-21 10:41:22 +00:00
|
|
|
const OptionWithIcon = (props) => (
|
|
|
|
<Option {...props}>
|
2021-05-21 13:29:06 +00:00
|
|
|
<LabelWithIcon type={props.data.type} label={props.data.label} />
|
2021-05-21 10:41:22 +00:00
|
|
|
</Option>
|
|
|
|
);
|
2021-05-24 15:52:07 +00:00
|
|
|
const ControlWithIcon = (props) => (
|
|
|
|
<Control {...props}>
|
2021-05-25 10:29:10 +00:00
|
|
|
<span
|
2021-05-25 11:40:46 +00:00
|
|
|
className={'icon'}
|
2021-05-25 10:29:10 +00:00
|
|
|
style={{
|
|
|
|
paddingLeft: '10px',
|
2021-05-26 15:31:36 +00:00
|
|
|
paddingBottom: '4px',
|
2021-05-25 10:29:10 +00:00
|
|
|
}}
|
|
|
|
>
|
2021-05-26 15:22:01 +00:00
|
|
|
{props.getValue().length == 0 || props.menuIsOpen ? (
|
|
|
|
<SearchIcon />
|
|
|
|
) : props.getValue()[0].type == SuggestionType.DATE ? (
|
|
|
|
<DateIcon />
|
|
|
|
) : (
|
|
|
|
<LocationIcon />
|
|
|
|
)}
|
2021-05-24 15:52:07 +00:00
|
|
|
</span>
|
|
|
|
{props.children}
|
|
|
|
</Control>
|
|
|
|
);
|
2021-05-21 10:41:22 +00:00
|
|
|
|
2021-05-21 09:46:56 +00:00
|
|
|
const customStyles = {
|
2021-05-25 06:20:18 +00:00
|
|
|
control: (style, { isFocused }) => ({
|
|
|
|
...style,
|
2021-05-21 09:46:56 +00:00
|
|
|
backgroundColor: '#282828',
|
|
|
|
color: '#d1d1d1',
|
2021-05-24 15:52:07 +00:00
|
|
|
borderColor: isFocused ? '#2dc262' : '#444',
|
2021-05-28 17:01:53 +00:00
|
|
|
boxShadow: 'none',
|
2021-05-21 09:46:56 +00:00
|
|
|
':hover': {
|
|
|
|
borderColor: '#2dc262',
|
2021-05-25 06:58:25 +00:00
|
|
|
cursor: 'text',
|
2021-05-25 11:40:46 +00:00
|
|
|
'&>.icon': { color: '#2dc262' },
|
2021-05-21 09:46:56 +00:00
|
|
|
},
|
|
|
|
}),
|
2021-05-25 06:20:18 +00:00
|
|
|
input: (style) => ({
|
|
|
|
...style,
|
2021-05-21 09:46:56 +00:00
|
|
|
color: '#d1d1d1',
|
|
|
|
}),
|
2021-05-25 06:20:18 +00:00
|
|
|
menu: (style) => ({
|
|
|
|
...style,
|
2021-05-21 13:29:06 +00:00
|
|
|
marginTop: '10px',
|
2021-05-21 09:46:56 +00:00
|
|
|
backgroundColor: '#282828',
|
|
|
|
}),
|
2021-05-25 06:20:18 +00:00
|
|
|
option: (style, { isFocused }) => ({
|
|
|
|
...style,
|
2021-05-21 09:46:56 +00:00
|
|
|
backgroundColor: isFocused && '#343434',
|
|
|
|
}),
|
2021-05-25 06:20:18 +00:00
|
|
|
dropdownIndicator: (style) => ({
|
|
|
|
...style,
|
2021-05-21 09:46:56 +00:00
|
|
|
display: 'none',
|
|
|
|
}),
|
2021-05-25 06:20:18 +00:00
|
|
|
indicatorSeparator: (style) => ({
|
|
|
|
...style,
|
2021-05-21 09:46:56 +00:00
|
|
|
display: 'none',
|
|
|
|
}),
|
2021-05-25 06:20:18 +00:00
|
|
|
clearIndicator: (style) => ({
|
|
|
|
...style,
|
2021-05-25 10:29:10 +00:00
|
|
|
display: 'none',
|
2021-05-21 09:46:56 +00:00
|
|
|
}),
|
2021-05-25 11:06:14 +00:00
|
|
|
singleValue: (style, state) => ({
|
2021-05-25 06:20:18 +00:00
|
|
|
...style,
|
2021-05-21 09:46:56 +00:00
|
|
|
backgroundColor: '#282828',
|
|
|
|
color: '#d1d1d1',
|
2021-05-25 11:06:14 +00:00
|
|
|
display: state.selectProps.menuIsOpen ? 'none' : 'block',
|
2021-05-21 09:46:56 +00:00
|
|
|
}),
|
2021-05-25 09:47:57 +00:00
|
|
|
placeholder: (style) => ({
|
|
|
|
...style,
|
|
|
|
color: '#686868',
|
|
|
|
wordSpacing: '2px',
|
2021-05-27 10:36:45 +00:00
|
|
|
whiteSpace: 'nowrap',
|
2021-05-25 11:06:14 +00:00
|
|
|
}),
|
2021-05-21 09:46:56 +00:00
|
|
|
};
|
2021-05-26 07:10:36 +00:00
|
|
|
return (
|
2021-05-28 14:02:48 +00:00
|
|
|
<>
|
2021-05-27 08:27:32 +00:00
|
|
|
{props.searchStats && (
|
|
|
|
<SearchStatsContainer>
|
|
|
|
{constants.SEARCH_STATS(props.searchStats)}
|
|
|
|
</SearchStatsContainer>
|
|
|
|
)}
|
2021-05-26 16:48:29 +00:00
|
|
|
{windowWidth > 1000 || props.isOpen ? (
|
2021-05-28 14:26:35 +00:00
|
|
|
<Wrapper isDisabled={props.isFirstFetch} width={windowWidth}>
|
2021-05-26 16:48:29 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
margin: '10px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<AsyncSelect
|
|
|
|
components={{
|
|
|
|
Option: OptionWithIcon,
|
|
|
|
Control: ControlWithIcon,
|
2021-05-26 07:10:36 +00:00
|
|
|
}}
|
2021-05-26 16:48:29 +00:00
|
|
|
ref={selectRef}
|
|
|
|
placeholder={constants.SEARCH_HINT()}
|
|
|
|
loadOptions={getOptions}
|
|
|
|
onChange={filterFiles}
|
|
|
|
isClearable
|
|
|
|
escapeClearsValue
|
|
|
|
styles={customStyles}
|
|
|
|
noOptionsMessage={() => null}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div style={{ width: '24px' }}>
|
|
|
|
{props.isOpen && (
|
|
|
|
<div
|
|
|
|
style={{ cursor: 'pointer' }}
|
|
|
|
onClick={resetSearch}
|
|
|
|
>
|
|
|
|
<CrossIcon />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</Wrapper>
|
|
|
|
) : (
|
2021-05-28 14:02:48 +00:00
|
|
|
<SearchButton
|
2021-05-28 14:26:35 +00:00
|
|
|
isDisabled={props.isFirstFetch}
|
2021-05-28 14:02:48 +00:00
|
|
|
onClick={() => !props.isFirstFetch && props.setOpen(true)}
|
|
|
|
>
|
2021-05-26 16:48:29 +00:00
|
|
|
<SearchIcon />
|
|
|
|
</SearchButton>
|
|
|
|
)}
|
2021-05-28 14:02:48 +00:00
|
|
|
</>
|
2021-05-18 07:47:03 +00:00
|
|
|
);
|
2021-05-18 04:32:37 +00:00
|
|
|
}
|