4440-refactor-code-any-type-in-form-events-and-inputs

.changeset/warm-files-reflect.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix typing for form events

src/components/AppLayout/ListFilters/components/SearchInput.tsx

@@ -16,7 +16,9 @@ const SearchInput: React.FC<SearchInputProps> = props => {
   return (
     <Debounce debounceFn={onSearchChange} time={500}>
       {debounceSearchChange => {
-        const handleSearchChange = (event: React.ChangeEvent<any>) => {
+        const handleSearchChange = (
+          event: React.ChangeEvent<HTMLInputElement>,
+        ) => {
           const value = event.target.value;
           setSearch(value);
           debounceSearchChange(value);

src/components/Datagrid/ColumnPicker/ColumnPickerSearch.tsx

@@ -25,7 +25,9 @@ export const ColumnPickerSearch: React.FC<ColumnPickerSearchProps> = ({
       time={500}
     >
       {debounceSearchChange => {
-        const handleSearchChange = (event: React.ChangeEvent<any>) => {
+        const handleSearchChange = (
+          event: React.ChangeEvent<HTMLInputElement>,
+        ) => {
           const value = event.target.value ?? "";
           setQuery(value);
           debounceSearchChange(value);

src/components/Form/Form.tsx

@@ -41,7 +41,10 @@ function Form<TData, Terrors>({
     mergeData,
   });
 
-  function handleSubmit(event?: React.FormEvent<any>, cb?: () => void) {
+  function handleSubmit(
+    event?: React.FormEvent<HTMLFormElement>,
+    cb?: () => void,
+  ) {
     const { reset, submit } = renderProps;
 
     if (event) {

src/components/SearchBar/SearchInput.tsx

@@ -33,7 +33,9 @@ const SearchInput: React.FC<SearchInputProps> = props => {
   return (
     <Debounce debounceFn={onSearchChange} time={500}>
       {debounceSearchChange => {
-        const handleSearchChange = (event: React.ChangeEvent<any>) => {
+        const handleSearchChange = (
+          event: React.ChangeEvent<HTMLInputElement>,
+        ) => {
           const value = event.target.value;
           setSearch(value);
           debounceSearchChange(value);

src/components/SeoForm/SeoForm.tsx

@@ -71,7 +71,7 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
       : getPageErrorMessage(error as PageErrorFragment, intl);
   };
 
-  const handleSlugChange = (event: React.ChangeEvent<any>) => {
+  const handleSlugChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
 
     if (value === "" || SLUG_REGEX.test(value)) {

src/custom-apps/index.tsx

@@ -17,6 +17,14 @@ import CustomAppListView from "./views/CustomAppList";
 import CustomAppWebhookCreateView from "./views/CustomAppWebhookCreate";
 import CustomAppWebhookDetailsView from "./views/CustomAppWebhookDetails";
 
+interface MatchParams {
+  appId?: string;
+}
+
+interface MatchParamsWebhookDetails {
+  id?: string;
+}
+
 const CustomAppList: React.FC<RouteComponentProps> = () => {
   const qs = parseQs(location.search.substr(1));
   const params: CustomAppListUrlQueryParams = qs;
@@ -52,7 +60,7 @@ const CustomAppDetails: React.FC<CustomAppDetailsProps> = ({
   );
 };
 
-const CustomAppWebhookCreate: React.FC<RouteComponentProps<any>> = ({
+const CustomAppWebhookCreate: React.FC<RouteComponentProps<MatchParams>> = ({
   match,
 }) => {
   const appId = match.params.appId;
@@ -64,9 +72,9 @@ const CustomAppWebhookCreate: React.FC<RouteComponentProps<any>> = ({
   return <CustomAppWebhookCreateView appId={decodeURIComponent(appId)} />;
 };
 
-const CustomAppWebhookDetails: React.FC<RouteComponentProps<any>> = ({
-  match,
-}) => {
+const CustomAppWebhookDetails: React.FC<
+  RouteComponentProps<MatchParamsWebhookDetails>
+> = ({ match }) => {
   const id = match.params.id;
 
   if (!id) {

src/giftCards/GiftCardCreateDialog/GiftCardCustomerSelectField.tsx

@@ -33,7 +33,7 @@ const GiftCardCustomerSelectField: React.FC<
     label: getFullName({ firstName, lastName }),
   }));
 
-  const handleSelect = (event: React.ChangeEvent<any>) => {
+  const handleSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     const label = choices?.find(category => category.value === value)?.label;
 

src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx

@@ -150,8 +150,8 @@ const GiftCardResendCodeDialog: React.FC<DialogProps> = ({ open, onClose }) => {
             name="differentMailConsent"
             label={intl.formatMessage(messages.consentCheckboxLabel)}
             checked={consentSelected}
-            onChange={(event: React.ChangeEvent<any>) =>
-              setConsentSelected(event.target.value)
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setConsentSelected(!!event.target.value)
             }
           />
           <VerticalSpacer />

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -208,7 +208,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
     onQueryChange(query);
   };
 
-  const handleSelectChange = (event: React.ChangeEvent<any>) => {
+  const handleSelectChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     const menuItemData = getMenuItemData(value);
 

src/orders/components/OrderCustomer/OrderCustomer.tsx

@@ -122,7 +122,9 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
         ) : isInEditMode && canEditCustomer ? (
           <Form confirmLeave initial={{ query: "" }}>
             {({ change, data }) => {
-              const handleChange = (event: React.ChangeEvent<any>) => {
+              const handleChange = (
+                event: React.ChangeEvent<HTMLInputElement>,
+              ) => {
                 change(event);
                 const value = event.target.value;
 

src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx

@@ -117,7 +117,7 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
 
   const currency = order?.total?.gross?.currency ?? "";
 
-  const handleSubmit = (e: React.FormEvent<any>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.stopPropagation();
     e.preventDefault();
     submit();

src/orders/index.tsx

@@ -35,6 +35,10 @@ import OrderReturnComponent from "./views/OrderReturn";
 import OrderSendRefundComponent from "./views/OrderSendRefund";
 import OrderSettings from "./views/OrderSettings";
 
+interface MatchParams {
+  id?: string;
+}
+
 const OrderList: React.FC<RouteComponentProps<any>> = ({ location }) => {
   const qs = parseQs(location.search.substr(1)) as any;
   const params: OrderListUrlQueryParams = asSortParams(
@@ -82,20 +86,30 @@ const OrderFulfill: React.FC<RouteComponentProps<any>> = ({
   );
 };
 
-const OrderPaymentRefund: React.FC<RouteComponentProps<any>> = ({ match }) => (
-  <OrderRefundComponent orderId={decodeURIComponent(match.params.id)} />
+const OrderPaymentRefund: React.FC<RouteComponentProps<MatchParams>> = ({
+  match,
+}) => (
+  <OrderRefundComponent orderId={decodeURIComponent(match.params.id ?? "")} />
 );
 
-const OrderSendRefund: React.FC<RouteComponentProps<any>> = ({ match }) => (
-  <OrderSendRefundComponent orderId={decodeURIComponent(match.params.id)} />
+const OrderSendRefund: React.FC<RouteComponentProps<MatchParams>> = ({
+  match,
+}) => (
+  <OrderSendRefundComponent
+    orderId={decodeURIComponent(match.params.id ?? "")}
+  />
 );
 
-const OrderReturn: React.FC<RouteComponentProps<any>> = ({ match }) => (
-  <OrderReturnComponent orderId={decodeURIComponent(match.params.id)} />
+const OrderReturn: React.FC<RouteComponentProps<MatchParams>> = ({ match }) => (
+  <OrderReturnComponent orderId={decodeURIComponent(match.params.id ?? "")} />
 );
 
-const OrderGrantRefund: React.FC<RouteComponentProps<any>> = ({ match }) => (
-  <OrderGrantRefundComponent orderId={decodeURIComponent(match.params.id)} />
+const OrderGrantRefund: React.FC<RouteComponentProps<MatchParams>> = ({
+  match,
+}) => (
+  <OrderGrantRefundComponent
+    orderId={decodeURIComponent(match.params.id ?? "")}
+  />
 );
 
 const OrderGrantRefundEdit: React.FC<RouteComponentProps<any>> = ({

src/orders/views/OrderDetails/OrderDraftDetails/index.tsx

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { FetchResult } from "@apollo/client";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@dashboard/config";
 import {
@@ -178,11 +179,8 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
 
   const handleCustomerChangeAddresses = async (
     data: Partial<OrderCustomerAddressesEditDialogOutput>,
-  ): Promise<any> =>
-    orderDraftUpdate.mutate({
-      id,
-      input: data,
-    });
+  ): Promise<FetchResult<OrderDraftUpdateMutation>> =>
+    orderDraftUpdate.mutate({ id, input: data });
 
   const handleOrderDraftCancel = async () => {
     const errors = await extractMutationErrors(orderDraftCancel.mutate({ id }));

src/orders/views/OrderDetails/OrderNormalDetails/index.tsx

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { FetchResult } from "@apollo/client";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import {
   CreateManualTransactionCaptureMutation,
@@ -149,7 +150,7 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
     });
   const handleCustomerChangeAddresses = async (
     data: Partial<OrderCustomerAddressesEditDialogOutput>,
-  ): Promise<any> =>
+  ): Promise<FetchResult<OrderUpdateMutation>> =>
     orderUpdate.mutate({
       id,
       input: data,

src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { FetchResult } from "@apollo/client";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@dashboard/config";
 import {
@@ -156,7 +157,7 @@ export const OrderUnconfirmedDetails: React.FC<
 
   const handleCustomerChangeAddresses = async (
     data: Partial<OrderCustomerAddressesEditDialogOutput>,
-  ): Promise<any> =>
+  ): Promise<FetchResult<OrderUpdateMutation>> =>
     orderUpdate.mutate({
       id,
       input: data,

src/products/index.tsx

@@ -31,6 +31,15 @@ import ProductUpdateComponent from "./views/ProductUpdate";
 import ProductVariantComponent from "./views/ProductVariant";
 import ProductVariantCreateComponent from "./views/ProductVariantCreate";
 
+interface MatchParams {
+  id?: string;
+}
+
+interface matchParamsProductVariant {
+  variantId?: string;
+  productId?: string;
+}
+
 const ProductList: React.FC<RouteComponentProps<any>> = ({ location }) => {
   const qs = parseQs(location.search.substr(1)) as any;
   const productListingPageFiltersFlag = useFlag("product_filters");
@@ -80,14 +89,16 @@ const ProductCreate: React.FC<RouteComponentProps<any>> = () => {
   return <ProductCreateComponent params={params} />;
 };
 
-const ProductVariant: React.FC<RouteComponentProps<any>> = ({ match }) => {
+const ProductVariant: React.FC<
+  RouteComponentProps<matchParamsProductVariant>
+> = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
   const params: ProductVariantEditUrlQueryParams = qs;
 
   return (
     <ProductVariantComponent
-      variantId={decodeURIComponent(match.params.variantId)}
-      productId={decodeURIComponent(match.params.productId)}
+      variantId={decodeURIComponent(match.params.variantId ?? "")}
+      productId={decodeURIComponent(match.params.productId ?? "")}
       params={params}
     />
   );
@@ -109,15 +120,15 @@ const ProductImage: React.FC<RouteComponentProps<any>> = ({
   );
 };
 
-const ProductVariantCreate: React.FC<RouteComponentProps<any>> = ({
+const ProductVariantCreate: React.FC<RouteComponentProps<MatchParams>> = ({
   match,
 }) => {
   const qs = parseQs(location.search.substr(1));
   const params: ProductVariantAddUrlQueryParams = qs;
 
   return (
     <ProductVariantCreateComponent
-      productId={decodeURIComponent(match.params.id)}
+      productId={decodeURIComponent(match.params.id ?? "")}
       params={params}
     />
   );

src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx

@@ -87,10 +87,17 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
     );
   };
 
-  const onInclusionRadioChange = (event: React.ChangeEvent<any>) => {
+  const onInclusionRadioChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const value = event.target.value;
+    const postalType =
+      value === "EXCLUDE"
+        ? PostalCodeRuleInclusionTypeEnum.EXCLUDE
+        : PostalCodeRuleInclusionTypeEnum.INCLUDE;
+
     setInclusionType(value);
-    onPostalCodeInclusionChange(value);
+    onPostalCodeInclusionChange(postalType);
   };
 
   const getPostalCodeRangeLabel = (