Redux refactor my bugs

src/pages/MyBugs/MyBugsFilters/index.tsx

@@ -0,0 +1,89 @@
+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";
+
+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 (
+    <div>
+      <div className="aq-mb-3">
+        <Select
+          label={t("Campaign")}
+          onChange={(value) => {
+            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")}
+        />
+      </div>
+      <div className="aq-mb-3">
+        <Select
+          label={t("Severity")}
+          onChange={(value) => {
+            setPage(1);
+            dispatch(setSelectedSeverity(value));
+          }}
+          name="severity"
+          options={severities}
+          value={severities.find((c) => c.selected) || severities[0]}
+          isSearchable={false}
+          placeholder={t("Search")}
+          isClearable={false}
+          noOptionsMessage={() => t("__SELECT_DEFAULT_NO_OPTION")}
+        />
+      </div>
+      <div className="aq-mb-3">
+        <Select
+          label={t("Status")}
+          onChange={(value) => {
+            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")}
+        />
+      </div>
+      <SortTableSelect
+        order={order}
+        orderBy={orderBy}
+        columns={columns}
+        label={t("Order By", { context: "Sort Table Select" })}
+      />
+    </div>
+  );
+};
+
+export default MyBugsFilters;

src/pages/MyBugs/MyBugsFilters/useSelectValues.tsx

@@ -0,0 +1,94 @@
+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)
+    )
+    .sort((a, b) => {
+      return Number(b.value) - Number(a.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)
+    )
+    .sort((a, b) => {
+      return Number(a.value) - Number(b.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 };