Implemented redux saga components

package.json

@@ -63,6 +63,7 @@
     "react-test-renderer": "^17.0.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-saga": "^1.1.3",
     "redux-thunk": "^2.3.0",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",

src/containers/BurgerBuilder/BurgerBuilder.test.js

@@ -14,7 +14,7 @@ describe("<BurgerBuilder/>", () => {
         wrapper = shallow(<BurgerBuilder onInitIngredients={() =>{}}/>)
     })
 
-    it("Should render buildcontrols when recieving ingredients ", () =>{
+    it("Should render buildcontrols when recieving ingredients", () =>{
         wrapper.setProps({ings: {salad: 0}})
         expect(wrapper.find(BuildControls)).toHaveLength(1)
     })

src/index.js

@@ -1,39 +1,49 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-import {BrowserRouter} from "react-router-dom"
-import {Provider} from "react-redux"
-import {createStore, applyMiddleware, compose, combineReducers} from "redux"
-import thunk from "redux-thunk"
-
-import authReducer from "./store/reducers/auth"
-import burgerBuilderReducer from "./store/reducers/burgerBuilder"
-import orderReducer from "./store/reducers/order"
-
-const composeEnhancers = process.env.NODE_ENV  === "development" ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null || compose;
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import registerServiceWorker from "./registerServiceWorker";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware, compose, combineReducers } from "redux";
+import thunk from "redux-thunk";
+import createSagaMiddelware from "redux-saga";
+
+import { watchAuth, watchBurgerBuilder, watchOrder } from "./store/sagas/index";
+import authReducer from "./store/reducers/auth";
+import burgerBuilderReducer from "./store/reducers/burgerBuilder";
+import orderReducer from "./store/reducers/order";
+
+const composeEnhancers =
+  process.env.NODE_ENV === "development"
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    : null || compose;
 
 const rootReducer = combineReducers({
-    burgerBuilder: burgerBuilderReducer,
-    order: orderReducer,
-    auth: authReducer,
-})
+  burgerBuilder: burgerBuilderReducer,
+  order: orderReducer,
+  auth: authReducer,
+});
 
-const store = createStore(rootReducer, composeEnhancers(
-    applyMiddleware(thunk)
-))
+const sagaMiddleware = createSagaMiddelware()
 
+const store = createStore(
+  rootReducer,
+  composeEnhancers(applyMiddleware(thunk, sagaMiddleware))
+);
 
+sagaMiddleware.run(watchAuth)
+sagaMiddleware.run(watchBurgerBuilder)
+sagaMiddleware.run(watchOrder)
 
-const app=(
-    <Provider store={store}>   
-        <BrowserRouter>
-            <App />
-        </BrowserRouter>
-    </Provider>
 
-)
+const app = (
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
+);
 
-ReactDOM.render(app, document.getElementById('root'));
+ReactDOM.render(app, document.getElementById("root"));
 registerServiceWorker();

src/store/actions/actionTypes.js

@@ -3,19 +3,26 @@ export const ADD_INGREDIENTS = "ADD_INGREDIENTS";
 export const REMOVE_INGREDIENT = "REMOVE_INGREDIENT";
 export const SET_INGREDIENTS = "SET_INGREDIENTS"
 export const FETCH_INGREDIENTS_FAILED = "SET_INGREDIENTS_FAILED"
+export const INIT_INGREDIENT = "INIT_INGREDIENT"
 
+export const PURCHASE_BURGER = "PURCHASE_BURGER"
 export const PURCHASE_BURGER_SUCCCESS ="PURCHASE_BURGER_SUCCCESS"
 export const PURCHASE_BURGER_FAIL = "PURCHASE_BURGER_FAIL"
 export const PURCHASE_BURGER_START = "PURCHASE_BURGER_START"
 export const PURCHASE_INIT = "PURCHASE_INIT"
 
+export const FETCH_ORDERS = "FETCH_ORDERS"
 export const FETCH_ORDERS_START = "FETCH_ORDERS_START"
 export const FETCH_ORDERS_SUCCESS = "FETCH_ORDERS_SUCCESS"
 export const FETCH_ORDERS_FAIL = "FETCH_ORDERS_FAIL"
 
+export const AUTH_CHECK_STATE = "AUTH_CHECK_STATE"
+export const AUTH_USER = "AUTH_USER"
 export const AUTH_START = "AUTH_START"
 export const AUTH_SUCCESS = "AUTH_SUCCESS"
 export const AUTH_FAIL = "AUTH_FAIL"
+export const AUTH_CHECK_TIMEOUT = "AUTH_CHECK_TIMEOUT"
+export const AUTH_INITIATE_LOGOUT = "AUTH_INITIATE_LOGOUT"
 export const AUTH_LOGOUT = "AUTH_LOGOUT"
 
 export const SET_AUTH_REDIRECT_PATH = "SET_AUTH_REDIRECT_PATH"

src/store/actions/auth.js

@@ -1,102 +1,64 @@
-import * as actionTypes from "./actionTypes"
-
-import axios from "axios"
-
-
-export const authStart = () =>{
-    return{
-        type: actionTypes.AUTH_START
-    }
-}
+import * as actionTypes from "./actionTypes";
 
+export const authStart = () => {
+  return {
+    type: actionTypes.AUTH_START,
+  };
+};
 
 export const authSuccess = (token, userId) => {
-
-    return{
-        type: actionTypes.AUTH_SUCCESS,
-        idToken: token,
-        userId: userId,
-    }
-}
+  return {
+    type: actionTypes.AUTH_SUCCESS,
+    idToken: token,
+    userId: userId,
+  };
+};
 
 export const authFail = (error) => {
-    return{
-        type: actionTypes.AUTH_FAIL,
-        error: error
-    }
-}
+  return {
+    type: actionTypes.AUTH_FAIL,
+    error: error,
+  };
+};
 
-export const checkAuthTimeout = (expirationTime) =>{
-    return dispatch =>{
-            setTimeout(()=>{
-                dispatch(logout())
-            }, expirationTime * 1000)
-    }
-}
+export const checkAuthTimeout = (expirationTime) => {
+  return {
+    type: actionTypes.AUTH_CHECK_TIMEOUT,
+    expirationTime: expirationTime,
+  };
+};
 
-export const logout = ()=>{
-    localStorage.removeItem("token")
-    localStorage.removeItem("expirationDate")
-    localStorage.removeItem("userId")
-    return{
-        type: actionTypes.AUTH_LOGOUT
-    }
-}
+export const logout = () => {
+  return {
+    type: actionTypes.AUTH_INITIATE_LOGOUT,
+  };
+};
 
-const key = ""
+export const logoutSucceed = () => {
+  return {
+    type: actionTypes.AUTH_LOGOUT,
+  };
+};
 
 
 export const auth = (email, password, isSignUp) => {
-    return dispatch => {
-        dispatch(authStart())
-        const authData = {
-            email: email,
-            password: password,
-            returnSecureToken: true,
-        }
-        let url  = "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=" + key
-        if(!isSignUp){
-            url = "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=" + key
+  return {
+    type: actionTypes.AUTH_USER,
+    email: email,
+    password: password,
+    isSignUp: isSignUp,
+  };
+};
 
-        }
-        axios.post(url, authData)
-        .then(response=>{
-            console.log(response)
-            localStorage.setItem("token", response.data.idToken)
-            const expirationDate = new Date(new Date().getTime() + response.data.expiresIn*1000)
-            localStorage.setItem("expirationDate" ,expirationDate)
-            localStorage.setItem("userId", response.data.localid)
-            dispatch(authSuccess(response.data.idToken, response.data.localId))
-            dispatch(checkAuthTimeout(response.data.expiresIn))
-        })
-        .catch(err => {
-            console.log(err)
-            dispatch(authFail(err.response.data.error))
-        })
-    }
-}
+export const setAuthRedirectPath = (path) => {
+  return {
+    type: actionTypes.SET_AUTH_REDIRECT_PATH,
+    path: path,
+  };
+};
 
-export const setAuthRedirectPath = (path) =>{
+export const authCheckState = () => {
     return{
-        type: actionTypes.SET_AUTH_REDIRECT_PATH,
-        path: path
-    }
-}
-
-export const authCheckState = () =>{
-    return dispatch =>{
-        const token = localStorage.getItem("token")
-        if(!token) dispatch(logout())
-        else{
-            const expirationDate = new Date(localStorage.getItem("expirationDate"))
-            if(expirationDate <= new Date()){
-                dispatch(logout())
-            }
-            else{
-                const userId = localStorage.getItem("userId")
-                dispatch(authSuccess(token, userId))
-                dispatch(checkAuthTimeout((expirationDate.getTime() - new Date().getTime())/ 1000))
-            }
-        }
+        type: actionTypes.AUTH_CHECK_STATE
     }
-}
+};

src/store/actions/burgerBuilder.js

@@ -30,13 +30,7 @@ export const fetchIngredientsFailed = () => {
 }
 
 export const initIngredients = () => {
-    return dispatch => {
-        axios.get("/ingredients.json")
-        .then(response =>{
-            dispatch(setIngredients(response.data))
-        })
-        .catch(error => {
-            dispatch(fetchIngredientsFailed())
-        }) 
+    return{
+        type: actionTypes.INIT_INGREDIENT
     }
 }