All files / publisher/components/StoreSelector StoreSelector.tsx

50% Statements 14/28
41.66% Branches 5/12
40% Functions 4/10
48.14% Lines 13/27

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 108 109 110 111 112 113 114 115 116                          21x 21x 21x 21x   21x   21x 17x       34x   17x 17x           21x 8x     21x                                                                                                                                                          
import { useState, useEffect } from "react";
import { useAtomValue } from "jotai";
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 = useAtomValue(brandStoresState);
  const [showStoreSelector, setShowStoreSelector] = useState<boolean>(false);
  const [searchValue, setSearchValue] = useState("");
  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"
              value={searchValue}
              onInput={(e) => {
                const value = (e.target as HTMLInputElement).value;
                setSearchValue(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"
              onClick={() => {
                setSearchValue("");
                setFilteredBrandstores(brandStoresList);
              }}
            >
              <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;