Skip to content

Commit 6adedb2

Browse files
robbestadrobbestad
authored
Merge pull request #135 from navikt/feature/klage-oppsummering-delt
Split /klage and /oppsummering
2 parents 32ba486 + 5139f4a commit 6adedb2

File tree

13 files changed

+89
-45
lines changed

13 files changed

+89
-45
lines changed

‎package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@
125125
"npm-run-all": "^4.1.5",
126126
"pretty-quick": "^3.0.2",
127127
"react-test-renderer": "^16.13.1",
128+
"redux-devtools-extension": "^2.13.8",
128129
"yet-another-fetch-mock": "^3.4.0"
129130
},
130131
"resolutions": {

‎src/App.tsx

+17-19
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
77
import queryString from 'query-string';
88
import { getTemaObject } from './services/klageService';
99
import { useDispatch } from 'react-redux';
10-
import { setValgtYtelse } from './store/actions';
10+
import { setValgtYtelse, setValgtTema } from './store/actions';
1111
import NotFoundPage from './pages/not-found/not-found-page';
1212
import NavFrontendSpinner from 'nav-frontend-spinner';
1313
import { CenteredContainer } from './styled-components/main-styled-components';
@@ -20,25 +20,23 @@ const App = (props: any) => {
2020
useEffect(() => {
2121
if (props.location.search !== '') {
2222
const query = queryString.parse(props.location.search);
23-
if (query) {
24-
if (query.tema) {
25-
getTemaObject(String(query.tema))
26-
.then(res => {
27-
const ytelse = query.ytelse ? query.ytelse.toString() : res.value;
28-
dispatch(setValgtYtelse(ytelse));
23+
if (query && query.tema) {
24+
const tema = query.tema.toString();
25+
dispatch(setValgtTema(tema));
26+
getTemaObject(tema)
27+
.then(res => {
28+
const ytelse = query.ytelse ? String(query.ytelse) : res.value;
29+
dispatch(setValgtYtelse(ytelse));
30+
setLoading(false);
31+
})
32+
.catch(err => {
33+
if (err.response?.status === 404) {
34+
setErrorState(true);
2935
setLoading(false);
30-
})
31-
.catch(err => {
32-
if (err.response?.status === 404) {
33-
setErrorState(true);
34-
setLoading(false);
35-
return;
36-
}
37-
console.log(err);
38-
});
39-
} else {
40-
setLoading(false);
41-
}
36+
return;
37+
}
38+
console.log(err);
39+
});
4240
} else {
4341
setLoading(false);
4442
}

‎src/components/begrunnelse/begrunnelse.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,12 @@ const Begrunnelse = (props: any) => {
184184
{submitted && !validForm() && (
185185
<MarginContainer>
186186
<AlertStripeFeil>
187-
{getFeilmeldinger().map(feilmelding => {
188-
return <p className="no-margin">{feilmelding}</p>;
187+
{getFeilmeldinger().map((feilmelding, index) => {
188+
return (
189+
<p className="no-margin" key={index}>
190+
{feilmelding}
191+
</p>
192+
);
189193
})}
190194
</AlertStripeFeil>
191195
</MarginContainer>

‎src/components/form-landing/form-landing.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Error from '../../components/error/error';
1111

1212
const FormLanding = (props: any) => {
1313
const dispatch = useDispatch();
14-
const { loading, chosenYtelse, getKlageError } = useSelector((state: Store) => state);
14+
const { loading, chosenTema, chosenYtelse, getKlageError } = useSelector((state: Store) => state);
1515

1616
const [chosenVedtak, setChosenVedtak] = useState<Vedtak>();
1717
const [temaNotSet, setTemaNotSet] = useState<boolean>(false);
@@ -26,9 +26,9 @@ const FormLanding = (props: any) => {
2626
setChosenVedtak(elementAsVedtak(props.query));
2727
}
2828
} else {
29-
setTemaNotSet(true);
29+
setTemaNotSet(chosenTema === '');
3030
}
31-
}, [dispatch, props.location.search, props.query]);
31+
}, [dispatch, props.location.search, props.query, chosenTema]);
3232

3333
logInfo('Form landing page visited.', { chosenYtelse: chosenYtelse, referrer: document.referrer });
3434

@@ -57,7 +57,7 @@ const FormLanding = (props: any) => {
5757
} else {
5858
return (
5959
<WithLoading loading={loading}>
60-
<MainFormPage ytelse={chosenYtelse} chosenVedtak={chosenVedtak} />
60+
<MainFormPage path={props.path} ytelse={chosenYtelse} chosenVedtak={chosenVedtak} />
6161
</WithLoading>
6262
);
6363
}

‎src/index.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@ import App from './App';
55
import * as serviceWorker from './serviceWorker';
66
import { Provider } from 'react-redux';
77
import { footer, header, scripts, styles } from './mock-api/get/decorator';
8-
import { setupMock } from './mock-api/setup-mock';
8+
//import { setupMock } from './mock-api/setup-mock';
99
import configureStore from './store/configureStore';
1010
import Environment, { fetchEnv, isLocalhost } from './utils/environment';
1111
import { BrowserRouter } from 'react-router-dom';
1212

13+
//const mockEnabled = process.env.NODE_ENV === 'development' || process.env.REACT_APP_MOCK_DATA === 'true';
1314
const store = configureStore();
1415

15-
const mockEnabled = process.env.NODE_ENV === 'development' || process.env.REACT_APP_MOCK_DATA === 'true';
16-
1716
const init = async () => {
1817
if (process.env.NODE_ENV === 'development') {
1918
// Mock decorator
@@ -27,10 +26,10 @@ const init = async () => {
2726
script.src = 'https://www.nav.no/dekoratoren/client.js';
2827
document.body.appendChild(script);
2928
}
30-
// If not in develop mode, but still want to run mock
31-
if (mockEnabled) {
32-
setupMock();
33-
}
29+
// If not i develop mode, but still want to run mock
30+
//if (mockEnabled) {
31+
// setupMock();
32+
//}
3433

3534
if (isLocalhost && process.env.NODE_ENV === 'development') {
3635
Environment.setEnv({

‎src/mock-api/get/vedlegg.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { VedleggResponse } from '../../types/vedlegg';
22

33
export const okVedlegg: VedleggResponse = {
4-
content: "",
5-
contentType: "application/pdf",
4+
content: '',
5+
contentType: 'application/pdf',
66
id: 0,
77
klageId: 0,
8-
ref: "",
8+
ref: '',
99
sizeInBytes: 0,
10-
tittel: "mock tittel"
10+
tittel: 'mock tittel'
1111
};

‎src/pages/form-landing-page/form-landing-page.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import queryString from 'query-string';
55

66
const FormLandingPage = (props: any) => {
77
const query = queryString.parse(props.location.search);
8+
const path = props.location.pathname;
89

910
return (
1011
<ErrorBoundary>
11-
<FormLanding query={query} location={props.location} />
12+
<FormLanding path={path} query={query} location={props.location} />
1213
</ErrorBoundary>
1314
);
1415
};

‎src/pages/form-landing-page/main-form-page.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,25 @@ import { routesStepsIkkeValgtVedtak, routesStepsValgtVedtak, FormStep } from '..
55
import { MarginContainer } from '../../styled-components/main-styled-components';
66
import Steps from '../../components/steps/steps';
77
import OppsummeringSkjemaPage from '../oppsummering-skjema-page/oppsummering-skjema-page';
8+
import { useHistory } from 'react-router-dom';
89

910
interface Props {
11+
path: string;
1012
chosenVedtak?: Vedtak;
1113
ytelse: string;
1214
}
1315

1416
const MainFormPage = (props: Props) => {
15-
const [activeStep, setActiveStep] = useState<number>(0);
17+
const history = useHistory();
1618

1719
let activeRoutes: FormStep[] = props.chosenVedtak ? routesStepsValgtVedtak : routesStepsIkkeValgtVedtak;
20+
21+
const stepFromPath = (path: string): number => {
22+
const foundStep = activeRoutes.find(route => route.path === path)?.step;
23+
return foundStep ?? 0;
24+
};
25+
const [activeStep, setActiveStep] = useState<number>(stepFromPath(props.path));
26+
1827
let activeRoute: FormStep = activeRoutes[activeStep];
1928

2029
window.onbeforeunload = function () {
@@ -26,10 +35,12 @@ const MainFormPage = (props: Props) => {
2635
};
2736

2837
const next = () => {
38+
history.push(activeRoutes[activeStep + 1].path);
2939
setActiveStep(activeStep + 1);
3040
};
3141

3242
const previous = () => {
43+
history.push(activeRoutes[activeStep - 1].path);
3344
setActiveStep(activeStep - 1);
3445
};
3546

‎src/store/actions.ts

+12-2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export type ActionTypes =
3737
type: 'YTELSE_SET';
3838
value: string;
3939
}
40+
| {
41+
type: 'TEMA_SET';
42+
value: string;
43+
}
4044
| {
4145
type: 'KLAGE_ID_SET';
4246
value: string;
@@ -90,8 +94,8 @@ export function updateKlage(klageskjema: KlageSkjema) {
9094
export function getExistingKlage(klageId: number) {
9195
return function (dispatch: Dispatch<ActionTypes>) {
9296
return getKlage(klageId)
93-
.then(klage => {
94-
dispatch({ type: 'KLAGE_GET_SUCCESS', payload: klage });
97+
.then(response => {
98+
dispatch({ type: 'KLAGE_GET_SUCCESS', payload: response });
9599
})
96100
.catch(err => {
97101
logError(err, 'Get existing klage failed');
@@ -106,6 +110,12 @@ export function setValgtYtelse(ytelse: string) {
106110
};
107111
}
108112

113+
export function setValgtTema(tema: string) {
114+
return function (dispatch: Dispatch<ActionTypes>) {
115+
return dispatch({ type: 'TEMA_SET', value: tema });
116+
};
117+
}
118+
109119
export function setKlageId(klageId: string) {
110120
return function (dispatch: Dispatch<ActionTypes>) {
111121
return dispatch({ type: 'KLAGE_ID_SET', value: klageId });

‎src/store/configureStore.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { applyMiddleware, createStore } from 'redux';
22
import thunkMiddleware from 'redux-thunk';
3-
import reducer from './reducer';
3+
import { composeWithDevTools } from 'redux-devtools-extension';
4+
import rootReducer from './reducer';
45

56
export default function () {
6-
return createStore(reducer, applyMiddleware(thunkMiddleware));
7+
return createStore(rootReducer, composeWithDevTools(applyMiddleware(thunkMiddleware)));
78
}

‎src/store/reducer.ts

+8
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { toVedleggProps, VEDLEGG_STATUS, VedleggProps } from '../types/vedlegg';
66
export interface Store {
77
loading: boolean;
88

9+
chosenTema: string;
910
chosenYtelse: string;
1011

1112
// Auth response
@@ -25,6 +26,7 @@ export interface Store {
2526
export const initialState: Store = {
2627
loading: true,
2728

29+
chosenTema: '',
2830
chosenYtelse: '',
2931

3032
person: {
@@ -65,6 +67,11 @@ export const initialState: Store = {
6567

6668
const reducer = (state = initialState, action: ActionTypes): Store => {
6769
switch (action.type) {
70+
case 'TEMA_SET':
71+
return {
72+
...state,
73+
chosenTema: action.value
74+
};
6875
case 'CHECK_AUTH_SUCCESS':
6976
return {
7077
...state,
@@ -116,6 +123,7 @@ const reducer = (state = initialState, action: ActionTypes): Store => {
116123
...state,
117124
chosenYtelse: action.value
118125
};
126+
119127
case 'KLAGE_ID_SET':
120128
return {
121129
...state,

‎src/utils/routes.config.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export type FormStep = {
2626
export const routesStepsValgtVedtak: FormStep[] = [
2727
{
2828
step: 0,
29-
path: `/begrunnelse`,
29+
path: `/klage`,
3030
component: BegrunnelsePage,
3131
label: 'Begrunnelse',
3232
exact: true
@@ -43,8 +43,8 @@ export const routesStepsValgtVedtak: FormStep[] = [
4343
export const routesStepsIkkeValgtVedtak: FormStep[] = [
4444
{
4545
step: 0,
46-
path: `/begrunnelse`,
47-
component: FormLandingPage,
46+
path: `/klage`,
47+
component: BegrunnelsePage,
4848
label: 'Begrunnelse',
4949
exact: true
5050
},
@@ -78,6 +78,11 @@ export const routesPages: RouteType[] = [
7878
component: FormLandingPage,
7979
exact: true
8080
},
81+
{
82+
path: `/oppsummering`,
83+
component: FormLandingPage,
84+
exact: true
85+
},
8186
{
8287
path: `*`,
8388
component: NotFoundPage,

0 commit comments

Comments
 (0)