From 6cf1d8d03c6972e6c218652607fef2ba09135470 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Tue, 24 Sep 2024 07:20:46 -0400 Subject: [PATCH 01/16] class component >> function component --- src/containers/AdminCampaignList.jsx | 307 +++++++++++++++------------ 1 file changed, 170 insertions(+), 137 deletions(-) diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx index 8ed20f5aa..3a9816791 100644 --- a/src/containers/AdminCampaignList.jsx +++ b/src/containers/AdminCampaignList.jsx @@ -1,5 +1,5 @@ import PropTypes from "prop-types"; -import React from "react"; +import React, { useState } from "react"; import { StyleSheet, css } from "aphrodite"; import { withRouter } from "react-router"; import { gql } from "@apollo/client"; @@ -34,40 +34,37 @@ const styles = StyleSheet.create({ }); const INITIAL_ROW_SIZE = 50; -const INITIAL_FILTER = { - isArchived: false, - searchString: "" -}; const INITIAL_SORT_BY = ID_DESC_SORT.value; -export class AdminCampaignList extends React.Component { - static propTypes = { - params: PropTypes.object, - mutations: PropTypes.exact({ - createCampaign: PropTypes.func, - archiveCampaigns: PropTypes.func, - unarchiveCampaign: PropTypes.func - }), - data: PropTypes.object, - router: PropTypes.object - }; +const AdminCampaignList = ({ + params, + mutations, + router, + data + }) => { - state = { + const [state, setState] = useState({ pageSize: INITIAL_ROW_SIZE, page: 0, isLoading: false, - campaignsFilter: INITIAL_FILTER, + campaignsFilter: { + isArchived: false, + searchString: "" + }, archiveMultiple: false, campaignsToArchive: [], campaignsWithChangingStatus: [], sortBy: INITIAL_SORT_BY, archiveMultipleMenu: false - }; + }); - handleClickNewButton = async () => { - const { organizationId } = this.props.params; - this.setState({ isLoading: true }); - const newCampaign = await this.props.mutations.createCampaign({ + const handleClickNewButton = async () => { + const { organizationId } = params; + setState({ + ...state, + isLoading: true + }); + const newCampaign = await mutations.createCampaign({ title: "New Campaign", description: "", dueBy: null, @@ -83,17 +80,21 @@ export class AdminCampaignList extends React.Component { throw new Error(newCampaign.errors); } - await this.props.router.push( + await router.push( `/admin/${organizationId}/campaigns/${newCampaign.data.createCampaign.id}/edit?new=true` ); }; - handleClickArchiveMultipleButton = async keys => { + const handleClickArchiveMultipleButton = async keys => { if (keys.length) { - this.setState({ isLoading: true }); - await this.props.mutations.archiveCampaigns(keys); - await this.props.data.refetch(); - this.setState({ + setState({ + ...state, + isLoading: true + }); + await mutations.archiveCampaigns(keys); + await data.refetch(); + setState({ + ...state, archiveMultiple: false, isLoading: false, campaignsToArchive: [] @@ -101,90 +102,98 @@ export class AdminCampaignList extends React.Component { } }; - handleArchiveFilterChange = async event => { - this.changeFilter({ isArchived: event.target.value }); + const handleArchiveFilterChange = async event => { + changeFilter({ isArchived: event.target.value }); }; - handleChecked = campaignIds => { - this.setState({ + const handleChecked = campaignIds => { + setState({ + ...state, campaignsToArchive: [...campaignIds] }); }; - handleSearchRequested = searchString => { + const handleSearchRequested = searchString => { const campaignsFilter = { - ...this.state.campaignsFilter, + ...state.campaignsFilter, searchString }; - this.changeFilter(campaignsFilter); + changeFilter(campaignsFilter); }; - handleCancelSearch = () => { + const handleCancelSearch = () => { const campaignsFilter = { - ...this.state.campaignsFilter, + ...state.campaignsFilter, searchString: "" }; - this.changeFilter(campaignsFilter); + changeFilter(campaignsFilter); }; - renderArchivedAndSortBy = () => { + const renderArchivedAndSortBy = () => { return ( - !this.state.archiveMultiple && ( + !state.archiveMultiple && ( - + ) ); }; - renderSearch = () => { + const renderSearch = () => { return ( - !this.state.archiveMultiple && ( + !state.archiveMultiple && (
) ); }; - renderFilters = () => ( + const renderFilters = () => (
- {this.props.params.adminPerms && this.renderArchiveMultiple()} - {this.renderArchivedAndSortBy()} + {params.adminPerms && renderArchiveMultiple()} + {renderArchivedAndSortBy()}
- {this.renderSearch()} + {renderSearch()} ); - handleMenuClick = event => { + const handleMenuClick = event => { console.log("event.target", event.target); - this.setState({ menuAnchorEl: event.target }); + setState({ + ...state, + menuAnchorEl: event.target + }); }; - handleMenuClose = () => { - this.setState({ menuAnchorEl: null }); + const handleMenuClose = () => { + setState({ + ...state, + menuAnchorEl: null + }); }; - renderArchiveMultiple() { + const renderArchiveMultiple = () => { const iconButton = ( { - this.handleMenuClick(event); - this.setState({ - archiveMultipleMenu: !this.state.archiveMultipleMenu + handleMenuClick(event); + setState({ + ...state, + archiveMultipleMenu: !state.archiveMultipleMenu }); }} > @@ -192,7 +201,7 @@ export class AdminCampaignList extends React.Component { ); - if (this.state.campaignsFilter.isArchived) { + if (state.campaignsFilter.isArchived) { return iconButton; } @@ -200,15 +209,16 @@ export class AdminCampaignList extends React.Component { {iconButton} - {this.state.archiveMultiple ? ( + {state.archiveMultiple ? ( { - this.setState({ - archiveMultipleMenu: !this.state.archiveMultipleMenu, - archiveMultiple: !this.state.archiveMultiple + setState({ + ...state, + archiveMultipleMenu: !state.archiveMultipleMenu, + archiveMultiple: !state.archiveMultiple }); }} > @@ -217,9 +227,10 @@ export class AdminCampaignList extends React.Component { ) : ( { - this.setState({ - archiveMultipleMenu: !this.state.archiveMultipleMenu, - archiveMultiple: !this.state.archiveMultiple + setState({ + ...state, + archiveMultipleMenu: !state.archiveMultipleMenu, + archiveMultiple: !state.archiveMultiple }); }} > @@ -231,19 +242,19 @@ export class AdminCampaignList extends React.Component { ); } - changePage = (pageDelta, pageSize) => { + const changePage = (pageDelta, pageSize) => { const { limit, offset, total - } = this.props.data.organization.campaigns.pageInfo; + } = data.organization.campaigns.pageInfo; const currentPage = Math.floor(offset / limit); const pageSizeAdjustedCurrentPage = Math.floor( (currentPage * limit) / pageSize ); const maxPage = Math.floor(total / pageSize); const newPage = Math.min(maxPage, pageSizeAdjustedCurrentPage + pageDelta); - this.props.data.fetchMore({ + data.fetchMore({ variables: { cursor: { offset: newPage * pageSize, @@ -259,81 +270,92 @@ export class AdminCampaignList extends React.Component { }); }; - changeFilter = async newFilter => { - this.setState({ + const changeFilter = async newFilter => { + setState({ + ...state, isLoading: true, campaignsFilter: newFilter }); - await this.props.data.refetch({ + await data.refetch({ campaignsFilter: newFilter }); - this.setState({ isLoading: false }); + setState({ + ...state, + isLoading: false + }); }; - changeSortBy = async newSort => { - this.setState({ + const changeSortBy = async newSort => { + setState({ + ...state, isLoading: true, sortBy: newSort }); - await this.props.data.refetch({ + await data.refetch({ sortBy: newSort }); - this.setState({ isLoading: false }); + setState({ + ...state, + isLoading: false + }); }; - handleNextPageClick = () => { - this.changePage(1, this.state.pageSize); + const handleNextPageClick = () => { + changePage(1, state.pageSize); }; - handlePreviousPageClick = () => { - this.changePage(-1, this.state.pageSize); + const handlePreviousPageClick = () => { + changePage(-1, state.pageSize); }; - handleRowSizeChanged = (index, value) => { + const handleRowSizeChanged = (index, value) => { console.log("rowsizechanged", index, value); // eslint-disable-line no-console - this.changePage(0, value); - this.setState({ + changePage(0, value); + setState({ + ...state, pageSize: value }); }; - changeCampaignStatus = async (campaignId, changeFn) => { - this.setState({ - campaignsWithChangingStatus: this.state.campaignsWithChangingStatus.concat( + const changeCampaignStatus = async (campaignId, changeFn) => { + setState({ + ...state, + campaignsWithChangingStatus: state.campaignsWithChangingStatus.concat( [campaignId] ) }); await changeFn(campaignId); - await this.props.data.refetch(); - this.setState({ - campaignsWithChangingStatus: this.state.campaignsWithChangingStatus.filter( + await data.refetch(); + setState({ + ...state, + campaignsWithChangingStatus: state.campaignsWithChangingStatus.filter( id => id !== campaignId ) }); }; - handleArchiveCampaign = async campaignId => { - await this.changeCampaignStatus(campaignId, async id => { - await this.props.mutations.archiveCampaigns([id]); + const handleArchiveCampaign = async campaignId => { + await changeCampaignStatus(campaignId, async id => { + await mutations.archiveCampaigns([id]); }); }; - handleUnarchiveCampaign = async campaignId => { - await this.changeCampaignStatus( + const handleUnarchiveCampaign = async campaignId => { + await changeCampaignStatus( campaignId, - this.props.mutations.unarchiveCampaign + mutations.unarchiveCampaign ); }; - renderActionButton() { - if (this.state.archiveMultiple) { - const keys = this.state.campaignsToArchive; + const renderActionButton = () => { + if (state.archiveMultiple) { + const keys = state.campaignsToArchive; return ( this.handleClickArchiveMultipleButton(keys)} + onClick={() => handleClickArchiveMultipleButton(keys)} disabled={!keys.length} > @@ -345,42 +367,39 @@ export class AdminCampaignList extends React.Component { color="primary" {...dataTest("addCampaign")} style={theme.components.floatingButton} - onClick={this.handleClickNewButton} + onClick={handleClickNewButton} > ); } - - render() { - const { adminPerms } = this.props.params; - return ( -
- {this.renderFilters()} - {this.state.isLoading ? ( - - ) : ( - - )} - - {adminPerms && this.renderActionButton()} -
- ); - } + // don't think this is right + return ( +
+ {renderFilters()} + {state.isLoading ? ( + + ) : ( + + )} + + {params.adminPerms && renderActionButton()} +
+ ); } const campaignInfoFragment = ` @@ -478,7 +497,10 @@ const queries = { variables: { cursor: { offset: 0, limit: 50 }, organizationId: ownProps.params.organizationId, - campaignsFilter: INITIAL_FILTER, + campaignsFilter: { + isArchived: false, + searchString: "" + }, sortBy: INITIAL_SORT_BY }, fetchPolicy: "network-only" @@ -517,4 +539,15 @@ const mutations = { }) }; +AdminCampaignList.propTypes = { + params: PropTypes.object, + mutations: PropTypes.exact({ + createCampaign: PropTypes.func, + archiveCampaigns: PropTypes.func, + unarchiveCampaign: PropTypes.func + }), + data: PropTypes.object, + router: PropTypes.object +} + export default loadData({ queries, mutations })(withRouter(AdminCampaignList)); From 669df5df8e62eaee8ec2974fc54a21c009514379 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Tue, 24 Sep 2024 07:22:27 -0400 Subject: [PATCH 02/16] remove clutter --- src/containers/AdminCampaignList.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx index 3a9816791..1cdc5ef64 100644 --- a/src/containers/AdminCampaignList.jsx +++ b/src/containers/AdminCampaignList.jsx @@ -33,7 +33,6 @@ const styles = StyleSheet.create({ } }); -const INITIAL_ROW_SIZE = 50; const INITIAL_SORT_BY = ID_DESC_SORT.value; const AdminCampaignList = ({ @@ -44,7 +43,7 @@ const AdminCampaignList = ({ }) => { const [state, setState] = useState({ - pageSize: INITIAL_ROW_SIZE, + pageSize: 50, page: 0, isLoading: false, campaignsFilter: { From 52614a5d6084ef8a797fe7b4e18aba17d04f26e9 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Tue, 24 Sep 2024 07:44:26 -0400 Subject: [PATCH 03/16] class component >> function component --- .../AdminCampaignList/CampaignTable.jsx | 250 +++++++++--------- 1 file changed, 132 insertions(+), 118 deletions(-) diff --git a/src/components/AdminCampaignList/CampaignTable.jsx b/src/components/AdminCampaignList/CampaignTable.jsx index aa44a3e92..899930f15 100644 --- a/src/components/AdminCampaignList/CampaignTable.jsx +++ b/src/components/AdminCampaignList/CampaignTable.jsx @@ -1,5 +1,5 @@ import PropTypes from "prop-types"; -import React from "react"; +import React, { useState } from "react"; import { Link as RouterLink } from "react-router"; import moment from "moment"; @@ -20,35 +20,38 @@ const inlineStyles = { whiteSpace: "nowrap" } }; + +const CampaignTable = ({ + data, + campaignsToArchive, + campaignsWithChangingStatus, + currentSortBy, + onNextPageClick, + onPreviousPageClick, + onRowSizeChange, + adminPerms, + selectMultiple, + organizationId, + handleChecked, + archiveCampaign, + unarchiveCampaign + }) => { -export class CampaignTable extends React.Component { - static propTypes = { - adminPerms: PropTypes.bool, - selectMultiple: PropTypes.bool, - organizationId: PropTypes.string, - data: PropTypes.object, - handleChecked: PropTypes.func, - archiveCampaign: PropTypes.func, - unarchiveCampaign: PropTypes.func, - onNextPageClick: PropTypes.func, - onPreviousPageClick: PropTypes.func, - onRowSizeChange: PropTypes.func, - campaignsToArchive: PropTypes.array, - campaignsWithChangingStatus: PropTypes.array, - currentSortBy: PropTypes.oneOf(SORTS.map(s => s.value)) - }; - - state = { + const [state, setState] = useState({ dataTableKey: "initial", - campaigns: [...this.props.data.organization.campaigns.campaigns] - }; + campaigns: [...data.organization.campaigns.campaigns] + }); - statusIsChanging = campaign => { - return this.props.campaignsWithChangingStatus.includes(campaign.id); + const { limit, offset, total } = data.organization.campaigns.pageInfo; + const displayPage = Math.floor(offset / limit) + 1; + let rowSizeList = [10, 20, 50, 100]; + + const statusIsChanging = campaign => { + return campaignsWithChangingStatus.includes(campaign.id); }; - renderArchiveIcon(campaign) { - if (this.statusIsChanging(campaign)) { + const renderArchiveIcon = campaign => { + if (statusIsChanging(campaign)) { return ; } if (campaign.isArchived) { @@ -58,7 +61,7 @@ export class CampaignTable extends React.Component { return ( await this.props.unarchiveCampaign(campaign.id)} + onClick={async () => await unarchiveCampaign(campaign.id)} > @@ -67,14 +70,14 @@ export class CampaignTable extends React.Component { return ( await this.props.archiveCampaign(campaign.id)} + onClick={async () => await archiveCampaign(campaign.id)} > ); } - sortFunc(key) { + const sortFunc = key => { const sorts = { id: (a, b) => b.id - a.id, title: (a, b) => (b.title > a.title ? 1 : -1), @@ -92,7 +95,7 @@ export class CampaignTable extends React.Component { return sorts[key]; } - prepareTableColumns(organization, campaigns) { + const prepareTableColumns = (organization, campaigns) => { const extraRows = []; const needsResponseCol = campaigns.some( c => c.completionStats.needsResponseCount @@ -112,14 +115,14 @@ export class CampaignTable extends React.Component { } }); } - if (this.props.adminPerms) { + if (adminPerms) { extraRows.push({ label: "Archive", name: "archive", options: { customBodyRender: (value, tableMeta) => { const campaign = campaigns.find(c => c.id === tableMeta.rowData[0]); - return this.renderArchiveIcon(campaign); + return renderArchiveIcon(campaign); }, sort: false }, @@ -131,7 +134,7 @@ export class CampaignTable extends React.Component { const timezoneColumn = []; // only show the timezone column when we're currently sorting by timezone - if (this.props.currentSortBy === TIMEZONE_SORT.value) { + if (currentSortBy === TIMEZONE_SORT.value) { timezoneColumn.push({ key: "timezone", name: "timezone", @@ -157,7 +160,7 @@ export class CampaignTable extends React.Component { customBodyRender: (value, tableMeta) => { const campaign = campaigns.find(c => c.id === tableMeta.rowData[0]); let org = ""; - if (this.props.organizationId != campaign.organization.id) { + if (organizationId != campaign.organization.id) { org = ` (${campaign.organization.id})`; } return `${campaign.id}${org}`; @@ -280,11 +283,11 @@ export class CampaignTable extends React.Component { ]; } - getSelectedRowIndexes = () => { - const campaignIds = this.props.data.organization.campaigns.campaigns.map( + const getSelectedRowIndexes = () => { + const campaignIds = data.organization.campaigns.campaigns.map( c => c.id ); - const indexes = this.props.campaignsToArchive.map(campaignId => + const indexes = campaignsToArchive.map(campaignId => campaignIds.indexOf(campaignId) ); if (indexes.includes(-1)) { @@ -297,96 +300,107 @@ export class CampaignTable extends React.Component { return indexes; }; - clearCampaignSelection = () => { - this.props.handleChecked([]); + const clearCampaignSelection = () => { + handleChecked([]); // Terrible hack around buggy DataTables: we have to force the component // to remount if we want clear the "select all" status - this.setState({ + setState({ + ...state, dataTableKey: new Date().getTime() }); }; - render() { - const { limit, offset, total } = this.props.data.organization.campaigns.pageInfo; - const displayPage = Math.floor(offset / limit) + 1; - let rowSizeList = [10, 20, 50, 100]; - - const options = { - filterType: "checkbox", - selectableRows: "multiple", // this.props.selectMultiple ? "multiple" : "none", - elevation: 0, - download: false, - print: false, - searchable: false, - filter: false, - sort: true, - search: false, - viewColumns: false, - page: displayPage - 1, - count: total, - rowsPerPage: limit, - rowsPerPageOptions: rowSizeList, - serverSide: true, - rowsSelected: this.getSelectedRowIndexes(), - customToolbarSelect: () => null, - onTableChange: (action, tableState) => { - switch (action) { - case "changePage": - if (tableState.page > displayPage - 1) { - this.clearCampaignSelection(); - this.props.onNextPageClick(); - } else { - this.clearCampaignSelection(); - this.props.onPreviousPageClick(); - } - break; - case "changeRowsPerPage": - this.clearCampaignSelection(); - const _ = undefined; - this.props.onRowSizeChange(_, tableState.rowsPerPage); - break; - case "sort": - this.clearCampaignSelection(); - this.state.campaigns.sort(this.sortFunc(tableState.sortOrder.name)); - if (tableState.sortOrder.direction === "desc") { - this.state.campaigns.reverse() - } - break; - case "rowSelectionChange": - const ids = tableState.selectedRows.data.map(({ index }) => { - return this.state.campaigns[index].id; - }); - this.props.handleChecked(ids); - break; - case "propsUpdate": - break; - default: - break; - } + const options = { + filterType: "checkbox", + selectableRows: "multiple", // selectMultiple ? "multiple" : "none", + elevation: 0, + download: false, + print: false, + searchable: false, + filter: false, + sort: true, + search: false, + viewColumns: false, + page: displayPage - 1, + count: total, + rowsPerPage: limit, + rowsPerPageOptions: rowSizeList, + serverSide: true, + rowsSelected: getSelectedRowIndexes(), + customToolbarSelect: () => null, + onTableChange: (action, tableState) => { + switch (action) { + case "changePage": + if (tableState.page > displayPage - 1) { + clearCampaignSelection(); + onNextPageClick(); + } else { + clearCampaignSelection(); + onPreviousPageClick(); + } + break; + case "changeRowsPerPage": + clearCampaignSelection(); + const _ = undefined; + onRowSizeChange(_, tableState.rowsPerPage); + break; + case "sort": + clearCampaignSelection(); + state.campaigns.sort(sortFunc(tableState.sortOrder.name)); + if (tableState.sortOrder.direction === "desc") { + state.campaigns.reverse() + } + break; + case "rowSelectionChange": + const ids = tableState.selectedRows.data.map(({ index }) => { + return state.campaigns[index].id; + }); + handleChecked(ids); + break; + case "propsUpdate": + break; + default: + break; } - }; + } + }; - return this.state.campaigns.length === 0 ? ( - } /> - ) : ( -
-
-
- - {/* make space for Floating Action Button */} -
-
-
-
- ); - } + return state.campaigns.length === 0 ? ( + } /> + ) : ( +
+
+
+ + {/* make space for Floating Action Button */} +
+
+
+
+ ); +} + +CampaignTable.propTypes = { + adminPerms: PropTypes.bool, + selectMultiple: PropTypes.bool, + organizationId: PropTypes.string, + data: PropTypes.object, + handleChecked: PropTypes.func, + archiveCampaign: PropTypes.func, + unarchiveCampaign: PropTypes.func, + onNextPageClick: PropTypes.func, + onPreviousPageClick: PropTypes.func, + onRowSizeChange: PropTypes.func, + campaignsToArchive: PropTypes.array, + campaignsWithChangingStatus: PropTypes.array, + currentSortBy: PropTypes.oneOf(SORTS.map(s => s.value)) } export default CampaignTable; From c6974c7b7214f52137d68765ece4c7411ed55e87 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Tue, 24 Sep 2024 08:05:48 -0400 Subject: [PATCH 04/16] change how we manipulate campaigns in this table --- .../AdminCampaignList/CampaignTable.jsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/AdminCampaignList/CampaignTable.jsx b/src/components/AdminCampaignList/CampaignTable.jsx index 899930f15..0d147b7ed 100644 --- a/src/components/AdminCampaignList/CampaignTable.jsx +++ b/src/components/AdminCampaignList/CampaignTable.jsx @@ -37,9 +37,10 @@ const CampaignTable = ({ unarchiveCampaign }) => { + const [campaigns, setCampaigns] = useState(data.organization.campaigns.campaigns.map((campaign) => ({...campaign}))); + const [state, setState] = useState({ - dataTableKey: "initial", - campaigns: [...data.organization.campaigns.campaigns] + dataTableKey: "initial" }); const { limit, offset, total } = data.organization.campaigns.pageInfo; @@ -284,7 +285,7 @@ const CampaignTable = ({ } const getSelectedRowIndexes = () => { - const campaignIds = data.organization.campaigns.campaigns.map( + const campaignIds = campaigns.map( c => c.id ); const indexes = campaignsToArchive.map(campaignId => @@ -305,7 +306,6 @@ const CampaignTable = ({ // Terrible hack around buggy DataTables: we have to force the component // to remount if we want clear the "select all" status setState({ - ...state, dataTableKey: new Date().getTime() }); }; @@ -346,14 +346,14 @@ const CampaignTable = ({ break; case "sort": clearCampaignSelection(); - state.campaigns.sort(sortFunc(tableState.sortOrder.name)); + campaigns.sort(sortFunc(tableState.sortOrder.name)); if (tableState.sortOrder.direction === "desc") { - state.campaigns.reverse() + campaigns.reverse() } break; case "rowSelectionChange": const ids = tableState.selectedRows.data.map(({ index }) => { - return state.campaigns[index].id; + return campaigns[index].id; }); handleChecked(ids); break; @@ -365,17 +365,17 @@ const CampaignTable = ({ } }; - return state.campaigns.length === 0 ? ( + return campaigns.length === 0 ? ( } /> ) : (


From 01edd119ff73ae3ce5e00ea4b2778937b5ec0bcb Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Tue, 24 Sep 2024 11:01:09 -0400 Subject: [PATCH 05/16] filter out campaigns that have been archived or unarchived --- src/components/AdminCampaignList/CampaignTable.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/AdminCampaignList/CampaignTable.jsx b/src/components/AdminCampaignList/CampaignTable.jsx index 0d147b7ed..a86e0ffbd 100644 --- a/src/components/AdminCampaignList/CampaignTable.jsx +++ b/src/components/AdminCampaignList/CampaignTable.jsx @@ -62,7 +62,10 @@ const CampaignTable = ({ return ( await unarchiveCampaign(campaign.id)} + onClick={async () => { + await unarchiveCampaign(campaign.id); + setCampaigns(campaigns.filter(e => e.id != campaign.id)); + }} > @@ -71,7 +74,10 @@ const CampaignTable = ({ return ( await archiveCampaign(campaign.id)} + onClick={async () => { + await archiveCampaign(campaign.id); + setCampaigns(campaigns.filter(e => e.id != campaign.id)); + }} > From 8598a2f9e8108d9c96875f317d8fccd755252381 Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Tue, 24 Sep 2024 11:37:52 -0400 Subject: [PATCH 06/16] ensure isArchived persists into next render --- src/containers/AdminCampaignList.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx index 1cdc5ef64..731860439 100644 --- a/src/containers/AdminCampaignList.jsx +++ b/src/containers/AdminCampaignList.jsx @@ -138,7 +138,7 @@ const AdminCampaignList = ({ style={{ marginRight: "20px" }} > Current - Archived + Archived @@ -272,14 +272,15 @@ const AdminCampaignList = ({ const changeFilter = async newFilter => { setState({ ...state, - isLoading: true, - campaignsFilter: newFilter + campaignsFilter: newFilter, + isLoading: true }); await data.refetch({ campaignsFilter: newFilter }); setState({ ...state, + campaignsFilter: newFilter, isLoading: false }); }; From d7c5c3ecf84452c75deb8f7da38c1c4f5a1720b5 Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Thu, 26 Sep 2024 16:41:43 -0400 Subject: [PATCH 07/16] add @testing-library/react @testing-library/jest-dom --- package.json | 2 ++ yarn.lock | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+) diff --git a/package.json b/package.json index 4b6fcebae..dd7ee36fe 100644 --- a/package.json +++ b/package.json @@ -182,6 +182,8 @@ }, "devDependencies": { "@babel/eslint-parser": "^7.24.7", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", "babel-jest": "^29.3.1", "babel-preset-es2017": "^6.24.1", "cypress": "^13.11.0", diff --git a/yarn.lock b/yarn.lock index 00fb26e8a..f3b46f125 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,11 @@ resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf" integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== +"@adobe/css-tools@^4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.0.tgz#728c484f4e10df03d5a3acd0d8adcbbebff8ad63" + integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ== + "@alloc/quick-lru@^5.2.0": version "5.2.0" resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30" @@ -5051,6 +5056,26 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@testing-library/jest-dom@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54" + integrity sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA== + dependencies: + "@adobe/css-tools" "^4.4.0" + aria-query "^5.0.0" + chalk "^3.0.0" + css.escape "^1.5.1" + dom-accessibility-api "^0.6.3" + lodash "^4.17.21" + redent "^3.0.0" + +"@testing-library/react@^16.0.1": + version "16.0.1" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.1.tgz#29c0ee878d672703f5e7579f239005e4e0faa875" + integrity sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg== + dependencies: + "@babel/runtime" "^7.12.5" + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -6130,6 +6155,11 @@ argparse@^2.0.1: resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== +aria-query@^5.0.0: + version "5.3.2" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59" + integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw== + aria-query@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e" @@ -7456,6 +7486,14 @@ chalk@^2.4.1, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" +chalk@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" + integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -8341,6 +8379,11 @@ css-what@^6.0.1, css-what@^6.1.0: resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== +css.escape@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" + integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== + cssdb@^7.1.0: version "7.11.2" resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.11.2.tgz#127a2f5b946ee653361a5af5333ea85a39df5ae5" @@ -9003,6 +9046,11 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-accessibility-api@^0.6.3: + version "0.6.3" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" + integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w== + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -14315,6 +14363,11 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" +min-indent@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" + integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== + mini-css-extract-plugin@^2.4.5: version "2.8.1" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz#75245f3f30ce3a56dbdd478084df6fe475f02dc7" @@ -17144,6 +17197,14 @@ redent@^1.0.0: indent-string "^2.1.0" strip-indent "^1.0.1" +redent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" + integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== + dependencies: + indent-string "^4.0.0" + strip-indent "^3.0.0" + redis-commands@^1.1.0: version "1.7.0" resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89" @@ -18649,6 +18710,13 @@ strip-indent@^1.0.1: dependencies: get-stdin "^4.0.1" +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + dependencies: + min-indent "^1.0.0" + strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" From 0992c41ff1dc7745c6915a9234e971146d001130 Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Thu, 26 Sep 2024 17:00:42 -0400 Subject: [PATCH 08/16] downgrade testing library to 12.1.5 --- package.json | 2 +- yarn.lock | 73 ++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 61 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index dd7ee36fe..075fbfc1f 100644 --- a/package.json +++ b/package.json @@ -183,7 +183,7 @@ "devDependencies": { "@babel/eslint-parser": "^7.24.7", "@testing-library/jest-dom": "^6.5.0", - "@testing-library/react": "^16.0.1", + "@testing-library/react": "^12.1.5", "babel-jest": "^29.3.1", "babel-preset-es2017": "^6.24.1", "cypress": "^13.11.0", diff --git a/yarn.lock b/yarn.lock index f3b46f125..4b38e693e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5056,6 +5056,20 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@testing-library/dom@^8.0.0": + version "8.20.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f" + integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^5.0.1" + aria-query "5.1.3" + chalk "^4.1.0" + dom-accessibility-api "^0.5.9" + lz-string "^1.5.0" + pretty-format "^27.0.2" + "@testing-library/jest-dom@^6.5.0": version "6.5.0" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54" @@ -5069,12 +5083,14 @@ lodash "^4.17.21" redent "^3.0.0" -"@testing-library/react@^16.0.1": - version "16.0.1" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.1.tgz#29c0ee878d672703f5e7579f239005e4e0faa875" - integrity sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg== +"@testing-library/react@^12.1.5": + version "12.1.5" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b" + integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg== dependencies: "@babel/runtime" "^7.12.5" + "@testing-library/dom" "^8.0.0" + "@types/react-dom" "<18.0.0" "@tootallnate/once@1": version "1.1.2" @@ -5096,6 +5112,11 @@ resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== +"@types/aria-query@^5.0.1": + version "5.0.4" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708" + integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw== + "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14": version "7.20.5" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017" @@ -5360,6 +5381,13 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb" integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== +"@types/react-dom@<18.0.0": + version "17.0.25" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5" + integrity sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA== + dependencies: + "@types/react" "^17" + "@types/react-transition-group@^4.2.0": version "4.4.10" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" @@ -5376,6 +5404,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@^17": + version "17.0.82" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.82.tgz#eb84c38ee1023cd61be1b909fde083ac83fc163f" + integrity sha512-wTW8Lu/PARGPFE8tOZqCvprOKg5sen/2uS03yKn2xbCDFP9oLncm7vMDQ2+dEQXHVIXrOpW6u72xUXEXO0ypSw== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "^0.16" + csstype "^3.0.2" + "@types/resolve@1.17.1": version "1.17.1" resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6" @@ -5388,7 +5425,7 @@ resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d" integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA== -"@types/scheduler@*": +"@types/scheduler@*", "@types/scheduler@^0.16": version "0.16.8" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff" integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A== @@ -6155,6 +6192,13 @@ argparse@^2.0.1: resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== +aria-query@5.1.3, aria-query@~5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e" + integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ== + dependencies: + deep-equal "^2.0.5" + aria-query@^5.0.0: version "5.3.2" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59" @@ -6167,13 +6211,6 @@ aria-query@^5.3.0: dependencies: dequal "^2.0.3" -aria-query@~5.1.3: - version "5.1.3" - resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e" - integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ== - dependencies: - deep-equal "^2.0.5" - arr-diff@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" @@ -9046,6 +9083,11 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-accessibility-api@^0.5.9: + version "0.5.16" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" + integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== + dom-accessibility-api@^0.6.3: version "0.6.3" resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" @@ -14089,6 +14131,11 @@ lru-cache@~2.2.1: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d" integrity sha512-Q5pAgXs+WEAfoEdw2qKQhNFFhMoFMTYqRVKKUMnzuiR7oKFHS7fWo848cPcTKw+4j/IdN17NyzdhVKgabFV0EA== +lz-string@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" + integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ== + magic-string@^0.25.0, magic-string@^0.25.7: version "0.25.9" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c" @@ -16433,7 +16480,7 @@ pretty-error@^4.0.0: lodash "^4.17.20" renderkid "^3.0.0" -pretty-format@^27.5.1: +pretty-format@^27.0.2, pretty-format@^27.5.1: version "27.5.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== From e56d17b56341656a04c1f061214d1afaddb0027c Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Thu, 26 Sep 2024 18:03:28 -0400 Subject: [PATCH 09/16] Expoert AdminCampaignList for testing --- src/containers/AdminCampaignList.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx index 731860439..de080857b 100644 --- a/src/containers/AdminCampaignList.jsx +++ b/src/containers/AdminCampaignList.jsx @@ -35,7 +35,8 @@ const styles = StyleSheet.create({ const INITIAL_SORT_BY = ID_DESC_SORT.value; -const AdminCampaignList = ({ +// Exported for testing +export const AdminCampaignList = ({ params, mutations, router, From ce3a94a545ced0627ab790f504230aaf844ee6b6 Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Thu, 26 Sep 2024 18:34:03 -0400 Subject: [PATCH 10/16] add RTL userEvent and dom --- package.json | 2 ++ yarn.lock | 33 +++++++++++++++++++++++++++------ 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 075fbfc1f..79502f210 100644 --- a/package.json +++ b/package.json @@ -182,8 +182,10 @@ }, "devDependencies": { "@babel/eslint-parser": "^7.24.7", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.5.0", "@testing-library/react": "^12.1.5", + "@testing-library/user-event": "^12.1.5", "babel-jest": "^29.3.1", "babel-preset-es2017": "^6.24.1", "cypress": "^13.11.0", diff --git a/yarn.lock b/yarn.lock index 4b38e693e..55b0118ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5056,6 +5056,20 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@testing-library/dom@^10.4.0": + version "10.4.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8" + integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^5.0.1" + aria-query "5.3.0" + chalk "^4.1.0" + dom-accessibility-api "^0.5.9" + lz-string "^1.5.0" + pretty-format "^27.0.2" + "@testing-library/dom@^8.0.0": version "8.20.1" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f" @@ -5092,6 +5106,13 @@ "@testing-library/dom" "^8.0.0" "@types/react-dom" "<18.0.0" +"@testing-library/user-event@^12.1.5": + version "12.8.3" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.8.3.tgz#1aa3ed4b9f79340a1e1836bc7f57c501e838704a" + integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ== + dependencies: + "@babel/runtime" "^7.12.5" + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -6199,18 +6220,18 @@ aria-query@5.1.3, aria-query@~5.1.3: dependencies: deep-equal "^2.0.5" -aria-query@^5.0.0: - version "5.3.2" - resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59" - integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw== - -aria-query@^5.3.0: +aria-query@5.3.0, aria-query@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e" integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A== dependencies: dequal "^2.0.3" +aria-query@^5.0.0: + version "5.3.2" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59" + integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw== + arr-diff@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" From ebe30c882c9cfc5b9cc90dc8df797fc90ccc880f Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Fri, 27 Sep 2024 10:50:11 -0400 Subject: [PATCH 11/16] remove testing-library/jest-dom --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 79502f210..574fe5ce1 100644 --- a/package.json +++ b/package.json @@ -183,7 +183,6 @@ "devDependencies": { "@babel/eslint-parser": "^7.24.7", "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.5.0", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^12.1.5", "babel-jest": "^29.3.1", From f0aadf0b9607307d09f1fa5be985a36bbf6bea01 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Mon, 30 Sep 2024 14:37:51 -0400 Subject: [PATCH 12/16] forgotten yarn --- yarn.lock | 61 ------------------------------------------------------- 1 file changed, 61 deletions(-) diff --git a/yarn.lock b/yarn.lock index 55b0118ad..5d12e2647 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,11 +7,6 @@ resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf" integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== -"@adobe/css-tools@^4.4.0": - version "4.4.0" - resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.0.tgz#728c484f4e10df03d5a3acd0d8adcbbebff8ad63" - integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ== - "@alloc/quick-lru@^5.2.0": version "5.2.0" resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30" @@ -5084,19 +5079,6 @@ lz-string "^1.5.0" pretty-format "^27.0.2" -"@testing-library/jest-dom@^6.5.0": - version "6.5.0" - resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54" - integrity sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA== - dependencies: - "@adobe/css-tools" "^4.4.0" - aria-query "^5.0.0" - chalk "^3.0.0" - css.escape "^1.5.1" - dom-accessibility-api "^0.6.3" - lodash "^4.17.21" - redent "^3.0.0" - "@testing-library/react@^12.1.5": version "12.1.5" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b" @@ -6227,11 +6209,6 @@ aria-query@5.3.0, aria-query@^5.3.0: dependencies: dequal "^2.0.3" -aria-query@^5.0.0: - version "5.3.2" - resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59" - integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw== - arr-diff@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" @@ -7544,14 +7521,6 @@ chalk@^2.4.1, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" -chalk@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" - integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" @@ -8437,11 +8406,6 @@ css-what@^6.0.1, css-what@^6.1.0: resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== -css.escape@^1.5.1: - version "1.5.1" - resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" - integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg== - cssdb@^7.1.0: version "7.11.2" resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.11.2.tgz#127a2f5b946ee653361a5af5333ea85a39df5ae5" @@ -9109,11 +9073,6 @@ dom-accessibility-api@^0.5.9: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== -dom-accessibility-api@^0.6.3: - version "0.6.3" - resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" - integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w== - dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -14431,11 +14390,6 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" -min-indent@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" - integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== - mini-css-extract-plugin@^2.4.5: version "2.8.1" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz#75245f3f30ce3a56dbdd478084df6fe475f02dc7" @@ -17265,14 +17219,6 @@ redent@^1.0.0: indent-string "^2.1.0" strip-indent "^1.0.1" -redent@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" - integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== - dependencies: - indent-string "^4.0.0" - strip-indent "^3.0.0" - redis-commands@^1.1.0: version "1.7.0" resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89" @@ -18778,13 +18724,6 @@ strip-indent@^1.0.1: dependencies: get-stdin "^4.0.1" -strip-indent@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" - integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== - dependencies: - min-indent "^1.0.0" - strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" From 6009f18b54be87a32cea6d30d1c1ae872bb90227 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Mon, 30 Sep 2024 14:38:08 -0400 Subject: [PATCH 13/16] persists sortBy --- src/containers/AdminCampaignList.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx index de080857b..68978d7ce 100644 --- a/src/containers/AdminCampaignList.jsx +++ b/src/containers/AdminCampaignList.jsx @@ -297,7 +297,8 @@ export const AdminCampaignList = ({ }); setState({ ...state, - isLoading: false + isLoading: false, + sortBy: newSort }); }; From 1d476b96a2757add83bd4e823c9f9a9aa69a50c2 Mon Sep 17 00:00:00 2001 From: engelhartrueben Date: Mon, 30 Sep 2024 14:39:32 -0400 Subject: [PATCH 14/16] redo timezone tests --- __test__/containers/CampaignList.test.js | 69 +++++++++++++++++------- 1 file changed, 51 insertions(+), 18 deletions(-) diff --git a/__test__/containers/CampaignList.test.js b/__test__/containers/CampaignList.test.js index a81702f13..e150af421 100644 --- a/__test__/containers/CampaignList.test.js +++ b/__test__/containers/CampaignList.test.js @@ -3,14 +3,25 @@ */ import React from "react"; import { mount } from "enzyme"; +import { render, screen, waitForElementToBeRemoved, waitFor, cleanup } from "@testing-library/react"; +import userEvent from "@testing-library/user-event" import { AdminCampaignList } from "../../src/containers/AdminCampaignList"; -import { TIMEZONE_SORT } from "../../src/components/AdminCampaignList/SortBy"; import { StyleSheetTestUtils } from "aphrodite"; +import { act } from 'react-dom/test-utils'; + +// https://github.com/Khan/aphrodite/issues/62#issuecomment-267026726 +beforeEach(() => { + StyleSheetTestUtils.suppressStyleInjection(); +}); +afterEach(() => { + StyleSheetTestUtils.clearBufferAndResumeStyleInjection(); + cleanup() +}); describe("CampaignList", () => { const params = { adminPerms: true, - organizationId: 77 + organizationId: '77' }; const mutations = { @@ -110,19 +121,21 @@ describe("CampaignList", () => { describe("Campaign list sorting", () => { const campaignWithCreator = { - id: 1, + id: '1', + title: 'test', creator: { displayName: "Lorem Ipsum" }, completionStats: {}, organization: { id: 1 - } + }, + timezone: "US/Eastern" }; const data = { organization: { - id: 1, + id: '1', cacheable: 2, campaigns: { campaigns: [campaignWithCreator], @@ -132,26 +145,46 @@ describe("CampaignList", () => { total: 1 } } - } + }, + refetch: () => {} }; - test("Timezone column is displayed when timezone is current sort", () => { + test("Timezone column is displayed when timezone is current sort", async () => { StyleSheetTestUtils.suppressStyleInjection(); - const wrapper = mount( - - ); - wrapper.setState({ - sortBy: TIMEZONE_SORT.value - }); - expect(wrapper.containsMatchingElement("Timezone")).toBeTruthy(); + act(() => { + render( + + ); + }) + + act(() => { + userEvent.click( + screen.getByRole( + 'button', + {name: /sort: created, newest/i} + ), { skipHover: true }); + }) + + act(() => { + userEvent.click( + screen.getByRole( + 'option', + {name: /sort: timezone/i} + ), { skipHover: true }); + }) + + await waitFor(() => expect(screen.getByRole('columnheader', {name: /timezone/i})).toBeTruthy()); }); test("Timezone column is hidden when it isn't the current sort", () => { StyleSheetTestUtils.suppressStyleInjection(); - const wrapper = mount( - - ); - expect(wrapper.containsMatchingElement("Timezone")).toBeFalsy(); + act(() => { + render( + + ); + }) + const timezoneButton = screen.queryByText('columnheader', { name: /timezone/i }); + expect(timezoneButton).toBeNull(); }); }); }); From 57ed8ea02e5dd6e729b65309c253b1fd37cc3ca4 Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Tue, 1 Oct 2024 12:03:33 -0400 Subject: [PATCH 15/16] prettier lint --- __test__/containers/CampaignList.test.js | 68 +++++++++++++++--------- 1 file changed, 43 insertions(+), 25 deletions(-) diff --git a/__test__/containers/CampaignList.test.js b/__test__/containers/CampaignList.test.js index e150af421..069f7d710 100644 --- a/__test__/containers/CampaignList.test.js +++ b/__test__/containers/CampaignList.test.js @@ -3,11 +3,17 @@ */ import React from "react"; import { mount } from "enzyme"; -import { render, screen, waitForElementToBeRemoved, waitFor, cleanup } from "@testing-library/react"; -import userEvent from "@testing-library/user-event" -import { AdminCampaignList } from "../../src/containers/AdminCampaignList"; +import { act } from "react-dom/test-utils"; +import { + render, + screen, + waitFor, + cleanup +} from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { StyleSheetTestUtils } from "aphrodite"; -import { act } from 'react-dom/test-utils'; + +import { AdminCampaignList } from "../../src/containers/AdminCampaignList"; // https://github.com/Khan/aphrodite/issues/62#issuecomment-267026726 beforeEach(() => { @@ -15,13 +21,13 @@ beforeEach(() => { }); afterEach(() => { StyleSheetTestUtils.clearBufferAndResumeStyleInjection(); - cleanup() + cleanup(); }); describe("CampaignList", () => { const params = { adminPerms: true, - organizationId: '77' + organizationId: "77" }; const mutations = { @@ -121,8 +127,8 @@ describe("CampaignList", () => { describe("Campaign list sorting", () => { const campaignWithCreator = { - id: '1', - title: 'test', + id: "1", + title: "test", creator: { displayName: "Lorem Ipsum" }, @@ -135,7 +141,7 @@ describe("CampaignList", () => { const data = { organization: { - id: '1', + id: "1", cacheable: 2, campaigns: { campaigns: [campaignWithCreator], @@ -153,37 +159,49 @@ describe("CampaignList", () => { StyleSheetTestUtils.suppressStyleInjection(); act(() => { render( - + ); - }) + }); act(() => { userEvent.click( - screen.getByRole( - 'button', - {name: /sort: created, newest/i} - ), { skipHover: true }); - }) + screen.getByRole("button", { name: /sort: created, newest/i }), + { skipHover: true } + ); + }); act(() => { userEvent.click( - screen.getByRole( - 'option', - {name: /sort: timezone/i} - ), { skipHover: true }); - }) + screen.getByRole("option", { name: /sort: timezone/i }), + { skipHover: true } + ); + }); - await waitFor(() => expect(screen.getByRole('columnheader', {name: /timezone/i})).toBeTruthy()); + await waitFor(() => + expect( + screen.getByRole("columnheader", { name: /timezone/i }) + ).toBeTruthy() + ); }); test("Timezone column is hidden when it isn't the current sort", () => { StyleSheetTestUtils.suppressStyleInjection(); act(() => { render( - + ); - }) - const timezoneButton = screen.queryByText('columnheader', { name: /timezone/i }); + }); + const timezoneButton = screen.queryByText("columnheader", { + name: /timezone/i + }); expect(timezoneButton).toBeNull(); }); }); From 4bc59a30235047c9fb3a2df59b7761c340b1ebd1 Mon Sep 17 00:00:00 2001 From: Rueben Engelhart Date: Tue, 1 Oct 2024 12:04:50 -0400 Subject: [PATCH 16/16] prettier lint --- src/containers/AdminCampaignList.jsx | 74 +++++++++++----------------- 1 file changed, 28 insertions(+), 46 deletions(-) diff --git a/src/containers/AdminCampaignList.jsx b/src/containers/AdminCampaignList.jsx index 68978d7ce..80c986ba6 100644 --- a/src/containers/AdminCampaignList.jsx +++ b/src/containers/AdminCampaignList.jsx @@ -18,9 +18,7 @@ import LoadingIndicator from "../components/LoadingIndicator"; import { dataTest } from "../lib/attributes"; import loadData from "./hoc/load-data"; import theme from "../styles/theme"; -import SortBy, { - ID_DESC_SORT -} from "../components/AdminCampaignList/SortBy"; +import SortBy, { ID_DESC_SORT } from "../components/AdminCampaignList/SortBy"; import Search from "../components/Search"; import CampaignTable from "../components/AdminCampaignList/CampaignTable"; @@ -36,13 +34,7 @@ const styles = StyleSheet.create({ const INITIAL_SORT_BY = ID_DESC_SORT.value; // Exported for testing -export const AdminCampaignList = ({ - params, - mutations, - router, - data - }) => { - +export const AdminCampaignList = ({ params, mutations, router, data }) => { const [state, setState] = useState({ pageSize: 50, page: 0, @@ -60,9 +52,9 @@ export const AdminCampaignList = ({ const handleClickNewButton = async () => { const { organizationId } = params; - setState({ + setState({ ...state, - isLoading: true + isLoading: true }); const newCampaign = await mutations.createCampaign({ title: "New Campaign", @@ -87,9 +79,9 @@ export const AdminCampaignList = ({ const handleClickArchiveMultipleButton = async keys => { if (keys.length) { - setState({ + setState({ ...state, - isLoading: true + isLoading: true }); await mutations.archiveCampaigns(keys); await data.refetch(); @@ -173,16 +165,16 @@ export const AdminCampaignList = ({ const handleMenuClick = event => { console.log("event.target", event.target); - setState({ + setState({ ...state, - menuAnchorEl: event.target + menuAnchorEl: event.target }); }; const handleMenuClose = () => { - setState({ + setState({ ...state, - menuAnchorEl: null + menuAnchorEl: null }); }; @@ -208,10 +200,7 @@ export const AdminCampaignList = ({ return ( {iconButton} - + {state.archiveMultiple ? ( { @@ -240,14 +229,10 @@ export const AdminCampaignList = ({ ); - } + }; const changePage = (pageDelta, pageSize) => { - const { - limit, - offset, - total - } = data.organization.campaigns.pageInfo; + const { limit, offset, total } = data.organization.campaigns.pageInfo; const currentPage = Math.floor(offset / limit); const pageSizeAdjustedCurrentPage = Math.floor( (currentPage * limit) / pageSize @@ -279,10 +264,10 @@ export const AdminCampaignList = ({ await data.refetch({ campaignsFilter: newFilter }); - setState({ + setState({ ...state, campaignsFilter: newFilter, - isLoading: false + isLoading: false }); }; @@ -295,7 +280,7 @@ export const AdminCampaignList = ({ await data.refetch({ sortBy: newSort }); - setState({ + setState({ ...state, isLoading: false, sortBy: newSort @@ -322,9 +307,9 @@ export const AdminCampaignList = ({ const changeCampaignStatus = async (campaignId, changeFn) => { setState({ ...state, - campaignsWithChangingStatus: state.campaignsWithChangingStatus.concat( - [campaignId] - ) + campaignsWithChangingStatus: state.campaignsWithChangingStatus.concat([ + campaignId + ]) }); await changeFn(campaignId); await data.refetch(); @@ -343,10 +328,7 @@ export const AdminCampaignList = ({ }; const handleUnarchiveCampaign = async campaignId => { - await changeCampaignStatus( - campaignId, - mutations.unarchiveCampaign - ); + await changeCampaignStatus(campaignId, mutations.unarchiveCampaign); }; const renderActionButton = () => { @@ -374,7 +356,7 @@ export const AdminCampaignList = ({ ); - } + }; // don't think this is right return (
@@ -402,7 +384,7 @@ export const AdminCampaignList = ({ {params.adminPerms && renderActionButton()}
); -} +}; const campaignInfoFragment = ` id @@ -543,13 +525,13 @@ const mutations = { AdminCampaignList.propTypes = { params: PropTypes.object, - mutations: PropTypes.exact({ - createCampaign: PropTypes.func, - archiveCampaigns: PropTypes.func, - unarchiveCampaign: PropTypes.func - }), + mutations: PropTypes.exact({ + createCampaign: PropTypes.func, + archiveCampaigns: PropTypes.func, + unarchiveCampaign: PropTypes.func + }), data: PropTypes.object, router: PropTypes.object -} +}; export default loadData({ queries, mutations })(withRouter(AdminCampaignList));