From fa105f7ea50d6e3511577b8e4971b1805833eba8 Mon Sep 17 00:00:00 2001 From: LieutenantRoger Date: Wed, 22 Sep 2021 12:41:25 +0800 Subject: [PATCH 1/6] output from gigs-listing UI challenge --- config/default.js | 11 ++++++--- config/dev.js | 9 +++++++ src/App.jsx | 31 ++++++++++++++++++------ src/actions/menu.js | 6 ++--- src/components/FeedbackButton/index.jsx | 3 ++- src/components/Menu/index.jsx | 11 ++++++--- src/constants/index.js | 8 +++--- src/containers/Menu/index.jsx | 15 +++++------- src/reducers/index.js | 2 +- src/reducers/menu.js | 17 +++++++------ src/set-public-path.js | 17 +++++++++---- src/topcoder-micro-frontends-earn-app.js | 7 ++++-- src/utils/auth.js | 5 +--- 13 files changed, 92 insertions(+), 50 deletions(-) diff --git a/config/default.js b/config/default.js index ea788ff..223302e 100644 --- a/config/default.js +++ b/config/default.js @@ -2,7 +2,12 @@ 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", + }, + URL: { + BASE: process.env.URL_BASE || "https://www.topcoder-dev.com", + }, }; diff --git a/config/dev.js b/config/dev.js index 7be35b6..bb29e80 100644 --- a/config/dev.js +++ b/config/dev.js @@ -1,2 +1,11 @@ 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": + "http://localhost:8010/gigs-app/topcoder-micro-frontends-gigs-app.js", + }, + URL: { + BASE: "http://localhost:3000", + }, }; diff --git a/src/App.jsx b/src/App.jsx index fd3326d..fc6f802 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,16 +6,16 @@ import { Router, useLocation, Redirect } from "@reach/router"; import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app"; import _ from "lodash"; import { usePreviousLocation } from "./utils/hooks"; -import Parcel from 'single-spa-react/parcel' -import { useSelector } from 'react-redux' -import ReactDOM from 'react-dom' +import Parcel from "single-spa-react/parcel"; +import { useSelector } from "react-redux"; +import ReactDOM from "react-dom"; import "./styles/main.scss"; -import Menu from './containers/Menu' +import Menu from "./containers/Menu"; const App = () => { - const menuVisible = useSelector(state => state.menu.show) + const menuVisible = useSelector((state) => state.menu.show); useLayoutEffect(() => { disableSidebarForRoute("/earn/*"); @@ -36,10 +36,25 @@ const App = () => { return ( <> - {menuVisible && ReactDOM.createPortal(, document.querySelector('#menu-id'))} + {menuVisible && + ReactDOM.createPortal(, document.querySelector("#menu-id"))} - System.import('@topcoder/micro-frontends-challenges-app')} /> - System.import('@topcoder/micro-frontends-gigs-app')} /> + + System.import("@topcoder/micro-frontends-challenges-app") + } + /> + System.import("@topcoder/micro-frontends-gigs-app")} + /> + System.import("@topcoder/micro-frontends-gigs-app")} + /> diff --git a/src/actions/menu.js b/src/actions/menu.js index abeae3a..f539050 100644 --- a/src/actions/menu.js +++ b/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, +}); diff --git a/src/components/FeedbackButton/index.jsx b/src/components/FeedbackButton/index.jsx index cfed5eb..8d39c43 100644 --- a/src/components/FeedbackButton/index.jsx +++ b/src/components/FeedbackButton/index.jsx @@ -1,8 +1,9 @@ import React from "react"; import "./styles.scss"; -const FeedbackButton = () => ( +const FeedbackButton = ({ className }) => ( { 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); diff --git a/src/constants/index.js b/src/constants/index.js index d7bd309..72c8acf 100644 --- a/src/constants/index.js +++ b/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", }, ], }, diff --git a/src/containers/Menu/index.jsx b/src/containers/Menu/index.jsx index c3b8145..aca7887 100644 --- a/src/containers/Menu/index.jsx +++ b/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,9 +37,6 @@ const MenuContainer = () => { selected={selectedMenuItemName} onSelect={(name) => { setSelectedMenuItemName(name); - if (name == "Gigs") { - window.location.href = `${process.env.URL.BASE}/gigs`; - } }} isLoggedIn={isLoggedIn} onUpdateMenu={(menu) => { @@ -47,7 +44,7 @@ const MenuContainer = () => { saveMenu(change); }} /> - ) -} + ); +}; export default MenuContainer; diff --git a/src/reducers/index.js b/src/reducers/index.js index eed8981..232f371 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,5 +1,5 @@ import { combineReducers } from "redux"; -import menu from './menu'; +import menu from "./menu"; export default combineReducers({ menu, diff --git a/src/reducers/menu.js b/src/reducers/menu.js index e29652b..8429a67 100644 --- a/src/reducers/menu.js +++ b/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 +); diff --git a/src/set-public-path.js b/src/set-public-path.js index 94f2e90..b6b71b7 100644 --- a/src/set-public-path.js +++ b/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 +); diff --git a/src/topcoder-micro-frontends-earn-app.js b/src/topcoder-micro-frontends-earn-app.js index c181da8..6ddf3ca 100644 --- a/src/topcoder-micro-frontends-earn-app.js +++ b/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 +); diff --git a/src/utils/auth.js b/src/utils/auth.js index 82d0b30..2380efc 100644 --- a/src/utils/auth.js +++ b/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(); From 714961ebf63f1102f3fba844d62f2167d6b107a5 Mon Sep 17 00:00:00 2001 From: LieutenantRoger Date: Sat, 2 Oct 2021 05:57:01 +0800 Subject: [PATCH 2/6] ci:deploying list --- .circleci/config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index 0cb6119..28b81fe 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -77,6 +77,7 @@ workflows: branches: only: - dev + - gigs-listing # Production builds are exectuted only on tagged commits to the # master branch. From d254f073d6f6467c4260f82242534bdfbca6e2a9 Mon Sep 17 00:00:00 2001 From: LieutenantRoger Date: Sat, 2 Oct 2021 10:34:46 +0800 Subject: [PATCH 3/6] ci:redeploying --- config/dev.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/config/dev.js b/config/dev.js index bb29e80..7be35b6 100644 --- a/config/dev.js +++ b/config/dev.js @@ -1,11 +1,2 @@ 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": - "http://localhost:8010/gigs-app/topcoder-micro-frontends-gigs-app.js", - }, - URL: { - BASE: "http://localhost:3000", - }, }; From 683d5ab26da13462bdc4c2b38305f99d6f8784f4 Mon Sep 17 00:00:00 2001 From: LieutenantRoger Date: Wed, 6 Oct 2021 20:19:29 +0800 Subject: [PATCH 4/6] expend by default --- src/utils/menu.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/menu.js b/src/utils/menu.js index 344e34b..40735cd 100644 --- a/src/utils/menu.js +++ b/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; } From badf451d7a6cba544fc9078e59083e055e3910f7 Mon Sep 17 00:00:00 2001 From: LieutenantRoger Date: Fri, 8 Oct 2021 21:21:58 +0800 Subject: [PATCH 5/6] restore redirection --- src/App.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index c6c8f34..c42341d 100644 --- a/src/App.jsx +++ b/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"; @@ -55,6 +55,7 @@ const App = () => { view="my-gigs" config={() => System.import("@topcoder/micro-frontends-gigs-app")} /> + ); From b93b42942eab1fba51b31a6e922f58fff41cda84 Mon Sep 17 00:00:00 2001 From: LieutenantRoger Date: Mon, 11 Oct 2021 15:09:20 +0800 Subject: [PATCH 6/6] clean up --- .circleci/config.yml | 1 - config/default.js | 5 +---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 28b81fe..0cb6119 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -77,7 +77,6 @@ workflows: branches: only: - dev - - gigs-listing # Production builds are exectuted only on tagged commits to the # master branch. diff --git a/config/default.js b/config/default.js index 223302e..b11adb6 100644 --- a/config/default.js +++ b/config/default.js @@ -6,8 +6,5 @@ module.exports = { "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", - }, - URL: { - BASE: process.env.URL_BASE || "https://www.topcoder-dev.com", - }, + } };