From 6c807dcc30ffd21541e9bf8f519ecdd657581e22 Mon Sep 17 00:00:00 2001 From: = <=> Date: Wed, 9 Dec 2020 18:06:05 +0100 Subject: [PATCH] Add create profile secion --- src/components/GoalForm/Loader.js | 4 +-- src/components/GoalForm/index.js | 6 ++-- src/components/PersonalDetailsForm/index.js | 9 +++-- src/containers/App/reducer.js | 24 ++++++++++--- src/index.js | 6 ++-- src/pages/Login/index.js | 12 +++---- src/pages/Login/reducer.js | 8 ++--- src/pages/Profile/saga.js | 12 +++---- src/pages/Register/actions.js | 22 ++++++++++++ src/pages/Register/constants.js | 5 +++ src/pages/Register/index.js | 40 +++++++++++++++++---- src/pages/Register/reducer.js | 32 +++++++++++++++++ src/pages/Register/saga.js | 30 ++++++++++++++++ src/pages/Register/selectors.js | 19 ++++++++++ 14 files changed, 192 insertions(+), 37 deletions(-) create mode 100644 src/pages/Register/actions.js create mode 100644 src/pages/Register/constants.js create mode 100644 src/pages/Register/reducer.js create mode 100644 src/pages/Register/saga.js create mode 100644 src/pages/Register/selectors.js diff --git a/src/components/GoalForm/Loader.js b/src/components/GoalForm/Loader.js index e7051c3..6a935ef 100644 --- a/src/components/GoalForm/Loader.js +++ b/src/components/GoalForm/Loader.js @@ -4,7 +4,7 @@ import {Skeleton} from "@material-ui/lab"; const Loader = () => { return ( - +
- +
); }; diff --git a/src/components/GoalForm/index.js b/src/components/GoalForm/index.js index 6f285ba..a5f77b1 100644 --- a/src/components/GoalForm/index.js +++ b/src/components/GoalForm/index.js @@ -37,7 +37,7 @@ const GoalForm = () => { return ( - Your goal { JSON.stringify(error) } + Your goal @@ -45,10 +45,10 @@ const GoalForm = () => { ) : ( - {goals.map(({ label, value }, index) => ( + {goals.map(({ name, value }, index) => ( diff --git a/src/components/PersonalDetailsForm/index.js b/src/components/PersonalDetailsForm/index.js index 70409a3..ba900e6 100644 --- a/src/components/PersonalDetailsForm/index.js +++ b/src/components/PersonalDetailsForm/index.js @@ -67,8 +67,8 @@ const PersonalDetailsForm = () => { onChange={handleChangeValue} value={gender} > - {genders.map(({ label, value }) => ( - {label} + {genders.map(({ id, name }) => ( + {name} ))} @@ -128,7 +128,10 @@ const PersonalDetailsForm = () => { value={activity} min={0} max={4} - marks={activities} + marks={activities.map(({ name, factor, id }) => ({ + name, + value: factor + }))} /> diff --git a/src/containers/App/reducer.js b/src/containers/App/reducer.js index cdd758c..2d9c193 100644 --- a/src/containers/App/reducer.js +++ b/src/containers/App/reducer.js @@ -5,15 +5,31 @@ import { } from './constants'; import { LOGIN_SUCCESS } from 'pages/Login/constants' +import { REGISTER_SUCCESS } from 'pages/Register/constants' export const initialState = { - isLogged: false, + isLogged: true, notifications: [], - tokens: {}, - user: {}, -}; + tokens: { + access: { + token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZmQxMDExNGM3NDQ0MTJlZDQ3Y2IzZDEiLCJpYXQiOjE2MDc1MzI4MzUsImV4cCI6MTYwNzUzNDYzNSwidHlwZSI6ImFjY2VzcyJ9.S19wRggAiJYYK35dFWM_gIWuf5ULajJ2cOaA2V2vwtY', + expires: '2020-12-09T17:23:55.763Z' + }, + refresh: { + token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZmQxMDExNGM3NDQ0MTJlZDQ3Y2IzZDEiLCJpYXQiOjE2MDc1MzI4MzUsImV4cCI6MTYxMDEyNDgzNSwidHlwZSI6InJlZnJlc2gifQ.NC6BJUDKR3WBUVxo62Swytx4nkc6QtUQ7oYdJHqgDY0', + expires: '2021-01-08T16:53:55.763Z' + } + }, + user: { + role: 'admin', + email: 'admin@admin.com', + id: '5fd10114c744412ed47cb3d1' + } +} + const appReducer = produce((draft, action) => { switch(action.type) { + case REGISTER_SUCCESS: case LOGIN_SUCCESS: draft.isLogged = true; draft.tokens = action.tokens; diff --git a/src/index.js b/src/index.js index ecfe17f..42c66f5 100644 --- a/src/index.js +++ b/src/index.js @@ -11,13 +11,13 @@ const initialState = {}; const store = configureStore(initialState, history); ReactDOM.render( - + // - - , + , + // , document.getElementById('root') ); diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js index 6aad5e5..33556dd 100644 --- a/src/pages/Login/index.js +++ b/src/pages/Login/index.js @@ -21,12 +21,6 @@ import { loginInputChange, loginAction } from './actions' import {routes} from "../../utils"; import {makeStyles} from "@material-ui/core/styles"; -const stateSelector = createStructuredSelector({ - email: makeSelectEmail(), - password: makeSelectPassword(), - loading: makeSelectLoading(), -}); - const useStyles = makeStyles((theme) => ({ paper: { marginTop: theme.spacing(8), @@ -43,6 +37,12 @@ const useStyles = makeStyles((theme) => ({ }, })); +const stateSelector = createStructuredSelector({ + email: makeSelectEmail(), + password: makeSelectPassword(), + loading: makeSelectLoading(), +}); + const key = 'loginPage' const Login = () => { const classes = useStyles() diff --git a/src/pages/Login/reducer.js b/src/pages/Login/reducer.js index 3bb0dbc..4473383 100644 --- a/src/pages/Login/reducer.js +++ b/src/pages/Login/reducer.js @@ -2,7 +2,7 @@ import produce from 'immer'; import {LOGIN_INPUT_CHANGE, LOGIN_ERROR, LOGIN_REQUEST, LOGIN_SUCCESS} from './constants'; export const initialState = { - loading: false, + isLoading: false, error: {}, email: 'admin@admin.com', password: 'Kox32113@#$', @@ -11,15 +11,15 @@ export const initialState = { const loginPageReducer = produce((draft, action) => { switch(action.type) { case LOGIN_SUCCESS: - draft.loading = false; + draft.isLoading = false; break; case LOGIN_REQUEST: - draft.loading = true; + draft.isLoading = true; break; case LOGIN_ERROR: - draft.loading = false; + draft.isLoading = false; draft.error = action.error; break; diff --git a/src/pages/Profile/saga.js b/src/pages/Profile/saga.js index 00cbdef..533acfc 100644 --- a/src/pages/Profile/saga.js +++ b/src/pages/Profile/saga.js @@ -74,8 +74,8 @@ export function* getActivities() { }; try { - const { activities } = yield call(request, requestURL, requestParameters); - yield put(getActivitiesSuccessAction({ activities })); + const { results } = yield call(request, requestURL, requestParameters); + yield put(getActivitiesSuccessAction({ activities: results })); } catch (error) { yield put(getActivitiesErrorAction({error: error.message})); } @@ -94,8 +94,8 @@ export function* getGenders() { }; try { - const { genders } = yield call(request, requestURL, requestParameters); - yield put(getGendersSuccessAction({ genders })); + const { results } = yield call(request, requestURL, requestParameters); + yield put(getGendersSuccessAction({ genders: results })); } catch (error) { yield put(getGendersErrorAction({ error: error.message })); } @@ -113,8 +113,8 @@ export function* getGoals() { }; try { - const { goals } = yield call(request, requestURL, requestParameters); - yield put(getGoalsSuccessAction({ goals })); + const { results } = yield call(request, requestURL, requestParameters); + yield put(getGoalsSuccessAction({ goals: results })); } catch (error) { yield put(getGoalsErrorAction({ error: error.message })); } diff --git a/src/pages/Register/actions.js b/src/pages/Register/actions.js new file mode 100644 index 0000000..64065e2 --- /dev/null +++ b/src/pages/Register/actions.js @@ -0,0 +1,22 @@ +import { REGISTER_INPUT_CHANGE, REGISTER_REQUEST, REGISTER_SUCCESS, REGISTER_ERROR } from './constants'; + +export const registerInputChange = ({name, value}) => ({ + type: REGISTER_INPUT_CHANGE, + name, + value, +}) + +export const registerAction = () => ({ + type: REGISTER_REQUEST, +}) + +export const registerSuccessAction = ({user, tokens}) => ({ + type: REGISTER_SUCCESS, + user, + tokens, +}) + +export const registerErrorAction = ({error}) => ({ + type: REGISTER_ERROR, + error, +}) diff --git a/src/pages/Register/constants.js b/src/pages/Register/constants.js new file mode 100644 index 0000000..61aff26 --- /dev/null +++ b/src/pages/Register/constants.js @@ -0,0 +1,5 @@ +export const REGISTER_REQUEST = 'app/registerPage/REGISTER_REQUEST'; +export const REGISTER_SUCCESS = 'app/registerPage/REGISTER_SUCCESS'; +export const REGISTER_ERROR = 'app/registerPage/REGISTER_ERROR'; + +export const REGISTER_INPUT_CHANGE = 'app/registerPage/REGISTER_INPUT_CHANGE'; diff --git a/src/pages/Register/index.js b/src/pages/Register/index.js index 3820587..7a012b7 100644 --- a/src/pages/Register/index.js +++ b/src/pages/Register/index.js @@ -1,7 +1,14 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import {Container, Typography, Grid, Button, TextField, FormControlLabel, Checkbox, Link} from '@material-ui/core'; +import {Container, Typography, Grid, Button, TextField, Link} from '@material-ui/core'; import { routes } from 'utils'; +import {useInjectReducer, useInjectSaga} from "redux-injectors"; +import {useDispatch, useSelector} from "react-redux"; +import reducer from "./reducer"; +import saga from "./saga"; +import {registerAction, registerInputChange} from "./actions"; +import {createStructuredSelector} from "reselect"; +import {makeSelectEmail, makeSelectIsLoading, makeSelectPassword} from "./selectors"; const useStyles = makeStyles((theme) => ({ paper: { @@ -19,8 +26,28 @@ const useStyles = makeStyles((theme) => ({ }, })); +const stateSelector = createStructuredSelector({ + email: makeSelectEmail(), + password: makeSelectPassword(), + isLoading: makeSelectIsLoading(), +}); + +const key = 'registerPage' const RegisterPage = () => { const classes = useStyles(); + useInjectReducer({ key, reducer }); + useInjectSaga({ key, saga }); + const { email, password, isLoading } = useSelector(stateSelector) + const dispatch = useDispatch(); + + const onChangeInput = ({target: { name, value }}) => { + dispatch(registerInputChange({name, value})) + } + + const handleSubmit = (event) => { + event.preventDefault() + dispatch(registerAction()) + } return ( @@ -28,7 +55,7 @@ const RegisterPage = () => { Create Account -
+ { label="Email Address" name="email" autoComplete="email" + value={email} + onChange={onChangeInput} autoFocus /> { label="Password" type="password" id="password" + value={password} + onChange={onChangeInput} autoComplete="current-password" /> - } - label="Remember me" - />