Add header and menu updates for profile app

.gitignore

@@ -105,3 +105,6 @@ dist
 
 # VS Code settings
 .vscode/
+
+# Webstorm setttings
+.idea/

config/dev.js

@@ -9,6 +9,7 @@ module.exports = {
   },
   API: {
     V3: "https://api.topcoder-dev.com/v3",
+    V5: "https://api.topcoder-dev.com/v5",
   },
   REAUTH_OFFSET: 55, // seconds
 };

src/components/AllAppsMenu/index.jsx

@@ -51,41 +51,43 @@ const AllAppsMenu = () => {
             <div className="all-apps-menu-popover-content">
               <div className="all-apps-menu-list-title">SWITCH TOOLS</div>
               <ul className="all-apps-menu-list">
-                {menu.map((appCategory) => (
-                  <Fragment>
-                    <div className="switch-category-title">
-                      <div className="menu-divider"></div>
-                      <div className="all-apps-menu-category-name">
-                        {appCategory.category}
+                {menu
+                  .filter((appCategory) => !appCategory.hidden)
+                  .map((appCategory) => (
+                    <Fragment>
+                      <div className="switch-category-title">
+                        <div className="menu-divider"></div>
+                        <div className="all-apps-menu-category-name">
+                          {appCategory.category}
+                        </div>
+                        <div className="menu-divider"></div>
                       </div>
-                      <div className="menu-divider"></div>
-                    </div>
-                    {appCategory.apps.map((app) => {
-                      // if app is roles restricted check for access
-                      if (app.roles) {
-                        // not logged-in
-                        if (!auth || !tokenData) return null;
-                        // roles in v3 token match?
-                        if (
-                          tokenData &&
-                          !intersection(app.roles, tokenData.roles).length
-                        )
-                          return null;
-                      }
-                      return (
-                        <li className="all-apps-menu-app" key={app.path}>
-                          <Link
-                            to={app.path}
-                            onClick={(e) => closeMenu(e, app)}
-                          >
-                            <img src={app.icon} alt={`${app.title} Icon`} />
-                            <span>{app.title}</span>
-                          </Link>
-                        </li>
-                      );
-                    })}
-                  </Fragment>
-                ))}
+                      {appCategory.apps.map((app) => {
+                        // if app is roles restricted check for access
+                        if (app.roles) {
+                          // not logged-in
+                          if (!auth || !tokenData) return null;
+                          // roles in v3 token match?
+                          if (
+                            tokenData &&
+                            !intersection(app.roles, tokenData.roles).length
+                          )
+                            return null;
+                        }
+                        return (
+                          <li className="all-apps-menu-app" key={app.path}>
+                            <Link
+                              to={app.path}
+                              onClick={(e) => closeMenu(e, app)}
+                            >
+                              <img src={app.icon} alt={`${app.title} Icon`} />
+                              <span>{app.title}</span>
+                            </Link>
+                          </li>
+                        );
+                      })}
+                    </Fragment>
+                  ))}
               </ul>
             </div>
           </div>

src/components/UserMenu/index.jsx

@@ -62,6 +62,9 @@ const UserMenu = ({ profile }) => {
               <div className="user-menu-popover-arrow" />
               <div className="user-menu-popover-content">
                 <ul className="user-menu-list">
+                  <li>
+                    <a href={`/profile/${profile.handle}`}>Profile</a>
+                  </li>
                   <li>
                     <a href={getLogoutUrl()} onClick={onLogoutClick}>
                       Log Out

src/constants/apps.js

@@ -71,4 +71,15 @@ export const APP_CATEGORIES = [
       },
     ],
   },
+  {
+    category: "Profile",
+    hidden: true,
+    apps: [
+      {
+        title: "Profile App",
+        path: "/profile/",
+        isExact: false,
+      },
+    ],
+  },
 ];

src/services/auth.js

@@ -57,11 +57,11 @@ const loadProfile = (userTokenV3) => {
   if (!userTokenV3) return Promise.resolve(null);
   const user = decodeToken(userTokenV3);
   const fetcher = getFetcher(userTokenV3);
-  return fetcher(`${config.API.V3}/members/${user.handle}`, {
+  return fetcher(`${config.API.V5}/members/${user.handle}`, {
     method: "get",
   })
     .then((res) => res.json())
-    .then((res) => (res.result.status === 200 ? res.result.content : {}));
+    .then((res) => res || {});
 };
 
 configureConnector({

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: {