mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
polish and clean up code
This commit is contained in:
Rupin Khandelwal
parent
c2cc8db12c
commit
3908e456f2
1 changed files with 150 additions and 167 deletions
|
|
@ -9,11 +9,10 @@ import { styled, theme } from '../../tokens/stitches.config'
|
|||
import { SearchCoordinator } from './LibraryContainer'
|
||||
|
||||
// Styles
|
||||
|
||||
const List = styled('ul', {
|
||||
width: '91%',
|
||||
maxHeight: '400px',
|
||||
overflow:'auto',
|
||||
overflow: 'auto',
|
||||
top: '65px',
|
||||
left: '-32px',
|
||||
color: 'var(--colors-utilityTextDefault)',
|
||||
|
|
@ -41,185 +40,169 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
|
|||
|
||||
useEffect(() => {
|
||||
setRecentSearches(Object.values(localStorage))
|
||||
//localStorage.clear()
|
||||
if (recentSearches.length > 0) {
|
||||
console.log('recentSearches recentSearches', recentSearches)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Downshift
|
||||
// onChange={(selection) =>
|
||||
// console.log(
|
||||
// selection ? `You selected ${selection}` : 'Selection Cleared'
|
||||
// )
|
||||
// }
|
||||
itemToString={(item) => (item ? item : '')}
|
||||
>
|
||||
{({
|
||||
getInputProps,
|
||||
getRootProps,
|
||||
getMenuProps,
|
||||
getItemProps,
|
||||
isOpen,
|
||||
highlightedIndex,
|
||||
inputValue,
|
||||
clearSelection,
|
||||
}) => (
|
||||
<VStack
|
||||
<Downshift itemToString={(item) => (item ? item : '')}>
|
||||
{({
|
||||
getInputProps,
|
||||
getRootProps,
|
||||
getMenuProps,
|
||||
getItemProps,
|
||||
isOpen,
|
||||
highlightedIndex,
|
||||
inputValue,
|
||||
clearSelection,
|
||||
}) => (
|
||||
<VStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{ pl: '32px', width: '100%', height: '100%' }}
|
||||
>
|
||||
<HStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{ pl: '32px', width: '100%', height: '100%' }}
|
||||
css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
|
||||
{...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
|
||||
>
|
||||
<HStack
|
||||
alignment="start"
|
||||
distribution="start"
|
||||
css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
|
||||
{...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
|
||||
<form
|
||||
style={{ width: '100%' }}
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
// props.applySearchQuery(searchTerm || '')
|
||||
// inputRef.current?.blur()
|
||||
}}
|
||||
{...getRootProps()}
|
||||
>
|
||||
<form
|
||||
style={{ width: '100%' }}
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
// props.applySearchQuery(searchTerm || '')
|
||||
// inputRef.current?.blur()
|
||||
<FormInput
|
||||
css={{
|
||||
width: '77%',
|
||||
height: '80px',
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Inter',
|
||||
}}
|
||||
{...getRootProps()}
|
||||
>
|
||||
<FormInput
|
||||
css={{
|
||||
width: '77%',
|
||||
height: '80px',
|
||||
fontSize: '24px',
|
||||
fontFamily: 'Inter',
|
||||
}}
|
||||
type="text"
|
||||
tabIndex={0}
|
||||
value={inputValue}
|
||||
placeholder="Search"
|
||||
onChange={(event) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
{...getInputProps()}
|
||||
/>
|
||||
type="text"
|
||||
tabIndex={0}
|
||||
value={inputValue}
|
||||
placeholder="Search"
|
||||
onChange={(event: any) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
{...getInputProps()}
|
||||
/>
|
||||
|
||||
{/* {searchTerm && ( */}
|
||||
<HStack
|
||||
alignment="center"
|
||||
distribution="start"
|
||||
{/* {searchTerm && ( */}
|
||||
<HStack
|
||||
alignment="center"
|
||||
distribution="start"
|
||||
css={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'right',
|
||||
alignItems: 'center',
|
||||
margin: '-57px 0 10px',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style="plainIcon"
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
clearSelection()
|
||||
//props.applySearchQuery('')
|
||||
// inputRef.current?.blur()
|
||||
}}
|
||||
css={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'right',
|
||||
alignItems: 'center',
|
||||
margin: '-57px 0 10px',
|
||||
mr: '15px',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style="plainIcon"
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
clearSelection()
|
||||
|
||||
//props.applySearchQuery('')
|
||||
// inputRef.current?.blur()
|
||||
}}
|
||||
css={{
|
||||
mr: '15px',
|
||||
}}
|
||||
>
|
||||
<X
|
||||
width={24}
|
||||
height={24}
|
||||
color={theme.colors.grayTextContrast.toString()}
|
||||
/>
|
||||
</Button>
|
||||
<X
|
||||
width={24}
|
||||
height={24}
|
||||
color={theme.colors.grayTextContrast.toString()}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style="ctaDarkYellow"
|
||||
type="submit"
|
||||
css={{
|
||||
mr: '15px',
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
if (inputValue && inputValue.length > 0) {
|
||||
localStorage.setItem(inputValue, inputValue)
|
||||
setRecentSearches(Object.values(localStorage))
|
||||
}
|
||||
// props.applySearchQuery('')
|
||||
// inputRef.current?.blur()
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
{/* )} */}
|
||||
{/* {!searchTerm && ( */}
|
||||
<Button
|
||||
style="plainIcon"
|
||||
onClick={(event) => {
|
||||
// Display the advanced search sheet
|
||||
}}
|
||||
>
|
||||
<Sliders
|
||||
size={24}
|
||||
color={theme.colors.utilityTextDefault.toString()}
|
||||
/>
|
||||
</Button>
|
||||
{/* )} */}
|
||||
</HStack>
|
||||
<Button
|
||||
style="ctaDarkYellow"
|
||||
type="submit"
|
||||
css={{
|
||||
mr: '15px',
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
if (inputValue && inputValue.length > 0) {
|
||||
localStorage.setItem(inputValue, inputValue)
|
||||
setRecentSearches(Object.values(localStorage))
|
||||
}
|
||||
// props.applySearchQuery('')
|
||||
// inputRef.current?.blur()
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
{/* )} */}
|
||||
{/* {!searchTerm && ( */}
|
||||
<Button
|
||||
style="plainIcon"
|
||||
onClick={(event) => {
|
||||
// Display the advanced search sheet
|
||||
}}
|
||||
>
|
||||
<Sliders
|
||||
size={24}
|
||||
color={theme.colors.utilityTextDefault.toString()}
|
||||
/>
|
||||
</Button>
|
||||
{/* )} */}
|
||||
</HStack>
|
||||
|
||||
<List>
|
||||
{isOpen &&
|
||||
recentSearches
|
||||
.filter(
|
||||
(item) => !inputValue || item.includes(inputValue)
|
||||
)
|
||||
.map((item, index) => (
|
||||
<SpanBox
|
||||
{...getMenuProps()}
|
||||
key={item}
|
||||
css={{
|
||||
paddingLeft: '15px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid $grayBorder',
|
||||
'& svg': {
|
||||
margin: '10px',
|
||||
},
|
||||
backgroundColor:
|
||||
index === highlightedIndex
|
||||
? 'var(--colors-grayBg)'
|
||||
: 'transparent',
|
||||
}}
|
||||
<List>
|
||||
{isOpen &&
|
||||
recentSearches
|
||||
.filter((item) => !inputValue || item.includes(inputValue))
|
||||
.map((item, index) => (
|
||||
<SpanBox
|
||||
{...getMenuProps()}
|
||||
key={item}
|
||||
css={{
|
||||
paddingLeft: '15px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid $grayBorder',
|
||||
'& svg': {
|
||||
margin: '10px',
|
||||
},
|
||||
backgroundColor:
|
||||
index === highlightedIndex
|
||||
? 'var(--colors-grayBg)'
|
||||
: 'transparent',
|
||||
}}
|
||||
>
|
||||
<Clock size={20} />
|
||||
<Item
|
||||
{...getItemProps({
|
||||
item,
|
||||
index,
|
||||
})}
|
||||
>
|
||||
<Clock size={20} />
|
||||
<Item
|
||||
{...getItemProps({
|
||||
item,
|
||||
index,
|
||||
})}
|
||||
>
|
||||
{item}
|
||||
</Item>
|
||||
<X
|
||||
width={20}
|
||||
height={20}
|
||||
color={theme.colors.grayTextContrast.toString()}
|
||||
onClick={() => {
|
||||
localStorage.removeItem(`${item}`)
|
||||
setRecentSearches(Object.values(localStorage))
|
||||
}}
|
||||
/>
|
||||
</SpanBox>
|
||||
))}
|
||||
</List>
|
||||
</form>
|
||||
</HStack>
|
||||
</VStack>
|
||||
)}
|
||||
</Downshift>
|
||||
</>
|
||||
{item}
|
||||
</Item>
|
||||
<X
|
||||
width={20}
|
||||
height={20}
|
||||
color={theme.colors.grayTextContrast.toString()}
|
||||
onClick={() => {
|
||||
localStorage.removeItem(`${item}`)
|
||||
setRecentSearches(Object.values(localStorage))
|
||||
}}
|
||||
/>
|
||||
</SpanBox>
|
||||
))}
|
||||
</List>
|
||||
</form>
|
||||
</HStack>
|
||||
</VStack>
|
||||
)}
|
||||
</Downshift>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue