Merge pull request #124 from AppQuality/add-filter-pills

feat: Add filter pills

src/pages/campaigns/selection/FilterRecap/filterPills/Age.tsx

@@ -0,0 +1,40 @@
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const AgeFilterPill = () => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByAge } = filters;
+
+  return (
+    <>
+      {filterByAge && filterByAge.min && (
+        <FilterPill
+          label="Minimum age"
+          onRemove={() => {
+            dispatch(
+              setFilters({ filterByAge: { ...filterByAge, min: undefined } })
+            );
+          }}
+        >
+          {filterByAge.min}
+        </FilterPill>
+      )}
+      {filterByAge && filterByAge.max && (
+        <FilterPill
+          label="Maximum age"
+          onRemove={() => {
+            dispatch(
+              setFilters({ filterByAge: { ...filterByAge, max: undefined } })
+            );
+          }}
+        >
+          {filterByAge.max}
+        </FilterPill>
+      )}
+    </>
+  );
+};
+
+export { AgeFilterPill };

src/pages/campaigns/selection/FilterRecap/filterPills/AgeFilterPill.tsx

@@ -0,0 +1,40 @@
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const AgeFilterPill = () => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByAge } = filters;
+
+  return (
+    <>
+      {filterByAge && filterByAge.min && (
+        <FilterPill
+          label="Minimum age"
+          onRemove={() => {
+            dispatch(
+              setFilters({ filterByAge: { ...filterByAge, min: undefined } })
+            );
+          }}
+        >
+          {filterByAge.min}
+        </FilterPill>
+      )}
+      {filterByAge && filterByAge.max && (
+        <FilterPill
+          label="Maximum age"
+          onRemove={() => {
+            dispatch(
+              setFilters({ filterByAge: { ...filterByAge, max: undefined } })
+            );
+          }}
+        >
+          {filterByAge.max}
+        </FilterPill>
+      )}
+    </>
+  );
+};
+
+export { AgeFilterPill };

src/pages/campaigns/selection/FilterRecap/filterPills/BugHuntingFilterPill.tsx

@@ -0,0 +1,48 @@
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const BugHuntingFilterPill = () => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByInclude } = filters;
+
+  if (
+    !filterByInclude ||
+    "bughunting" in filterByInclude === false ||
+    !filterByInclude.bughunting
+  )
+    return null;
+
+  return (
+    <>
+      {filterByInclude.bughunting.map((bughunting) => (
+        <FilterPill
+          label="Only"
+          onRemove={() => {
+            if (
+              !filterByInclude ||
+              "bughunting" in filterByInclude === false ||
+              !filterByInclude.bughunting
+            )
+              return;
+            dispatch(
+              setFilters({
+                filterByInclude: {
+                  ...filterByInclude,
+                  bughunting: filterByInclude.bughunting.filter(
+                    (o) => o !== bughunting
+                  ),
+                },
+              })
+            );
+          }}
+        >
+          {bughunting}
+        </FilterPill>
+      ))}
+    </>
+  );
+};
+
+export { BugHuntingFilterPill };

src/pages/campaigns/selection/FilterRecap/filterPills/GenderFilterPill.tsx

@@ -0,0 +1,46 @@
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const GenderFilterPill = () => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByInclude } = filters;
+
+  if (
+    !filterByInclude ||
+    "gender" in filterByInclude === false ||
+    !filterByInclude.gender
+  )
+    return null;
+
+  return (
+    <>
+      {filterByInclude.gender.map((gender) => (
+        <FilterPill
+          label="Only"
+          onRemove={() => {
+            if (
+              !filterByInclude ||
+              "gender" in filterByInclude === false ||
+              !filterByInclude.gender
+            )
+              return;
+            dispatch(
+              setFilters({
+                filterByInclude: {
+                  ...filterByInclude,
+                  gender: filterByInclude.gender.filter((o) => o !== gender),
+                },
+              })
+            );
+          }}
+        >
+          {gender}
+        </FilterPill>
+      ))}
+    </>
+  );
+};
+
+export { GenderFilterPill };

src/pages/campaigns/selection/FilterRecap/filterPills/MetalFilterPill.tsx

@@ -0,0 +1,46 @@
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const MetalFilterPill = () => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByInclude } = filters;
+
+  if (
+    !filterByInclude ||
+    "metal" in filterByInclude === false ||
+    !filterByInclude.metal
+  )
+    return null;
+
+  return (
+    <>
+      {filterByInclude.metal.map((metal) => (
+        <FilterPill
+          label="Only"
+          onRemove={() => {
+            if (
+              !filterByInclude ||
+              "metal" in filterByInclude === false ||
+              !filterByInclude.metal
+            )
+              return;
+            dispatch(
+              setFilters({
+                filterByInclude: {
+                  ...filterByInclude,
+                  metal: filterByInclude.metal.filter((o) => o !== metal),
+                },
+              })
+            );
+          }}
+        >
+          {metal}
+        </FilterPill>
+      ))}
+    </>
+  );
+};
+
+export { MetalFilterPill };

src/pages/campaigns/selection/FilterRecap/filterPills/OsFilterPill.tsx

@@ -0,0 +1,46 @@
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const OsFilterPill = () => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByInclude } = filters;
+
+  if (
+    !filterByInclude ||
+    "os" in filterByInclude === false ||
+    !filterByInclude.os
+  )
+    return null;
+
+  return (
+    <>
+      {filterByInclude.os.map((os) => (
+        <FilterPill
+          label="Filtered OS"
+          onRemove={() => {
+            if (
+              !filterByInclude ||
+              "os" in filterByInclude === false ||
+              !filterByInclude.os
+            )
+              return;
+            dispatch(
+              setFilters({
+                filterByInclude: {
+                  ...filterByInclude,
+                  os: filterByInclude.os.filter((o) => o !== os),
+                },
+              })
+            );
+          }}
+        >
+          {os}
+        </FilterPill>
+      ))}
+    </>
+  );
+};
+
+export { OsFilterPill };

src/pages/campaigns/selection/FilterRecap/filterPills/QuestionsFilterPill.tsx

@@ -0,0 +1,86 @@
+import {
+  useGetCampaignsByCampaignQuery,
+  useGetCampaignsFormsByFormIdQuery,
+} from "src/services/tryberApi";
+import { useAppDispatch, useAppSelector } from "src/store";
+import { setFilters } from "../../selectionSlice";
+import { FilterPill } from "./_pill";
+
+const QuestionsFilterPill = ({ id }: { id: string }) => {
+  const { data, isLoading } = useGetCampaignsByCampaignQuery({
+    campaign: id,
+  });
+
+  if (!data || isLoading || !data.preselectionFormId) {
+    return null;
+  }
+
+  return <QuestionsFilterPillItems id={data.preselectionFormId.toString()} />;
+};
+
+const QuestionsFilterPillItems = ({ id }: { id: string }) => {
+  const { data, isLoading } = useGetCampaignsFormsByFormIdQuery({
+    formId: id,
+  });
+
+  if (!data || isLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      {data.fields.map((value) => {
+        return (
+          <QuestionFilterPill
+            question={`question_${value.id}`}
+            label={value.question}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+const QuestionFilterPill = ({
+  question,
+  label,
+}: {
+  question: string;
+  label: string;
+}) => {
+  const { filters } = useAppSelector((state) => state.selection);
+  const dispatch = useAppDispatch();
+  const { filterByInclude } = filters;
+
+  if (!filterByInclude || question in filterByInclude === false) return null;
+
+  const questionFilter = filterByInclude[
+    question as keyof typeof filterByInclude
+  ] as string[] | undefined;
+
+  if (!questionFilter) return null;
+
+  return (
+    <>
+      {questionFilter.map((answer) => (
+        <FilterPill
+          label={label}
+          onRemove={() => {
+            dispatch(
+              setFilters({
+                filterByInclude: {
+                  ...filterByInclude,
+                  [question]: questionFilter.filter((a) => a !== answer),
+                },
+              })
+            );
+          }}
+        >
+          {answer}
+        </FilterPill>
+      ))}
+    </>
+  );
+};
+
+export { QuestionsFilterPill };