Merge pull request #68 from navikt/to-nanostore-from-zustand

To nanostore from zustand

Author: eivinne

package-lock.json

@@ -11,6 +11,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@nanostores/react": "^0.7.1",
     "@navikt/ds-icons": "3.4.3",
     "@navikt/ds-react": "5.7.0",
     "amplitude-js": "8.21.9",
@@ -20,8 +21,7 @@
     "react-query": "3.39.3",
     "rollup-plugin-terser": "7.0.2",
     "swr": "2.2.4",
-    "vite-plugin-css-injected-by-js": "3.3.0",
-    "zustand": "4.4.3"
+    "vite-plugin-css-injected-by-js": "3.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.1.4",

package.json

@@ -2,12 +2,10 @@ import { Search } from "@navikt/ds-react";
 import { useContext } from "react";
 import text from "../../../language/text";
 import { LanguageContext } from "../../../provider/LanguageProvider";
-import { updateSearch } from "../../../store/selectors";
-import useStore from "../../../store/store";
+import { setFilterSearch } from "../../../store/store";
 import styles from "./SearchField.module.css";
 
 const SearchField = () => {
-  const sok = useStore(updateSearch);
   const language = useContext(LanguageContext);
 
   return (
@@ -17,7 +15,7 @@ const SearchField = () => {
       variant="simple"
       hideLabel={false}
       onChange={(obj) => {
-        sok(obj.toLowerCase());
+        setFilterSearch(obj.toLowerCase());
       }}
     />
   );

src/components/filter/searchField/SearchField.tsx

@@ -2,27 +2,19 @@ import { ToggleGroup } from "@navikt/ds-react";
 import { useContext } from "react";
 import text from "../../../language/text";
 import { LanguageContext } from "../../../provider/LanguageProvider";
-import { selectAlle, selectBeskjed, selectOppgave } from "../../../store/selectors";
-import useStore from "../../../store/store";
+import { FilterTypes, setFilterType } from "../../../store/store";
 import styles from "./ToggleNotifikasjon.module.css";
 
 const ToggleNotifikasjon = () => {
   const language = useContext(LanguageContext);
 
-  const toggleVarsler: Record<string, () => any> = {
-    alle: useStore(selectAlle),
-    oppgave: useStore(selectOppgave),
-    beskjed: useStore(selectBeskjed),
-  };
-
   return (
     <ToggleGroup
       className={styles.toggleNotifikasjon}
       size="medium"
       defaultValue="alle"
       onChange={(value) => {
-        console.log(value);
-        toggleVarsler[value]();
+        setFilterType(value as FilterTypes);
       }}
     >
       <ToggleGroup.Item value="alle">{text.filterToggleItemAlle[language]}</ToggleGroup.Item>

src/components/filter/toggleNotifikasjon/ToggleNotifikasjon.tsx

@@ -3,24 +3,25 @@ import { useContext, useMemo } from "react";
 import TomSokKatt from "../../assets/TomSokKatt";
 import text from "../../language/text";
 import { LanguageContext } from "../../provider/LanguageProvider";
-import { selectSearch, selectType } from "../../store/selectors";
-import useStore from "../../store/store";
+import { filterSearch, filterType } from "../../store/store";
 import { byForstBehandlet } from "../../utils/date";
 import Filter from "../filter/Filter";
 import TidligereVarsel from "../varsel/TidligereVarsel";
 import { Varsel } from "../varsel/Varsel";
+import { useStore } from "@nanostores/react";
 import styles from "./TidligereVarslerPage.module.css";
 
 const TidligereVarslerPage = ({ varsler, isSuccess }: { varsler: Array<Varsel>; isSuccess: boolean }) => {
   const language = useContext(LanguageContext);
-  const filterType = useStore(selectType);
-  const filterSok = useStore(selectSearch);
+
+  const selectedFilter = useStore(filterType);
+  const searchTextInput = useStore(filterSearch);
 
   const sortedVarsler = useMemo(() => varsler?.sort(byForstBehandlet), [varsler]);
   const filtertedVarseler = sortedVarsler?.filter(
     (varsel) =>
-      (filterType === "alle" || varsel.type.toLowerCase() === filterType) &&
-      (varsel.tekst === null || varsel.tekst.toLowerCase().includes(filterSok)),
+      (selectedFilter === "alle" || varsel.type.toLowerCase() === selectedFilter) &&
+      (varsel.tekst === null || varsel.tekst.toLowerCase().includes(searchTextInput)),
   );
 
   return (

src/components/tidligereVarslerPage/TidligereVarslerPage.tsx

@@ -1,33 +1,15 @@
-import create from "zustand";
+import { atom } from "nanostores";
 
-const actions = (set: any) => ({
-  alle: () =>
-    set({
-      filterType: "alle",
-    }),
-  oppgave: () =>
-    set({
-      filterType: "oppgave",
-    }),
-  beskjed: () =>
-    set({
-      filterType: "beskjed",
-    }),
-  search: (search: string) =>
-    set({
-      filterSearch: search,
-    }),
-});
+export type FilterTypes = "alle" | "oppgave" | "beskjed";
 
-export interface SelectionState extends ReturnType<typeof actions> {
-  filterType: string;
-  filterSearch: string;
-}
+export const filterType = atom<string>("alle");
 
-const useStore = create<SelectionState>((set) => ({
-  filterType: "alle",
-  filterSearch: "",
-  ...actions(set),
-}));
+export const setFilterType = (type: FilterTypes) => {
+  filterType.set(type);
+};
 
-export default useStore;
+export const filterSearch = atom<string>("");
+
+export const setFilterSearch = (searchWord: string) => {
+  filterSearch.set(searchWord);
+};