Gigs Listings on Earn App (#192)

* output from gigs-listing UI challenge

* ci:deploying list

* ci:redeploying

* expend by default

* restore redirection

* clean up

Co-authored-by: LieutenantRoger <[email protected]>

Author: SathyaJayabal

.circleci/config.yml

@@ -77,7 +77,6 @@ workflows:
             branches:
               only:
                 - dev
-                - challenge-details-page
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/default.js

@@ -2,7 +2,9 @@ require("dotenv").config();
 
 module.exports = {
   MFE_CONFIG: {
-    '@topcoder/micro-frontends-challenges-app': 'https://platform.topcoder-dev.com/challenges-app/topcoder-micro-frontends-challenges-app.js',
-    '@topcoder/micro-frontends-gigs-app': 'https://platform.topcoder-dev.com/gigs-app/topcoder-micro-frontends-gigs-app.js',
+    "@topcoder/micro-frontends-challenges-app":
+      "https://platform.topcoder-dev.com/challenges-app/topcoder-micro-frontends-challenges-app.js",
+    "@topcoder/micro-frontends-gigs-app":
+      "https://platform.topcoder-dev.com/gigs-app/topcoder-micro-frontends-gigs-app.js",
   }
 };

src/App.jsx

@@ -2,7 +2,7 @@
  * Main App component
  */
 import React, { useLayoutEffect, useEffect, useRef } from "react";
-import { Router, useLocation } from "@reach/router";
+import { Router, useLocation, Redirect } from "@reach/router";
 import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app";
 import _ from "lodash";
 import { usePreviousLocation } from "./utils/hooks";
@@ -45,10 +45,17 @@ const App = () => {
             System.import("@topcoder/micro-frontends-challenges-app")
           }
         />
+        <Parcel
+          path="/earn/gigs"
+          view="gigs"
+          config={() => System.import("@topcoder/micro-frontends-gigs-app")}
+        />
         <Parcel
           path="/earn/my-gigs"
+          view="my-gigs"
           config={() => System.import("@topcoder/micro-frontends-gigs-app")}
         />
+        <Redirect from="/earn/*" to="/earn/find/challenges/" noThrow />
       </Router>
     </>
   );

src/actions/menu.js

@@ -1,9 +1,9 @@
 import { createActions } from "redux-actions";
 
 function showMenu(visible) {
-  return visible
+  return visible;
 }
 
 export default createActions({
-  SHOW_MENU: showMenu
-})
+  SHOW_MENU: showMenu,
+});

src/components/FeedbackButton/index.jsx

@@ -1,8 +1,9 @@
 import React from "react";
 import "./styles.scss";
 
-const FeedbackButton = () => (
+const FeedbackButton = ({ className }) => (
   <a
+    className={className}
     styleName="feedback-button"
     href="https://discussions.topcoder.com/discussion/8870/new-beta-site-discuss?new=1"
     target="_blank"

src/components/Menu/index.jsx

@@ -3,19 +3,24 @@ import PT from "prop-types";
 import _ from "lodash";
 import * as utils from "../../utils";
 import IconChevronUp from "assets/icons/menu-chevron-up.svg";
-import { navigate } from '@reach/router'
+import { navigate } from "@reach/router";
 
 import "./styles.scss";
 
 const Menu = ({ menu, selected, onSelect, isLoggedIn, onUpdateMenu }) => {
   const selectionRef = useRef();
   if (!selectionRef.current) {
-    selectionRef.current = new utils.menu.MenuSelection(_.cloneDeep(menu), selected, onSelect, onUpdateMenu)
+    selectionRef.current = new utils.menu.MenuSelection(
+      _.cloneDeep(menu),
+      selected,
+      onSelect,
+      onUpdateMenu
+    );
   }
 
   useEffect(() => {
     selectionRef.current.setMenu(menu);
-  }, [menu])
+  }, [menu]);
 
   useEffect(() => {
     selectionRef.current.select(selected);

src/constants/index.js

@@ -19,12 +19,12 @@ export const NAV_MENU = {
       iconActive: "find-work-green.svg",
       children: [
         {
-          name: "Challenges",
-          path: "/earn/find/challenges",
+          name: "Gigs",
+          path: "/earn/gigs",
         },
         {
-          name: "Gigs",
-          path: "",
+          name: "Challenges",
+          path: "/earn/find/challenges",
         },
       ],
     },

src/containers/Menu/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import Menu from '../../components/Menu';
-import * as utils from '../../utils';
-import * as constants from '../../constants';
+import Menu from "../../components/Menu";
+import * as utils from "../../utils";
+import * as constants from "../../constants";
 import { useLocation } from "@reach/router";
 
 const MenuContainer = () => {
@@ -14,7 +14,7 @@ const MenuContainer = () => {
   useEffect(() => {
     const checkIsLoggedIn = async () => {
       setIsLoggedIn(await utils.auth.isLoggedIn());
-    }
+    };
     checkIsLoggedIn();
   }, []);
 
@@ -37,17 +37,14 @@ const MenuContainer = () => {
       selected={selectedMenuItemName}
       onSelect={(name) => {
         setSelectedMenuItemName(name);
-        if (name == "Gigs") {
-          window.location.href = `${process.env.URL.BASE}/gigs`;
-        }
       }}
       isLoggedIn={isLoggedIn}
       onUpdateMenu={(menu) => {
         const change = { ...menu };
         saveMenu(change);
       }}
     />
-  )
-}
+  );
+};
 
 export default MenuContainer;

src/reducers/index.js

@@ -1,5 +1,5 @@
 import { combineReducers } from "redux";
-import menu from './menu';
+import menu from "./menu";
 
 export default combineReducers({
   menu,

src/reducers/menu.js

@@ -1,16 +1,19 @@
 import { handleActions } from "redux-actions";
 
 const defaultState = {
-  show: false
-}
+  show: false,
+};
 
 function onShowMenu(state, { payload }) {
   return {
     ...state,
-    show: payload
-  }
+    show: payload,
+  };
 }
 
-export default handleActions({
-  SHOW_MENU: onShowMenu
-}, defaultState)
+export default handleActions(
+  {
+    SHOW_MENU: onShowMenu,
+  },
+  defaultState
+);

src/set-public-path.js

@@ -8,9 +8,16 @@ import { setPublicPath } from "systemjs-webpack-interop";
 
 setPublicPath("@topcoder/micro-frontends-earn-app");
 
-const challengesAppUrl = process.env.MFE_CONFIG['@topcoder/micro-frontends-challenges-app']
-const gigsAppUrl = process.env.MFE_CONFIG['@topcoder/micro-frontends-gigs-app']
+const challengesAppUrl =
+  process.env.MFE_CONFIG["@topcoder/micro-frontends-challenges-app"];
+const gigsAppUrl = process.env.MFE_CONFIG["@topcoder/micro-frontends-gigs-app"];
 
-importMapOverrides.resetOverrides()
-importMapOverrides.addOverride('@topcoder/micro-frontends-challenges-app', challengesAppUrl)
-importMapOverrides.addOverride('@topcoder/micro-frontends-gigs-app', gigsAppUrl)
+importMapOverrides.resetOverrides();
+importMapOverrides.addOverride(
+  "@topcoder/micro-frontends-challenges-app",
+  challengesAppUrl
+);
+importMapOverrides.addOverride(
+  "@topcoder/micro-frontends-gigs-app",
+  gigsAppUrl
+);

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

@@ -6,7 +6,7 @@ import { bindActionCreators } from "redux";
 import Root from "./root.component";
 import Banner from "./components/Banner";
 import FeedbackButton from "./components/FeedbackButton";
-import actions from "./actions/menu"
+import actions from "./actions/menu";
 import store from "./store";
 
 const lifecycles = singleSpaReact({
@@ -26,4 +26,7 @@ const unmount = [lifecycles.unmount];
 export { bootstrap, mount, unmount };
 
 export { Banner, FeedbackButton };
-export const { showMenu } = bindActionCreators({ showMenu: actions.showMenu }, store.dispatch)
+export const { showMenu } = bindActionCreators(
+  { showMenu: actions.showMenu },
+  store.dispatch
+);

src/utils/auth.js

@@ -1,8 +1,5 @@
 import _ from "lodash";
-import {
-  getAuthUserTokens,
-  login,
-} from "@topcoder/micro-frontends-navbar-app";
+import { getAuthUserTokens, login } from "@topcoder/micro-frontends-navbar-app";
 
 export async function isLoggedIn() {
   const { tokenV3, tokenV2 } = await getAuthUserTokens();

src/utils/menu.js

@@ -53,6 +53,7 @@ export class MenuSelection {
           if (this.isLeaf(menuItem)) {
             menuItem.active = true;
             this.selected = menuItem.name;
+            root.expanded = true;
           } else {
             menuItem.expanded = !menuItem.expanded;
           }