Update-ts-columns (#112)

* test: Add playwright dependency * chore: Use automatic refetch * feat: Update ts columns
AppQuality · Feb 29, 2024 · 0d471b2 · 0d471b2
1 parent d2015d6
commit 0d471b2
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
     "jest-canvas-mock": "^2.4.0",
     "msw": "^0.47.4",
     "openapi-typescript": "^5.2.0",
+    "playwright": "^1.42.0",
     "react-error-overlay": "6.0.9",
     "react-scripts": "^4.0.3",
     "ts-node": "^10.9.1",

diff --git a/src/pages/campaigns/selection/SelectionTable/_style.ts b/src/pages/campaigns/selection/SelectionTable/_style.ts
@@ -39,13 +39,14 @@ export const StyledSelectionTable = styled.div<{ columns: number }>`
     .table-scrollable {
       .thead {
         &:nth-child(1) {
-          min-width: 310px;
+          min-width: 200px;
         }
-        &:nth-child(${(p) => p.columns - 4}) {
-          min-width: 148px;
+        &:nth-child(${(p) => p.columns - 5}) {
+          min-width: 50px;
         }
-        &:nth-child(${(p) => p.columns - 3}) {
-          min-width: 155px;
+        &:nth-child(${(p) => p.columns - 3}),
+        &:nth-child(${(p) => p.columns - 4}) {
+          min-width: 100px;
         }
         &:nth-child(${(p) => p.columns - 2}) {
           min-width: 180px;

diff --git a/src/pages/campaigns/selection/SelectionTable/columns.ts b/src/pages/campaigns/selection/SelectionTable/columns.ts
@@ -7,14 +7,19 @@ export const columns: TableType.Column[] = [
     title: "Name ID",
   },
   {
-    dataIndex: "level",
-    key: "level",
-    title: "Level",
+    dataIndex: "age",
+    key: "age",
+    title: "Age",
   },
   {
-    dataIndex: "exp",
-    key: "exp",
-    title: "Tot EXP",
+    dataIndex: "gender",
+    key: "gender",
+    title: "Gender",
+  },
+  {
+    dataIndex: "bhlevel",
+    key: "bhlevel",
+    title: "BH Level",
   },
   {
     dataIndex: "devices",

diff --git a/src/pages/campaigns/selection/SelectionTable/useTableRows.tsx b/src/pages/campaigns/selection/SelectionTable/useTableRows.tsx
@@ -1,10 +1,10 @@
-import { useGetCampaignsByCampaignCandidatesQuery } from "src/services/tryberApi";
 import { TableType } from "@appquality/appquality-design-system";
+import { useEffect, useState } from "react";
 import DeviceCheckbox from "src/pages/campaigns/selection/SelectionTable/components/DeviceCheckbox";
+import { useGetCampaignsByCampaignCandidatesQuery } from "src/services/tryberApi";
 import { useAppDispatch, useAppSelector } from "src/store";
 import { setTableColumns } from "../selectionSlice";
 import { columns } from "./columns";
-import { useEffect, useState } from "react";
 
 interface RowType extends TableType.Row {
   key: string;
@@ -24,7 +24,7 @@ const useTableRows = (id: string) => {
   );
   const [rows, setRows] = useState<RowType[]>([]);
   const { filterByInclude, filterByExclude } = filters;
-  const { data, isFetching, isLoading, error, refetch } =
+  const { data, isFetching, isLoading, error } =
     useGetCampaignsByCampaignCandidatesQuery({
       campaign: id,
       start: devicesPerPage * (currentPage - 1),
@@ -82,8 +82,9 @@ const useTableRows = (id: string) => {
             row = {
               ...row,
               nameId: `T${user.id} ${user.name} ${user.surname}`,
-              exp: user.experience.toString(),
-              level: user.level,
+              age: user.age,
+              gender: user.gender,
+              bhlevel: user.levels.bugHunting,
               ...fields,
             };
           }
@@ -98,7 +99,6 @@ const useTableRows = (id: string) => {
     rows,
     totalRows: data?.total || 0,
     isFetching,
-    refetch,
     isLoading,
     error,
   };

diff --git a/src/pages/campaigns/selection/confirmModal/ConfirmModal.tsx b/src/pages/campaigns/selection/confirmModal/ConfirmModal.tsx
@@ -4,60 +4,57 @@ import {
   Button,
   Modal,
 } from "@appquality/appquality-design-system";
-import { useAppDispatch, useAppSelector } from "src/store";
+import { FC } from "react";
 import {
   clearSelectedDevice,
   closeConfirmModal,
 } from "src/pages/campaigns/selection/selectionSlice";
-import { usePostCampaignsByCampaignCandidatesMutation } from "src/services/tryberApi";
-import { FC } from "react";
 import siteWideMessageStore from "src/redux/siteWideMessages";
-import useTableRows from "src/pages/campaigns/selection/SelectionTable/useTableRows";
+import { usePostCampaignsByCampaignCandidatesMutation } from "src/services/tryberApi";
+import { useAppDispatch, useAppSelector } from "src/store";
 
 const ConfirmModal: FC<{ id: string }> = ({ id }) => {
   const { add } = siteWideMessageStore();
   const { isConfirmModalOpen, selectedDevices } = useAppSelector(
     (state) => state.selection
   );
-  const { refetch } = useTableRows(id);
   const dispatch = useAppDispatch();
   const close = () => {
     dispatch(closeConfirmModal());
   };
   const [selectDevices] = usePostCampaignsByCampaignCandidatesMutation();
   const confirm = async () => {
-    const response = await selectDevices({
-      campaign: id,
-      body: Object.keys(selectedDevices).map((testerId) => ({
-        tester_id: parseInt(testerId),
-        device: parseInt(selectedDevices[testerId]),
-      })),
-    });
-    if ("error" in response) {
-      console.error(response.error);
-      let message = "La richiesta non è andata a buon fine";
-      if ("data" in response.error) {
-        // @ts-ignore
-        message += `: ${response.error.data?.message}`;
-      }
-      add({ type: "danger", message });
-    }
-    if ("data" in response) {
-      if ("invalidTesters" in response.data) {
+    try {
+      const response = await selectDevices({
+        campaign: id,
+        body: Object.keys(selectedDevices).map((testerId) => ({
+          tester_id: parseInt(testerId),
+          device: parseInt(selectedDevices[testerId]),
+        })),
+      }).unwrap();
+      if ("invalidTesters" in response) {
         add({
           type: "warning",
-          message: `${response.data.invalidTesters?.length} tryber non sono stati aggiunti per un errore`,
+          message: `${response.invalidTesters?.length} tryber non sono stati aggiunti per un errore`,
         });
-        console.warn(response.data.invalidTesters);
+        console.warn(response.invalidTesters);
       }
       add({
         type: "success",
-        message: `${response.data.results.length} tryber selezionati con successo`,
+        message: `${response.results.length} tryber selezionati con successo`,
       });
       dispatch(clearSelectedDevice());
+    } catch (e) {
+      const error = e as any;
+      let message = "La richiesta non è andata a buon fine";
+      if ("data" in error) {
+        // @ts-ignore
+        message += `: ${error.data?.message}`;
+      }
+      add({ type: "danger", message });
+    } finally {
+      close();
     }
-    refetch();
-    close();
   };
   const Footer = () => {
     return (

diff --git a/src/services/tryberApi/api.ts b/src/services/tryberApi/api.ts
@@ -31,6 +31,7 @@ export const api = createApi({
     "Levels",
     "Prospect",
     "UX",
+    "Selection",
   ],
   endpoints: () => ({}), // auto generated npm run generate-api
 });
diff --git a/src/services/tryberApi/apiTags.ts b/src/services/tryberApi/apiTags.ts
@@ -18,10 +18,10 @@ tryberApi.enhanceEndpoints({
       invalidatesTags: ["Campaigns"],
     },
     postCampaignsByCampaignCandidates: {
-      invalidatesTags: ["Campaigns"],
+      invalidatesTags: ["Selection"],
     },
     getCampaignsByCampaignCandidates: {
-      providesTags: ["Campaigns"],
+      providesTags: ["Selection"],
     },
     getCampaignsByCampaignTasks: {
       providesTags: ["Campaigns"],