FO-2772 Flyttet alt relatert til sok i egen store

Author: AlexGaard

package-lock.json

@@ -42,6 +42,7 @@
     "craco-less": "1.9.0",
     "dayjs": "^1.8.17",
     "lodash.throttle": "^4.1.1",
+    "lodash.debounce": "^4.0.8",
     "nav-frontend-alertstriper": "^3.0.11",
     "nav-frontend-alertstriper-style": "^2.0.9",
     "nav-frontend-chevron": "^1.0.10",

package.json

@@ -3,15 +3,15 @@ import StoreProvider from './stores/store-provider';
 import { Header } from './components/header/header';
 import { InternflateDecorator } from './components/internflate-decorator/internflate-decorator';
 import { Hovedside } from './hovedside/hovedside';
-import { FilterSync } from './components/filter-sync';
+import { SokSync } from './components/sok-sync';
 
 function App() {
 	return (
 		<StoreProvider>
 			<InternflateDecorator />
 			<Header />
 			<Hovedside />
-			<FilterSync />
+			<SokSync />
 		</StoreProvider>
 	);
 }

src/app.tsx

@@ -5,22 +5,18 @@ import { AlertStripeFeil } from 'nav-frontend-alertstriper';
 import Spinner from './felles/spinner/spinner';
 
 export function DataFetcher(props: { children: any }) {
-	const { brukere, innloggetVeileder } = useFetchStore();
+	const { innloggetVeileder } = useFetchStore();
 
 	useEffect(() => {
-		if (isNotStarted(brukere)) {
-			brukere.fetch(null);
-		}
-
 		if (isNotStarted(innloggetVeileder)) {
 			innloggetVeileder.fetch(null);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [brukere, innloggetVeileder]);
+	}, [innloggetVeileder]);
 
-	if (isAnyNotStartedOrPending([brukere, innloggetVeileder])) {
+	if (isAnyNotStartedOrPending([innloggetVeileder])) {
 		return <Spinner />;
-	} else if (hasAnyFailed([brukere, innloggetVeileder])) {
+	} else if (hasAnyFailed([innloggetVeileder])) {
 		return (
 			<AlertStripeFeil className="vedtaksstotte-alert">
 				Det oppnås for tiden ikke kontakt med alle baksystemer.

src/components/datafetcher.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Filters, StatusFilter, useFilterStore } from '../../stores/filter-store';
 import { FilterEtikett } from './etikett/filter-etikett';
-import './filter-etiketter.less';
 import { isEmpty } from '../../utils';
+import './filter-etiketter.less';
+import { Filters, useSokStore } from '../../stores/sok-store';
 
 export type OnRemoveClicked = (id: string) => void;
 
@@ -26,7 +26,7 @@ function lagFilterEtiketter(filters: Filters, onRemoveClicked: OnRemoveClicked)
 		);
 	}
 
-	if (status !== StatusFilter.ALLE) {
+	if (status) {
 		filterEtiketter.push(
 			<FilterEtikett key={STATUS_FILTER} id={STATUS_FILTER} tekst="Søk på status" onRemoveClicked={onRemoveClicked} />
 		);
@@ -36,15 +36,15 @@ function lagFilterEtiketter(filters: Filters, onRemoveClicked: OnRemoveClicked)
 }
 
 export const FilterEtiketter = () => {
-	const { filters, setFnrOrNameFilter, setEnheterFilter, setStatusFilter } = useFilterStore();
+	const { filters, setFnrOrNameFilter, setEnheterFilter, setStatusFilter } = useSokStore();
 
 	function handleOnRemoveClicked(id: string) {
 		if (id === NAVN_ELLER_FNR_FILTER) {
 			setFnrOrNameFilter('');
 		} else if (id === ENHET_FILTER) {
 			setEnheterFilter([]);
 		} else if (id === STATUS_FILTER) {
-			setStatusFilter(StatusFilter.ALLE);
+			setStatusFilter(undefined);
 		}
 	}
 

src/components/filter-etiketter/filter-etiketter.tsx

@@ -0,0 +1,7 @@
+.bruker-filter {
+  margin: 0 1rem;
+
+  .bruker-filter__checkbox {
+    margin-top: 0.5rem;
+  }
+}

src/components/filter-sync.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Element } from 'nav-frontend-typografi';
+import { DropdownOption } from '../enhet-dropdown/enhet-dropdown';
+import { Checkbox } from 'nav-frontend-skjema';
+import './bruker-filter.less';
+import { useSokStore } from '../../../stores/sok-store';
+
+export const BrukerFilter = () => {
+	const { filters, setStatusFilter } = useSokStore();
+
+	function handleOnStatusSelectedChanged(selectedOption: DropdownOption | null) {
+		console.log('selectedOption', selectedOption); // tslint:disable-line
+	}
+
+	return (
+		<div className="bruker-filter">
+			<Element>Bruker</Element>
+			<Checkbox label="Mine brukere" className="bruker-filter__checkbox" />
+		</div>
+	);
+};