Fix null-checks for filters (#3868)

* Fix null checks

* Changeset

* Cr

.changeset/sour-onions-appear.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix null-cheks for filters

src/components/ConditionalFilter/FilterElement/FilterElement.ts

@@ -161,7 +161,7 @@ export class FilterElement {
       );
     }
 
-    return null;
+    return FilterElement.createEmpty();
   }
 }
 

src/components/ConditionalFilter/ValueProvider/TokenArray/fetchingParams.ts

@@ -1,14 +1,15 @@
-// @ts-strict-ignore
 import { UrlToken } from "../UrlToken";
 
 export interface FetchingParams {
   category: string[];
   collection: string[];
   channel: string[];
-  producttype: [];
+  producttype: string[];
   attribute: Record<string, string[]>;
 }
 
+type FetchingParamsKeys = keyof Omit<FetchingParams, "attribute">
+
 export const emptyFetchingParams: FetchingParams = {
   category: [],
   collection: [],
@@ -20,8 +21,10 @@ export const emptyFetchingParams: FetchingParams = {
 const unique = <T>(array: Iterable<T>) => Array.from(new Set(array));
 
 export const toFetchingParams = (p: FetchingParams, c: UrlToken) => {
-  if (!c.isAttribute() && !p[c.name]) {
-    p[c.name] = [];
+  const key = c.name as FetchingParamsKeys
+
+  if (!c.isAttribute() && !p[key]) {
+    p[key] = []
   }
 
   if (c.isAttribute() && !p.attribute[c.name]) {
@@ -34,7 +37,7 @@ export const toFetchingParams = (p: FetchingParams, c: UrlToken) => {
     return p;
   }
 
-  p[c.name] = unique(p[c.name].concat(c.value));
+  p[key] = unique(p[key].concat(c.value));
 
   return p;
 };

src/components/ConditionalFilter/ValueProvider/TokenArray/index.ts

@@ -1,5 +1,3 @@
-// @ts-strict-ignore
-
 import { parse, ParsedQs } from "qs";
 import { useRef } from "react";
 
@@ -51,7 +49,7 @@ const tokenizeUrl = (urlParams: string) => {
 const mapUrlTokensToFilterValues = (
   urlTokens: TokenArray,
   response: InitialStateResponse,
-) =>
+): FilterContainer =>
   urlTokens.map(el => {
     if (typeof el === "string") {
       return el;
@@ -97,7 +95,7 @@ export class TokenArray extends Array<string | UrlToken | TokenArray> {
 }
 
 export const useTokenArray = (url: string) => {
-  const instance = useRef<TokenArray>(null);
+  const instance = useRef<TokenArray | null>(null);
 
   if (!instance.current) {
     instance.current = new TokenArray(url);

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -1,5 +1,3 @@
-// @ts-strict-ignore
-
 import { stringify } from "qs";
 import useRouter from "use-react-router";
 
@@ -7,8 +5,11 @@ import { useInitialAPIState } from "../API/initialState/useInitalAPIState";
 import { FilterContainer } from "../FilterElement";
 import { FilterValueProvider } from "../FilterValueProvider";
 import { useTokenArray } from "./TokenArray";
+import { UrlEntry } from "./UrlToken";
 
-const prepareStructure = filterValue =>
+type Structure = Array<string | UrlEntry | Structure>
+
+const prepareStructure = (filterValue: FilterContainer): Structure =>
   filterValue.map(f => {
     if (typeof f === "string") {
       return f;
@@ -21,9 +22,6 @@ const prepareStructure = filterValue =>
     return f.asUrlEntry();
   });
 
-/*
-  exampple url: http://localhost:9000/dashboard/products/?0%5Bs2.category%5D%5B0%5D=accessories&0%5Bs2.category%5D%5B1%5D=groceries&1=o&2%5Ba2.abv%5D%5B0%5D=QXR0cmlidXRlVmFsdWU6Njg%3D&3=a&4%5Bs2.collection%5D%5B0%5D=featured-products&5=a&6%5Bs2.producttype%5D%5B0%5D=beer&7=a&8%5B0%5D%5Bs2.category%5D%5B0%5D=apparel&8%5B1%5D=o&8%5B2%5D%5Ba2.bottle-size%5D%5B0%5D=QXR0cmlidXRlVmFsdWU6NDY%3D&8%5B2%5D%5Ba2.bottle-size%5D%5B1%5D=QXR0cmlidXRlVmFsdWU6NDc%3D&asc=true&sort=name
-*/
 export const useUrlValueProvider = (): FilterValueProvider => {
   const router = useRouter();
   const params = new URLSearchParams(router.location.search);

src/components/ConditionalFilter/controlsType.ts

@@ -1,15 +1,13 @@
-// @ts-strict-ignore
-
 import { ConditionValue } from "./FilterElement/ConditionValue";
 
 export const CONTROL_DEFAULTS = {
   text: "",
   number: "",
   "number.range": [] as unknown as [string, string],
-  multiselect: [] as ConditionValue[],
+  multiselect: [] as ConditionValue,
   select: "",
   combobox: "",
 };
 
 export const getDefaultByControlName = (name: string): ConditionValue =>
-  CONTROL_DEFAULTS[name];
+  CONTROL_DEFAULTS[name as keyof typeof CONTROL_DEFAULTS];