add badges

Author: LieutenantRoger

src/containers/MyGigsFilter/GigsFilter/index.jsx

@@ -1,17 +1,40 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import PT from "prop-types";
 import _ from "lodash";
 import RadioButton from "../../../components/RadioButton";
 import * as utils from "../../../utils";
 
 import "./styles.scss";
 
-const GigsFilter = ({ gigStatus, gigsStatuses, updateGigFilter }) => {
+const GigsFilter = ({
+  gigStatus,
+  gigsStatuses,
+  updateGigFilter,
+  openJobsCount,
+}) => {
   const bucketOptions = utils.createRadioOptions(gigsStatuses, gigStatus);
 
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const openJobsElement = ref.current.children[0].children[1];
+    const badgeElement = utils.icon.createBadgeElement(
+      openJobsElement,
+      `${openJobsCount}`
+    );
+
+    return () => {
+      badgeElement.parentElement.removeChild(badgeElement);
+    };
+  }, [openJobsCount]);
+
   return (
     <div styleName="filter">
-      <div styleName="buckets vertical-list">
+      <div styleName="buckets vertical-list" ref={ref}>
         <RadioButton
           options={bucketOptions}
           onChange={(newBucketOptions) => {
@@ -31,6 +54,7 @@ GigsFilter.propTypes = {
   gigStatus: PT.string,
   gigsStatuses: PT.arrayOf(PT.string),
   updateGigFilter: PT.func,
+  openJobsCount: PT.number,
 };
 
 export default GigsFilter;

src/containers/MyGigsFilter/GigsFilter/styles.scss

@@ -25,4 +25,19 @@ $filter-padding-y: 3 * $base-unit;
       margin: $base-unit 0;
     }
   }
+  :global {
+    .count-badge {
+      display: inline-block;
+      margin: -2px 0 0 $base-unit;
+      padding: 2px 5px 0;
+      font-weight: bold;
+      font-size: 11px;
+      line-height: 14px;
+      text-align: center;
+      color: white;
+      vertical-align: middle;
+      background: #EF476F;
+      border-radius: 13px;
+    }
+  }
 }

src/containers/MyGigsFilter/index.jsx

@@ -5,8 +5,14 @@ import { connect } from "react-redux";
 import GigsFilter from "./GigsFilter";
 import actions from "../../actions";
 import { updateQuery } from "../../utils/url";
+import * as constants from "../../constants";
 
-const MyGigsFilter = ({ gigStatus, gigsStatuses, updateGigFilter }) => {
+const MyGigsFilter = ({
+  gigStatus,
+  gigsStatuses,
+  updateGigFilter,
+  openJobsCount,
+}) => {
   const location = useLocation();
   const propsRef = useRef(null);
   propsRef.current = { location };
@@ -16,6 +22,7 @@ const MyGigsFilter = ({ gigStatus, gigsStatuses, updateGigFilter }) => {
       <GigsFilter
         gigStatus={gigStatus}
         gigsStatuses={gigsStatuses}
+        openJobsCount={openJobsCount}
         updateGigFilter={(gigFilterChanged) => {
           updateGigFilter(gigFilterChanged);
           updateQuery(gigFilterChanged);
@@ -31,11 +38,13 @@ MyGigsFilter.propTypes = {
   gigStatus: PT.string,
   gigsStatuses: PT.arrayOf(PT.string),
   updateGigFilter: PT.func,
+  openJobsCount: PT.number,
 };
 
 const mapStateToProps = (state) => ({
   state: state,
   gigStatus: state.filter.gig.status,
+  openJobsCount: state.myGigs[constants.GIGS_FILTER_STATUSES.OPEN_JOBS].total,
   gigsStatuses: state.lookup.gigsStatuses,
 });