fix empty label

Author: dengjun

src/constants/index.js

@@ -345,3 +345,6 @@ export const GIG_STATUS = {
   UNAVAILABLE: "Unavailable",
   PLACED: "Placed",
 };
+
+export const EMPTY_GIGS_TEXT =
+  "Looks like you haven't applied to any gig opportunities yet.";

src/containers/MyGigs/index.jsx

@@ -5,6 +5,7 @@ import Modal from "../../components/Modal";
 import Button from "../../components/Button";
 import JobListing from "./JobListing";
 import actions from "../../actions";
+import { EMPTY_GIGS_TEXT } from "../../constants";
 
 import UpdateGigProfile from "./modals/UpdateGigProfile";
 import UpdateSuccess from "./modals/UpdateSuccess";
@@ -50,20 +51,25 @@ const MyGigs = ({
           <Button
             isPrimary
             size="lg"
-            disabled="true"
+            disabled={true}
             onClick={() => {
               setOpenUpdateProfile(true);
             }}
           >
             UPDATE GIG WORK PROFILE
           </Button>
         </h1>
-        <JobListing
-          jobs={myGigs}
-          loadMore={loadMore}
-          total={total}
-          numLoaded={numLoaded}
-        />
+        {myGigs && myGigs.length == 0 && (
+          <h3 styleName="empty-label">{EMPTY_GIGS_TEXT}</h3>
+        )}
+        {myGigs && myGigs.length > 0 && (
+          <JobListing
+            jobs={myGigs}
+            loadMore={loadMore}
+            total={total}
+            numLoaded={numLoaded}
+          />
+        )}
       </div>
       <Modal open={openUpdateProfile}>
         <UpdateGigProfile

src/containers/MyGigs/styles.scss

@@ -20,3 +20,8 @@
     margin-left: auto;
   }
 }
+
+.empty-label {
+  text-align: center;
+  margin-top: 100px;
+}

src/reducers/lookup.js

@@ -23,7 +23,6 @@ function onCheckIsLoggedInDone(state, { payload }) {
   return { ...state, isLoggedIn: payload };
 }
 
-
 function onGetGigStatusesDone(state, { payload }) {
   return { ...state, gigStatuses: payload };
 }

src/reducers/myGigs.js

@@ -4,7 +4,7 @@ import { handleActions } from "redux-actions";
 const defaultState = {
   loadingMyGigs: false,
   loadingMyGigsError: null,
-  myGigs: [],
+  myGigs: null,
   total: 0,
   numLoaded: 0,
   loadingMore: false,
@@ -37,7 +37,7 @@ function onGetMyGigsFailure(state, { payload }) {
     ...state,
     loadingMyGigs: false,
     loadingMyGigsError: payload,
-    myGigs: [],
+    myGigs: null,
     total: 0,
     numLoaded: 0,
   };