Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 19x 19x 19x 19x 19x 17x 34x 17x 17x 19x 6x 19x | import { useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { useParams, NavLink } from "react-router-dom";
import { brandStoresState } from "../../state/brandStoreState";
import type { Store } from "../../types/shared";
type Props = {
nativeNavLink?: boolean;
};
function StoreSelector({ nativeNavLink }: Props): React.JSX.Element {
const { id } = useParams();
const brandStoresList = useRecoilValue(brandStoresState);
const [showStoreSelector, setShowStoreSelector] = useState<boolean>(false);
const [filteredBrandStores, setFilteredBrandstores] =
useState<Store[]>(brandStoresList);
const getStoreName = (id: string | undefined) => {
Iif (!id) {
return;
}
const targetStore = brandStoresList.find((store) => store.id === id);
Eif (targetStore) {
return targetStore.name;
}
return;
};
useEffect(() => {
setFilteredBrandstores(brandStoresList);
}, [brandStoresList]);
return (
<div className="store-selector">
<button
className="store-selector__button u-no-margin--bottom"
onClick={() => {
setShowStoreSelector(!showStoreSelector);
}}
>
{id !== undefined ? getStoreName(id) : "Select a store"}
</button>
{showStoreSelector && (
<div className="store-selector__panel">
<div className="p-search-box u-no-margin--bottom">
<label htmlFor="search-stores" className="u-off-screen">
Search stores
</label>
<input
type="search"
className="p-search-box__input"
id="search-stores"
name="search-stores"
placeholder="Search"
onInput={(e) => {
const value = (e.target as HTMLInputElement).value;
if (value.length > 0) {
setFilteredBrandstores(
brandStoresList.filter((store) => {
const storeName = store.name.toLowerCase();
return storeName.includes(value.toLowerCase());
}),
);
} else {
setFilteredBrandstores(brandStoresList);
}
}}
/>
<button type="reset" className="p-search-box__reset">
<i className="p-icon--close">Close</i>
</button>
<button type="submit" className="p-search-box__button">
<i className="p-icon--search">Search</i>
</button>
</div>
<ul className="store-selector__list" style={{ listStyle: "none" }}>
{filteredBrandStores.map((store: Store) => (
<li key={store.id} className="store-selector__item">
{nativeNavLink ? (
<a href={`/admin/${store.id}/snaps`}>{store.name}</a>
) : (
<NavLink
to={`/admin/${store.id}/snaps`}
onClick={() => {
setShowStoreSelector(false);
}}
>
{store.name}
</NavLink>
)}
</li>
))}
</ul>
</div>
)}
</div>
);
}
export default StoreSelector;
|