From e3c7050788963529bf6539142c1c6bbdd3e887e8 Mon Sep 17 00:00:00 2001 From: Gianpaolo Sinatra Date: Mon, 15 Jan 2024 14:45:57 +0100 Subject: [PATCH 1/6] wip --- src/pages/MyBugs/MyBugsFilters.tsx | 17 +++++++--- src/pages/MyBugs/index.tsx | 52 +++++++++++++++++++++--------- 2 files changed, 49 insertions(+), 20 deletions(-) diff --git a/src/pages/MyBugs/MyBugsFilters.tsx b/src/pages/MyBugs/MyBugsFilters.tsx index c4f6db773..cd7bb4bbb 100644 --- a/src/pages/MyBugs/MyBugsFilters.tsx +++ b/src/pages/MyBugs/MyBugsFilters.tsx @@ -40,7 +40,7 @@ const MyBugsFilters = ({ let campaignValue = { label: allCampaign }; let severityValue = { label: allSeverity }; let statusValue = { label: allStatus }; - + // GET by RTK the BUGS and use campaigns, severities and status here if ( selectedCampaign && campaigns.map((c) => c.value).includes(selectedCampaign.value) @@ -65,7 +65,10 @@ const MyBugsFilters = ({
dispatch(setSelectedSeverity(value))} + onChange={(value) => + //changePagination(1); + dispatch(setSelectedSeverity(value)) + } name="severity" options={[{ label: allSeverity }, ...severities]} value={severityValue} @@ -91,7 +97,10 @@ const MyBugsFilters = ({
- //changePagination(1); - dispatch(setSelectedCampaign(value)) - } + onChange={(value) => { + setPage(1); + dispatch(setSelectedCampaign(value)); + }} name="campaign" options={[{ label: allCampaign }, ...campaigns]} value={campaignValue} @@ -81,10 +145,10 @@ const MyBugsFilters = ({
- //changePagination(1); - dispatch(setSelectedStatus(value)) - } + onChange={(value) => { + setPage(1); + dispatch(setSelectedStatus(value)); + }} name="status" options={[{ label: allStatus }, ...status]} value={statusValue} diff --git a/src/pages/MyBugs/index.tsx b/src/pages/MyBugs/index.tsx index 62bdb39fd..1049b10ab 100644 --- a/src/pages/MyBugs/index.tsx +++ b/src/pages/MyBugs/index.tsx @@ -3,18 +3,15 @@ import { BSGrid, Button, Card, - TableType, } from "@appquality/appquality-design-system"; import queryString from "query-string"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { shallowEqual, useSelector } from "react-redux"; import { useLocation } from "react-router-dom"; import { PageTemplate } from "src/features/PageTemplate"; import i18n from "../../i18n"; import { - fetchMyBugs, - fetchMyBugsFilters, setSelectedCampaign, setSelectedStatus, updateMybugsPagination, @@ -29,16 +26,8 @@ export default function MyBugs() { const { search } = useLocation(); const { t } = useTranslation(); const dispatch = useAppDispatch(); - const [columns, setcolumns] = useState( - MyBugsColumns(dispatch, t) - ); - const [rows, setRows] = useState([]); - const { selectedCampaign, selectedSeverity, selectedStatus } = useSelector( (state: GeneralState) => ({ - campaigns: state.myBugs.campaigns, - severities: state.myBugs.severities, - status: state.myBugs.status, selectedCampaign: state.myBugs.selectedCampaign, selectedSeverity: state.myBugs.selectedSeverity, selectedStatus: state.myBugs.selectedStatus, @@ -46,10 +35,9 @@ export default function MyBugs() { shallowEqual ); - const { limit, total, start, order, orderBy } = useSelector( + const { limit, start, order, orderBy } = useSelector( (state: GeneralState) => ({ limit: state.myBugs.bugsList.limit, - total: state.myBugs.bugsList.total, start: state.myBugs.bugsList.start, order: state.myBugs.bugsList.order, orderBy: state.myBugs.bugsList.orderBy, @@ -62,13 +50,13 @@ export default function MyBugs() { limit: limit, orderBy: orderBy, order: order, - // filterBy: { - // campaign: selectedCampaign?.value, - // severity: selectedSeverity?.value, - // status: selectedStatus?.value, - // }, + filterBy: { + campaign: selectedCampaign?.value, + severity: selectedSeverity?.value, + status: selectedStatus?.value, + }, }); - const results = data?.results || []; + const { results, total } = data || {}; const changePagination = (newPage: number) => { const newStart = limit * (newPage - 1); @@ -87,60 +75,45 @@ export default function MyBugs() { } }, [queryString]); - useEffect(() => { - setRows( - results.map((res) => { - let status = res.status - ? { - title: res.status.name, - content: ( - - {res.status.name} - - ), - } - : "unknown"; - return { - key: res.id, - id: res.id, - severity: res.severity?.name, - status: status, - title: res.title?.replace(/\\(.)/gm, "$1"), - action: { - title: `${window.location.origin}/${ + const rows = (results || []).map((res) => { + let status = res.status + ? { + title: res.status.name, + content: ( + + {res.status.name} + + ), + } + : "unknown"; + return { + key: res.id, + id: res.id, + severity: res.severity?.name, + status: status, + title: res.title?.replace(/\\(.)/gm, "$1"), + action: { + title: `${window.location.origin}/${ + i18n.language !== "en" ? `${i18n.language}/` : "" + }bugs/show/${res.id}`, + content: ( + - ), - }, - }; - }) - ); - }, [results]); - - useEffect(() => { - if (selectedCampaign || selectedSeverity || selectedStatus) { - changePagination(1); - dispatch(fetchMyBugsFilters()); - } - }, [selectedCampaign, selectedSeverity, selectedStatus]); - - useEffect(() => { - dispatch(fetchMyBugs()); - dispatch(fetchMyBugsFilters()); - }, []); + }bugs/show/${res.id}`} + kind="link-hover" + size="sm" + > + {t("View more")} + + ), + }, + }; + }); + const columns = MyBugsColumns(dispatch, t); return ( @@ -150,7 +123,7 @@ export default function MyBugs() { data={rows} page={(start || 0) / limit + 1} setPage={changePagination} - totalBugs={total} + totalBugs={total ?? 0} limit={limit} loading={isLoading} columns={columns} @@ -165,17 +138,15 @@ export default function MyBugs() { title={t("Filters")} shadow={true} > - {/* */} + /> From 4e7166e13adb202d91e7115ef1f1aa6bef711655 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Mon, 15 Jan 2024 17:38:43 +0100 Subject: [PATCH 3/6] rework: Extract query string filter in bugs Co-authored-by: Gianpaolo Sinatra Co-authored-by: Marco --- src/pages/MyBugs/index.tsx | 27 ++++------------------ src/pages/MyBugs/useQueryStringFilters.tsx | 27 ++++++++++++++++++++++ 2 files changed, 32 insertions(+), 22 deletions(-) create mode 100644 src/pages/MyBugs/useQueryStringFilters.tsx diff --git a/src/pages/MyBugs/index.tsx b/src/pages/MyBugs/index.tsx index 1049b10ab..77b7c3fb3 100644 --- a/src/pages/MyBugs/index.tsx +++ b/src/pages/MyBugs/index.tsx @@ -4,28 +4,23 @@ import { Button, Card, } from "@appquality/appquality-design-system"; -import queryString from "query-string"; -import { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { shallowEqual, useSelector } from "react-redux"; -import { useLocation } from "react-router-dom"; import { PageTemplate } from "src/features/PageTemplate"; +import { useGetUsersMeBugsQuery } from "src/services/tryberApi"; import i18n from "../../i18n"; -import { - setSelectedCampaign, - setSelectedStatus, - updateMybugsPagination, -} from "../../redux/myBugs/actionCreator"; +import { updateMybugsPagination } from "../../redux/myBugs/actionCreator"; import { coloredStatus } from "../../redux/myBugs/utils"; import { useAppDispatch } from "../../redux/provider"; import MyBugsFilters from "./MyBugsFilters"; import MyBugsTable from "./MyBugsTable"; -import { useGetUsersMeBugsQuery } from "src/services/tryberApi"; +import { MyBugsColumns } from "./columns"; +import { useQueryStringFilters } from "./useQueryStringFilters"; export default function MyBugs() { - const { search } = useLocation(); const { t } = useTranslation(); const dispatch = useAppDispatch(); + useQueryStringFilters(); const { selectedCampaign, selectedSeverity, selectedStatus } = useSelector( (state: GeneralState) => ({ selectedCampaign: state.myBugs.selectedCampaign, @@ -63,18 +58,6 @@ export default function MyBugs() { dispatch(updateMybugsPagination(newStart)); }; - useEffect(() => { - const values = queryString.parse(search); - if (values.cp) { - dispatch(setSelectedCampaign({ value: values.cp.toString(), label: "" })); - } - if (values.status) { - dispatch( - setSelectedStatus({ value: values.status.toString(), label: "" }) - ); - } - }, [queryString]); - const rows = (results || []).map((res) => { let status = res.status ? { diff --git a/src/pages/MyBugs/useQueryStringFilters.tsx b/src/pages/MyBugs/useQueryStringFilters.tsx new file mode 100644 index 000000000..c7b4740ff --- /dev/null +++ b/src/pages/MyBugs/useQueryStringFilters.tsx @@ -0,0 +1,27 @@ +import queryString from "query-string"; +import { useEffect } from "react"; +import { useLocation } from "react-router-dom"; +import { useAppDispatch } from "src/store"; +import { + setSelectedCampaign, + setSelectedStatus, +} from "../../redux/myBugs/actionCreator"; + +const useQueryStringFilters = () => { + const dispatch = useAppDispatch(); + const { search } = useLocation(); + + useEffect(() => { + const values = queryString.parse(search); + if (values.cp) { + dispatch(setSelectedCampaign({ value: values.cp.toString(), label: "" })); + } + if (values.status) { + dispatch( + setSelectedStatus({ value: values.status.toString(), label: "" }) + ); + } + }, [queryString]); +}; + +export { useQueryStringFilters }; From 43640203b67a1508824e1e42b83419bb1bda55e3 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Mon, 15 Jan 2024 17:59:09 +0100 Subject: [PATCH 4/6] rework: Refactor select values for bug filters --- src/pages/MyBugs/MyBugsFilters.tsx | 187 ------------------ src/pages/MyBugs/MyBugsFilters/index.tsx | 89 +++++++++ .../MyBugs/MyBugsFilters/useSelectValues.tsx | 88 +++++++++ src/pages/MyBugs/index.tsx | 3 - 4 files changed, 177 insertions(+), 190 deletions(-) delete mode 100644 src/pages/MyBugs/MyBugsFilters.tsx create mode 100644 src/pages/MyBugs/MyBugsFilters/index.tsx create mode 100644 src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx diff --git a/src/pages/MyBugs/MyBugsFilters.tsx b/src/pages/MyBugs/MyBugsFilters.tsx deleted file mode 100644 index 4657f33cc..000000000 --- a/src/pages/MyBugs/MyBugsFilters.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { - Select, - SelectType, - SortTableSelect, - SortTableSelectProps, -} from "@appquality/appquality-design-system"; -import { useTranslation } from "react-i18next"; -import { - setSelectedCampaign, - setSelectedSeverity, - setSelectedStatus, -} from "../../redux/myBugs/actionCreator"; -import { useAppDispatch } from "../../redux/provider"; -import { useGetUsersMeBugsQuery } from "src/services/tryberApi"; - -interface MyBugsFiltersProps extends SortTableSelectProps { - selectedCampaign?: SelectType.Option; - selectedSeverity?: SelectType.Option; - selectedStatus?: SelectType.Option; - setPage: (page: number) => void; -} - -const useSelectValues = ({ - selectedCampaign, - selectedSeverity, - selectedStatus, -}: { - selectedCampaign?: SelectType.Option; - selectedSeverity?: SelectType.Option; - selectedStatus?: SelectType.Option; -}) => { - const { data, isLoading } = useGetUsersMeBugsQuery({ - filterBy: { - campaign: selectedCampaign?.value, - severity: selectedSeverity?.value, - status: selectedStatus?.value, - }, - }); - if (isLoading || !data) return { campaigns: [], severities: [], status: [] }; - - const campaigns: SelectType.Option[] = data.results - .filter( - (r): r is { id: number; campaign: { id: number; name: string } } => - typeof r.campaign !== "undefined" - ) - .map((r) => { - return { - value: r.campaign.id.toString(), - label: `CP${r.campaign.id} - ${r.campaign.name}`, - }; - }) - .filter( - (value, index, self) => - index === self.findIndex((t) => t.value === value.value) - ); - - const severities: SelectType.Option[] = data.results - .filter( - (r): r is { id: number; severity: { id: number; name: string } } => - typeof r.severity !== "undefined" - ) - .map((r) => { - return { value: r.severity.id.toString(), label: r.severity.name }; - }) - .filter( - (value, index, self) => - index === self.findIndex((t) => t.value === value.value) - ); - - const status: SelectType.Option[] = data.results - .filter( - (r): r is { id: number; status: { id: number; name: string } } => - typeof r.status !== "undefined" - ) - .map((r) => { - return { value: r.status.id.toString(), label: r.status.name }; - }) - .filter( - (value, index, self) => - index === self.findIndex((t) => t.value === value.value) - ); - return { campaigns, severities, status }; -}; - -const MyBugsFilters = ({ - selectedCampaign, - selectedSeverity, - selectedStatus, - order, - orderBy, - setPage, - columns, -}: MyBugsFiltersProps) => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); - const { campaigns, severities, status } = useSelectValues({ - selectedCampaign, - selectedSeverity, - selectedStatus, - }); - const allCampaign = t("All", { context: "female" }); - const allSeverity = t("All", { context: "female" }); - const allStatus = t("All", { context: "male" }); - let campaignValue = { label: allCampaign }; - let severityValue = { label: allSeverity }; - let statusValue = { label: allStatus }; - - if ( - selectedCampaign && - campaigns.map((c) => c.value).includes(selectedCampaign.value) - ) { - campaignValue = selectedCampaign; - } - if ( - selectedSeverity && - severities.map((s) => s.value).includes(selectedSeverity.value) - ) { - severityValue = selectedSeverity; - } - if ( - selectedStatus && - status.map((s) => s.value).includes(selectedStatus.value) - ) { - statusValue = selectedStatus; - } - - return ( -
-
- { - setPage(1); - dispatch(setSelectedSeverity(value)); - }} - name="severity" - options={[{ label: allSeverity }, ...severities]} - value={severityValue} - isSearchable={false} - placeholder={t("Search")} - isClearable={false} - noOptionsMessage={() => t("__SELECT_DEFAULT_NO_OPTION")} - /> -
-
- { + setPage(1); + dispatch(setSelectedCampaign(value)); + }} + name="campaign" + options={campaigns} + value={campaigns.find((c) => c.selected) || campaigns[0]} + isSearchable + placeholder={t("Search")} + isClearable={false} + noOptionsMessage={() => t("__SELECT_DEFAULT_NO_OPTION")} + /> +
+
+ { + setPage(1); + dispatch(setSelectedStatus(value)); + }} + name="status" + options={status} + value={status.find((c) => c.selected) || status[0]} + isSearchable={false} + placeholder={t("Search")} + isClearable={false} + noOptionsMessage={() => t("__SELECT_DEFAULT_NO_OPTION")} + /> +
+ +
+ ); +}; + +export default MyBugsFilters; diff --git a/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx b/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx new file mode 100644 index 000000000..51d700387 --- /dev/null +++ b/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx @@ -0,0 +1,88 @@ +import { SelectType } from "@appquality/appquality-design-system"; +import { useTranslation } from "react-i18next"; +import { shallowEqual, useSelector } from "react-redux"; +import { useGetUsersMeBugsQuery } from "src/services/tryberApi"; + +const useSelectValues = () => { + const { t } = useTranslation(); + + const allCampaign = t("All", { context: "female" }); + const allSeverity = t("All", { context: "female" }); + const allStatus = t("All", { context: "male" }); + const { selectedCampaign, selectedSeverity, selectedStatus } = useSelector( + (state: GeneralState) => ({ + selectedCampaign: state.myBugs.selectedCampaign, + selectedSeverity: state.myBugs.selectedSeverity, + selectedStatus: state.myBugs.selectedStatus, + }), + shallowEqual + ); + + const { data, isLoading } = useGetUsersMeBugsQuery({ + filterBy: { + campaign: selectedCampaign?.value, + severity: selectedSeverity?.value, + status: selectedStatus?.value, + }, + }); + + if (isLoading || !data) return { campaigns: [], severities: [], status: [] }; + + const campaigns: SelectType.Option[] = data.results + .filter( + (r): r is { id: number; campaign: { id: number; name: string } } => + typeof r.campaign !== "undefined" + ) + .map((r) => { + return { + value: r.campaign.id.toString(), + selected: selectedCampaign?.value === r.campaign.id.toString(), + label: `CP${r.campaign.id} - ${r.campaign.name}`, + }; + }) + .filter( + (value, index, self) => + index === self.findIndex((t) => t.value === value.value) + ); + + const severities: SelectType.Option[] = data.results + .filter( + (r): r is { id: number; severity: { id: number; name: string } } => + typeof r.severity !== "undefined" + ) + .map((r) => { + return { + value: r.severity.id.toString(), + selected: selectedSeverity?.value === r.severity.id.toString(), + label: r.severity.name, + }; + }) + .filter( + (value, index, self) => + index === self.findIndex((t) => t.value === value.value) + ); + + const status: SelectType.Option[] = data.results + .filter( + (r): r is { id: number; status: { id: number; name: string } } => + typeof r.status !== "undefined" + ) + .map((r) => { + return { + value: r.status.id.toString(), + selected: selectedStatus?.value === r.status.id.toString(), + label: r.status.name, + }; + }) + .filter( + (value, index, self) => + index === self.findIndex((t) => t.value === value.value) + ); + return { + campaigns: [{ label: allCampaign }, ...campaigns], + severities: [{ label: allSeverity }, ...severities], + status: [{ label: allStatus }, ...status], + }; +}; + +export { useSelectValues }; diff --git a/src/pages/MyBugs/index.tsx b/src/pages/MyBugs/index.tsx index 77b7c3fb3..cb63b39a6 100644 --- a/src/pages/MyBugs/index.tsx +++ b/src/pages/MyBugs/index.tsx @@ -122,9 +122,6 @@ export default function MyBugs() { shadow={true} > Date: Mon, 15 Jan 2024 18:22:43 +0100 Subject: [PATCH 5/6] rework: Make bugs column as hook --- src/pages/MyBugs/{columns.ts => columns.tsx} | 10 +++++----- src/pages/MyBugs/index.tsx | 5 ++--- 2 files changed, 7 insertions(+), 8 deletions(-) rename src/pages/MyBugs/{columns.ts => columns.tsx} (82%) diff --git a/src/pages/MyBugs/columns.ts b/src/pages/MyBugs/columns.tsx similarity index 82% rename from src/pages/MyBugs/columns.ts rename to src/pages/MyBugs/columns.tsx index 18ab27d44..4adc23c30 100644 --- a/src/pages/MyBugs/columns.ts +++ b/src/pages/MyBugs/columns.tsx @@ -1,11 +1,11 @@ import { Column } from "@appquality/appquality-design-system/dist/stories/table/_types"; -import { TFunction } from "react-i18next"; +import { useTranslation } from "react-i18next"; +import { useAppDispatch } from "src/store"; import { updateMybugsSortingOptions } from "../../redux/myBugs/actionCreator"; -export const MyBugsColumns = ( - dispatch: AppDispatch, - t: TFunction<"translation"> -): Column[] => { +export const useBugColumns = (): Column[] => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); return [ { title: "Id", diff --git a/src/pages/MyBugs/index.tsx b/src/pages/MyBugs/index.tsx index cb63b39a6..579a64a75 100644 --- a/src/pages/MyBugs/index.tsx +++ b/src/pages/MyBugs/index.tsx @@ -14,12 +14,13 @@ import { coloredStatus } from "../../redux/myBugs/utils"; import { useAppDispatch } from "../../redux/provider"; import MyBugsFilters from "./MyBugsFilters"; import MyBugsTable from "./MyBugsTable"; -import { MyBugsColumns } from "./columns"; +import { useBugColumns } from "./columns"; import { useQueryStringFilters } from "./useQueryStringFilters"; export default function MyBugs() { const { t } = useTranslation(); const dispatch = useAppDispatch(); + const columns = useBugColumns(); useQueryStringFilters(); const { selectedCampaign, selectedSeverity, selectedStatus } = useSelector( (state: GeneralState) => ({ @@ -29,7 +30,6 @@ export default function MyBugs() { }), shallowEqual ); - const { limit, start, order, orderBy } = useSelector( (state: GeneralState) => ({ limit: state.myBugs.bugsList.limit, @@ -96,7 +96,6 @@ export default function MyBugs() { }; }); - const columns = MyBugsColumns(dispatch, t); return ( From 6df6004f75055458a2473f8dcb2a13dda6da72a6 Mon Sep 17 00:00:00 2001 From: Davide Bizzi Date: Thu, 1 Feb 2024 16:01:52 +0100 Subject: [PATCH 6/6] rework: Refactor to hooks --- src/pages/MyBugs/MyBugsFilters/index.tsx | 30 ++--- .../MyBugs/MyBugsFilters/useSelectValues.tsx | 10 +- src/pages/MyBugs/MyBugsTable.tsx | 108 +++++++++++++----- src/pages/MyBugs/index.tsx | 108 +----------------- src/pages/MyBugs/usePage.tsx | 29 +++++ 5 files changed, 137 insertions(+), 148 deletions(-) create mode 100644 src/pages/MyBugs/usePage.tsx diff --git a/src/pages/MyBugs/MyBugsFilters/index.tsx b/src/pages/MyBugs/MyBugsFilters/index.tsx index c891503db..c911fdeda 100644 --- a/src/pages/MyBugs/MyBugsFilters/index.tsx +++ b/src/pages/MyBugs/MyBugsFilters/index.tsx @@ -1,29 +1,29 @@ -import { - Select, - SortTableSelect, - SortTableSelectProps, -} from "@appquality/appquality-design-system"; +import { Select, SortTableSelect } from "@appquality/appquality-design-system"; import { useTranslation } from "react-i18next"; +import { shallowEqual, useSelector } from "react-redux"; import { setSelectedCampaign, setSelectedSeverity, setSelectedStatus, } from "src/redux/myBugs/actionCreator"; import { useAppDispatch } from "src/redux/provider"; +import { useBugColumns } from "../columns"; +import { usePage } from "../usePage"; import { useSelectValues } from "./useSelectValues"; -interface MyBugsFiltersProps extends SortTableSelectProps { - setPage: (page: number) => void; -} - -const MyBugsFilters = ({ - order, - orderBy, - setPage, - columns, -}: MyBugsFiltersProps) => { +const MyBugsFilters = () => { const { t } = useTranslation(); + const columns = useBugColumns(); + const { setPage } = usePage(); const dispatch = useAppDispatch(); + + const { order, orderBy } = useSelector( + (state: GeneralState) => ({ + order: state.myBugs.bugsList.order, + orderBy: state.myBugs.bugsList.orderBy, + }), + shallowEqual + ); const { campaigns, severities, status } = useSelectValues(); return ( diff --git a/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx b/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx index 51d700387..c50c6a08d 100644 --- a/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx +++ b/src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx @@ -43,7 +43,10 @@ const useSelectValues = () => { .filter( (value, index, self) => index === self.findIndex((t) => t.value === value.value) - ); + ) + .sort((a, b) => { + return Number(b.value) - Number(a.value); + }); const severities: SelectType.Option[] = data.results .filter( @@ -60,7 +63,10 @@ const useSelectValues = () => { .filter( (value, index, self) => index === self.findIndex((t) => t.value === value.value) - ); + ) + .sort((a, b) => { + return Number(a.value) - Number(b.value); + }); const status: SelectType.Option[] = data.results .filter( diff --git a/src/pages/MyBugs/MyBugsTable.tsx b/src/pages/MyBugs/MyBugsTable.tsx index a3b1cfd86..0695e6716 100644 --- a/src/pages/MyBugs/MyBugsTable.tsx +++ b/src/pages/MyBugs/MyBugsTable.tsx @@ -1,40 +1,96 @@ import { - Table, + Button, Pagination, - TableType, + Table, } from "@appquality/appquality-design-system"; import { useTranslation } from "react-i18next"; +import { shallowEqual, useSelector } from "react-redux"; +import i18n from "src/i18n"; +import { coloredStatus } from "src/redux/myBugs/utils"; +import { useGetUsersMeBugsQuery } from "src/services/tryberApi"; +import { useBugColumns } from "./columns"; +import { usePage } from "./usePage"; -interface MyBugsTableProps { - data: TableType.Row[]; - page: number; - setPage: (page: number) => void; - totalBugs: number; - limit: number; - loading: boolean; - columns: TableType.Column[]; - order: ApiComponents["parameters"]["order"]; - orderBy: string; -} - -const MyBugsTable = ({ - data, - page, - setPage, - totalBugs, - limit, - order, - orderBy, - loading, - columns, -}: MyBugsTableProps) => { +const MyBugsTable = () => { const { t } = useTranslation(); + const { page, setPage } = usePage(); + const columns = useBugColumns(); + const { selectedCampaign, selectedSeverity, selectedStatus } = useSelector( + (state: GeneralState) => ({ + selectedCampaign: state.myBugs.selectedCampaign, + selectedSeverity: state.myBugs.selectedSeverity, + selectedStatus: state.myBugs.selectedStatus, + }), + shallowEqual + ); + const { limit, start, order, orderBy } = useSelector( + (state: GeneralState) => ({ + limit: state.myBugs.bugsList.limit, + start: state.myBugs.bugsList.start, + order: state.myBugs.bugsList.order, + orderBy: state.myBugs.bugsList.orderBy, + }), + shallowEqual + ); + + const { data, isLoading: loading } = useGetUsersMeBugsQuery({ + start: start, + limit: limit, + orderBy: orderBy, + order: order, + filterBy: { + campaign: selectedCampaign?.value, + severity: selectedSeverity?.value, + status: selectedStatus?.value, + }, + }); + const { results, total } = data || {}; + + const totalBugs = total ?? 0; + + const rows = (results || []).map((res) => { + let status = res.status + ? { + title: res.status.name, + content: ( + + {res.status.name} + + ), + } + : "unknown"; + return { + key: res.id, + id: res.id, + severity: res.severity?.name, + status: status, + title: res.title?.replace(/\\(.)/gm, "$1"), + action: { + title: `${window.location.origin}/${ + i18n.language !== "en" ? `${i18n.language}/` : "" + }bugs/show/${res.id}`, + content: ( + + ), + }, + }; + }); return ( <> ({ - selectedCampaign: state.myBugs.selectedCampaign, - selectedSeverity: state.myBugs.selectedSeverity, - selectedStatus: state.myBugs.selectedStatus, - }), - shallowEqual - ); - const { limit, start, order, orderBy } = useSelector( - (state: GeneralState) => ({ - limit: state.myBugs.bugsList.limit, - start: state.myBugs.bugsList.start, - order: state.myBugs.bugsList.order, - orderBy: state.myBugs.bugsList.orderBy, - }), - shallowEqual - ); - - const { data, isLoading } = useGetUsersMeBugsQuery({ - start: start, - limit: limit, - orderBy: orderBy, - order: order, - filterBy: { - campaign: selectedCampaign?.value, - severity: selectedSeverity?.value, - status: selectedStatus?.value, - }, - }); - const { results, total } = data || {}; - - const changePagination = (newPage: number) => { - const newStart = limit * (newPage - 1); - dispatch(updateMybugsPagination(newStart)); - }; - - const rows = (results || []).map((res) => { - let status = res.status - ? { - title: res.status.name, - content: ( - - {res.status.name} - - ), - } - : "unknown"; - return { - key: res.id, - id: res.id, - severity: res.severity?.name, - status: status, - title: res.title?.replace(/\\(.)/gm, "$1"), - action: { - title: `${window.location.origin}/${ - i18n.language !== "en" ? `${i18n.language}/` : "" - }bugs/show/${res.id}`, - content: ( - - ), - }, - }; - }); return ( - + @@ -120,12 +23,7 @@ export default function MyBugs() { title={t("Filters")} shadow={true} > - + diff --git a/src/pages/MyBugs/usePage.tsx b/src/pages/MyBugs/usePage.tsx new file mode 100644 index 000000000..6e1f53083 --- /dev/null +++ b/src/pages/MyBugs/usePage.tsx @@ -0,0 +1,29 @@ +import { shallowEqual, useSelector } from "react-redux"; +import { updateMybugsPagination } from "src/redux/myBugs/actionCreator"; +import { useAppDispatch } from "src/store"; + +const usePage = () => { + const dispatch = useAppDispatch(); + + const { limit, start } = useSelector( + (state: GeneralState) => ({ + limit: state.myBugs.bugsList.limit, + start: state.myBugs.bugsList.start, + order: state.myBugs.bugsList.order, + orderBy: state.myBugs.bugsList.orderBy, + }), + shallowEqual + ); + + const changePagination = (newPage: number) => { + const newStart = limit * (newPage - 1); + dispatch(updateMybugsPagination(newStart)); + }; + + return { + page: (start || 0) / limit + 1, + setPage: changePagination, + }; +}; + +export { usePage };