feat(dashboard): add features api.

src/hooks/query/types.js

@@ -209,6 +209,10 @@ const BRANCHES = {
   BRANCH: 'BRANCH',
 };
 
+const DASHBOARD = {
+  DASHBOARD_META: 'DASHBOARD_META',
+};
+
 export default {
   ...ACCOUNTS,
   ...BILLS,
@@ -239,4 +243,5 @@ export default {
   ...WAREHOUSES,
   ...WAREHOUSE_TRANSFERS,
   ...BRANCHES,
+  ...DASHBOARD,
 };

src/hooks/query/users.js

@@ -1,6 +1,8 @@
+import { useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useQueryTenant, useRequestQuery } from '../useQueryRequest';
 import useApiRequest from '../useRequest';
+import { useSetFeatureDashboardMeta } from '../state/feature';
 import t from './types';
 
 // Common invalidate queries.
@@ -126,8 +128,7 @@ export function useUser(id, props) {
   );
 }
 
-
+export function useAuthenticatedAccount(props) {
-export function useAuthenticatedAccount(props){
   return useRequestQuery(
     ['AuthenticatedAccount'],
     {
@@ -146,8 +147,9 @@ export function useAuthenticatedAccount(props){
  * Fetches the dashboard meta.
  */
 export function useDashboardMeta(props) {
-  return useRequestQuery(
+  const setFeatureDashboardMeta = useSetFeatureDashboardMeta();
-    ['DashboardMeta'],
+  const state = useRequestQuery(
+    [t.DASHBOARD_META],
     {
       method: 'get',
       url: 'dashboard/boot',
@@ -155,7 +157,13 @@ export function useDashboardMeta(props) {
     {
       select: (res) => res.data.meta,
       defaultData: {},
-      ...props
+      ...props,
-    }
+    },
-  )
+    useEffect(() => {
+      if (state.isSuccess) {
+        setFeatureDashboardMeta(state.data);
+      }
+    }, [setFeatureDashboardMeta]),
+  );
+  return state;
 }

src/hooks/state/feature.js

@@ -1,5 +1,7 @@
-import { useSelector } from 'react-redux';
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
+import { setFeatureDashboardMeta } from '../../store/dashboard/dashboard.actions';
 
 const featuresSelector = createSelector(
   (state) => state.dashboard.features,
@@ -15,3 +17,17 @@ export const useFeatureCan = () => {
     },
   };
 };
+
+/**
+ * Sets features.
+ */
+export const useSetFeatureDashboardMeta = () => {
+  const dispatch = useDispatch();
+
+  return React.useCallback(
+    (features) => {
+      dispatch(setFeatureDashboardMeta(features));
+    },
+    [dispatch],
+  );
+};

src/store/dashboard/dashboard.actions.js

@@ -67,11 +67,10 @@ export function closeDrawer(name, payload) {
 export function toggleExpendSidebar(toggle) {
   return {
     type: t.SIDEBAR_EXPEND_TOGGLE,
-    payload: { toggle }
+    payload: { toggle },
   };
 }
 
-
 export function appIsLoading(toggle) {
   return {
     type: t.APP_IS_LOADING,
@@ -101,5 +100,14 @@ export function splashStartLoading() {
 export function splashStopLoading() {
   return {
     type: t.SPLASH_STOP_LOADING,
-  }  
+  };
 }
+
+export const setFeatureDashboardMeta = ({ features }) => {
+  return {
+    type: t.SET_FEATURE_DASHBOARD_META,
+    payload: {
+      features,
+    },
+  };
+};

src/store/dashboard/dashboard.reducer.js

@@ -3,6 +3,7 @@ import { isUndefined, isNumber } from 'lodash';
 import t from 'store/types';
 import { persistReducer, purgeStoredState } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
+import { useDashboardMeta } from '../../hooks/query';
 
 const initialState = {
   pageTitle: '',
@@ -20,8 +21,8 @@ const initialState = {
   appIsLoading: true,
   appIntlIsLoading: true,
   features: {
-    branches: true,
+    // branches: true,
-    warehouses: true,
+    // warehouses: true,
   },
 };
 
@@ -115,6 +116,16 @@ const reducerInstance = createReducer(initialState, {
     }
   },
 
+  [t.SET_FEATURE_DASHBOARD_META]: (state, action) => {
+    const { features } = action.payload;
+    const _data = {};
+
+    features.forEach((feature) => {
+      _data[feature.name] = feature.is_accessible;
+    });
+    state.features = _data;
+  },
+
   [t.SPLASH_STOP_LOADING]: (state) => {
     state.splashScreenLoading -= 1;
     state.splashScreenLoading = Math.max(state.splashScreenLoading, 0);

src/store/dashboard/dashboard.types.js

@@ -16,4 +16,5 @@ export default {
   SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK',
   SPLASH_START_LOADING: 'SPLASH_START_LOADING',
   SPLASH_STOP_LOADING: 'SPLASH_STOP_LOADING',
+  SET_FEATURE_DASHBOARD_META: 'SET_FEATURE_DASHBOARD_META',
 };