Use style with status chips.

NIAEFEUP · Jul 15, 2023 · b312a9c · b312a9c
1 parent 1b59d8e
commit b312a9c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js
@@ -27,7 +27,6 @@ const generateRow = ({
             <OfferTitle
                 title={title}
                 getOfferVisibility={getOfferVisibility}
-                setOfferVisibility={setOfferVisibility}
                 offerId={offerId}
             />), align: "left", linkDestination: `/offer/${_id}` },
         publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") },

diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js
@@ -2,19 +2,25 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Chip, makeStyles } from "@material-ui/core";
 
-const statusChips = {
-    hidden: <Chip label="Hidden" size="small" data-testid="HiddenChip" style={{ backgroundColor: "#90A4AE" }} />,
-    blocked: <Chip label="Blocked" size="small" data-testid="BlockedChip" style={{ backgroundColor: "#DC4338" }} />,
-    archived: <Chip label="Archived" size="small"  data-testid="ArchivedChip" style={{ backgroundColor: "#56A8D6" }} />,
-};
-
 const useStyles = makeStyles(() => ({
+    hiddenChip: {
+        backgroundColor: "#90A4AE",
+        marginRight: "5px",
+    },
+    blockedChip: {
+        backgroundColor: "#DC4338",
+        marginRight: "5px",
+    },
+    archivedChip: {
+        backgroundColor: "#56A8D6",
+        marginRight: "5px",
+    },
     chips: {
         position: "absolute",
     },
 }));
 
-const OfferTitle = ({ title, getOfferVisibility, setOfferVisibility, offerId }) => {
+const OfferTitle = ({ title, getOfferVisibility, offerId }) => {
     const [chips, setChips] = useState([]);
     const isHidden = getOfferVisibility(offerId)?.isHidden;
     const isBlocked = getOfferVisibility(offerId)?.isDisabled;
@@ -23,15 +29,21 @@ const OfferTitle = ({ title, getOfferVisibility, setOfferVisibility, offerId })
     const classes = useStyles();
 
     useEffect(() => {
+        const statusChips = {
+            hidden: <Chip size="small" label="Hidden" data-testid="HiddenChip" className={classes.hiddenChip} />,
+            blocked: <Chip size="small" label="Blocked" data-testid="BlockedChip" className={classes.blockedChip} />,
+            archived: <Chip size="small" label="Archived" data-testid="ArchivedChip" className={classes.archivedChip} />,
+        };
+
         const tempChips = [];
         if (isHidden)
-            tempChips.push(statusChips.hidden, <span>&nbsp;</span>);
+            tempChips.push(statusChips.hidden);
         if (isBlocked)
-            tempChips.push(statusChips.blocked, <span>&nbsp;</span>);
+            tempChips.push(statusChips.blocked);
         if (isArchived)
-            tempChips.push(statusChips.archived, <span>&nbsp;</span>);
+            tempChips.push(statusChips.archived);
         setChips(tempChips);
-    }, [isArchived, isBlocked, isHidden, setOfferVisibility]);
+    }, [classes, isArchived, isBlocked, isHidden]);
 
     return (
         <>
@@ -46,7 +58,6 @@ const OfferTitle = ({ title, getOfferVisibility, setOfferVisibility, offerId })
 OfferTitle.propTypes = {
     title: PropTypes.string.isRequired,
     getOfferVisibility: PropTypes.func.isRequired,
-    setOfferVisibility: PropTypes.func.isRequired,
     offerId: PropTypes.number.isRequired,
 };