Merge branch 'dev'

Signed-off-by: Rakib Ansary <[email protected]>

Author: rakibansary

.circleci/config.yml

@@ -74,8 +74,7 @@ workflows:
             branches:
               only:
                 - dev
-                - challenge-listing-part-1
-                - feat/profile-app
+                - feat/onboarding-app
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/dev.js

@@ -12,4 +12,5 @@ module.exports = {
     V5: "https://api.topcoder-dev.com/v5",
   },
   REAUTH_OFFSET: 55, // seconds
+  PROFILE_CREATION_DATE_THRESHOLD: "2021-10-25", // format: "YYYY-MM-DD"
 };

src/App.jsx

@@ -5,11 +5,12 @@ import React, { useState, useCallback, useMemo, useEffect } from "react";
 import _ from "lodash";
 import MainMenu from "./components/MainMenu";
 import NavBar from "./components/NavBar";
-import { Router } from "@reach/router";
+import { matchPath, Router, useLocation } from "@reach/router";
 import { useSelector } from "react-redux";
 import useMatchSomeRoute from "./hooks/useMatchSomeRoute";
 import NotificationsModal from "./components/NotificationsModal";
 import "./styles/main.module.scss";
+import { checkOnboardingPath } from "./utils";
 
 const App = () => {
   // all menu options
@@ -18,10 +19,14 @@ 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);
+  // user profile information
+  const auth = useSelector((state) => state.auth);
   // `true` is sidebar has to be disabled for the current route
   const isSideBarDisabled = useMatchSomeRoute(disabledRoutes);
   // 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);
@@ -33,6 +38,7 @@ const App = () => {
       (!state.notifications.initialized &&
         !state.notifications.communityInitialized)
   );
+  const location = useLocation();
 
   // set/remove class for the whole page, to know if sidebar is present or no
   useEffect(() => {
@@ -43,9 +49,17 @@ const App = () => {
     }
   }, [isSideBarDisabled]);
 
+  useEffect(() => {
+    if (matchPath("onboard/*", location.pathname)) {
+      setHideSwitchTools(true);
+    } else {
+      setHideSwitchTools(false);
+    }
+  }, [location]);
+
   return (
     <>
-      <NavBar />
+      <NavBar hideSwitchTools={hideSwitchTools} />
       {!isSideBarDisabled && (
         <div className="main-menu-wrapper">
           <Router>

src/actions/auth.js

@@ -5,6 +5,10 @@ export default {
     type: ACTIONS.AUTH.LOAD_PROFILE,
     payload: profile,
   }),
+  setProfilePhoto: (photoURL) => ({
+    type: ACTIONS.AUTH.SET_PROFILE_PHOTO,
+    payload: photoURL,
+  }),
   setTcTokenV3: (tokenV3) => ({
     type: ACTIONS.AUTH.SET_TOKEN_V3,
     payload: tokenV3,

src/components/NavBar/index.jsx

@@ -11,6 +11,7 @@ import React, {
   useMemo,
 } from "react";
 import _ from "lodash";
+import PropTypes from "prop-types";
 import UserMenu from "../UserMenu";
 import AllAppsMenu from "../AllAppsMenu";
 import { useSelector } from "react-redux";
@@ -21,7 +22,7 @@ import "./styles.css";
 import { useMediaQuery } from "react-responsive";
 import NotificationsMenu from "../NotificationsMenu";
 
-const NavBar = () => {
+const NavBar = ({ hideSwitchTools }) => {
   // all menu options
   const menu = useSelector((state) => state.menu.categories);
   // flat list of all apps
@@ -54,7 +55,9 @@ const NavBar = () => {
     <div className="navbar">
       <div className="navbar-left">
         {isMobile ? (
-          <AllAppsMenu />
+          hideSwitchTools ? null : (
+            <AllAppsMenu />
+          )
         ) : (
           <Fragment>
             <Link to="/">
@@ -88,8 +91,11 @@ const NavBar = () => {
               (auth.tokenV3 ? (
                 auth.profile && (
                   <Fragment>
-                    <NotificationsMenu />
-                    <UserMenu profile={auth.profile} />
+                    {hideSwitchTools ? null : <NotificationsMenu />}
+                    <UserMenu
+                      profile={auth.profile}
+                      hideSwitchTools={hideSwitchTools}
+                    />
                   </Fragment>
                 )
               ) : (
@@ -100,14 +106,17 @@ const NavBar = () => {
           </Fragment>
         ) : (
           <Fragment>
-            <AllAppsMenu appChange={changeApp} />
+            {hideSwitchTools ? null : <AllAppsMenu appChange={changeApp} />}
             <div className="navbar-divider"></div>
             {auth.isInitialized &&
               (auth.tokenV3 ? (
                 auth.profile && (
                   <Fragment>
-                    <NotificationsMenu />
-                    <UserMenu profile={auth.profile} />
+                    {hideSwitchTools ? null : <NotificationsMenu />}
+                    <UserMenu
+                      profile={auth.profile}
+                      hideSwitchTools={hideSwitchTools}
+                    />
                   </Fragment>
                 )
               ) : (
@@ -122,4 +131,12 @@ const NavBar = () => {
   );
 };
 
+NavBar.defaultProps = {
+  hideSwitchTools: false,
+};
+
+NavBar.propTypes = {
+  hideSwitchTools: PropTypes.boolean,
+};
+
 export default NavBar;

src/components/UserMenu/index.jsx

@@ -5,14 +5,15 @@
  */
 import React, { useState, useCallback, Fragment } from "react";
 import { Link } from "@reach/router";
+import PropTypes from "prop-types";
 import Avatar from "../Avatar";
 import cn from "classnames";
 import OutsideClickHandler from "react-outside-click-handler";
 import { logout, getLogoutUrl } from "../../utils";
 import "./styles.css";
 import { useMediaQuery } from "react-responsive";
 
-const UserMenu = ({ profile }) => {
+const UserMenu = ({ profile, hideSwitchTools }) => {
   const [isOpenMenu, setIsOpenMenu] = useState(false);
 
   const closeMenu = useCallback(() => {
@@ -63,11 +64,16 @@ const UserMenu = ({ profile }) => {
               <div className="user-menu-popover-arrow" />
               <div className="user-menu-popover-content">
                 <ul className="user-menu-list">
-                  <li>
-                    <Link to={`/profile/${profile.handle}`} onClick={closeMenu}>
-                      Profile
-                    </Link>
-                  </li>
+                  {hideSwitchTools ? null : (
+                    <li>
+                      <Link
+                        to={`/profile/${profile.handle}`}
+                        onClick={closeMenu}
+                      >
+                        Profile
+                      </Link>
+                    </li>
+                  )}
                   <li>
                     <a href={getLogoutUrl()} onClick={onLogoutClick}>
                       Log Out
@@ -83,4 +89,12 @@ const UserMenu = ({ profile }) => {
   );
 };
 
+UserMenu.defaultProps = {
+  hideSwitchTools: false,
+};
+
+UserMenu.propTypes = {
+  hideSwitchTools: PropTypes.boolean,
+};
+
 export default UserMenu;

src/constants/apps.js

@@ -83,4 +83,16 @@ export const APP_CATEGORIES = [
       },
     ],
   },
+  {
+    category: "Onboard",
+    hidden: true,
+    apps: [
+      {
+        title: "Member Onboarding",
+        path: "/onboard",
+        isExact: false,
+        menu: [],
+      },
+    ],
+  },
 ];

src/constants/index.js

@@ -7,6 +7,7 @@ export { APP_CATEGORIES };
 export const ACTIONS = {
   AUTH: {
     LOAD_PROFILE: "LOAD_PROFILE",
+    SET_PROFILE_PHOTO: "SET_PROFILE_PHOTO",
     SET_TOKEN_V3: "SET_TOKEN_V3",
     SET_TOKEN_V2: "SET_TOKEN_V2",
     SET_INITIALIZED: "SET_INITIALIZED",

src/reducers/auth.js

@@ -29,6 +29,11 @@ const authReducer = (state = initialState, action) => {
         profile: action.payload,
         isProfileLoaded: true,
       };
+    case ACTIONS.AUTH.SET_PROFILE_PHOTO:
+      return state.profile ? ({
+        ...state,
+        profile: {...state.profile, photoURL: action.payload},
+      }) : state;
     case ACTIONS.AUTH.SET_INITIALIZED:
       return {
         ...state,

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

@@ -16,6 +16,7 @@ import {
   enableSidebarForRoute,
   getAuthUserTokens,
   getAuthUserProfile,
+  setUserProfilePhoto,
   setNotificationPlatform,
 } from "./utils/exports";
 
@@ -42,6 +43,7 @@ export {
   setAppMenu,
   getAuthUserTokens,
   getAuthUserProfile,
+  setUserProfilePhoto,
   disableSidebarForRoute,
   enableSidebarForRoute,
   setNotificationPlatform,

src/utils/exports.js

@@ -7,6 +7,7 @@ import _ from "lodash";
 import { bindActionCreators } from "redux";
 import store from "../store";
 import menuActions from "../actions/menu";
+import authActions from "../actions/auth";
 import notificationActions from "../actions/notifications";
 
 // bind all the actions for exporting here
@@ -15,12 +16,14 @@ export const {
   disableSidebarForRoute,
   enableSidebarForRoute,
   setNotificationPlatform,
+  setUserProfilePhoto
 } = bindActionCreators(
   {
     setAppMenu: menuActions.setAppMenu,
     disableSidebarForRoute: menuActions.disableSidebarForRoute,
     enableSidebarForRoute: menuActions.enableSidebarForRoute,
     setNotificationPlatform: notificationActions.setNotificationPlatform,
+    setUserProfilePhoto: authActions.setProfilePhoto,
   },
   store.dispatch
 );

src/utils/index.js

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+import moment from "moment";
 import config from "../../config";
 
 /**

webpack.config.js

@@ -34,7 +34,7 @@ module.exports = (webpackConfigEnv, options) => {
       rules: [
         {
           /* Loads svg images. */
-          test: /[/\\]assets[/\\]images[/\\].+\.svg$/,
+          test: /[/\/\\]assets[/\/\\]images[/\/\\].+\.svg$/,
           exclude: /node_modules/,
           loader: "file-loader",
           options: {