warehouse api integration

src/components/TileBasic/index.js

@@ -3,8 +3,14 @@ import PropTypes from 'prop-types';
 import MDBox from 'components/MDBox';
 import { makeStyles } from '@mui/styles';
 import { Grid } from '@mui/material';
+import SetupIcon from 'assets/images/SetupIcon';
 
 const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
   centerContent: {
     display: 'flex',
     alignItems: 'center',
@@ -31,30 +37,27 @@ export default function TileBasic({ tiles }) {
   const classes = useStyles();
   return (
     <>
-      <container>
+      <Grid container spacing={2}>
-        <Grid container spacing={2}>
+        {tiles &&
-          {tiles &&
+          tiles.map((tile) => (
-            tiles.map((tile) => (
+            <>
-              <>
+              <Grid item xs={12} sm={6} md={4}>
-                <Grid item xs={12} sm={6} md={4}>
+                <MDBox
-                  <MDBox
+                  key={tile._id}
-                    key={tile.name + tile.path}
+                  className={classes.centerContent}
-                    data={{ name: tile.name, path: tile.path }}
+                  sx={{
-                    className={classes.centerContent}
+                    height: 200,
-                    sx={{
+                    backgroundColor: ({ palette: { white } }) => white.main,
-                      height: 200,
+                    padding: '32px 40px'
-                      backgroundColor: ({ palette: { white } }) => white.main,
+                  }}
-                      padding: '32px 40px'
+                >
-                    }}
+                  <SetupIcon className={classes.iconSize} color="blue" />
-                  >
+                  {tile.name}
-                    {tile.icon}
+                </MDBox>
-                    {tile.name}
+              </Grid>
-                  </MDBox>
+            </>
-                </Grid>
+          ))}
-              </>
+      </Grid>
-            ))}
-        </Grid>
-      </container>
     </>
   );
 }

src/constant/Endpoints.js

@@ -1,3 +1,4 @@
 export default {
-  LOGIN_USER: '/user/login'
+  LOGIN_USER: '/user/login',
+  GET_WAREHOUSE_DATA: '/warehouse/all'
 };

src/pages/setup/index.js

@@ -7,6 +7,7 @@ import WarehouseIcon from 'assets/images/WarehouseIcon';
 import InventoryIcon from 'assets/images/InventoryIcon';
 import ProfileCircleIcon from 'assets/images/ProfileCircleIcon';
 import LabelIcon from 'assets/images/LabelIcon';
+import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles({
   iconSize: {
@@ -77,19 +78,21 @@ function SetupHome() {
           {data.map((items) => (
             <>
               <Grid item xs={12} sm={6} md={6}>
-                <MDBox
+                <Link to={items.path}>
-                  key={items.name + items.path}
+                  <MDBox
-                  data={{ name: items.name, path: items.path }}
+                    key={items.name + items.path}
-                  className={classes.centerContent}
+                    data={{ name: items.name, path: items.path }}
-                  sx={{
+                    className={classes.centerContent}
-                    height: 230,
+                    sx={{
-                    backgroundColor: ({ palette: { white } }) => white.main,
+                      height: 230,
-                    padding: '32px 40px'
+                      backgroundColor: ({ palette: { white } }) => white.main,
-                  }}
+                      padding: '32px 40px'
-                >
+                    }}
-                  {items.icon}
+                  >
-                  {items.name}
+                    {items.icon}
-                </MDBox>
+                    {items.name}
+                  </MDBox>
+                </Link>
               </Grid>
             </>
           ))}

src/pages/warehouse/index.js

@@ -2,76 +2,32 @@ import MDBox from 'components/MDBox';
 import DashboardNavbar from 'components/DashboardNavbar';
 import Footer from 'components/Footer';
 import DashboardLayout from 'layouts/DashboardLayout';
-import SetupIcon from 'assets/images/SetupIcon';
 import TileBasic from 'components/TileBasic';
-import { makeStyles } from '@mui/styles';
+import { API } from 'constant';
-
+import WarehouseActions from 'redux/WarehouseRedux';
-const useStyles = makeStyles({
+import { useEffect } from 'react';
-  iconSize: {
+import { useDispatch, useSelector } from 'react-redux';
-    width: '50%',
+import { WarehouseSelectors } from 'redux/WarehouseRedux';
-    height: '50%',
-    marginBottom: '10px'
-  },
-  margin: {
-    marginBottom: '20px'
-  }
-});
 
 function WarehouseScreen() {
-  const classes = useStyles();
+  const dispatch = useDispatch();
-  const data = [
+  const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
-    {
+
-      name: 'Warehouse 1',
+  useEffect(() => {
-      path: '/',
+    dispatch(
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
+      WarehouseActions.warehouseDataAction({
-    },
+        loader: 'loading-request',
-    {
+        slug: API.GET_WAREHOUSE_DATA,
-      name: 'Warehouse 1',
+        method: 'get'
-      path: '/',
+      })
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    );
-    },
+  }, []);
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    },
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    },
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    },
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    },
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    },
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    },
-    {
-      name: 'Warehouse 1',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
-    }
-  ];
 
   return (
     <DashboardLayout>
       <DashboardNavbar />
       <MDBox px={2} py={3}>
-        <TileBasic tiles={data} />
+        <TileBasic tiles={warehouseData} />
       </MDBox>
       <Footer />
     </DashboardLayout>

src/redux/WarehouseRedux.js

@@ -0,0 +1,53 @@
+import { createActions, createReducer } from 'reduxsauce';
+import Immutable from 'seamless-immutable';
+import _ from 'underscore';
+import { getFetchingValue, getErrorValue } from '../services/Utils';
+
+/* ------------- Types and Action Creators ------------- */
+const { Types, Creators } = createActions({
+  warehouseDataAction: ['payload'],
+  warehouseDataSuccess: ['data'],
+  warehouseDataFailure: ['error']
+});
+
+export const WarehouseTypes = Types;
+const WarehouseActions = Creators;
+export default WarehouseActions;
+
+/* ------------- Initial State ------------- */
+export const INITIAL_STATE = Immutable({
+  warehouseDetail: null,
+  error: {}
+});
+
+/* ------------- Selectors ------------- */
+export const WarehouseSelectors = {
+  getWarehouseDetail: (state) => state.warehouse.warehouseDetail  
+};
+
+/* ------------- Reducers ------------- */
+export const onWarehouseDataAction = (state, { payload }) =>
+  state.merge({
+    fetching: _.uniq([state.fetching, payload?.loader]),
+    error: getErrorValue(state?.error, payload?.loader)
+  });
+
+export const onWarehouseDataSuccess = (state, { data }) =>
+  state.merge({
+    fetching: getFetchingValue(state.fetching, data?.loader),
+    error: getErrorValue(state?.error, data?.loader),
+    warehouseDetail: data.warehouseDetail
+  });
+
+export const onWarehouseDataFailure = (state, { error }) =>
+  state.merge({
+    fetching: _.without(state.fetching, error?.loader),
+    error: { ...state.error, [error?.loader]: error?.error }
+  });
+
+/* ------------- Hookup Reducers To Types ------------- */
+export const warehouseReducer = createReducer(INITIAL_STATE, {
+  [Types.WAREHOUSE_DATA_ACTION]: onWarehouseDataAction,
+  [Types.WAREHOUSE_DATA_SUCCESS]: onWarehouseDataSuccess,
+  [Types.WAREHOUSE_DATA_FAILURE]: onWarehouseDataFailure
+});

src/redux/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 import { authReducer } from './AuthRedux';
+import { warehouseReducer } from './WarehouseRedux';
 
 // Combine all reducers.
 const appReducer = combineReducers({
-  auth: authReducer
+  auth: authReducer,
+  warehouse: warehouseReducer
 });
 
 const rootReducer = (state, action) => {

src/sagas/Warehouse.js

@@ -0,0 +1,31 @@
+import { AuthorizedAPI } from 'config';
+import { takeLatest, call, put } from 'redux-saga/effects';
+import WarehouseActions, { WarehouseTypes } from '../redux/WarehouseRedux';
+import ApiServices from 'services/API/ApiServices';
+
+export function* onRequestWarehouseData({ payload }) {
+  const response = yield call(
+    ApiServices[payload?.method],
+    AuthorizedAPI,
+    payload?.slug,
+    payload?.data
+  );
+  if (response?.status === 200) {
+    yield put(
+      WarehouseActions.warehouseDataSuccess({
+        loader: payload?.loader,
+        warehouseDetail: response?.data?.data
+      })
+    );
+  } else {
+    payload.onFailedWarehouseData(response.data.error);
+    yield put(
+      WarehouseActions.warehouseDataFailure({
+        loader: payload?.loader,
+        error: response?.data
+      })
+    );
+  }
+}
+
+export default [takeLatest(WarehouseTypes.WAREHOUSE_DATA_ACTION, onRequestWarehouseData)];

src/sagas/index.js

@@ -1,6 +1,10 @@
 import { all } from 'redux-saga/effects';
 import AuthSaga from './Auth';
+import WarehouseSaga from './Warehouse';
+
 
 export default function* rootSaga() {
   yield all([...AuthSaga]);
+  yield all([...WarehouseSaga]);
+
 }