FO-2760 Fetch innlogget veileder og brukere

AlexGaard · AlexGaard · commit 6e91cce4f85f · 2020-02-28T12:34:57.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,13 +42,18 @@
     "craco-less": "1.9.0",
     "dayjs": "^1.8.17",
     "lodash.throttle": "^4.1.1",
+    "nav-frontend-alertstriper": "^3.0.11",
+    "nav-frontend-alertstriper-style": "^2.0.9",
     "nav-frontend-core": "^4.0.11",
+    "nav-frontend-ikoner-assets": "^1.0.5",
     "nav-frontend-js-utils": "^1.0.8",
     "nav-frontend-lenker": "^1.0.33",
     "nav-frontend-lenker-style": "^0.2.24",
     "nav-frontend-paneler-style": "^0.3.17",
     "nav-frontend-skjema": "^2.0.11",
     "nav-frontend-skjema-style": "^2.0.3",
+    "nav-frontend-spinner": "^2.0.1",
+    "nav-frontend-spinner-style": "^0.2.5",
     "nav-frontend-typografi": "^2.0.17",
     "nav-frontend-typografi-style": "^1.0.18",
     "prop-types": "^15.7.2",
@@ -59,6 +64,7 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
+    "@types/faker": "^4.1.10",
     "@types/jest": "^24.0.22",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^12.12.6",
@@ -67,6 +73,7 @@
     "@types/react-modal": "^3.10.0",
     "@types/react-select": "^3.0.8",
     "cross-env": "^7.0.0",
+    "faker": "^4.1.0",
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",
     "prettier": "^1.18.2",
diff --git a/src/components/datafetcher.tsx b/src/components/datafetcher.tsx
@@ -1,5 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useFetchStore } from '../stores/fetch-store';
+import { hasAnyFailed, isAnyNotStartedOrPending, isNotStarted } from '../rest/utils';
+import { AlertStripeFeil } from 'nav-frontend-alertstriper';
+import Spinner from './felles/spinner/spinner';
 
 export function DataFetcher(props: { children: any }) {
+	const { brukere, 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]);
+
+	if (isAnyNotStartedOrPending([brukere, innloggetVeileder])) {
+		return <Spinner />;
+	} else if (hasAnyFailed([brukere, innloggetVeileder])) {
+		return (
+			<AlertStripeFeil className="vedtaksstotte-alert">
+				Det oppnås for tiden ikke kontakt med alle baksystemer.
+				Vi jobber med å løse saken. Vennligst prøv igjen senere.
+			</AlertStripeFeil>
+		);
+	}
+
 	return props.children;
 }
diff --git a/src/components/felles/spinner/spinner.less b/src/components/felles/spinner/spinner.less
@@ -0,0 +1,6 @@
+
+.vedtaksstotte-spinner {
+	display: flex;
+	justify-content: center;
+	margin: 3rem 0;
+}
diff --git a/src/components/felles/spinner/spinner.tsx b/src/components/felles/spinner/spinner.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import NavFrontendSpinner from 'nav-frontend-spinner';
+import './spinner.less';
+
+function Spinner() {
+	return (
+		<div className="vedtaksstotte-spinner">
+			<NavFrontendSpinner type="XL" />
+		</div>
+	);
+}
+
+export default Spinner;
diff --git a/src/components/filter-panel/filter-panel.less b/src/components/filter-panel/filter-panel.less
@@ -3,4 +3,5 @@
   background-color: white;
 
   margin-bottom: 2rem;
+  border-radius: 4px;
 }
diff --git a/src/components/header/header.less b/src/components/header/header.less
@@ -1,6 +1,6 @@
 
 .header {
   width: 100%;
-  padding: 2rem;
+  padding: 2rem 2.5rem;
   background-color: white;
 }
diff --git a/src/components/sokefelt/sokefelt.tsx b/src/components/sokefelt/sokefelt.tsx
@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Input } from 'nav-frontend-skjema';
 import './sokefelt.less';
+import { useFilterStore } from '../../stores/filter-store';
 
 export const Sokefelt = () => {
-	const [query, setQuery] = useState('');
+	const { fnrOrNameFilter, setFnrOrNameFilter } = useFilterStore();
 
 	function handleOnQueryChanged(e: React.ChangeEvent<HTMLInputElement>) {
-		setQuery(e.target.value);
+		setFnrOrNameFilter(e.target.value);
 	}
 
     return (
@@ -15,7 +16,7 @@ export const Sokefelt = () => {
 			    label=""
 			    placeholder="Søk etter navn eller fødselsnummer"
 			    onChange={handleOnQueryChanged}
-			    value={query}
+			    value={fnrOrNameFilter}
 		    />
 	    </div>
     );
diff --git a/src/mock/data/brukere.ts b/src/mock/data/brukere.ts
@@ -0,0 +1,27 @@
+import faker from 'faker';
+import { Bruker, BrukerStatus } from '../../rest/data/bruker';
+import { enheter } from './enheter';
+
+export const lagBrukere = (antallBrukere: number): Bruker[] => {
+	const brukere: Bruker[] = [];
+
+	for (let i = 0; i < antallBrukere; i++) {
+		const randomEnhet = faker.random.arrayElement(enheter);
+
+		const bruker: Bruker = {
+			beslutterNavn: faker.name.firstName() + ' ' + faker.name.lastName(),
+			fnr: faker.random.number(1231999999999).toString(),
+			fornavn: faker.name.firstName(),
+			etternavn: faker.name.lastName(),
+			oppfolgingStartet: faker.date.recent().toISOString(),
+			oppfolgingsenhetId: randomEnhet.enhetId,
+			oppfolgingsenhetNavn: randomEnhet.navn,
+			status: BrukerStatus.KLAR_TIL_UTSENDING,
+			utkastSistEndret: faker.date.recent().toISOString()
+		};
+
+		brukere.push(bruker);
+	}
+
+	return brukere;
+};
diff --git a/src/mock/data/enheter.ts b/src/mock/data/enheter.ts
@@ -0,0 +1,10 @@
+import { Enhet } from '../../rest/data/innlogget-veileder';
+
+export const enheter: Enhet[] = [
+	{ enhetId: '1234', navn: 'NAV Testheim' },
+	{ enhetId: '0234', navn: 'NAV Gjerdrum' },
+	{ enhetId: '0219', navn: 'NAV Bærum' },
+	{ enhetId: '0335', navn: 'NAV Ullern' },
+	{ enhetId: '0604', navn: 'NAV Kongsberg' },
+	{ enhetId: '1525', navn: 'NAV Stranda' }
+];
diff --git a/src/mock/data/innlogget-veileder.ts b/src/mock/data/innlogget-veileder.ts
@@ -0,0 +1,10 @@
+import { InnloggetVeileder } from '../../rest/data/innlogget-veileder';
+import { enheter } from './enheter';
+
+export const innloggetVeileder: InnloggetVeileder = {
+	etternavn: 'Nordmann',
+	fornavn: 'Ola',
+	ident: 'Z1234',
+	navn: 'Ola Nordmann',
+	enheter,
+};
diff --git a/src/mock/index.ts b/src/mock/index.ts
@@ -1,9 +1,14 @@
 import FetchMock, { MiddlewareUtils } from 'yet-another-fetch-mock';
-
+import { lagBrukere } from './data/brukere';
+import { VEILARBVEDTAKSSTOTTE_API, VEILARBVEILEDER_API } from '../rest/api';
+import { innloggetVeileder } from './data/innlogget-veileder';
 
 const fetchMock = FetchMock.configure({
 	enableFallback: true,
 	middleware: MiddlewareUtils.combine(MiddlewareUtils.delayMiddleware(500), MiddlewareUtils.loggingMiddleware())
 });
 
-fetchMock.get('/veilarbvedtaksstotte/api/:fnr/vedtakFraArena', {});
+const brukere: any = lagBrukere(30);
+
+fetchMock.get(`${VEILARBVEDTAKSSTOTTE_API}/beslutter/brukere`, brukere);
+fetchMock.get(`${VEILARBVEILEDER_API}/veileder/v2/me`, innloggetVeileder as any);
diff --git a/src/rest/api.ts b/src/rest/api.ts
@@ -1,2 +1,12 @@
+import { FetchInfo } from './utils';
 
 export const VEILARBVEDTAKSSTOTTE_API = '/veilarbvedtaksstotte/api';
+export const VEILARBVEILEDER_API = '/veilarbveileder/api';
+
+export const lagHentBrukereFetchInfo = (): FetchInfo => ({
+	url: `${VEILARBVEDTAKSSTOTTE_API}/beslutter/brukere`
+});
+
+export const lagHentInnloggetVeilederFetchInfo = (): FetchInfo => ({
+	url: `${VEILARBVEILEDER_API}/veileder/v2/me`
+});
diff --git a/src/rest/data/bruker.ts b/src/rest/data/bruker.ts
@@ -0,0 +1,19 @@
+
+export enum BrukerStatus {
+	VENTER_PA_VEILEDER = 'VENTER_PA_VEILEDER',
+	VENTER_PA_BESLUTTER = 'VENTER_PA_BESLUTTER',
+	KLAR_TIL_UTSENDING = 'KLAR_TIL_UTSENDING'
+}
+
+export interface Bruker {
+	fnr: string;
+	fornavn: string;
+	etternavn: string;
+	status: BrukerStatus;
+	beslutterNavn: string;
+	utkastSistEndret: string; // dato
+
+	oppfolgingStartet: string; // dato
+	oppfolgingsenhetId: string;
+	oppfolgingsenhetNavn: string;
+}
diff --git a/src/rest/data/innlogget-veileder.ts b/src/rest/data/innlogget-veileder.ts
@@ -0,0 +1,13 @@
+
+export interface Enhet {
+	enhetId: string;
+	navn: string;
+}
+
+export interface InnloggetVeileder {
+	fornavn: string;
+	etternavn: string;
+	navn: string;
+	ident: string;
+	enheter: Enhet[];
+}
diff --git a/src/stores/fetch-store.ts b/src/stores/fetch-store.ts
@@ -1,5 +1,12 @@
 import createUseContext from 'constate';
+import useFetch from '../rest/use-fetch';
+import { lagHentBrukereFetchInfo, lagHentInnloggetVeilederFetchInfo } from '../rest/api';
+import { Bruker } from '../rest/data/bruker';
+import { InnloggetVeileder } from '../rest/data/innlogget-veileder';
 
 export const useFetchStore = createUseContext(() => {
-	return {};
+	const brukere = useFetch<Bruker[]>(lagHentBrukereFetchInfo);
+	const innloggetVeileder = useFetch<InnloggetVeileder>(lagHentInnloggetVeilederFetchInfo);
+
+	return { brukere, innloggetVeileder };
 });
diff --git a/src/stores/filter-store.ts b/src/stores/filter-store.ts
@@ -0,0 +1,9 @@
+import createUseContext from 'constate';
+import { useState } from 'react';
+
+export const useFilterStore = createUseContext(() => {
+	const [fnrOrNameFilter, setFnrOrNameFilter] = useState<string>('');
+	const [enheterFilter, setEnheterFilter] = useState<string[]>([]);
+
+	return { fnrOrNameFilter, setFnrOrNameFilter, enheterFilter, setEnheterFilter };
+});
diff --git a/src/stores/store-provider.tsx b/src/stores/store-provider.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { useFetchStore } from './fetch-store';
+import { useFilterStore } from './filter-store';
+import { ChildrenProps } from '../utils/types/children-props';
 
-interface StoreProviderProps {
-	children: React.ReactNode;
-}
-
-const StoreProvider = (props: StoreProviderProps) => {
+const StoreProvider = (props: ChildrenProps) => {
 	return (
 		<useFetchStore.Provider>
-			{props.children}
+			<useFilterStore.Provider>
+				{props.children}
+			</useFilterStore.Provider>
 		</useFetchStore.Provider>
 	);
 };

Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,5 @@`
`3`	`3`	`background-color: white;`
`4`	`4`
`5`	`5`	`margin-bottom: 2rem;`
	`6`	`+ border-radius: 4px;`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`
`2`	`2`	`.header {`
`3`	`3`	`width: 100%;`
`4`		`- padding: 2rem;`
	`4`	`+ padding: 2rem 2.5rem;`
`5`	`5`	`background-color: white;`
`6`	`6`	`}`