My Gigs UI Part 1

.circleci/config.yml

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

src/App.jsx

@@ -2,18 +2,20 @@
  * Main App component
  */
 import React, { useState, useLayoutEffect, useEffect, useRef } from "react";
-import { Router, useLocation, redirectTo } from "@reach/router";
+import { Router, useLocation, Redirect } from "@reach/router";
 import Challenges from "./containers/Challenges";
 import Filter from "./containers/Filter";
+import MyGigs from "./containers/MyGigs";
 import Menu from "./components/Menu";
 import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app";
-import Button from "./components/Button";
 import * as constants from "./constants";
 import actions from "./actions";
 import * as utils from "./utils";
 import store from "./store";
 import { initialChallengeFilter } from "./reducers/filter";
 import _ from "lodash";
+import { usePreviousLocation } from "./utils/hooks";
+import { useSelector } from "react-redux";
 
 import "react-date-range/dist/theme/default.css";
 import "react-date-range/dist/styles.css";
@@ -23,6 +25,7 @@ import "./styles/main.scss";
 
 const App = () => {
   const [selectedMenuItem, setSelectedMenuItem] = useState(null);
+  const isLoggedIn = useSelector((state) => state.lookup.isLoggedIn);
 
   useLayoutEffect(() => {
     disableSidebarForRoute("/earn/*");
@@ -31,42 +34,58 @@ const App = () => {
   const menu = (
     <Menu
       menu={constants.NAV_MENU}
-      icons={constants.NAV_MENU_ICONS}
       selected={selectedMenuItem}
       onSelect={(item) => {
         setSelectedMenuItem(item);
       }}
+      isLoggedIn={isLoggedIn}
     />
   );
 
   const location = useLocation();
+  const previousLocation = usePreviousLocation();
 
   const getChallengesDebounced = useRef(_.debounce((f) => f(), 500));
 
   useEffect(() => {
-    if (!location.search) {
-      store.dispatch(actions.challenges.getChallenges(initialChallengeFilter));
-      return;
-    }
+    store.dispatch(actions.lookup.checkIsLoggedIn());
+  }, []);
+
+  useEffect(() => {
+    if (location.pathname === "/earn/find/challenges") {
+      if (!location.search) {
+        store.dispatch(
+          actions.challenges.getChallenges(initialChallengeFilter)
+        );
+        return;
+      }
 
-    //if (location.pathname === "/earn/find/challenges") {
-    const params = utils.url.parseUrlQuery(location.search);
-    const toUpdate = utils.challenge.createChallengeFilter(params);
+      const params = utils.url.parseUrlQuery(location.search);
+      const toUpdate = utils.challenge.createChallengeFilter(params);
 
-    if (!toUpdate.types) toUpdate.types = [];
-    if (!toUpdate.tracks) toUpdate.tracks = [];
-    if (!toUpdate.bucket) toUpdate.bucket = "";
+      if (!toUpdate.types) toUpdate.types = [];
+      if (!toUpdate.tracks) toUpdate.tracks = [];
+      if (!toUpdate.bucket) toUpdate.bucket = "";
 
-    const updatedFilter = { ...initialChallengeFilter, ...toUpdate };
-    const currentFilter = store.getState().filter.challenge;
-    const diff = !_.isEqual(updatedFilter, currentFilter);
-    if (diff) {
-      store.dispatch(actions.filter.updateFilter(updatedFilter));
+      const updatedFilter = { ...initialChallengeFilter, ...toUpdate };
+      const currentFilter = store.getState().filter.challenge;
+      const diff = !_.isEqual(updatedFilter, currentFilter);
+      if (diff) {
+        store.dispatch(actions.filter.updateFilter(updatedFilter));
+      }
+      getChallengesDebounced.current(() =>
+        store.dispatch(actions.challenges.getChallenges(updatedFilter))
+      );
+    }
+  }, [location]);
+
+  const varsRef = useRef();
+  varsRef.current = { previousLocation };
+
+  useEffect(() => {
+    if (location.pathname !== varsRef.current.previousLocation.pathname) {
+      window.scrollTo(0, 0);
     }
-    getChallengesDebounced.current(() =>
-      store.dispatch(actions.challenges.getChallenges(updatedFilter))
-    );
-    //}
   }, [location]);
 
   useEffect(() => {
@@ -82,29 +101,34 @@ const App = () => {
   }, [location]);
 
   return (
-    <div className="layout">
-      <aside className="sidebar">
-        <div className="sidebar-content">
-          {menu}
-          <hr />
-          <Filter />
-        </div>
-        <div className="sidebar-footer">
-          <a
-            className="button button-primary"
-            href="https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new?assignees=&labels=&template=bug_report.md&title="
-            target="_blank"
-          >
-            GIVE APPLICATION FEEDBACK
-          </a>
+    <>
+      <div className="layout">
+        <aside className="sidebar">
+          <div className="sidebar-content">
+            {menu}
+            <hr />
+            <Filter />
+          </div>
+          <div className="sidebar-footer">
+            <a
+              className="button button-primary"
+              href="https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new?assignees=&labels=&template=bug_report.md&title="
+              target="_blank"
+            >
+              GIVE APPLICATION FEEDBACK
+            </a>
+          </div>
+        </aside>
+        <div className="content">
+          <Router>
+            <Challenges path="/earn/find/challenges" />
+            <MyGigs path="/earn/my-gigs" />
+            <Redirect from="/earn/*" to="/earn/find/challenges" noThrow />
+          </Router>
         </div>
-      </aside>
-      <div className="content">
-        <Router>
-          <Challenges path="/earn/*" />
-        </Router>
       </div>
-    </div>
+      <div id="tooltips-container-id" />
+    </>
   );
 };
 

src/actions/index.js

@@ -2,10 +2,12 @@ import challenges from "./challenges";
 import filter from "./filter";
 import lookup from "./lookup";
 import init from "./initApp";
+import myGigs from "./myGigs";
 
 export default {
   challenges,
   filter,
   lookup,
   init,
+  myGigs,
 };

src/actions/lookup.js

@@ -9,12 +9,17 @@ async function getCommunityList() {
   return service.getCommunityList();
 }
 
-async function isLoggedIn() {
-  return service.isLoggedIn();
+async function checkIsLoggedIn() {
+  return service.checkIsLoggedIn();
+}
+
+async function getGigPhases() {
+  return service.getGigPhases();
 }
 
 export default createActions({
   GET_TAGS: getTags,
   GET_COMMUNITY_LIST: getCommunityList,
-  IS_LOGGED_IN: isLoggedIn,
+  CHECK_IS_LOGGED_IN: checkIsLoggedIn,
+  GET_GIG_PHASES: getGigPhases,
 });

src/actions/myGigs.js

@@ -0,0 +1,15 @@
+import { createActions } from "redux-actions";
+import service from "../services/myGigs";
+
+async function getMyGigs() {
+  return service.getMyGigs();
+}
+
+async function loadMoreMyGigs() {
+  return service.loadMoreMyGigs();
+}
+
+export default createActions({
+  GET_MY_GIGS: getMyGigs,
+  LOAD_MORE_MY_GIGS: loadMoreMyGigs,
+});