From 42d5f5891b24e397ed692aee2f06d4aa32febf23 Mon Sep 17 00:00:00 2001 From: processing Date: Wed, 22 Mar 2023 13:53:19 +0000 Subject: [PATCH 01/19] Added column to offer management page. --- .../Company/Offers/Manage/CompanyOffersManagementSchema.js | 1 + .../Company/Offers/Manage/CompanyOffersManagementWidget.js | 3 ++- src/pages/CompanyOffersManagementPage.js | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js b/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js index c8913fc7..dbbedb10 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js @@ -3,5 +3,6 @@ export const columns = { publishStartDate: { align: "right", disablePadding: false, label: "Publish Date" }, publishEndDate: { align: "right", disablePadding: false, label: "Publish End Date" }, location: { align: "right", disablePadding: false, label: "Location" }, + status: { align: "right", disablePadding: false, label: "Status" }, actions: { align: "right", disablePadding: false, label: "", disableSorting: true }, }; diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 2a150eba..dc8e910f 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -1,4 +1,4 @@ -import { Divider, Grid, IconButton, makeStyles, Tooltip, Typography } from "@material-ui/core"; +import { Chip, Divider, Grid, IconButton, makeStyles, Tooltip, Typography } from "@material-ui/core"; import { format, parseISO } from "date-fns"; import React, { useState, useEffect } from "react"; import { fetchCompanyOffers } from "../../../../services/companyOffersService"; @@ -25,6 +25,7 @@ const generateRow = ({ publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") }, publishEndDate: { value: format(parseISO(publishEndDate), "yyyy-MM-dd") }, location: { value: location }, + status: { value: }, }, payload: { offer: new Offer({ diff --git a/src/pages/CompanyOffersManagementPage.js b/src/pages/CompanyOffersManagementPage.js index 87ed5b01..160857be 100644 --- a/src/pages/CompanyOffersManagementPage.js +++ b/src/pages/CompanyOffersManagementPage.js @@ -5,6 +5,7 @@ import { useMobile } from "../utils/media-queries"; const useStyles = (isMobile) => makeStyles((theme) => ({ content: { + width: "1100px", padding: isMobile ? theme.spacing(2, 2) : theme.spacing(3, 9), }, })); From 89d98fb3ec00fa5fa1bb635ba3295cee1cb4e3b8 Mon Sep 17 00:00:00 2001 From: processing Date: Wed, 22 Mar 2023 15:47:48 +0000 Subject: [PATCH 02/19] Added status chips to offer management page. --- .../Manage/CompanyOffersManagementWidget.js | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index dc8e910f..91dd09d1 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -1,4 +1,4 @@ -import { Chip, Divider, Grid, IconButton, makeStyles, Tooltip, Typography } from "@material-ui/core"; +import { Divider, Grid, IconButton, makeStyles, Text, Tooltip, Typography, Chip } from "@material-ui/core"; import { format, parseISO } from "date-fns"; import React, { useState, useEffect } from "react"; import { fetchCompanyOffers } from "../../../../services/companyOffersService"; @@ -17,15 +17,37 @@ import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; +const generateStatusChips = (isHidden, isArchived) => { + const chips = []; + if (isHidden) + chips.push(); + if (isArchived) + chips.push(); + + if (chips.length === 0) + return -; + return ( + <> + {chips[0]} + {chips.splice(1).map((chip) => ( + <> +   + {chip} + + ))} + + ); +}; + const generateRow = ({ title, location, publishDate, publishEndDate, - ownerName, _id, ...args }) => ({ + isHidden, isArchived, ownerName, _id, ...args }) => ({ fields: { title: { value: title, align: "left", linkDestination: `/offer/${_id}` }, publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") }, publishEndDate: { value: format(parseISO(publishEndDate), "yyyy-MM-dd") }, location: { value: location }, - status: { value: }, + status: { value: generateStatusChips(isHidden, isArchived) }, }, payload: { offer: new Offer({ From 87bf2ff3df39dc079fef0291993ff9c2befc89e4 Mon Sep 17 00:00:00 2001 From: processing Date: Tue, 28 Mar 2023 14:03:13 +0100 Subject: [PATCH 03/19] Fixed status column with no content. --- .../Company/Offers/Manage/CompanyOffersManagementWidget.js | 4 ++-- src/pages/CompanyOffersManagementPage.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 91dd09d1..c266d5fb 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -1,4 +1,4 @@ -import { Divider, Grid, IconButton, makeStyles, Text, Tooltip, Typography, Chip } from "@material-ui/core"; +import { Divider, Grid, IconButton, makeStyles, Tooltip, Typography, Chip } from "@material-ui/core"; import { format, parseISO } from "date-fns"; import React, { useState, useEffect } from "react"; import { fetchCompanyOffers } from "../../../../services/companyOffersService"; @@ -25,7 +25,7 @@ const generateStatusChips = (isHidden, isArchived) => { chips.push(); if (chips.length === 0) - return -; + return ---; return ( <> {chips[0]} diff --git a/src/pages/CompanyOffersManagementPage.js b/src/pages/CompanyOffersManagementPage.js index 160857be..87ed5b01 100644 --- a/src/pages/CompanyOffersManagementPage.js +++ b/src/pages/CompanyOffersManagementPage.js @@ -5,7 +5,6 @@ import { useMobile } from "../utils/media-queries"; const useStyles = (isMobile) => makeStyles((theme) => ({ content: { - width: "1100px", padding: isMobile ? theme.spacing(2, 2) : theme.spacing(3, 9), }, })); From f16116a603b3bf8c5cb3d85c2eb7b8b795236d6f Mon Sep 17 00:00:00 2001 From: processing Date: Tue, 4 Apr 2023 11:27:25 +0100 Subject: [PATCH 04/19] Placed chips below title and removed status column. --- .../Manage/CompanyOffersManagementSchema.js | 1 - .../Manage/CompanyOffersManagementWidget.js | 28 +++++++++---------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js b/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js index dbbedb10..c8913fc7 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementSchema.js @@ -3,6 +3,5 @@ export const columns = { publishStartDate: { align: "right", disablePadding: false, label: "Publish Date" }, publishEndDate: { align: "right", disablePadding: false, label: "Publish End Date" }, location: { align: "right", disablePadding: false, label: "Location" }, - status: { align: "right", disablePadding: false, label: "Status" }, actions: { align: "right", disablePadding: false, label: "", disableSorting: true }, }; diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index c266d5fb..774ccc5a 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -17,24 +17,24 @@ import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; -const generateStatusChips = (isHidden, isArchived) => { +const generateTitle = (title, isHidden, isArchived) => { const chips = []; if (isHidden) - chips.push(); + chips.push(); if (isArchived) - chips.push(); + chips.push(); - if (chips.length === 0) - return ---; return ( <> - {chips[0]} - {chips.splice(1).map((chip) => ( - <> -   - {chip} - - ))} + {title} +
+ {chips.reduce((res, chip, index, chips) => { + res.push(chip); + if (index !== chips.length - 1) + res.push( ); + return res; + }, [])} +
); }; @@ -43,11 +43,11 @@ const generateRow = ({ title, location, publishDate, publishEndDate, isHidden, isArchived, ownerName, _id, ...args }) => ({ fields: { - title: { value: title, align: "left", linkDestination: `/offer/${_id}` }, + title: { value: generateTitle(title, isHidden, isArchived), + align: "left", linkDestination: `/offer/${_id}` }, publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") }, publishEndDate: { value: format(parseISO(publishEndDate), "yyyy-MM-dd") }, location: { value: location }, - status: { value: generateStatusChips(isHidden, isArchived) }, }, payload: { offer: new Offer({ From 2dce3bee619215dfe0daf6143369e92213611f7e Mon Sep 17 00:00:00 2001 From: processing Date: Tue, 4 Apr 2023 12:03:01 +0100 Subject: [PATCH 05/19] Fixed spacing of offer management rows. --- .../Offers/Manage/CompanyOffersManagementWidget.js | 6 ++++-- src/utils/Table/utils.js | 12 +++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 774ccc5a..c9d48f23 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -55,6 +55,7 @@ const generateRow = ({ ownerName, _id, ...args, }), }, + extended: isHidden || isArchived, }); const sorters = { @@ -117,13 +118,14 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { const RowContent = ({ rowKey, labelId }) => { const fields = offers[rowKey].fields; + const extended = offers[rowKey].extended; return ( <> {!isMobile ? Object.entries(fields).map(([fieldId, fieldOptions], i) => ( - GenerateTableCellFromField(i, fieldId, fieldOptions, labelId) + GenerateTableCellFromField(i, fieldId, fieldOptions, labelId, extended) )) : Object.entries(fields).filter(([fieldId, _]) => mobileCols.includes(fieldId)).map(([fieldId, fieldOptions], i) => ( - GenerateTableCellFromField(i, fieldId, fieldOptions, labelId) + GenerateTableCellFromField(i, fieldId, fieldOptions, labelId, extended) ))} ); diff --git a/src/utils/Table/utils.js b/src/utils/Table/utils.js index 54ec820b..206b34e8 100644 --- a/src/utils/Table/utils.js +++ b/src/utils/Table/utils.js @@ -21,7 +21,7 @@ const useStyles = makeStyles({ }, }); -export const GenerateTableCellFromField = (id, fieldId, fieldOptions, labelId) => { +export const GenerateTableCellFromField = (id, fieldId, fieldOptions, labelId, extended = false) => { const classes = useStyles(); const linkDestination = fieldOptions?.linkDestination; @@ -34,10 +34,12 @@ export const GenerateTableCellFromField = (id, fieldId, fieldOptions, labelId) = id={id === 0 ? `${labelId}-label` : undefined} align={fieldOptions.align || "right"} > - {fieldOptions?.linkDestination ? - - {fieldOptions?.value} - : fieldOptions.value} +
+ {fieldOptions?.linkDestination ? + + {fieldOptions?.value} + : fieldOptions.value} +
); } From b3a29fbe616d3dcb33cd03ca52bde96bcd49bfb6 Mon Sep 17 00:00:00 2001 From: processing Date: Tue, 4 Apr 2023 12:52:57 +0100 Subject: [PATCH 06/19] Added "blocked" chip. --- .../Offers/Manage/CompanyOffersManagementWidget.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index c9d48f23..b96e9235 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -16,11 +16,14 @@ import { connect } from "react-redux"; import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; +import { OfferConstants } from "../../../Offers/Form/OfferUtils"; -const generateTitle = (title, isHidden, isArchived) => { +const generateTitle = (title, isHidden, isArchived, hiddenReason) => { const chips = []; - if (isHidden) + if (isHidden && hiddenReason === OfferConstants.COMPANY_REQUEST) chips.push(); + if (isHidden && hiddenReason === OfferConstants.ADMIN_REQUEST) + chips.push(); if (isArchived) chips.push(); @@ -40,10 +43,10 @@ const generateTitle = (title, isHidden, isArchived) => { }; const generateRow = ({ - title, location, publishDate, publishEndDate, - isHidden, isArchived, ownerName, _id, ...args }) => ({ + title, location, publishDate, publishEndDate, isHidden, + isArchived, hiddenReason, ownerName, _id, ...args }) => ({ fields: { - title: { value: generateTitle(title, isHidden, isArchived), + title: { value: generateTitle(title, isHidden, isArchived, hiddenReason), align: "left", linkDestination: `/offer/${_id}` }, publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") }, publishEndDate: { value: format(parseISO(publishEndDate), "yyyy-MM-dd") }, From d4931cc9821c46cf3a1d334d933ef7d246427d4d Mon Sep 17 00:00:00 2001 From: processing Date: Mon, 10 Apr 2023 10:55:38 +0100 Subject: [PATCH 07/19] Added "Active" chip. --- .../Company/Offers/Manage/CompanyOffersManagementWidget.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index b96e9235..0c7a8315 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -20,6 +20,8 @@ import { OfferConstants } from "../../../Offers/Form/OfferUtils"; const generateTitle = (title, isHidden, isArchived, hiddenReason) => { const chips = []; + if (!isHidden && !isArchived) + chips.push(); if (isHidden && hiddenReason === OfferConstants.COMPANY_REQUEST) chips.push(); if (isHidden && hiddenReason === OfferConstants.ADMIN_REQUEST) @@ -58,7 +60,6 @@ const generateRow = ({ ownerName, _id, ...args, }), }, - extended: isHidden || isArchived, }); const sorters = { @@ -126,9 +127,9 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { return ( <> {!isMobile ? Object.entries(fields).map(([fieldId, fieldOptions], i) => ( - GenerateTableCellFromField(i, fieldId, fieldOptions, labelId, extended) + GenerateTableCellFromField(i, fieldId, fieldOptions, labelId, true) )) : Object.entries(fields).filter(([fieldId, _]) => mobileCols.includes(fieldId)).map(([fieldId, fieldOptions], i) => ( - GenerateTableCellFromField(i, fieldId, fieldOptions, labelId, extended) + GenerateTableCellFromField(i, fieldId, fieldOptions, labelId, true) ))} ); From d401a5751dffb60867d6f1d3a7e5f1e8e3f266b3 Mon Sep 17 00:00:00 2001 From: processing Date: Mon, 10 Apr 2023 11:09:21 +0100 Subject: [PATCH 08/19] Gave colors to status chips. --- .../Offers/Manage/CompanyOffersManagementWidget.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 0c7a8315..39d9e227 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -21,13 +21,13 @@ import { OfferConstants } from "../../../Offers/Form/OfferUtils"; const generateTitle = (title, isHidden, isArchived, hiddenReason) => { const chips = []; if (!isHidden && !isArchived) - chips.push(); + chips.push(); if (isHidden && hiddenReason === OfferConstants.COMPANY_REQUEST) - chips.push(); + chips.push(); if (isHidden && hiddenReason === OfferConstants.ADMIN_REQUEST) - chips.push(); + chips.push(); if (isArchived) - chips.push(); + chips.push(); return ( <> @@ -122,7 +122,6 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { const RowContent = ({ rowKey, labelId }) => { const fields = offers[rowKey].fields; - const extended = offers[rowKey].extended; return ( <> From 3ec5a2a92af115e4f94e7ce7e7ba1e7f966f6983 Mon Sep 17 00:00:00 2001 From: processing Date: Mon, 10 Apr 2023 11:20:00 +0100 Subject: [PATCH 09/19] Transferred status chips to their own file. --- .../Offers/Manage/CompanyOffersManagementWidget.js | 11 ++++++----- .../Company/Offers/Manage/CompanyOffersStatusChips.js | 9 +++++++++ 2 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/components/Company/Offers/Manage/CompanyOffersStatusChips.js diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 39d9e227..e91e96b9 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -1,4 +1,4 @@ -import { Divider, Grid, IconButton, makeStyles, Tooltip, Typography, Chip } from "@material-ui/core"; +import { Divider, Grid, IconButton, makeStyles, Tooltip, Typography } from "@material-ui/core"; import { format, parseISO } from "date-fns"; import React, { useState, useEffect } from "react"; import { fetchCompanyOffers } from "../../../../services/companyOffersService"; @@ -17,17 +17,18 @@ import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; import { OfferConstants } from "../../../Offers/Form/OfferUtils"; +import { statusChips } from "./CompanyOffersStatusChips"; const generateTitle = (title, isHidden, isArchived, hiddenReason) => { const chips = []; if (!isHidden && !isArchived) - chips.push(); + chips.push(statusChips.active); if (isHidden && hiddenReason === OfferConstants.COMPANY_REQUEST) - chips.push(); + chips.push(statusChips.hidden); if (isHidden && hiddenReason === OfferConstants.ADMIN_REQUEST) - chips.push(); + chips.push(statusChips.blocked); if (isArchived) - chips.push(); + chips.push(statusChips.archived); return ( <> diff --git a/src/components/Company/Offers/Manage/CompanyOffersStatusChips.js b/src/components/Company/Offers/Manage/CompanyOffersStatusChips.js new file mode 100644 index 00000000..4b0ab101 --- /dev/null +++ b/src/components/Company/Offers/Manage/CompanyOffersStatusChips.js @@ -0,0 +1,9 @@ +import React from "react"; +import { Chip } from "@material-ui/core"; + +export const statusChips = { + active: , + hidden: , + blocked: , + archived: , +}; From 7606d4c86d94a27612e509314483a14ff3869e24 Mon Sep 17 00:00:00 2001 From: processing Date: Mon, 10 Apr 2023 12:03:00 +0100 Subject: [PATCH 10/19] Fixed visibility actions bug. --- .../Company/Offers/Manage/CompanyOffersManagementWidget.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index e91e96b9..bb3001ee 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -57,8 +57,8 @@ const generateRow = ({ }, payload: { offer: new Offer({ - title, location, publishDate, publishEndDate, - ownerName, _id, ...args, + title, location, publishDate, publishEndDate, isHidden, + isArchived, hiddenReason, ownerName, _id, ...args, }), }, }); From 516c01e37fa57a3bfa91f175c3ad40cc27f985a5 Mon Sep 17 00:00:00 2001 From: processing Date: Wed, 26 Apr 2023 14:48:17 +0100 Subject: [PATCH 11/19] Made visibility button work with status chips. --- .../Offers/Manage/CompanyOffersActions.js | 6 +- .../Manage/CompanyOffersManagementWidget.js | 69 +++++++++---------- .../Offers/Manage/CompanyOffersStatusChips.js | 9 --- .../Offers/Manage/CompanyOffersTitle.js | 48 +++++++++++++ .../Manage/CompanyOffersVisibilityActions.js | 38 ++++------ 5 files changed, 99 insertions(+), 71 deletions(-) delete mode 100644 src/components/Company/Offers/Manage/CompanyOffersStatusChips.js create mode 100644 src/components/Company/Offers/Manage/CompanyOffersTitle.js diff --git a/src/components/Company/Offers/Manage/CompanyOffersActions.js b/src/components/Company/Offers/Manage/CompanyOffersActions.js index b5ff2131..2b42d5f0 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersActions.js @@ -26,7 +26,11 @@ const CompanyOffersActions = ({ { !isMobile ? ( <> - + diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index bb3001ee..cd70fb00 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -1,6 +1,6 @@ import { Divider, Grid, IconButton, makeStyles, Tooltip, Typography } from "@material-ui/core"; import { format, parseISO } from "date-fns"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { fetchCompanyOffers } from "../../../../services/companyOffersService"; import ControlledSortableSelectableTable from "../../../../utils/Table/ControlledSortableSelectableTable"; import FilterableTable from "../../../../utils/Table/FilterableTable"; @@ -16,41 +16,18 @@ import { connect } from "react-redux"; import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; +import OfferTitle from "./CompanyOffersTitle"; import { OfferConstants } from "../../../Offers/Form/OfferUtils"; -import { statusChips } from "./CompanyOffersStatusChips"; - -const generateTitle = (title, isHidden, isArchived, hiddenReason) => { - const chips = []; - if (!isHidden && !isArchived) - chips.push(statusChips.active); - if (isHidden && hiddenReason === OfferConstants.COMPANY_REQUEST) - chips.push(statusChips.hidden); - if (isHidden && hiddenReason === OfferConstants.ADMIN_REQUEST) - chips.push(statusChips.blocked); - if (isArchived) - chips.push(statusChips.archived); - - return ( - <> - {title} -
- {chips.reduce((res, chip, index, chips) => { - res.push(chip); - if (index !== chips.length - 1) - res.push( ); - return res; - }, [])} -
- - ); -}; const generateRow = ({ - title, location, publishDate, publishEndDate, isHidden, - isArchived, hiddenReason, ownerName, _id, ...args }) => ({ + title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason, + ownerName, _id, ...args }, offerVisibilityState, resetOfferVisibilityState) => ({ fields: { - title: { value: generateTitle(title, isHidden, isArchived, hiddenReason), - align: "left", linkDestination: `/offer/${_id}` }, + title: { value: ( + ), align: "left", linkDestination: `/offer/${_id}` }, publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") }, publishEndDate: { value: format(parseISO(publishEndDate), "yyyy-MM-dd") }, location: { value: location }, @@ -60,6 +37,8 @@ const generateRow = ({ title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason, ownerName, _id, ...args, }), + offerVisibilityState: offerVisibilityState, + resetOfferVisibilityState: resetOfferVisibilityState, }, }); @@ -98,14 +77,22 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { const [error, setError] = useState(null); const mobileCols = ["title", "publishStartDate", "actions"]; - useEffect(() => { + const resetOffers = useCallback(() => { if (isLoggedIn) fetchCompanyOffers(data.company._id).then((offers) => { if (Array.isArray(offers)) { - const fetchedRows = offers.reduce((rows, row) => { - rows[row._id] = generateRow(row); + const visibilityStates = offers.map((offer) => ({ + state: { + isHidden: offer.isHidden && offer.hiddenReason === OfferConstants.COMPANY_REQUEST, + isDisabled: offer.isHidden && offer.hiddenReason === OfferConstants.ADMIN_REQUEST, + isVisible: !offer.isHidden && !offer.isArchived, + isBlocked: offer.isHidden && offer.hiddenReason === OfferConstants.COMPANY_BLOCKED, + isArchived: offer.isArchived, + }, + })); + const fetchedRows = offers.reduce((rows, row, i) => { + rows[row._id] = generateRow(row, visibilityStates[i]?.state, resetOffers); return rows; }, {}); - setOffers(fetchedRows); } else { setOffers({}); @@ -121,6 +108,10 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { }); }, [addSnackbar, data.company._id, isLoggedIn]); + useEffect(() => { + resetOffers(); + }, [addSnackbar, data.company._id, isLoggedIn, resetOffers]); + const RowContent = ({ rowKey, labelId }) => { const fields = offers[rowKey].fields; @@ -172,7 +163,11 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { - + diff --git a/src/components/Company/Offers/Manage/CompanyOffersStatusChips.js b/src/components/Company/Offers/Manage/CompanyOffersStatusChips.js deleted file mode 100644 index 4b0ab101..00000000 --- a/src/components/Company/Offers/Manage/CompanyOffersStatusChips.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import { Chip } from "@material-ui/core"; - -export const statusChips = { - active: , - hidden: , - blocked: , - archived: , -}; diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js new file mode 100644 index 00000000..c50ab033 --- /dev/null +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; +import { Chip } from "@material-ui/core"; + +export const statusChips = { + active: , + hidden: , + blocked: , + archived: , +}; + +const OfferTitle = ({ title, offerVisibilityState }) => { + const [chips, setChips] = useState([]); + + useEffect(() => { + const tempChips = []; + if (offerVisibilityState?.isVisible) + tempChips.push(statusChips.active); + if (offerVisibilityState?.isHidden) + tempChips.push(statusChips.hidden); + if (offerVisibilityState?.isDisabled) + tempChips.push(statusChips.blocked); + if (offerVisibilityState?.isArchived) + tempChips.push(statusChips.archived); + setChips(tempChips); + }, [offerVisibilityState]); + + return ( + <> + {title} +
+ {chips.reduce((res, chip, index, chips) => { + res.push(chip); + if (index !== chips.length - 1) + res.push( ); + return res; + }, [])} +
+ + ); +}; + +OfferTitle.propTypes = { + title: PropTypes.string.isRequired, + offerVisibilityState: PropTypes.object, +}; + +export default OfferTitle; diff --git a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js index ae1fa580..454f42d2 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js @@ -16,62 +16,52 @@ import { getHumanError } from "../../../../utils/offer/OfferUtils"; import { useDispatch } from "react-redux"; import { addSnackbar as addSnackbarAction } from "../../../../actions/notificationActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; -import { OfferConstants } from "../../../Offers/Form/OfferUtils"; -const CompanyOffersVisibilityActions = ({ offer }) => { +const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOfferVisibilityState }) => { const dispatch = useDispatch(); const addSnackbar = useCallback((notification) => dispatch(addSnackbarAction(notification)), [dispatch]); - const [offerVisibilityState, setOfferVisibilityState] = useState({ - isVisible: undefined, - isDisabled: undefined, - isBlocked: undefined, - }); - const [loadingOfferVisibility, setLoadingOfferVisibility] = useState(false); + const [offerVisibilityButtonDisabled, setOfferVisibilityButtonDisabled] = useState(false); const isHiddenOffer = offer?.isHidden; const offerHiddenReason = offer?.hiddenReason; useEffect(() => { - setOfferVisibilityState({ - isDisabled: isHiddenOffer && offerHiddenReason === OfferConstants.ADMIN_REQUEST, - isVisible: !isHiddenOffer, - isBlocked: isHiddenOffer && offerHiddenReason === OfferConstants.COMPANY_BLOCKED, - }); - }, [isHiddenOffer, offerHiddenReason]); + setOfferVisibilityButtonDisabled(loadingOfferVisibility || offerVisibilityState?.isDisabled || offerVisibilityState?.isBlocked); + }, [isHiddenOffer, offerHiddenReason, offerVisibilityState, resetOfferVisibilityState, loadingOfferVisibility]); const handleHideOffer = useCallback(({ offer, addSnackbar, onError }) => { setLoadingOfferVisibility(true); hideOfferService(offer._id) .then(() => { - setOfferVisibilityState((offerVisibilityState) => ({ ...offerVisibilityState, isVisible: false })); addSnackbar({ message: "The offer was hidden", key: `${Date.now()}-${offer._id}-hidden`, }); + resetOfferVisibilityState(); }) .catch((err) => { if (onError) onError(err); }).finally(() => setLoadingOfferVisibility(false)); - }, []); + }, [resetOfferVisibilityState]); const handleEnableOffer = useCallback(({ offer, addSnackbar, onError }) => { setLoadingOfferVisibility(true); enableOfferService(offer._id) .then(() => { - setOfferVisibilityState((offerVisibilityState) => ({ ...offerVisibilityState, isVisible: true })); addSnackbar({ message: "The offer was enabled", key: `${Date.now()}-${offer._id}-enabled`, }); + resetOfferVisibilityState(); }) .catch((err) => { if (onError) onError(err); }).finally(() => setLoadingOfferVisibility(false)); - }, []); + }, [resetOfferVisibilityState]); const handleOfferVisibilityError = useCallback((err) => { if (Array.isArray(err) && err.length > 0) { @@ -89,7 +79,7 @@ const CompanyOffersVisibilityActions = ({ offer }) => { }, [addSnackbar, offer._id]); const handleOfferVisibility = () => { - if (offerVisibilityState.isVisible) { + if (offerVisibilityState?.isVisible) { handleHideOffer({ offer: offer, addSnackbar: addSnackbar, @@ -104,16 +94,14 @@ const CompanyOffersVisibilityActions = ({ offer }) => { } }; - const offerVisibilityButtonDisabled = loadingOfferVisibility || offerVisibilityState.isDisabled || offerVisibilityState.isBlocked; - return ( - + - {offerVisibilityState.isVisible ? + {offerVisibilityState?.isVisible ? { }; CompanyOffersVisibilityActions.propTypes = { - offer: PropTypes.instanceOf(Offer), + offer: PropTypes.instanceOf(Offer).isRequired, + offerVisibilityState: PropTypes.object.isRequired, + resetOfferVisibilityState: PropTypes.func.isRequired, }; export default CompanyOffersVisibilityActions; From e5ea264dbeb97657e92be95fdd585019a17e3a53 Mon Sep 17 00:00:00 2001 From: processing Date: Wed, 26 Apr 2023 14:55:22 +0100 Subject: [PATCH 12/19] Changed chip colors. --- src/components/Company/Offers/Manage/CompanyOffersTitle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js index c50ab033..5455e0e7 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersTitle.js +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -5,8 +5,8 @@ import { Chip } from "@material-ui/core"; export const statusChips = { active: , hidden: , - blocked: , - archived: , + blocked: , + archived: , }; const OfferTitle = ({ title, offerVisibilityState }) => { From 2e961159341226f158914a5f55625d9049092757 Mon Sep 17 00:00:00 2001 From: processing Date: Wed, 26 Apr 2023 14:56:28 +0100 Subject: [PATCH 13/19] Removed active status chip. --- src/components/Company/Offers/Manage/CompanyOffersTitle.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js index 5455e0e7..e239903d 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersTitle.js +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -3,7 +3,6 @@ import PropTypes from "prop-types"; import { Chip } from "@material-ui/core"; export const statusChips = { - active: , hidden: , blocked: , archived: , @@ -14,8 +13,6 @@ const OfferTitle = ({ title, offerVisibilityState }) => { useEffect(() => { const tempChips = []; - if (offerVisibilityState?.isVisible) - tempChips.push(statusChips.active); if (offerVisibilityState?.isHidden) tempChips.push(statusChips.hidden); if (offerVisibilityState?.isDisabled) From 3e74498a0800218cbe6f52be2d295bf08e37b38d Mon Sep 17 00:00:00 2001 From: processing Date: Sun, 4 Jun 2023 13:47:52 +0100 Subject: [PATCH 14/19] Try fix visibility actions effect on chips (broken). --- .../Offers/Manage/CompanyOffersActions.js | 5 +- .../Manage/CompanyOffersManagementWidget.js | 103 +++++++++++------- .../Offers/Manage/CompanyOffersTitle.js | 17 ++- .../Manage/CompanyOffersVisibilityActions.js | 35 +++--- 4 files changed, 93 insertions(+), 67 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersActions.js b/src/components/Company/Offers/Manage/CompanyOffersActions.js index 2b42d5f0..7bd5622d 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersActions.js @@ -28,8 +28,9 @@ const CompanyOffersActions = ({ <> diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index cd70fb00..57b98f1f 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -1,32 +1,34 @@ import { Divider, Grid, IconButton, makeStyles, Tooltip, Typography } from "@material-ui/core"; +import { Edit as EditIcon } from "@material-ui/icons"; import { format, parseISO } from "date-fns"; -import React, { useState, useEffect, useCallback } from "react"; +import PropTypes from "prop-types"; +import React, { useCallback, useEffect, useState } from "react"; +import { connect } from "react-redux"; +import { Link } from "react-router-dom"; +import { addSnackbar } from "../../../../actions/notificationActions"; +import useSession from "../../../../hooks/useSession"; import { fetchCompanyOffers } from "../../../../services/companyOffersService"; import ControlledSortableSelectableTable from "../../../../utils/Table/ControlledSortableSelectableTable"; import FilterableTable from "../../../../utils/Table/FilterableTable"; import { alphabeticalSorter, GenerateTableCellFromField } from "../../../../utils/Table/utils"; -import { columns } from "./CompanyOffersManagementSchema"; -import PropTypes from "prop-types"; -import useSession from "../../../../hooks/useSession"; -import { OfferTitleFilter, PublishDateFilter, PublishEndDateFilter, LocationFilter } from "../Filters/index"; -import { Edit as EditIcon } from "@material-ui/icons"; -import { Link } from "react-router-dom"; -import { addSnackbar } from "../../../../actions/notificationActions"; -import { connect } from "react-redux"; -import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; -import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; -import OfferTitle from "./CompanyOffersTitle"; import { OfferConstants } from "../../../Offers/Form/OfferUtils"; +import { LocationFilter, OfferTitleFilter, PublishDateFilter, PublishEndDateFilter } from "../Filters/index"; +import { RowActions } from "./CompanyOffersActions"; +import { columns } from "./CompanyOffersManagementSchema"; +import OfferTitle from "./CompanyOffersTitle"; +import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; const generateRow = ({ title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason, - ownerName, _id, ...args }, offerVisibilityState, resetOfferVisibilityState) => ({ + ownerName, offersVisibility, setOfferVisibility, offerId, _id, ...args }) => ({ fields: { title: { value: ( ), align: "left", linkDestination: `/offer/${_id}` }, publishStartDate: { value: format(parseISO(publishDate), "yyyy-MM-dd") }, publishEndDate: { value: format(parseISO(publishEndDate), "yyyy-MM-dd") }, @@ -37,8 +39,9 @@ const generateRow = ({ title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason, ownerName, _id, ...args, }), - offerVisibilityState: offerVisibilityState, - resetOfferVisibilityState: resetOfferVisibilityState, + offersVisibility: offersVisibility, + setOfferVisibility: setOfferVisibility, + offerId: offerId, }, }); @@ -73,29 +76,24 @@ const filters = [ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { const { data, isLoggedIn } = useSession(); const [offers, setOffers] = useState({}); + const [fetchedOffers, setFetchedOffers] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const mobileCols = ["title", "publishStartDate", "actions"]; + const [offerVisibilityStates, setOfferVisibilityStates] = useState([]); + + const setOfferVisibilityState = useCallback((offerId, state) => { + const newVisibilityStates = offerVisibilityStates; + newVisibilityStates[offerId] = state; + setOfferVisibilityStates(newVisibilityStates); + }, [offerVisibilityStates, setOfferVisibilityStates]); - const resetOffers = useCallback(() => { + useEffect(() => { if (isLoggedIn) fetchCompanyOffers(data.company._id).then((offers) => { if (Array.isArray(offers)) { - const visibilityStates = offers.map((offer) => ({ - state: { - isHidden: offer.isHidden && offer.hiddenReason === OfferConstants.COMPANY_REQUEST, - isDisabled: offer.isHidden && offer.hiddenReason === OfferConstants.ADMIN_REQUEST, - isVisible: !offer.isHidden && !offer.isArchived, - isBlocked: offer.isHidden && offer.hiddenReason === OfferConstants.COMPANY_BLOCKED, - isArchived: offer.isArchived, - }, - })); - const fetchedRows = offers.reduce((rows, row, i) => { - rows[row._id] = generateRow(row, visibilityStates[i]?.state, resetOffers); - return rows; - }, {}); - setOffers(fetchedRows); + setFetchedOffers(offers); } else { - setOffers({}); + setFetchedOffers([]); } setIsLoading(false); }).catch((err) => { @@ -109,10 +107,31 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { }, [addSnackbar, data.company._id, isLoggedIn]); useEffect(() => { - resetOffers(); - }, [addSnackbar, data.company._id, isLoggedIn, resetOffers]); + if (Array.isArray(fetchedOffers)) { + const newVisibilityStates = fetchedOffers.map((offer) => ({ + isHidden: offer.isHidden && offer.hiddenReason === OfferConstants.COMPANY_REQUEST, + isDisabled: offer.isHidden && offer.hiddenReason === OfferConstants.ADMIN_REQUEST, + isVisible: !offer.isHidden && !offer.isArchived, + isBlocked: offer.isHidden && offer.hiddenReason === OfferConstants.COMPANY_BLOCKED, + isArchived: offer.isArchived, + })); + setOfferVisibilityStates(newVisibilityStates); + } + }, [fetchedOffers]); + + useEffect(() => { + if (Array.isArray(fetchedOffers)) { + const fetchedRows = fetchedOffers.reduce((rows, row, i) => { + rows[row._id] = generateRow( + { ...row, offersVisibility: offerVisibilityStates, setOfferVisibility: setOfferVisibilityState, offerId: i } + ); + return rows; + }, {}); + setOffers(fetchedRows); + } + }, [offerVisibilityStates, setOffers, setOfferVisibilityState, fetchedOffers]); - const RowContent = ({ rowKey, labelId }) => { + const RowContent = useCallback(({ rowKey, labelId }) => { const fields = offers[rowKey].fields; return ( @@ -124,7 +143,7 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { ))} ); - }; + }, [isMobile, mobileCols, offers]); RowContent.propTypes = { rowKey: PropTypes.string.isRequired, @@ -146,10 +165,11 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { }, })); - const RowCollapseComponent = ({ rowKey }) => { + const classes = useRowCollapseStyles(); + + const RowCollapseComponent = useCallback(({ rowKey }) => { const row = offers[rowKey]; const offerRoute = `/offer/${rowKey}`; - const classes = useRowCollapseStyles(); const mobileFieldKeys = ["location", "publishEndDate"]; return ( @@ -165,8 +185,9 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { @@ -193,7 +214,7 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { ) ); - }; + }, [classes.collapsableTitles, classes.payloadSection, isMobile, offers]); RowCollapseComponent.propTypes = { rowKey: PropTypes.string.isRequired, diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js index e239903d..35a43ca4 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersTitle.js +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -8,19 +8,22 @@ export const statusChips = { archived: , }; -const OfferTitle = ({ title, offerVisibilityState }) => { +const OfferTitle = ({ title, offersVisibility, setOfferVisibility, offerId }) => { const [chips, setChips] = useState([]); + const isHidden = offersVisibility[offerId]?.isHidden; + const isBlocked = offersVisibility[offerId]?.isDisabled; + const isArchived = offersVisibility[offerId]?.isArchived; useEffect(() => { const tempChips = []; - if (offerVisibilityState?.isHidden) + if (isHidden) tempChips.push(statusChips.hidden); - if (offerVisibilityState?.isDisabled) + if (isBlocked) tempChips.push(statusChips.blocked); - if (offerVisibilityState?.isArchived) + if (isArchived) tempChips.push(statusChips.archived); setChips(tempChips); - }, [offerVisibilityState]); + }, [isArchived, isBlocked, isHidden, offerId, offersVisibility, setOfferVisibility]); return ( <> @@ -39,7 +42,9 @@ const OfferTitle = ({ title, offerVisibilityState }) => { OfferTitle.propTypes = { title: PropTypes.string.isRequired, - offerVisibilityState: PropTypes.object, + offersVisibility: PropTypes.array, + setOfferVisibility: PropTypes.func, + offerId: PropTypes.number, }; export default OfferTitle; diff --git a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js index 454f42d2..ddf4f750 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js @@ -17,7 +17,7 @@ import { useDispatch } from "react-redux"; import { addSnackbar as addSnackbarAction } from "../../../../actions/notificationActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; -const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOfferVisibilityState }) => { +const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisibility, offerId }) => { const dispatch = useDispatch(); const addSnackbar = useCallback((notification) => dispatch(addSnackbarAction(notification)), [dispatch]); @@ -25,13 +25,11 @@ const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOffe const [loadingOfferVisibility, setLoadingOfferVisibility] = useState(false); const [offerVisibilityButtonDisabled, setOfferVisibilityButtonDisabled] = useState(false); - const isHiddenOffer = offer?.isHidden; - const offerHiddenReason = offer?.hiddenReason; - useEffect(() => { - setOfferVisibilityButtonDisabled(loadingOfferVisibility || offerVisibilityState?.isDisabled || offerVisibilityState?.isBlocked); - }, [isHiddenOffer, offerHiddenReason, offerVisibilityState, resetOfferVisibilityState, loadingOfferVisibility]); - + setOfferVisibilityButtonDisabled(loadingOfferVisibility + || offersVisibility[offerId]?.isDisabled + || offersVisibility[offerId]?.isBlocked); + }, [offersVisibility, loadingOfferVisibility, offerId]); const handleHideOffer = useCallback(({ offer, addSnackbar, onError }) => { setLoadingOfferVisibility(true); @@ -41,12 +39,12 @@ const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOffe message: "The offer was hidden", key: `${Date.now()}-${offer._id}-hidden`, }); - resetOfferVisibilityState(); + setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: false, isHidden: true }); }) .catch((err) => { if (onError) onError(err); }).finally(() => setLoadingOfferVisibility(false)); - }, [resetOfferVisibilityState]); + }, [offerId, offersVisibility, setOfferVisibility]); const handleEnableOffer = useCallback(({ offer, addSnackbar, onError }) => { setLoadingOfferVisibility(true); @@ -56,12 +54,12 @@ const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOffe message: "The offer was enabled", key: `${Date.now()}-${offer._id}-enabled`, }); - resetOfferVisibilityState(); + setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: true, isHidden: false }); }) .catch((err) => { if (onError) onError(err); }).finally(() => setLoadingOfferVisibility(false)); - }, [resetOfferVisibilityState]); + }, [offerId, offersVisibility, setOfferVisibility]); const handleOfferVisibilityError = useCallback((err) => { if (Array.isArray(err) && err.length > 0) { @@ -78,8 +76,8 @@ const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOffe } }, [addSnackbar, offer._id]); - const handleOfferVisibility = () => { - if (offerVisibilityState?.isVisible) { + const handleOfferVisibility = useCallback(() => { + if (offersVisibility[offerId]?.isVisible) { handleHideOffer({ offer: offer, addSnackbar: addSnackbar, @@ -92,16 +90,16 @@ const CompanyOffersVisibilityActions = ({ offer, offerVisibilityState, resetOffe onError: handleOfferVisibilityError, }); } - }; + }, [offer, offerId, offersVisibility, handleHideOffer, handleEnableOffer, addSnackbar, handleOfferVisibilityError]); return ( - + - {offerVisibilityState?.isVisible ? + {offersVisibility[offerId]?.isVisible ? Date: Fri, 14 Jul 2023 18:09:08 +0100 Subject: [PATCH 15/19] Fix visibility actions effect on chips (complete) --- .../Company/Offers/Manage/CompanyOffersManagementWidget.js | 2 +- .../Offers/Manage/CompanyOffersManagementWidget.spec.js | 4 ++-- .../Company/Offers/Manage/CompanyOffersVisibilityActions.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 57b98f1f..cb57b7f5 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -83,7 +83,7 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { const [offerVisibilityStates, setOfferVisibilityStates] = useState([]); const setOfferVisibilityState = useCallback((offerId, state) => { - const newVisibilityStates = offerVisibilityStates; + const newVisibilityStates = [...offerVisibilityStates]; newVisibilityStates[offerId] = state; setOfferVisibilityStates(newVisibilityStates); }, [offerVisibilityStates, setOfferVisibilityStates]); diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js index 57ea6e66..d51ca978 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js @@ -213,8 +213,6 @@ describe("App", () => { }); it("Should render mobile collapsable content on mobile device", async () => { - addSnackbar.mockImplementationOnce(() => ({ type: "" })); - const MOBILE_WIDTH_PX = 360; window.matchMedia = createMatchMedia(MOBILE_WIDTH_PX); @@ -258,6 +256,7 @@ describe("App", () => { companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) => resolve([offer]) )); + addSnackbar.mockImplementationOnce(() => ({ type: "" })); hideOfferService.mockImplementation(() => new Promise((resolve) => resolve())); enableOfferService.mockImplementation(() => new Promise((resolve) => resolve())); @@ -298,6 +297,7 @@ describe("App", () => { companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) => resolve([offer]) )); + addSnackbar.mockImplementationOnce(() => ({ type: "" })); hideOfferService.mockImplementation(() => new Promise((resolve) => resolve())); enableOfferService.mockImplementation(() => new Promise((resolve) => resolve())); diff --git a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js index ddf4f750..0c54c7c0 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js @@ -35,11 +35,11 @@ const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisib setLoadingOfferVisibility(true); hideOfferService(offer._id) .then(() => { + setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: false, isHidden: true }); addSnackbar({ message: "The offer was hidden", key: `${Date.now()}-${offer._id}-hidden`, }); - setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: false, isHidden: true }); }) .catch((err) => { if (onError) onError(err); @@ -50,11 +50,11 @@ const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisib setLoadingOfferVisibility(true); enableOfferService(offer._id) .then(() => { + setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: true, isHidden: false }); addSnackbar({ message: "The offer was enabled", key: `${Date.now()}-${offer._id}-enabled`, }); - setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: true, isHidden: false }); }) .catch((err) => { if (onError) onError(err); From f2d579b6291fa764cfff09f1d21e9b949b02fa84 Mon Sep 17 00:00:00 2001 From: processing Date: Fri, 14 Jul 2023 23:19:52 +0100 Subject: [PATCH 16/19] Reorganize and improve code. --- .../Offers/Manage/CompanyOffersActions.js | 2 +- .../Manage/CompanyOffersManagementWidget.js | 21 +++++---- .../Offers/Manage/CompanyOffersTitle.js | 43 ++++++++++--------- .../Manage/CompanyOffersVisibilityActions.js | 30 +++++++------ src/utils/Table/utils.js | 2 +- 5 files changed, 55 insertions(+), 43 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersActions.js b/src/components/Company/Offers/Manage/CompanyOffersActions.js index 7bd5622d..45b076a2 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersActions.js @@ -28,7 +28,7 @@ const CompanyOffersActions = ({ <> diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index cb57b7f5..5eccbeb1 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -21,12 +21,12 @@ import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; const generateRow = ({ title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason, - ownerName, offersVisibility, setOfferVisibility, offerId, _id, ...args }) => ({ + ownerName, getOfferVisibility, setOfferVisibility, offerId, _id, ...args }) => ({ fields: { title: { value: ( ), align: "left", linkDestination: `/offer/${_id}` }, @@ -39,7 +39,7 @@ const generateRow = ({ title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason, ownerName, _id, ...args, }), - offersVisibility: offersVisibility, + getOfferVisibility: getOfferVisibility, setOfferVisibility: setOfferVisibility, offerId: offerId, }, @@ -82,9 +82,14 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { const mobileCols = ["title", "publishStartDate", "actions"]; const [offerVisibilityStates, setOfferVisibilityStates] = useState([]); - const setOfferVisibilityState = useCallback((offerId, state) => { + const getOfferVisibilityState = useCallback( + (offerId) => offerVisibilityStates[offerId], + [offerVisibilityStates] + ); + + const setOfferVisibilityState = useCallback((offerId, stateFunc) => { const newVisibilityStates = [...offerVisibilityStates]; - newVisibilityStates[offerId] = state; + newVisibilityStates[offerId] = stateFunc(newVisibilityStates[offerId]); setOfferVisibilityStates(newVisibilityStates); }, [offerVisibilityStates, setOfferVisibilityStates]); @@ -123,13 +128,13 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { if (Array.isArray(fetchedOffers)) { const fetchedRows = fetchedOffers.reduce((rows, row, i) => { rows[row._id] = generateRow( - { ...row, offersVisibility: offerVisibilityStates, setOfferVisibility: setOfferVisibilityState, offerId: i } + { ...row, getOfferVisibility: getOfferVisibilityState, setOfferVisibility: setOfferVisibilityState, offerId: i } ); return rows; }, {}); setOffers(fetchedRows); } - }, [offerVisibilityStates, setOffers, setOfferVisibilityState, fetchedOffers]); + }, [setOffers, setOfferVisibilityState, fetchedOffers, getOfferVisibilityState]); const RowContent = useCallback(({ rowKey, labelId }) => { const fields = offers[rowKey].fields; @@ -185,7 +190,7 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js index 35a43ca4..6b1e9b77 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersTitle.js +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -1,40 +1,43 @@ import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; -import { Chip } from "@material-ui/core"; +import { Chip, makeStyles } from "@material-ui/core"; -export const statusChips = { +const statusChips = { hidden: , blocked: , archived: , }; -const OfferTitle = ({ title, offersVisibility, setOfferVisibility, offerId }) => { +const useStyles = makeStyles(() => ({ + chips: { + position: "absolute", + }, +})); + +const OfferTitle = ({ title, getOfferVisibility, setOfferVisibility, offerId }) => { const [chips, setChips] = useState([]); - const isHidden = offersVisibility[offerId]?.isHidden; - const isBlocked = offersVisibility[offerId]?.isDisabled; - const isArchived = offersVisibility[offerId]?.isArchived; + const isHidden = getOfferVisibility(offerId)?.isHidden; + const isBlocked = getOfferVisibility(offerId)?.isDisabled; + const isArchived = getOfferVisibility(offerId)?.isArchived; + + const classes = useStyles(); useEffect(() => { const tempChips = []; if (isHidden) - tempChips.push(statusChips.hidden); + tempChips.push(statusChips.hidden,  ); if (isBlocked) - tempChips.push(statusChips.blocked); + tempChips.push(statusChips.blocked,  ); if (isArchived) - tempChips.push(statusChips.archived); + tempChips.push(statusChips.archived,  ); setChips(tempChips); - }, [isArchived, isBlocked, isHidden, offerId, offersVisibility, setOfferVisibility]); + }, [isArchived, isBlocked, isHidden, setOfferVisibility]); return ( <> {title} -
- {chips.reduce((res, chip, index, chips) => { - res.push(chip); - if (index !== chips.length - 1) - res.push( ); - return res; - }, [])} +
+ {chips}
); @@ -42,9 +45,9 @@ const OfferTitle = ({ title, offersVisibility, setOfferVisibility, offerId }) => OfferTitle.propTypes = { title: PropTypes.string.isRequired, - offersVisibility: PropTypes.array, - setOfferVisibility: PropTypes.func, - offerId: PropTypes.number, + getOfferVisibility: PropTypes.func.isRequired, + setOfferVisibility: PropTypes.func.isRequired, + offerId: PropTypes.number.isRequired, }; export default OfferTitle; diff --git a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js index 0c54c7c0..2249fd32 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js +++ b/src/components/Company/Offers/Manage/CompanyOffersVisibilityActions.js @@ -17,25 +17,29 @@ import { useDispatch } from "react-redux"; import { addSnackbar as addSnackbarAction } from "../../../../actions/notificationActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; -const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisibility, offerId }) => { +const CompanyOffersVisibilityActions = ({ offer, getOfferVisibility, setOfferVisibility, offerId }) => { const dispatch = useDispatch(); const addSnackbar = useCallback((notification) => dispatch(addSnackbarAction(notification)), [dispatch]); + const offerVisible = getOfferVisibility(offerId)?.isVisible; + const offerDisabled = getOfferVisibility(offerId)?.isDisabled; + const offerBlocked = getOfferVisibility(offerId)?.isBlocked; + const [loadingOfferVisibility, setLoadingOfferVisibility] = useState(false); const [offerVisibilityButtonDisabled, setOfferVisibilityButtonDisabled] = useState(false); useEffect(() => { setOfferVisibilityButtonDisabled(loadingOfferVisibility - || offersVisibility[offerId]?.isDisabled - || offersVisibility[offerId]?.isBlocked); - }, [offersVisibility, loadingOfferVisibility, offerId]); + || offerDisabled + || offerBlocked); + }, [loadingOfferVisibility, offerBlocked, offerDisabled, offerId]); const handleHideOffer = useCallback(({ offer, addSnackbar, onError }) => { setLoadingOfferVisibility(true); hideOfferService(offer._id) .then(() => { - setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: false, isHidden: true }); + setOfferVisibility(offerId, (state) => ({ ...state, isVisible: false, isHidden: true })); addSnackbar({ message: "The offer was hidden", key: `${Date.now()}-${offer._id}-hidden`, @@ -44,13 +48,13 @@ const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisib .catch((err) => { if (onError) onError(err); }).finally(() => setLoadingOfferVisibility(false)); - }, [offerId, offersVisibility, setOfferVisibility]); + }, [offerId, setOfferVisibility]); const handleEnableOffer = useCallback(({ offer, addSnackbar, onError }) => { setLoadingOfferVisibility(true); enableOfferService(offer._id) .then(() => { - setOfferVisibility(offerId, { ...offersVisibility[offerId], isVisible: true, isHidden: false }); + setOfferVisibility(offerId, (state) => ({ ...state, isVisible: true, isHidden: false })); addSnackbar({ message: "The offer was enabled", key: `${Date.now()}-${offer._id}-enabled`, @@ -59,7 +63,7 @@ const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisib .catch((err) => { if (onError) onError(err); }).finally(() => setLoadingOfferVisibility(false)); - }, [offerId, offersVisibility, setOfferVisibility]); + }, [offerId, setOfferVisibility]); const handleOfferVisibilityError = useCallback((err) => { if (Array.isArray(err) && err.length > 0) { @@ -77,7 +81,7 @@ const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisib }, [addSnackbar, offer._id]); const handleOfferVisibility = useCallback(() => { - if (offersVisibility[offerId]?.isVisible) { + if (offerVisible) { handleHideOffer({ offer: offer, addSnackbar: addSnackbar, @@ -90,16 +94,16 @@ const CompanyOffersVisibilityActions = ({ offer, offersVisibility, setOfferVisib onError: handleOfferVisibilityError, }); } - }, [offer, offerId, offersVisibility, handleHideOffer, handleEnableOffer, addSnackbar, handleOfferVisibilityError]); + }, [offerVisible, handleHideOffer, offer, addSnackbar, handleOfferVisibilityError, handleEnableOffer]); return ( - + - {offersVisibility[offerId]?.isVisible ? + {offerVisible ? -
+
{fieldOptions?.linkDestination ? {fieldOptions?.value} From 1b59d8e5a9e7253b9c3fc706f6adf15ebc5580ae Mon Sep 17 00:00:00 2001 From: processing Date: Sat, 15 Jul 2023 13:44:50 +0100 Subject: [PATCH 17/19] Add tests for offer status chips. --- .../CompanyOffersManagementWidget.spec.js | 38 ++++++++++++++++++- .../Offers/Manage/CompanyOffersTitle.js | 6 +-- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js index d51ca978..405f2a90 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js @@ -22,6 +22,7 @@ import { createTheme } from "@material-ui/core"; import { SnackbarProvider } from "notistack"; import Notifier from "../../../Notifications/Notifier"; import { format, parseISO } from "date-fns"; +import { OfferConstants } from "../../../Offers/Form/OfferUtils"; jest.mock("../../../../hooks/useSession"); jest.mock("../../../../services/companyOffersService"); @@ -55,6 +56,7 @@ describe("App", () => { publishEndDate: "2021-09", description: "Offer description 2", isHidden: true, + hiddenReason: OfferConstants.COMPANY_REQUEST, }, { _id: "random uuid6", @@ -67,7 +69,8 @@ describe("App", () => { publishEndDate: "2021-09", description: "Offer description 3", isHidden: true, - hiddenReason: "ADMIN_REQUEST", + hiddenReason: OfferConstants.ADMIN_REQUEST, + isArchived: true, }, ]; @@ -281,6 +284,7 @@ describe("App", () => { expect(queryByTestId(offerRow, "HideOffer")).not.toBeInTheDocument(); expect(getByTestId(offerRow, "EnableOffer")).toBeInTheDocument(); + expect(getByTestId(offerRow, "HiddenChip")).toBeInTheDocument(); visibilityButton = getByTestId(offerRow, "EnableOffer"); @@ -290,6 +294,7 @@ describe("App", () => { expect(getByTestId(offerRow, "HideOffer")).toBeInTheDocument(); expect(queryByTestId(offerRow, "EnableOffer")).not.toBeInTheDocument(); + expect(queryByTestId(offerRow, "HiddenChip")).not.toBeInTheDocument(); }); it("Should disable hide/enable offer button when the offer is disabled by an admin", async () => { @@ -355,4 +360,35 @@ describe("App", () => { expect(addSnackbar).toHaveBeenCalledTimes(1); }); + + it("Should generate the right offer status chips", async () => { + companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) => + resolve(MOCK_OFFERS) + )); + + await act(() => + renderWithStoreAndTheme( + + + + + , { initialState: {}, theme } + ) + ); + + let offerRow = screen.queryByText(MOCK_OFFERS[0].title).closest("tr"); + expect(queryByTestId(offerRow, "HiddenChip")).not.toBeInTheDocument(); + expect(queryByTestId(offerRow, "BlockedChip")).not.toBeInTheDocument(); + expect(queryByTestId(offerRow, "ArchivedChip")).not.toBeInTheDocument(); + + offerRow = screen.queryByText(MOCK_OFFERS[1].title).closest("tr"); + expect(getByTestId(offerRow, "HiddenChip")).toBeInTheDocument(); + expect(queryByTestId(offerRow, "BlockedChip")).not.toBeInTheDocument(); + expect(queryByTestId(offerRow, "ArchivedChip")).not.toBeInTheDocument(); + + offerRow = screen.queryByText(MOCK_OFFERS[2].title).closest("tr"); + expect(queryByTestId(offerRow, "HiddenChip")).not.toBeInTheDocument(); + expect(getByTestId(offerRow, "BlockedChip")).toBeInTheDocument(); + expect(getByTestId(offerRow, "ArchivedChip")).toBeInTheDocument(); + }); }); diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js index 6b1e9b77..f5c34398 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersTitle.js +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -3,9 +3,9 @@ import PropTypes from "prop-types"; import { Chip, makeStyles } from "@material-ui/core"; const statusChips = { - hidden: , - blocked: , - archived: , + hidden: , + blocked: , + archived: , }; const useStyles = makeStyles(() => ({ From b312a9cdd3c24b06a1e72dcaa923e267d805ffa7 Mon Sep 17 00:00:00 2001 From: processing Date: Sat, 15 Jul 2023 15:11:53 +0100 Subject: [PATCH 18/19] Use style with status chips. --- .../Manage/CompanyOffersManagementWidget.js | 1 - .../Offers/Manage/CompanyOffersTitle.js | 35 ++++++++++++------- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index 5eccbeb1..530e9725 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -27,7 +27,6 @@ const generateRow = ({ ), 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 index f5c34398..c592f484 100644 --- 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: , - blocked: , - archived: , -}; - 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: , + blocked: , + archived: , + }; + const tempChips = []; if (isHidden) - tempChips.push(statusChips.hidden,  ); + tempChips.push(statusChips.hidden); if (isBlocked) - tempChips.push(statusChips.blocked,  ); + tempChips.push(statusChips.blocked); if (isArchived) - tempChips.push(statusChips.archived,  ); + 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, }; From 692d8a1c5168995d06ebb078032860195be15346 Mon Sep 17 00:00:00 2001 From: processing Date: Sat, 15 Jul 2023 15:29:26 +0100 Subject: [PATCH 19/19] Fix chip spacing. --- .../Company/Offers/Manage/CompanyOffersTitle.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersTitle.js b/src/components/Company/Offers/Manage/CompanyOffersTitle.js index c592f484..ff5c7c57 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersTitle.js +++ b/src/components/Company/Offers/Manage/CompanyOffersTitle.js @@ -2,18 +2,18 @@ import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; import { Chip, makeStyles } from "@material-ui/core"; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme) => ({ hiddenChip: { backgroundColor: "#90A4AE", - marginRight: "5px", + marginRight: theme.spacing(.5), }, blockedChip: { backgroundColor: "#DC4338", - marginRight: "5px", + marginRight: theme.spacing(.5), }, archivedChip: { backgroundColor: "#56A8D6", - marginRight: "5px", + marginRight: theme.spacing(.5), }, chips: { position: "absolute",