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                          29x 29x 29x 29x   29x   29x 27x       54x   27x 27x           29x 10x     29x                                                                                                                                                          
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 [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;