#2 setup redux store

Author: maruf-cefalo

package-lock.json

@@ -11,10 +11,14 @@
   "dependencies": {
     "@material-ui/core": "latest",
     "@material-ui/icons": "^4.9.1",
+    "axios": "^0.19.2",
     "react": "latest",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "latest"
+    "react-scripts": "latest",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "browserslist": {
     "production": [

package.json

@@ -1,7 +1,9 @@
+//Library
 import React,{Component} from 'react';
-import Main from './components/MainComponent';
 import {BrowserRouter} from 'react-router-dom';
 
+//Our Code
+import Main from './components/MainComponent';
 class App extends Component {
 
   render(){
@@ -11,7 +13,7 @@ class App extends Component {
         </BrowserRouter>
     );
   }
- 
+
 }
 
 export default App;

src/App.js

@@ -0,0 +1,22 @@
+export const USER_LOADED = 'USER_LOADED';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
+
+export function authenticateUser (user) {
+  return{
+    type: USER_LOADED,
+    user
+  }
+}
+
+export function handleAuthenticateUser (user) {
+  return (dispatch) => {
+
+  }
+}
+
+export function loginUser (user) {
+  return {
+    type: LOGIN_SUCCESS,
+    user,
+  }
+}

src/actions/authActions.js

@@ -0,0 +1,9 @@
+export const GET_ERRORS = 'GET_ERRORS'
+export const CLEAR_ERRORS = 'CLEAR_ERRORS'
+
+export function getErrors (errors) {
+  return {
+    type: GET_ERRORS,
+    errors,
+  }
+}

src/actions/errorActions.js

@@ -7,7 +7,6 @@ import SignIn from './SignIn';
 
 class Main extends Component {
 
-
   render() {
 
     return (

src/actions/userActions.js

@@ -1,19 +1,19 @@
-import React from 'react';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
+import React from 'react'
+import Avatar from '@material-ui/core/Avatar'
+import Button from '@material-ui/core/Button'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import TextField from '@material-ui/core/TextField'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Checkbox from '@material-ui/core/Checkbox'
+import Link from '@material-ui/core/Link'
+import Grid from '@material-ui/core/Grid'
+import Box from '@material-ui/core/Box'
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+import Container from '@material-ui/core/Container'
 
-function Copyright() {
+function Copyright () {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
       {'Copyright © '}
@@ -23,7 +23,7 @@ function Copyright() {
       {new Date().getFullYear()}
       {'.'}
     </Typography>
-  );
+  )
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -44,17 +44,17 @@ const useStyles = makeStyles((theme) => ({
   submit: {
     margin: theme.spacing(3, 0, 2),
   },
-}));
+}))
 
-export default function SignIn() {
-  const classes = useStyles();
+const SignIn = () => {
+  const classes = useStyles()
 
   return (
     <Container component="main" maxWidth="xs">
-      <CssBaseline />
+      <CssBaseline/>
       <div className={classes.paper}>
         <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
+          <LockOutlinedIcon/>
         </Avatar>
         <Typography component="h1" variant="h5">
           Sign in
@@ -83,7 +83,7 @@ export default function SignIn() {
             autoComplete="current-password"
           />
           <FormControlLabel
-            control={<Checkbox value="remember" color="primary" />}
+            control={<Checkbox value="remember" color="primary"/>}
             label="Remember me"
           />
           <Button
@@ -103,15 +103,17 @@ export default function SignIn() {
             </Grid>
             <Grid item>
               <Link href="#" variant="body2">
-                {"Don't have an account? Sign Up"}
+                {'Don\'t have an account? Sign Up'}
               </Link>
             </Grid>
           </Grid>
         </form>
       </div>
       <Box mt={8}>
-        <Copyright />
+        <Copyright/>
       </Box>
     </Container>
-  );
+  )
 }
+
+export default SignIn

src/components/MainComponent.js

@@ -1,15 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
-import App from './App';
-import theme from './theme';
+//Library Import
+import React from 'react'
+import ReactDOM from 'react-dom'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider } from '@material-ui/core/styles'
+import theme from './theme'
+import store from './store'
+import { Provider } from 'react-redux'
+
+//Our Code Import
+import App from './App'
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
-    <App />
+    <CssBaseline/>
+    <Provider store={store}>
+      <App/>
+    </Provider>
   </ThemeProvider>,
   document.querySelector('#root'),
-);
+)

src/components/SignIn.js

@@ -0,0 +1,8 @@
+import logger from './logger';
+import thunk from 'redux-thunk';
+import {applyMiddleware} from 'redux';
+
+export default applyMiddleware(
+  thunk,
+  logger,
+);