Merge branch 'develop' into refactor-and-fixes-new-cp-page

AppQuality · May 8, 2024 · f706dd1 · f706dd1
2 parents c54ed05 + 5c9aecb
commit f706dd1
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 22 deletions.
diff --git a/src/pages/campaigns/components/table/index.tsx b/src/pages/campaigns/components/table/index.tsx
@@ -32,6 +32,9 @@ const CustomTable = styled(Table)`
     display: flex;
     align-items: center;
     height: 100%;
+    & > div {
+      width: 100%;
+    }
   }
 `;
 

diff --git a/src/pages/campaigns/components/table/useCampaigns.tsx b/src/pages/campaigns/components/table/useCampaigns.tsx
@@ -1,5 +1,10 @@
-import { Button, Skeleton, Text } from "@appquality/appquality-design-system";
-import { useEffect } from "react";
+import {
+  Button,
+  Dropdown,
+  Skeleton,
+  Text,
+} from "@appquality/appquality-design-system";
+import { useEffect, useMemo, useState } from "react";
 import {
   GetCampaignsApiArg,
   GetCampaignsApiResponse,
@@ -41,7 +46,7 @@ const useCampaigns = (options?: {
   order?: GetCampaignsApiArg["order"];
   orderBy?: GetCampaignsApiArg["orderBy"];
 }) => {
-  const LIMIT = 100;
+  const LIMIT = 20;
   const { page, filters, order } = useFiltersCardContext();
   const { isLoading, data, refetch } = useGetCampaignsQuery({
     limit: LIMIT,
@@ -214,32 +219,61 @@ const useCampaigns = (options?: {
   };
 };
 
+const PhaseDropdownWrapper = styled.div`
+  .phase-dropdown {
+    width: 100%;
+  }
+`;
+
 const PhaseSelector = ({ campaign }: { campaign: Campaign }) => {
+  const [value, setValue] = useState<string | undefined>(
+    campaign.phase.id.toString()
+  );
   const { data, isLoading } = useGetPhasesQuery();
   const [updatePhase] = usePutDossiersByCampaignPhasesMutation();
 
+  const options = useMemo(() => {
+    if (!data?.results) return [];
+
+    return Object.values(
+      data.results.reduce((acc, phase) => {
+        const phaseType = phase.type.id;
+
+        if (!acc[phaseType]) {
+          acc[phaseType] = { options: [], label: phase.type.name };
+        }
+
+        acc[phaseType].options.push({
+          value: phase.id.toString(),
+          label: phase.name,
+        });
+        return acc;
+      }, {} as { [key: string]: { options: { value: string; label: string }[]; label: string } })
+    );
+  }, [data?.results]);
+
   if (isLoading || !data || !data.results) return <Skeleton />;
 
   return (
-    <select
-      key={`phase-select-${campaign.id}`}
-      onChange={(e) => {
-        updatePhase({
-          campaign: campaign.id.toString(),
-          body: { phase: Number(e.target.value) },
-        });
-      }}
-    >
-      {data.results.map((opt) => (
-        <option
-          key={`phase-opt-${campaign.id}-${opt.id}`}
-          value={opt.id}
-          selected={opt.id === campaign.phase.id}
-        >
-          {opt.name}
-        </option>
-      ))}
-    </select>
+    <PhaseDropdownWrapper>
+      <Dropdown
+        name={`phase-${campaign.id}`}
+        id={`phase-${campaign.id}`}
+        className="phase-dropdown"
+        options={options}
+        value={options.flatMap((g) => g.options).find((o) => o.value === value)}
+        onChange={(option) => {
+          if (!option) return;
+          setValue(option.value);
+          updatePhase({
+            campaign: campaign.id.toString(),
+            body: {
+              phase: parseInt(option.value),
+            },
+          });
+        }}
+      />
+    </PhaseDropdownWrapper>
   );
 };
 

diff --git a/src/services/tryberApi/index.ts b/src/services/tryberApi/index.ts
@@ -2725,6 +2725,10 @@ export type GetPhasesApiResponse = /** status 200 OK */ {
   results: {
     id: number;
     name: string;
+    type: {
+      id: number;
+      name: string;
+    };
   }[];
 };
 export type GetPhasesApiArg = void;