Merge pull request #918 from City-of-Helsinki/fix-ui-ios-15-crashing

Fix UI ios 15 crashing

Author: vergama

apps/ui/components/single-search/FilterTagList.tsx

@@ -45,48 +45,50 @@ const FilterTagList = ({
     }
     return t("searchForm:filters.duration", { unit });
   };
+
+  const sortedValues = [...formValueKeys].sort(
+    (a, b) => filterOrder.indexOf(a) - filterOrder.indexOf(b)
+  );
   return (
     <FilterTags data-test-id="search-form__filter--tags">
-      {formValueKeys
-        .toSorted((a, b) => filterOrder.indexOf(a) - filterOrder.indexOf(b))
-        .map((formValueKey) => {
-          // we don't want to show "showOnlyReservable" as a FilterTag, as it has its own checkbox in the form
-          if (formValueKey === "showOnlyReservable") return null;
-          const label = t(`searchForm:filters.${formValueKey}`, {
-            label: formValueKey,
-            value: formValues[formValueKey],
-            count: Number(formValues[formValueKey]),
-          });
-          return multiSelectFilters.includes(formValueKey) ? (
-            (formValues[formValueKey] ?? "").split(",").map((subValue) => (
-              <StyledTag
-                id={`filter-tag__${formValueKey}-${subValue}`}
-                onClick={() => removeValue?.([subValue], formValueKey)}
-                onDelete={() => removeValue?.([subValue], formValueKey)}
-                key={`${formValueKey}-${subValue}`}
-                deleteButtonAriaLabel={t(`searchForm:removeFilter`, {
-                  value: getFormSubValueLabel(formValueKey, subValue),
-                })}
-              >
-                {getFormSubValueLabel(formValueKey, subValue)}
-              </StyledTag>
-            ))
-          ) : (
+      {sortedValues.map((formValueKey) => {
+        // we don't want to show "showOnlyReservable" as a FilterTag, as it has its own checkbox in the form
+        if (formValueKey === "showOnlyReservable") return null;
+        const label = t(`searchForm:filters.${formValueKey}`, {
+          label: formValueKey,
+          value: formValues[formValueKey],
+          count: Number(formValues[formValueKey]),
+        });
+        return multiSelectFilters.includes(formValueKey) ? (
+          (formValues[formValueKey] ?? "").split(",").map((subValue) => (
             <StyledTag
-              id={`filter-tag__${formValueKey}`}
-              onDelete={() => removeValue?.([formValueKey])}
-              key={formValueKey}
+              id={`filter-tag__${formValueKey}-${subValue}`}
+              onClick={() => removeValue?.([subValue], formValueKey)}
+              onDelete={() => removeValue?.([subValue], formValueKey)}
+              key={`${formValueKey}-${subValue}`}
               deleteButtonAriaLabel={t(`searchForm:removeFilter`, {
-                value: label,
+                value: getFormSubValueLabel(formValueKey, subValue),
               })}
             >
-              {formValueKey === "duration" &&
-              !Number.isNaN(Number(formValues.duration))
-                ? durationTranslation(Number(formValues.duration))
-                : label}
+              {getFormSubValueLabel(formValueKey, subValue)}
             </StyledTag>
-          );
-        })}
+          ))
+        ) : (
+          <StyledTag
+            id={`filter-tag__${formValueKey}`}
+            onDelete={() => removeValue?.([formValueKey])}
+            key={formValueKey}
+            deleteButtonAriaLabel={t(`searchForm:removeFilter`, {
+              value: label,
+            })}
+          >
+            {formValueKey === "duration" &&
+            !Number.isNaN(Number(formValues.duration))
+              ? durationTranslation(Number(formValues.duration))
+              : label}
+          </StyledTag>
+        );
+      })}
       {formValueKeys.filter((key) => key !== "showOnlyReservable").length >
         0 && (
         <ResetButton

apps/ui/pages/search/single.tsx

@@ -21,14 +21,15 @@ import {
 } from "common/types/gql-types";
 import { Container } from "common";
 import { filterNonNullable } from "common/src/helpers";
-import { capitalize, singleSearchUrl } from "@/modules/util";
+import { capitalize, fromUIDate, singleSearchUrl } from "@/modules/util";
 import { isBrowser } from "@/modules/const";
 import { RESERVATION_UNITS } from "@/modules/queries/reservationUnit";
 import SearchForm from "@/components/single-search/SearchForm";
 import Sorting from "@/components/form/Sorting";
 import ListWithPagination from "@/components/common/ListWithPagination";
 import ReservationUnitCard from "@/components/single-search/ReservationUnitCard";
 import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { toApiDate } from "common/src/common/util";
 
 const pagingLimit = 36;
 
@@ -81,15 +82,10 @@ const processVariables = (values: Record<string, string>, language: string) => {
   const sortCriteria = ["name", "unitName"].includes(values.sort)
     ? `${values.sort}${capitalize(language)}`
     : values.sort;
-  const startArray = values.startDate?.split(".");
-  const endArray = values.endDate?.split(".");
-  // Add leading zero to day and month if needed
-  for (let i = 0; i < 2; i += 1) {
-    if (startArray && startArray.length >= i && startArray[i]?.length === 1)
-      startArray[i] = `0${startArray[i]}`;
-    if (endArray && endArray.length >= i && endArray[i]?.length === 1)
-      endArray[i] = `0${endArray[i]}`;
-  }
+
+  const startDate = fromUIDate(values.startDate);
+  const endDate = fromUIDate(values.endDate);
+
   const replaceIfExists = (condition: string | boolean, returnObject: object) =>
     condition && returnObject;
   return {
@@ -128,14 +124,10 @@ const processVariables = (values: Record<string, string>, language: string) => {
       equipments: values.equipments?.split(",").map(Number),
     }),
     ...replaceIfExists(values.startDate, {
-      reservableDateStart: values.startDate
-        ? startArray.toReversed().join("-")
-        : null,
+      reservableDateStart: startDate ? toApiDate(startDate) : null,
     }),
     ...replaceIfExists(values.endDate, {
-      reservableDateEnd: values.endDate
-        ? endArray.toReversed().join("-")
-        : null,
+      reservableDateEnd: endDate ? toApiDate(endDate) : null,
     }),
     ...replaceIfExists(values.timeBegin, {
       reservableTimeStart: values.timeBegin,