add disableNavigation for route

Author: Nursoltan Saipolda

README.md

@@ -68,6 +68,8 @@ This app exports functions to be imported by other microapps.
 - `getAuthUserProfile` - returns a promise which resolves to the user profile object
 - `disableSidebarForRoute` - disable (remove) sidebar for some route
 - `enableSidebarForRoute` - enable sidebar for the route, which was previously disabled
+- `disableNavigationForRoute` - disable (remove) navigation for some route
+- `enableNavigationForRoute` - enable (remove) navigation for some route
 
 #### How to export
 

src/App.jsx

@@ -9,8 +9,6 @@ import { navigate, Router, useLocation } from "@reach/router";
 import { useSelector } from "react-redux";
 import useMatchSomeRoute from "./hooks/useMatchSomeRoute";
 import NotificationsModal from "./components/NotificationsModal";
-import { checkOnboarding, checkProfileCreationDate } from "./utils";
-import { getOnboardingChecklist } from "./services/auth";
 import "./styles/main.module.scss";
 
 const App = () => {
@@ -20,14 +18,18 @@ const App = () => {
   const apps = useMemo(() => _.flatMap(menu, "apps"), [menu]);
   // list of routes where we have to disabled sidebar
   const disabledRoutes = useSelector((state) => state.menu.disabledRoutes);
+  // list of routes where we have to disabled navigations
+  const disabledNavigations = useSelector(
+    (state) => state.menu.disabledNavigations
+  );
   // user profile information
   const auth = useSelector((state) => state.auth);
   // `true` is sidebar has to be disabled for the current route
   const isSideBarDisabled = useMatchSomeRoute(disabledRoutes);
+  // `true` is navigation has to be disabled for the current route
+  const isNavigationDisabled = useMatchSomeRoute(disabledNavigations);
   // Left sidebar collapse state
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  // hide switch tools and notification when user is onboarding
-  const [hideSwitchTools, setHideSwitchTools] = useState(false);
   // Toggle left sidebar callback
   const toggleSidebar = useCallback(() => {
     setSidebarCollapsed(!sidebarCollapsed);
@@ -43,41 +45,16 @@ const App = () => {
 
   // set/remove class for the whole page, to know if sidebar is present or no
   useEffect(() => {
-    if (location.pathname.includes("/self-service")) {
-      setHideSwitchTools(true);
-    } else {
-      setHideSwitchTools(false);
-    }
     if (isSideBarDisabled) {
       document.body.classList.add("no-sidebar");
     } else {
       document.body.classList.remove("no-sidebar");
     }
   }, [isSideBarDisabled, location.pathname]);
 
-  useEffect(() => {
-    (async () => {
-      console.log('qq', auth?.profile);
-
-      if (auth?.profile && checkProfileCreationDate(auth?.profile)) {
-        const { profile, tokenV3 } = auth;
-
-        const response = await getOnboardingChecklist(profile?.handle, tokenV3);
-        const onboardingPath = checkOnboarding(response);
-        console.log('qq', onboardingPath);
-        if (onboardingPath) {
-          setHideSwitchTools(true);
-          navigate(onboardingPath);
-        } else {
-          setHideSwitchTools(false);
-        }
-      }
-    })();
-  }, [auth]);
-
   return (
     <>
-      <NavBar hideSwitchTools={hideSwitchTools} />
+      <NavBar hideSwitchTools={isNavigationDisabled} />
       {!isSideBarDisabled && (
         <div className="main-menu-wrapper">
           <Router>

src/actions/menu.js

@@ -39,4 +39,28 @@ export default {
     type: ACTIONS.MENU.ENABLE_SIDEBAR_FOR_ROUTE,
     payload: route,
   }),
+
+  /**
+   * Disable navigation for route.
+   *
+   * @param {String} route route path
+   *
+   * @returns {{ type: String, payload: any }} action object
+   */
+  disableNavigationForRoute: (route) => ({
+    type: ACTIONS.MENU.DISABLE_NAVIGATION_FOR_ROUTE,
+    payload: route,
+  }),
+
+  /**
+   * Enable navigation for route.
+   *
+   * @param {String} route route path
+   *
+   * @returns {{ type: String, payload: any }} action object
+   */
+  enableNavigationForRoute: (route) => ({
+    type: ACTIONS.MENU.ENABLE_NAVIGATION_FOR_ROUTE,
+    payload: route,
+  }),
 };

src/constants/index.js

@@ -16,5 +16,7 @@ export const ACTIONS = {
     SET_APP_MENU: "SET_APP_MENU",
     DISABLE_SIDEBAR_FOR_ROUTE: "DISABLE_SIDEBAR_FOR_ROUTE",
     ENABLE_SIDEBAR_FOR_ROUTE: "ENABLE_SIDEBAR_FOR_ROUTE",
+    DISABLE_NAVIGATION_FOR_ROUTE: "DISABLE_NAVIGATION_FOR_ROUTE",
+    ENABLE_NAVIGATION_FOR_ROUTE: "ENABLE_NAVIGATION_FOR_ROUTE",
   },
 };

src/reducers/menu.js

@@ -10,6 +10,7 @@ import { ACTIONS, APP_CATEGORIES } from "../constants";
 const initialState = {
   categories: APP_CATEGORIES, // Default Apps Menu structure.
   disabledRoutes: [],
+  disabledNavigations: [],
 };
 
 /**
@@ -132,6 +133,35 @@ const menuReducer = (state = initialState, action) => {
       };
     }
 
+    case ACTIONS.MENU.DISABLE_NAVIGATION_FOR_ROUTE: {
+      // if route is already disabled, don't do anything
+      if (state.disabledNavigations.indexOf(action.payload) > -1) {
+        return state;
+      }
+
+      return {
+        ...state,
+        // add route to the disabled list
+        disabledNavigations: [...state.disabledNavigations, action.payload],
+      };
+    }
+
+    case ACTIONS.MENU.ENABLE_NAVIGATION_FOR_ROUTE: {
+      // if route is not disabled, don't do anything
+      if (state.disabledNavigations.indexOf(action.payload) === -1) {
+        return state;
+      }
+
+      return {
+        ...state,
+        // remove the route from the disabled list
+        disabledNavigations: _.without(
+          state.disabledNavigations,
+          action.payload
+        ),
+      };
+    }
+
     default:
       return state;
   }

src/services/auth.js

@@ -125,15 +125,3 @@ export function authenticate(store) {
       }
     });
 }
-
-/**
- * Get the onboarding checklist data to know completed steps
- */
-export function getOnboardingChecklist(username, userTokenV3) {
-  const fetcher = getFetcher(userTokenV3);
-  return fetcher(
-    `${config.API.V5}/members/${username}/traits?traitIds=onboarding_checklist`
-  )
-    .then((res) => res.json())
-    .then((res) => ({ data: res || [] }));
-}

src/topcoder-micro-frontends-navbar-app.js

@@ -18,6 +18,8 @@ import {
   getAuthUserProfile,
   setUserProfilePhoto,
   setNotificationPlatform,
+  disableNavigationForRoute,
+  enableNavigationForRoute,
 } from "./utils/exports";
 
 import { login, businessLogin, logout } from "./utils";
@@ -47,5 +49,7 @@ export {
   disableSidebarForRoute,
   enableSidebarForRoute,
   setNotificationPlatform,
+  disableNavigationForRoute,
+  enableNavigationForRoute,
   PLATFORM,
 };

src/utils/exports.js

@@ -16,14 +16,18 @@ export const {
   disableSidebarForRoute,
   enableSidebarForRoute,
   setNotificationPlatform,
-  setUserProfilePhoto
+  setUserProfilePhoto,
+  disableNavigationForRoute,
+  enableNavigationForRoute,
 } = bindActionCreators(
   {
     setAppMenu: menuActions.setAppMenu,
     disableSidebarForRoute: menuActions.disableSidebarForRoute,
     enableSidebarForRoute: menuActions.enableSidebarForRoute,
     setNotificationPlatform: notificationActions.setNotificationPlatform,
     setUserProfilePhoto: authActions.setProfilePhoto,
+    disableNavigationForRoute: menuActions.disableNavigationForRoute,
+    enableNavigationForRoute: menuActions.enableNavigationForRoute,
   },
   store.dispatch
 );

src/utils/index.js

@@ -67,69 +67,3 @@ export const checkProfileCreationDate = (profile) => {
 
   return false;
 };
-
-/**
- * Check Onboarding API
- *
- * @param resp {Object} User trait object
- *
- * @returns {boolean | string}
- */
-export function checkOnboarding(resp) {
-  if (resp?.data.length === 0) {
-    return "/onboard/";
-  }
-
-  const onboardingChecklistTrait = resp?.data.filter(
-    (item) => item.traitId === "onboarding_checklist"
-  )[0].traits;
-
-  // Check if onboarding flow needs to be skipped
-  // 1. if the trait onboarding_wizard has a valid value for status.
-  //    possible values of status are [seeen, completed]. Since we only want to show
-  //    the onboarding wizard to users who haven't at least once seen the wizard
-  //    it is sufficient to check for a non null value.
-  // 2. if the trait onboarding_wizard has a truthy value for skip.
-
-  for (let checklistTrait of onboardingChecklistTrait.data) {
-    if (
-      checklistTrait.onboarding_wizard != null &&
-      (checklistTrait.onboarding_wizard.status != null ||
-        checklistTrait.onboarding_wizard.skip)
-    ) {
-      return false;
-    }
-  }
-
-  const profileCompletedData =
-    onboardingChecklistTrait.data[0].profile_completed;
-
-  if (profileCompletedData.status === "completed") {
-    return false;
-  }
-
-  for (const item in profileCompletedData.metadata) {
-    if (profileCompletedData.metadata[item]) {
-      return false;
-    }
-  }
-
-  const steps = {
-    "/onboard/": ["profile_picture", "skills"],
-    "/onboard/contact-details": ["country"],
-    "/onboard/payments-setup": [],
-    "/onboard/build-my-profile": ["bio", "work", "education", "language"],
-  };
-
-  if (profileCompletedData.status === "pending_at_user") {
-    const flags = Object.keys(profileCompletedData.metadata);
-    for (const step of Object.keys(steps)) {
-      for (const flag of steps[step]) {
-        if (flags.indexOf(flag) >= 0 && !profileCompletedData.metadata[flag]) {
-          return step;
-        }
-      }
-    }
-  }
-  return false;
-}