Un 300 select filter

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.12.52",
+    "@appquality/unguess-design-system": "2.12.54",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/features/api/index.ts

@@ -70,6 +70,16 @@ const injectedRtkApi = api.injectEndpoints({
         url: `/campaigns/${queryArg.cid}/bugs/${queryArg.bid}`,
       }),
     }),
+    patchCampaignsByCidBugsAndBid: build.mutation<
+      PatchCampaignsByCidBugsAndBidApiResponse,
+      PatchCampaignsByCidBugsAndBidApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/campaigns/${queryArg.cid}/bugs/${queryArg.bid}`,
+        method: 'PATCH',
+        body: queryArg.body,
+      }),
+    }),
     getCampaignsByCidMeta: build.query<
       GetCampaignsByCidMetaApiResponse,
       GetCampaignsByCidMetaApiArg
@@ -88,6 +98,12 @@ const injectedRtkApi = api.injectEndpoints({
     >({
       query: (queryArg) => ({ url: `/campaigns/${queryArg.cid}/tags` }),
     }),
+    getCampaignsByCidSeverities: build.query<
+      GetCampaignsByCidSeveritiesApiResponse,
+      GetCampaignsByCidSeveritiesApiArg
+    >({
+      query: (queryArg) => ({ url: `/campaigns/${queryArg.cid}/severities` }),
+    }),
     getCampaignsByCidWidgets: build.query<
       GetCampaignsByCidWidgetsApiResponse,
       GetCampaignsByCidWidgetsApiArg
@@ -316,6 +332,28 @@ export type GetCampaignsByCidBugsAndBidApiArg = {
   /** Defines an identifier for the bug object (BUG ID) */
   bid: string;
 };
+export type PatchCampaignsByCidBugsAndBidApiResponse = /** status 200 OK */ {
+  tags?: {
+    tag_id: number;
+    tag_name: string;
+  }[];
+};
+export type PatchCampaignsByCidBugsAndBidApiArg = {
+  /** Campaign id */
+  cid: string;
+  /** Defines an identifier for the bug object (BUG ID) */
+  bid: string;
+  body: {
+    tags?: (
+      | {
+          tag_id: number;
+        }
+      | {
+          tag_name: string;
+        }
+    )[];
+  };
+};
 export type GetCampaignsByCidMetaApiResponse = /** status 200 OK */ Campaign & {
   selected_testers: number;
   allowed_devices: string[];
@@ -339,6 +377,12 @@ export type GetCampaignsByCidTagsApiArg = {
   /** Campaign id */
   cid: string;
 };
+export type GetCampaignsByCidSeveritiesApiResponse =
+  /** status 200 OK */ BugSeverity[];
+export type GetCampaignsByCidSeveritiesApiArg = {
+  /** Campaign id */
+  cid: string;
+};
 export type GetCampaignsByCidWidgetsApiResponse =
   /** status 200 OK */
   | WidgetBugsByUseCase
@@ -657,7 +701,7 @@ export type Bug = {
   read?: boolean;
 };
 export type BugMedia = {
-  type: {
+  mime_type: {
     type: 'video' | 'image' | 'other';
     extension: string;
   };
@@ -819,9 +863,11 @@ export const {
   useGetCampaignsByCidBugsQuery,
   useGetCampaignsByCidBugTypesQuery,
   useGetCampaignsByCidBugsAndBidQuery,
+  usePatchCampaignsByCidBugsAndBidMutation,
   useGetCampaignsByCidMetaQuery,
   useGetCampaignsByCidReportsQuery,
   useGetCampaignsByCidTagsQuery,
+  useGetCampaignsByCidSeveritiesQuery,
   useGetCampaignsByCidWidgetsQuery,
   usePostProjectsMutation,
   useGetProjectsByPidQuery,

src/features/bugsPage/bugsPageSlice.ts

@@ -1,12 +1,18 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { useAppSelector } from 'src/app/hooks';
 import { TypeFilterType, TypeFilter } from './typeFilters';
-import { SeverityFilter, SeverityFilterType } from './severityFilters';
+import { SeverityFilter, SeverityFilterType } from './severityFilter';
+import { ReadFilter, ReadFilterType } from './readFilter';
+import { UniqueFilter, UniqueFilterType } from './uniqueFilter';
+import { SearchFilter, SearchFilterType } from './searchFilter';
 
 type CampaignType = {
   selectedBugId?: number;
 } & TypeFilterType &
-  SeverityFilterType;
+  SeverityFilterType &
+  ReadFilterType &
+  UniqueFilterType &
+  SearchFilterType;
 
 interface initialSimpleState {
   currentCampaign?: number;
@@ -25,18 +31,19 @@ const bugPageSlice = createSlice({
   reducers: {
     selectCampaign: (state, action) => {
       const { cp_id, filters } = action.payload;
-      if (!(cp_id in state.campaigns)) {
-        state.campaigns[cp_id as number] = {
-          ...TypeFilter.setAvailable(
-            state.campaigns[cp_id as number],
-            filters.types
-          ),
-          ...SeverityFilter.setAvailable(
-            state.campaigns[cp_id as number],
-            filters.severities
-          ),
-        };
-      }
+      state.campaigns[cp_id as number] = {
+        ...TypeFilter.setAvailable(
+          state.campaigns[cp_id as number],
+          filters.types
+        ),
+        ...SeverityFilter.setAvailable(
+          state.campaigns[cp_id as number],
+          filters.severities
+        ),
+        ...ReadFilter.setAvailable(state.campaigns[cp_id as number]),
+        ...UniqueFilter.setAvailable(state.campaigns[cp_id as number]),
+        ...SearchFilter.setAvailable(state.campaigns[cp_id as number]),
+      };
       state.currentCampaign = cp_id;
     },
     selectBug: (state, action) => {
@@ -57,6 +64,18 @@ const bugPageSlice = createSlice({
           state.campaigns[state.currentCampaign],
           filters.severities
         ),
+        ...ReadFilter.filter(
+          state.campaigns[state.currentCampaign],
+          filters.read
+        ),
+        ...UniqueFilter.filter(
+          state.campaigns[state.currentCampaign],
+          filters.unique
+        ),
+        ...SearchFilter.filter(
+          state.campaigns[state.currentCampaign],
+          filters.search
+        ),
       };
     },
   },
@@ -67,6 +86,17 @@ export default bugPageSlice.reducer;
 export const getSelectedFiltersIds = () => ({
   types: TypeFilter.getIds(),
   severities: SeverityFilter.getIds(),
+  read: ReadFilter.getValue(),
+  unique: UniqueFilter.getValue(),
+  search: SearchFilter.getValue(),
+});
+
+export const getSelectedFilters = () => ({
+  types: TypeFilter.getValues(),
+  severities: SeverityFilter.getValues(),
+  read: ReadFilter.getValue(),
+  unique: UniqueFilter.getValue(),
+  search: SearchFilter.getValue(),
 });
 
 export const getSelectedBugId = () => {
@@ -80,5 +110,16 @@ export const getSelectedBugId = () => {
   return campaign.selectedBugId;
 };
 
+export const getCurrentCampaignData = () => {
+  const { currentCampaign, campaigns } = useAppSelector(
+    (state) => state.bugsPage
+  );
+  if (!currentCampaign || !campaigns[currentCampaign as number]) return null;
+
+  const campaign = campaigns[currentCampaign as number];
+  if (!campaign) return false;
+  return campaign;
+};
+
 export const { selectCampaign, updateFilters, selectBug } =
   bugPageSlice.actions;

src/features/bugsPage/readFilter.ts

@@ -0,0 +1,42 @@
+import { useAppSelector } from 'src/app/hooks';
+
+export type ReadFilterType = {
+  read: {
+    available: ('all' | 'unread')[];
+    selected?: 'all' | 'unread' | false;
+  };
+};
+
+export const ReadFilter = {
+  getCurrent: (state?: ReadFilterType) => ({
+    available: state
+      ? state.read.available
+      : ['all' as const, 'unread' as const],
+    selected: state ? state.read.selected : undefined,
+  }),
+  setAvailable: (state: ReadFilterType) => ({
+    read: ReadFilter.getCurrent(state),
+  }),
+  filter: (
+    state: ReadFilterType,
+    read?: ReadFilterType['read']['selected']
+  ) => ({
+    read: {
+      ...ReadFilter.getCurrent(state),
+      ...(read || read === false ? { selected: read ?? undefined } : {}),
+    },
+  }),
+  getValue: () => {
+    const bugsPageSlice = useAppSelector((state) => state.bugsPage);
+
+    if (!bugsPageSlice.currentCampaign) return undefined;
+
+    if (!bugsPageSlice.campaigns[bugsPageSlice.currentCampaign].severities)
+      return undefined;
+
+    const campaign: ReadFilterType =
+      bugsPageSlice.campaigns[bugsPageSlice.currentCampaign];
+
+    return campaign.read.selected;
+  },
+};

src/features/bugsPage/searchFilter.ts

@@ -0,0 +1,28 @@
+import { useAppSelector } from 'src/app/hooks';
+
+export type SearchFilterType = {
+  search?: string;
+};
+
+export const SearchFilter = {
+  getCurrent: (state?: SearchFilterType) => state?.search,
+  setAvailable: (state: SearchFilterType) => ({
+    search: SearchFilter.getCurrent(state),
+  }),
+  filter: (state: SearchFilterType, search?: SearchFilterType['search']) => ({
+    search,
+  }),
+  getValue: () => {
+    const bugsPageSlice = useAppSelector((state) => state.bugsPage);
+
+    if (!bugsPageSlice.currentCampaign) return undefined;
+
+    if (!bugsPageSlice.campaigns[bugsPageSlice.currentCampaign].severities)
+      return undefined;
+
+    const campaign: SearchFilterType =
+      bugsPageSlice.campaigns[bugsPageSlice.currentCampaign];
+
+    return campaign.search;
+  },
+};

src/features/bugsPage/severityFilters.ts → src/features/bugsPage/severityFilter.ts

@@ -30,7 +30,7 @@ export const SeverityFilter = {
       ...(severities ? { selected: severities } : {}),
     },
   }),
-  getIds: () => {
+  getValues: () => {
     const bugsPageSlice = useAppSelector((state) => state.bugsPage);
 
     if (!bugsPageSlice.currentCampaign) return undefined;
@@ -41,6 +41,11 @@ export const SeverityFilter = {
     const campaign: SeverityFilterType =
       bugsPageSlice.campaigns[bugsPageSlice.currentCampaign];
 
-    return campaign.severities.selected.map((t) => t.id);
+    return campaign.severities.selected;
+  },
+  getIds: () => {
+    const values = SeverityFilter.getValues();
+    if (!values) return undefined;
+    return values.map((t) => t.id);
   },
 };

src/features/bugsPage/typeFilters.ts

@@ -27,7 +27,7 @@ export const TypeFilter = {
       ...(types ? { selected: types } : {}),
     },
   }),
-  getIds: () => {
+  getValues: () => {
     const bugsPageSlice = useAppSelector((state) => state.bugsPage);
 
     if (!bugsPageSlice.currentCampaign) return undefined;
@@ -39,14 +39,11 @@ export const TypeFilter = {
       bugsPageSlice.campaigns[bugsPageSlice.currentCampaign];
 
     if (!campaign.types.selected) return undefined;
-    return campaign.types.selected.map((t) => t.id);
+    return campaign.types.selected;
+  },
+  getIds: () => {
+    const values = TypeFilter.getValues();
+    if (!values) return undefined;
+    return values.map((t) => t.id);
   },
 };
-
-export const getCurrentTypesFilter = TypeFilter.getCurrent;
-
-export const setTypesFilter = TypeFilter.setAvailable;
-
-export const filterByTypes = TypeFilter.filter;
-
-export const getSelectedTypesIds = TypeFilter.getIds;

src/features/bugsPage/uniqueFilter.ts

@@ -0,0 +1,42 @@
+import { useAppSelector } from 'src/app/hooks';
+
+export type UniqueFilterType = {
+  unique: {
+    available: ('all' | 'unique')[];
+    selected?: 'all' | 'unique' | false;
+  };
+};
+
+export const UniqueFilter = {
+  getCurrent: (state?: UniqueFilterType) => ({
+    available: state
+      ? state.unique.available
+      : ['all' as const, 'unique' as const],
+    selected: state ? state.unique.selected : 'unique',
+  }),
+  setAvailable: (state: UniqueFilterType) => ({
+    unique: UniqueFilter.getCurrent(state),
+  }),
+  filter: (
+    state: UniqueFilterType,
+    unique?: UniqueFilterType['unique']['selected']
+  ) => ({
+    unique: {
+      ...UniqueFilter.getCurrent(state),
+      ...(unique || unique === false ? { selected: unique ?? undefined } : {}),
+    },
+  }),
+  getValue: () => {
+    const bugsPageSlice = useAppSelector((state) => state.bugsPage);
+
+    if (!bugsPageSlice.currentCampaign) return undefined;
+
+    if (!bugsPageSlice.campaigns[bugsPageSlice.currentCampaign].severities)
+      return undefined;
+
+    const campaign: UniqueFilterType =
+      bugsPageSlice.campaigns[bugsPageSlice.currentCampaign];
+
+    return campaign.unique.selected;
+  },
+};