Update list settings types (#1165)

src/attributes/components/AttributePage/AttributePage.tsx

@@ -10,6 +10,7 @@ import Metadata from "@saleor/components/Metadata/Metadata";
 import { MetadataFormData } from "@saleor/components/Metadata/types";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { ListSettingsUpdate } from "@saleor/components/TablePagination";
 import { AttributeDetailsFragment } from "@saleor/fragments/types/AttributeDetailsFragment";
 import { AttributeErrorFragment } from "@saleor/fragments/types/AttributeErrorFragment";
 import { sectionNames } from "@saleor/intl";
@@ -46,7 +47,7 @@ export interface AttributePageProps {
   onValueReorder: ReorderAction;
   onValueUpdate: (id: string) => void;
   settings?: ListSettings;
-  onUpdateListSettings?: (key: keyof ListSettings, value: any) => void;
+  onUpdateListSettings?: ListSettingsUpdate;
   pageInfo: {
     hasNextPage: boolean;
     hasPreviousPage: boolean;

src/components/RowNumberSelect/RowNumberSelect.tsx

@@ -3,8 +3,6 @@ import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { ListSettings } from "../../types";
-
 const useStyles = makeStyles(
   theme => ({
     label: {
@@ -34,14 +32,14 @@ const useStyles = makeStyles(
 interface RowNumberSelectProps {
   choices: number[];
   className?: string;
-  settings: ListSettings;
+  rowNumber: number;
-  onChange(key: keyof ListSettings, value: any);
+  onChange(value: number);
 }
 
 const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
   className,
   choices,
-  settings,
+  rowNumber,
   onChange
 }) => {
   const classes = useStyles({});
@@ -54,8 +52,8 @@ const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
       <Select
         data-test-id="rowNumberSelect"
         className={classes.select}
-        value={settings.rowNumber}
+        value={rowNumber}
-        onChange={event => onChange("rowNumber", event.target.value)}
+        onChange={event => onChange(event.target.value as number)}
       >
         {choices.length > 0 &&
           choices.map(choice => (

src/components/TablePagination/TablePagination.tsx

@@ -52,6 +52,11 @@ const useStyles = makeStyles(
   { name: "TablePagination" }
 );
 
+export type ListSettingsUpdate = <T extends keyof ListSettings>(
+  key: T,
+  value: ListSettings[T]
+) => void;
+
 interface TablePaginationProps {
   backIconButtonProps?: Partial<IconButtonProps>;
   colSpan: number;
@@ -60,9 +65,9 @@ interface TablePaginationProps {
   hasNextPage: boolean;
   hasPreviousPage: boolean;
   nextIconButtonProps?: Partial<IconButtonProps>;
+  onUpdateListSettings?: ListSettingsUpdate;
   onNextPage(event);
   onPreviousPage(event);
-  onUpdateListSettings?(key: keyof ListSettings, value: any): void;
 }
 
 const TablePagination: React.FC<TablePaginationProps> = props => {
@@ -94,8 +99,8 @@ const TablePagination: React.FC<TablePaginationProps> = props => {
           {maybe(() => settings.rowNumber) && (
             <RowNumberSelect
               choices={[10, 20, 30, 50, 100]}
-              settings={settings}
+              rowNumber={settings.rowNumber}
-              onChange={onUpdateListSettings}
+              onChange={value => onUpdateListSettings("rowNumber", value)}
             />
           )}
         </div>

src/hooks/useListSettings.ts

@@ -6,7 +6,10 @@ import { ListSettings, ListViews } from "./../types";
 
 export interface UseListSettings<TColumns extends string = string> {
   settings: ListSettings<TColumns>;
-  updateListSettings: (key: keyof ListSettings<TColumns>, value: any) => void;
+  updateListSettings: <T extends keyof ListSettings<TColumns>>(
+    key: T,
+    value: ListSettings<TColumns>[T]
+  ) => void;
 }
 export default function useListSettings<TColumns extends string = string>(
   listName: ListViews
@@ -25,7 +28,10 @@ export default function useListSettings<TColumns extends string = string>(
     }
   }, []);
 
-  const updateListSettings = (key: keyof ListSettings, value: any) =>
+  const updateListSettings = <T extends keyof ListSettings>(
+    key: T,
+    value: ListSettings[T]
+  ) =>
     setListSettings(settings => ({
       ...settings,
       [listName]: {

src/translations/components/TranslationsProductTypesPage/TranslationsProductTypesPage.tsx

@@ -3,6 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
+import { ListSettingsUpdate } from "@saleor/components/TablePagination";
 import { AttributeTranslationDetailsFragment } from "@saleor/fragments/types/AttributeTranslationDetailsFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
@@ -27,7 +28,7 @@ export interface TranslationsProductTypesPageProps
   extends TranslationsEntitiesPageProps {
   data: AttributeTranslationDetailsFragment;
   settings?: ListSettings;
-  onUpdateListSettings?: (key: keyof ListSettings, value: any) => void;
+  onUpdateListSettings?: ListSettingsUpdate;
   pageInfo: {
     hasNextPage: boolean;
     hasPreviousPage: boolean;

src/types.ts

@@ -55,9 +55,9 @@ export interface ListProps<TColumns extends string = string> {
   onNextPage: () => void;
   onPreviousPage: () => void;
   onRowClick: (id: string) => () => void;
-  onUpdateListSettings?: (
+  onUpdateListSettings?: <T extends keyof ListSettings<TColumns>>(
-    key: keyof ListSettings<TColumns>,
+    key: T,
-    value: any
+    value: ListSettings<TColumns>[T]
   ) => void;
   onListSettingsReset?: () => void;
 }