add login page with login action

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",

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>

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;

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';
 
-export const store = configureStore({
- reducer: {
+const middleware = [...getDefaultMiddleware(), logger]
+
+const rootReducer = combineReducers({
  counter: counterReducer,
- },
+ user: userReducer
+})
+
+export const store = configureStore({
+ reducer: rootReducer,
+ middleware
 });
 
-export type RootState = ReturnType<typeof store.getState>;
+export type RootState = ReturnType<typeof rootReducer>;
 export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,

src/pages/Home/index.css

+.home-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}

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>
  )
 }

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;
+}

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>
+ )
+}