add login page with login action

73f18366 · imtiny · dec8a78a · 73f18366 · 73f18366 · 73f18366
Commit 73f18366 authored May 09, 2020 by imtiny
9 changed files
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
 "version": "0.1.0",
 "private": true,
 "dependencies": {
+ "@material-ui/core": "^4.9.13",
+ "@material-ui/icons": "^4.9.1",
 "@reduxjs/toolkit": "^1.2.5",
 "@testing-library/jest-dom": "^4.2.4",
 "@testing-library/react": "^9.3.2",
@@ -13,12 +15,19 @@
 "@types/react-dom": "^16.9.0",
 "@types/react-redux": "^7.1.7",
 "@types/react-router-dom": "^5.1.5",
+ "@types/redux-logger": "^3.0.7",
+ "@types/yup": "^0.28.1",
+ "add": "^2.0.6",
+ "formik": "^2.1.4",
 "react": "^16.13.1",
 "react-dom": "^16.13.1",
 "react-redux": "^7.2.0",
 "react-router-dom": "^5.1.2",
 "react-scripts": "3.4.1",
- "typescript": "~3.8.2"
+ "redux-logger": "^3.0.6",
+ "typescript": "~3.8.2",
+ "yarn": "^1.22.4",
+ "yup": "^0.28.5"
 },
 "scripts": {
 "start": "react-scripts start",

--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import './App.css';
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

 import Home from './pages/Home';
+import Login from './pages/Login';

 const NotFound = () => {
 return (
@@ -18,6 +19,7 @@ function App() {
 <div>
 <Switch>
 <Route exact path='/' component={Home} />
+ <Route path='/login' component={Login} />
 <Route component={NotFound} />
 </Switch>
 </div>

--- a/src/app/slices/userSlice.ts
+++ b/src/app/slices/userSlice.ts
 import { createAction, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { AppThunk } from '../../app/store';
+import { AppThunk, RootState } from '../store';

 interface UserState {
 name?: string;
@@ -26,29 +26,29 @@ const initialState: UserState = {
 isLoggedOut: true
 }

-const loginRequest = createAction('user/login');
-const loginSuccess = createAction('user/login/success', function prepare(info: UserInfo) {
- return {
- payload: info
- }
-});
-const loginFailure = createAction('user/login/failure', function prepare(error: UserError) {
- return {
- payload: error
- }
-});
-const logout = createAction('user/logout');
+// const loginRequest = createAction('user/login');
+// const loginSuccess = createAction('user/login/success', function prepare(info: UserInfo) {
+//  return {
+//  payload: info
+//  }
+// });
+// const loginFailure = createAction('user/login/failure', function prepare(error: UserError) {
+//  return {
+//  payload: error
+//  }
+// });
+// const logout = createAction('user/logout');

 export const userSlice = createSlice({
 name: 'user',
 initialState,
 reducers: {
- [loginRequest]: (state, action) => {
+ loginRequest: (state, action) => {
 return {
 isLoggingIn: true
 }
 },
- [loginSuccess]: (state, action: PayloadAction<UserInfo>) => {
+ loginSuccess: (state, action: PayloadAction<UserInfo>) => {
 return {
 isLoggingIn: false,
 isLoggedOut: false,
@@ -56,26 +56,27 @@ export const userSlice = createSlice({
 email: action.payload.email
 }
 },
- [loginFailure]: (state, action: PayloadAction<UserError>) => {
+ loginFailure: (state, action: PayloadAction<UserError>) => {
 return {
 loggingError: action.payload.error
 }
- }
- [logout]: (state, action) => {
+ },
+ logout: (state, action) => {
 return {
 isLoggedOut: true
 }
- }
- },
+ }}
 })

+export const { loginRequest, loginSuccess, loginFailure, logout } = userSlice.actions;
+
 interface LoginRequestPayload {
 username: string;
 password: string;
 }

 export const userLogin = (payload: LoginRequestPayload): AppThunk => dispatch => {
- dispatch(loginRequest)
+ dispatch(loginRequest({}))
 setTimeout(() => {
 dispatch(loginSuccess({name: payload.username, email: '[email protected]'}));
 }, 2000);
@@ -86,3 +87,7 @@ export const userLogout = (): AppThunk => dispatch => {
 dispatch(logout)
 }, 1000)
 }
+
+export const selectUser = (state: RootState) => state.user;
+
+export default userSlice.reducer;
--- a/src/app/store.ts
+++ b/src/app/store.ts
-import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import { combineReducers, configureStore, ThunkAction, Action, getDefaultMiddleware } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
+import userReducer from './slices/userSlice';
+import logger from 'redux-logger';
+
+const middleware = [...getDefaultMiddleware(), logger]
+
+const rootReducer = combineReducers({
+ counter: counterReducer,
+ user: userReducer
+})

 export const store = configureStore({
- reducer: {
- counter: counterReducer,
- },
+ reducer: rootReducer,
+ middleware
 });

-export type RootState = ReturnType<typeof store.getState>;
+export type RootState = ReturnType<typeof rootReducer>;
 export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,

--- a/src/pages/Home/index.css
+++ b/src/pages/Home/index.css
+.home-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
 import React from 'react';
 import './index.css';
+import Button from '@material-ui/core/Button';
+import { Link } from "react-router-dom";

 export default () => {
 return (
- <div>
+ <div className='home-container'>
 <h1>Home page111</h1>
+ <Button variant="contained" color="primary">
+ Hello World
+ </Button>
+ <Link to='/login'>login</Link>
 </div>
 )
 }
--- a/src/pages/Login/index.css
+++ b/src/pages/Login/index.css
+.login-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px 30px;
+}
+
+.login-container form {
+ padding: 30px 15px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+}
+
+.login-container form .input-label {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 0;
+}
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
+import React, { useEffect } from 'react';
+import './index.css';
+import { useField, Form, FormikProps, Formik } from "formik";
+import * as yup from "yup";
+import { useDispatch, useSelector } from 'react-redux';
+
+import { userLogin, selectUser } from '../../app/slices/userSlice';
+
+import Button from '@material-ui/core/Button';
+import { Input } from '@material-ui/core';
+import { InputLabel } from '@material-ui/core';
+
+const MyTextField = ({ label, ...props }: any) => {
+ const [field, meta, helpers] = useField(props);
+ return (
+ <div>
+ <InputLabel className='input-label'>
+ {label}
+ <Input {...field} {...props} />
+ </InputLabel>
+ {meta.touched && meta.error ? (
+ <div className='error'>{meta.error}</div>
+ ) : null}
+ </div>
+ );
+};
+
+interface Values {
+ username: string;
+ password: string;
+}
+
+export default () => {
+
+ const user = useSelector(selectUser);
+ console.log(user)
+ const dispatch = useDispatch();
+
+ console.log(user)
+ useEffect(() => {
+ console.log(user)
+ })
+
+
+ const handleLoginSubmit = async (values: Values) => {
+ console.log('on submit')
+ dispatch(userLogin(values))
+ }
+
+ return (
+ <div className='login-container'>
+ <Formik
+ initialValues={{
+ username: '',
+ password: ''
+ }}
+ onSubmit={handleLoginSubmit}
+ validationSchema={yup.object().shape({
+ username: yup.string()
+ .required("Required"),
+ password: yup.string()
+ .required("No password provided.")
+ })}
+ >
+ {(props: FormikProps<Values>) => {
+ console.log(props)
+ const {
+ values,
+ touched,
+ errors,
+ dirty,
+ isSubmitting,
+ handleChange,
+ handleBlur,
+ handleSubmit,
+ handleReset
+ } = props;
+ return (
+ <form onSubmit={handleSubmit}>
+ <MyTextField name="username" type="text" label="User Name" onChange={handleChange} value={values.username} />
+ <MyTextField name="password" type="password" label="Password" onChange={handleChange} value={values.password} />
+ <Button variant="contained" color="primary" type='submit'>Submit</Button>
+ </form>
+ )
+ }}
+ </Formik>
+ </div>
+ )
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -956,7 +956,7 @@
 dependencies:
 regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.9.6":
 version "7.9.6"
 resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
 integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
@@ -1038,6 +1038,11 @@
 resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
 integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==

+"@emotion/hash@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+ integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@hapi/[email protected]":
 version "2.1.4"
 resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1228,6 +1233,87 @@
 "@types/yargs" "^15.0.0"
 chalk "^3.0.0"

+"@material-ui/core@^4.9.13":
+ version "4.9.13"
+ resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.9.13.tgz#024962bcdda05139e1bad17a1815bf4088702b15"
+ integrity sha512-GEXNwUr+laZ0N+F1efmHB64Fyg+uQIRXLqbSejg3ebSXgLYNpIjnMOPRfWdu4rICq0dAIgvvNXGkKDMcf3AMpA==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/react-transition-group" "^4.3.0"
+ "@material-ui/styles" "^4.9.13"
+ "@material-ui/system" "^4.9.13"
+ "@material-ui/types" "^5.0.1"
+ "@material-ui/utils" "^4.9.12"
+ "@types/react-transition-group" "^4.2.0"
+ clsx "^1.0.4"
+ hoist-non-react-statics "^3.3.2"
+ popper.js "^1.16.1-lts"
+ prop-types "^15.7.2"
+ react-is "^16.8.0"
+ react-transition-group "^4.3.0"
+
+"@material-ui/icons@^4.9.1":
+ version "4.9.1"
+ resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+ integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+
+"@material-ui/react-transition-group@^4.3.0":
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/@material-ui/react-transition-group/-/react-transition-group-4.3.0.tgz#92529142addb5cc179dbf42d246c7e3fe4d6104b"
+ integrity sha512-CwQ0aXrlUynUTY6sh3UvKuvye1o92en20VGAs6TORnSxUYeRmkX8YeTUN3lAkGiBX1z222FxLFO36WWh6q73rQ==
+ dependencies:
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+
+"@material-ui/styles@^4.9.13":
+ version "4.9.13"
+ resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.13.tgz#08b3976bdd21c38bc076693d95834f97539f3b15"
+ integrity sha512-lWlXJanBdHQ18jW/yphedRokHcvZD1GdGzUF/wQxKDsHwDDfO45ZkAxuSBI202dG+r1Ph483Z3pFykO2obeSRA==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@emotion/hash" "^0.8.0"
+ "@material-ui/types" "^5.0.1"
+ "@material-ui/utils" "^4.9.6"
+ clsx "^1.0.4"
+ csstype "^2.5.2"
+ hoist-non-react-statics "^3.3.2"
+ jss "^10.0.3"
+ jss-plugin-camel-case "^10.0.3"
+ jss-plugin-default-unit "^10.0.3"
+ jss-plugin-global "^10.0.3"
+ jss-plugin-nested "^10.0.3"
+ jss-plugin-props-sort "^10.0.3"
+ jss-plugin-rule-value-function "^10.0.3"
+ jss-plugin-vendor-prefixer "^10.0.3"
+ prop-types "^15.7.2"
+
+"@material-ui/system@^4.9.13":
+ version "4.9.13"
+ resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.13.tgz#adefb3b6a5ddf0b00fe4e82ac63bb48276e9749d"
+ integrity sha512-6AlpvdW6KJJ5bF1Xo2OD13sCN8k+nlL36412/bWnWZOKIfIMo/Lb8c8d1DOIaT/RKWxTEUaWnKZjabVnA3eZjA==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.9.6"
+ prop-types "^15.7.2"
+
+"@material-ui/types@^5.0.1":
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.0.1.tgz#c4954063cdc196eb327ee62c041368b1aebb6d61"
+ integrity sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw==
+
+"@material-ui/utils@^4.9.12", "@material-ui/utils@^4.9.6":
+ version "4.9.12"
+ resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.9.12.tgz#0d639f1c1ed83fffb2ae10c21d15a938795d9e65"
+ integrity sha512-/0rgZPEOcZq5CFA4+4n6Q6zk7fi8skHhH2Bcra8R3epoJEYy5PL55LuMazPtPH1oKeRausDV/Omz4BbgFsn1HQ==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
 version "2.2.1"
 resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1567,6 +1653,13 @@
 "@types/history" "*"
 "@types/react" "*"

+"@types/react-transition-group@^4.2.0":
+ version "4.2.4"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
+ integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==
+ dependencies:
+ "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.0":
 version "16.9.34"
 resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
@@ -1575,6 +1668,13 @@
 "@types/prop-types" "*"
 csstype "^2.2.0"

+"@types/redux-logger@^3.0.7":
+ version "3.0.7"
+ resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.7.tgz#163f6f6865c69c21d56f9356dc8d741718ec0db0"
+ integrity sha512-oV9qiCuowhVR/ehqUobWWkXJjohontbDGLV88Be/7T4bqMQ3kjXwkFNL7doIIqlbg3X2PC5WPziZ8/j/QHNQ4A==
+ dependencies:
+ redux "^3.6.0"
+
 "@types/stack-utils@^1.0.1":
 version "1.0.1"
 resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1622,6 +1722,11 @@
 dependencies:
 "@types/yargs-parser" "*"

+"@types/yup@^0.28.1":
+ version "0.28.1"
+ resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.28.1.tgz#4ab216567c480dbad1e20084988fa2b682002847"
+ integrity sha512-5Xqhu/yZWqtO5ZI83SELkq4vA4LnQzzBPlx0zBH9JgMPTuQk3RoTEotKe8is7ZG2Pk+2DmMhid+2Mn87PgpJgw==
+
 "@typescript-eslint/eslint-plugin@^2.10.0":
 version "2.24.0"
 resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.24.0.tgz#a86cf618c965a462cddf3601f594544b134d6d68"
@@ -1867,6 +1972,11 @@ acorn@^7.1.1:
 resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
 integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==

+add@^2.0.6:
+ version "2.0.6"
+ resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+ integrity sha1-JI8Kn25aUo7yKV2+7DBTITCuIjU=
+
 [email protected], address@^1.0.1:
 version "1.1.2"
 resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -2923,6 +3033,11 @@ clone-deep@^4.0.1:
 kind-of "^6.0.2"
 shallow-clone "^3.0.0"

+clsx@^1.0.4:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702"
+ integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==
+
 co@^4.6.0:
 version "4.6.0"
 resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3343,6 +3458,14 @@ [email protected]:
 mdn-data "2.0.4"
 source-map "^0.6.1"

+css-vendor@^2.0.7:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+ integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+ dependencies:
+ "@babel/runtime" "^7.8.3"
+ is-in-browser "^1.0.2"
+
 [email protected]:
 version "2.1.3"
 resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -3470,7 +3593,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
 dependencies:
 cssom "0.3.x"

-csstype@^2.2.0:
+csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.5, csstype@^2.6.7:
 version "2.6.10"
 resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
 integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -3540,6 +3663,11 @@ decode-uri-component@^0.2.0:
 resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=

+deep-diff@^0.3.5:
+ version "0.3.8"
+ resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
+ integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=
+
 deep-equal@^1.0.1:
 version "1.1.1"
 resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
@@ -3557,6 +3685,11 @@ deep-is@~0.1.3:
 resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=

+deepmerge@^2.1.1:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+ integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-gateway@^4.2.0:
 version "4.2.0"
 resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3724,6 +3857,14 @@ dom-converter@^0.2:
 dependencies:
 utila "~0.4"

+dom-helpers@^5.0.1:
+ version "5.1.4"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
+ integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
+ dependencies:
+ "@babel/runtime" "^7.8.7"
+ csstype "^2.6.7"
+
 dom-serializer@0:
 version "0.2.2"
 resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -4571,6 +4712,11 @@ flush-write-stream@^1.0.0:
 inherits "^2.0.3"
 readable-stream "^2.3.6"

+fn-name@~3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-3.0.0.tgz#0596707f635929634d791f452309ab41558e3c5c"
+ integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
+
 follow-redirects@^1.0.0:
 version "1.10.0"
 resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
@@ -4623,6 +4769,20 @@ form-data@~2.3.2:
 combined-stream "^1.0.6"
 mime-types "^2.1.12"

+formik@^2.1.4:
+ version "2.1.4"
+ resolved "https://registry.yarnpkg.com/formik/-/formik-2.1.4.tgz#8deef07ec845ea98f75e03da4aad7aab4ac46570"
+ integrity sha512-oKz8S+yQBzuQVSEoxkqqJrKQS5XJASWGVn6mrs+oTWrBoHgByVwwI1qHiVc9GKDpZBU9vAxXYAKz2BvujlwunA==
+ dependencies:
+ deepmerge "^2.1.1"
+ hoist-non-react-statics "^3.3.0"
+ lodash "^4.17.14"
+ lodash-es "^4.17.14"
+ react-fast-compare "^2.0.1"
+ scheduler "^0.18.0"
+ tiny-warning "^1.0.2"
+ tslib "^1.10.0"
+
 forwarded@~0.1.2:
 version "0.1.2"
 resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4996,7 +5156,7 @@ hmac-drbg@^1.0.0:
 minimalistic-assert "^1.0.0"
 minimalistic-crypto-utils "^1.0.1"

-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
 version "3.3.2"
 resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
 integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5162,6 +5322,11 @@ https-browserify@^1.0.0:
 resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=

+hyphenate-style-name@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+ integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 [email protected], iconv-lite@^0.4.24:
 version "0.4.24"
 resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -5563,6 +5728,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
 dependencies:
 is-extglob "^2.1.1"

+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+ integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-number@^3.0.0:
 version "3.0.0"
 resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -6321,6 +6491,75 @@ jsprim@^1.2.2:
 json-schema "0.2.3"
 verror "1.10.0"

+jss-plugin-camel-case@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz#8e73ecc4f1d0f8dfe4dd31f6f9f2782588970e78"
+ integrity sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ hyphenate-style-name "^1.0.3"
+ jss "10.1.1"
+
+jss-plugin-default-unit@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz#2df86016dfe73085eead843f5794e3890e9c5c47"
+ integrity sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.1.1"
+
+jss-plugin-global@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz#36b0d6d9facb74dfd99590643708a89260747d14"
+ integrity sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.1.1"
+
+jss-plugin-nested@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz#5c3de2b8bda344de1ebcef3a4fd30870a29a8a8c"
+ integrity sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.1.1"
+ tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz#34bddcbfaf9430ec8ccdf92729f03bb10caf1785"
+ integrity sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.1.1"
+
+jss-plugin-rule-value-function@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz#be00dac6fc394aaddbcef5860b9eca6224d96382"
+ integrity sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.1.1"
+
+jss-plugin-vendor-prefixer@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz#8348b20749f790beebab3b6a8f7075b07c2cfcfd"
+ integrity sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ css-vendor "^2.0.7"
+ jss "10.1.1"
+
+[email protected], jss@^10.0.3:
+ version "10.1.1"
+ resolved "https://registry.yarnpkg.com/jss/-/jss-10.1.1.tgz#450b27d53761af3e500b43130a54cdbe157ea332"
+ integrity sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ csstype "^2.6.5"
+ is-in-browser "^1.1.3"
+ tiny-warning "^1.0.2"
+
 jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3:
 version "2.2.3"
 resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
@@ -6499,6 +6738,11 @@ locate-path@^5.0.0:
 dependencies:
 p-locate "^4.1.0"

+lodash-es@^4.17.11, lodash-es@^4.17.14, lodash-es@^4.2.1:
+ version "4.17.15"
+ resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+ integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash._reinterpolate@^3.0.0:
 version "3.0.0"
 resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -6534,7 +6778,7 @@ lodash.uniq@^4.5.0:
 resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
+"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.1:
 version "4.17.15"
 resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -7669,6 +7913,11 @@ [email protected]:
 dependencies:
 ts-pnp "^1.1.6"

+popper.js@^1.16.1-lts:
+ version "1.16.1"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+ integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.25:
 version "1.0.25"
 resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
@@ -8436,6 +8685,11 @@ prop-types@^15.6.2, prop-types@^15.7.2:
 object-assign "^4.1.1"
 react-is "^16.8.1"

+property-expr@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.2.tgz#fff2a43919135553a3bc2fdd94bdb841965b2330"
+ integrity sha512-bc/5ggaYZxNkFKj374aLbEDqVADdYaLcFo8XBkishUWbaAdjlphaBFns9TvRA2pUseVL/wMFmui9X3IdNDU37g==
+
 proxy-addr@~2.0.5:
 version "2.0.6"
 resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -8638,7 +8892,12 @@ react-error-overlay@^6.0.7:
 resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
 integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==

-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-fast-compare@^2.0.1:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+ integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
 version "16.13.1"
 resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
 integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8743,6 +9002,16 @@ [email protected]:
 optionalDependencies:
 fsevents "2.1.2"

+react-transition-group@^4.3.0:
+ version "4.4.1"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+ integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+ dependencies:
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+
 react@^16.13.1:
 version "16.13.1"
 resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -8846,11 +9115,28 @@ redent@^3.0.0:
 indent-string "^4.0.0"
 strip-indent "^3.0.0"

+redux-logger@^3.0.6:
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
+ integrity sha1-91VZZvMJjzyIYExEnPC69XeCdL8=
+ dependencies:
+ deep-diff "^0.3.5"
+
 redux-thunk@^2.3.0:
 version "2.3.0"
 resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==

+redux@^3.6.0:
+ version "3.7.2"
+ resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
+ integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
+ dependencies:
+ lodash "^4.2.1"
+ lodash-es "^4.2.1"
+ loose-envify "^1.1.0"
+ symbol-observable "^1.0.3"
+
 redux@^4.0.0:
 version "4.0.5"
 resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -9258,6 +9544,14 @@ saxes@^3.1.9:
 dependencies:
 xmlchars "^2.1.1"

+scheduler@^0.18.0:
+ version "0.18.0"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+ integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
 scheduler@^0.19.1:
 version "0.19.1"
 resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -9974,7 +10268,7 @@ svgo@^1.0.0, svgo@^1.2.2:
 unquote "~1.1.1"
 util.promisify "~1.0.0"

-symbol-observable@^1.2.0:
+symbol-observable@^1.0.3, symbol-observable@^1.2.0:
 version "1.2.0"
 resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
 integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -9984,6 +10278,11 @@ symbol-tree@^3.2.2:
 resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
 integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==

+synchronous-promise@^2.0.10:
+ version "2.0.11"
+ resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.11.tgz#e92022b0754e916f556d3ace1626d24a24214b7e"
+ integrity sha512-8/L5FOCjnlK0FoAfj+NqdCaImMKvEyOEzGmdfcezKp5K9HIukm4akx72endvM87eS/gU8kOxiMQflpC/CdkQAg==
+
 table@^5.2.3:
 version "5.4.6"
 resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -10157,6 +10456,11 @@ [email protected]:
 resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
 integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==

+toposort@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+ integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0, tough-cookie@~2.5.0:
 version "2.5.0"
 resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -10993,3 +11297,21 @@ yargs@^13.3.0:
 which-module "^2.0.0"
 y18n "^4.0.0"
 yargs-parser "^13.1.2"
+
+yarn@^1.22.4:
+ version "1.22.4"
+ resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.4.tgz#01c1197ca5b27f21edc8bc472cd4c8ce0e5a470e"
+ integrity sha512-oYM7hi/lIWm9bCoDMEWgffW8aiNZXCWeZ1/tGy0DWrN6vmzjCXIKu2Y21o8DYVBUtiktwKcNoxyGl/2iKLUNGA==
+
+yup@^0.28.5:
+ version "0.28.5"
+ resolved "https://registry.yarnpkg.com/yup/-/yup-0.28.5.tgz#85cabb4000d3623ef69be81551190692e631a8a5"
+ integrity sha512-7JZcvpUGUxMKoaEtcoMEM8lCWRaueGNH/A3EhL/UWqfbFm3uloiI+x59Yq4nzhbbYWUTwAsCteaZOJ+VbqI1uw==
+ dependencies:
+ "@babel/runtime" "^7.9.6"
+ fn-name "~3.0.0"
+ lodash "^4.17.15"
+ lodash-es "^4.17.11"
+ property-expr "^2.0.2"
+ synchronous-promise "^2.0.10"
+ toposort "^2.0.2"