refactor(hook): migrate to TypeScript (#1872)

* refactor(hook): migrate to TypeScript

* chore: changeset

* fix(use-toggle-state): do not assign value as type

.changeset/lazy-poems-shake.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/hooks': patch
+---
+
+Migrate `hooks` to TypeScript

packages/hooks/src/use-data-table-sorting-state/use-data-table-sorting-state.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback } from 'react';
+import isNil from 'lodash/isNil';
+
+type TSortDefinition = {
+  key: string;
+  order: 'desc' | 'asc';
+};
+
+type TDataTableSortingState = {
+  value: TSortDefinition;
+  onChange: (
+    key: TSortDefinition['key'],
+    order: TSortDefinition['order']
+  ) => void;
+};
+
+const defaultValues: TSortDefinition = { key: 'createdAt', order: 'desc' };
+const applyIf = (
+  values: Partial<TSortDefinition>,
+  key: 'order' | 'key'
+): Partial<TDataTableSortingState> =>
+  !isNil(values[key]) ? { [key]: values[key] } : {};
+
+const useDataTableSortingState = (
+  initialValues: Partial<TSortDefinition> = {}
+): TDataTableSortingState => {
+  const mergedValues: TSortDefinition = {
+    ...defaultValues,
+    ...applyIf(initialValues, 'key'),
+    ...applyIf(initialValues, 'order'),
+  };
+  const [sortDefinition, setSortDefinition] = useState<TSortDefinition>(
+    mergedValues
+  );
+  const onTableSortingChange = useCallback<TDataTableSortingState['onChange']>(
+    (key: TSortDefinition['key'], order: TSortDefinition['order']): void => {
+      setSortDefinition({
+        key,
+        order,
+      });
+    },
+    []
+  );
+
+  return {
+    value: sortDefinition,
+    onChange: onTableSortingChange,
+  };
+};
+
+export default useDataTableSortingState;

packages/hooks/src/use-field-id/use-field-id.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { getFieldId } from '@commercetools-uikit/utils';
+
+type CreateIdFn = () => string;
+
+const useFieldId = (id: string, createIdFn: CreateIdFn): string => {
+  const [internalId, setId] = React.useState<string>(id);
+
+  React.useEffect(() => {
+    const props = { id };
+    const state = { id: internalId };
+
+    setId(getFieldId(props, state, createIdFn));
+  }, [id, internalId, setId, createIdFn]);
+
+  return internalId;
+};
+
+export default useFieldId;

packages/hooks/src/use-pagination-state/use-pagination-state.ts

@@ -0,0 +1,73 @@
+import { useState, useCallback } from 'react';
+import isNil from 'lodash/isNil';
+
+type TPaginationDefinition = {
+  page: number;
+  perPage: number;
+};
+type TState = {
+  value: number;
+  onChange: (value: number) => void;
+};
+type TPaginationState = {
+  [P in keyof TPaginationDefinition]: TState;
+};
+
+const applyIf = (
+  values: Partial<TPaginationDefinition>,
+  key: 'page' | 'perPage'
+): Partial<TPaginationDefinition> =>
+  !isNil(values[key]) ? { [key]: values[key] } : {};
+
+const defaultValues: TPaginationDefinition = {
+  page: 1,
+  perPage: 20,
+};
+
+const usePaginationState = (
+  initialValues: Partial<TPaginationDefinition> = {}
+): TPaginationState => {
+  const mergedValues: TPaginationDefinition = {
+    ...defaultValues,
+    ...applyIf(initialValues, 'page'),
+    ...applyIf(initialValues, 'perPage'),
+  };
+
+  const [page, setPage] = useState<TPaginationDefinition['page']>(
+    mergedValues.page
+  );
+  const [perPage, setPerPage] = useState<TPaginationDefinition['perPage']>(
+    mergedValues.perPage
+  );
+
+  const onPageChange = useCallback<TState['onChange']>(
+    (nextPage) => {
+      setPage(nextPage);
+    },
+    [setPage]
+  );
+
+  const onPerPageChange = useCallback<TState['onChange']>(
+    (nextPerPage) => {
+      // side-effect:
+      // GIVEN client updates `perPage`,
+      // THEN we reset `page` (discards initialValues.page)
+      setPage(1);
+      setPerPage(nextPerPage);
+    },
+    [setPerPage, setPage]
+  );
+
+  return {
+    page: {
+      value: page,
+      onChange: onPageChange,
+    },
+    perPage: {
+      value: perPage,
+      onChange: onPerPageChange,
+    },
+  };
+};
+
+export default usePaginationState;

packages/hooks/src/use-previous/use-previous.js → packages/hooks/src/use-previous/use-previous.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const usePrevious = (value) => {
-  const ref = React.useRef();
+const usePrevious = <Ref>(value: Ref) => {
+  const ref = React.useRef<Ref>();
   React.useEffect(() => {
     ref.current = value;
   }, [value]);

packages/hooks/src/use-toggle-state/use-toggle-state.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+
+const useToggleState = (defaultValue?: boolean) => {
+  const initialValue = typeof defaultValue === 'boolean' ? defaultValue : true;
+
+  const [isToggled, setIsToggled] = useState(initialValue);
+  const toggle = useCallback<(forceIsToggled?: boolean) => void>(
+    (forceIsToggled?: boolean) => {
+      setIsToggled(
+        typeof forceIsToggled === 'boolean' ? forceIsToggled : !isToggled
+      );
+    },
+    [isToggled, setIsToggled]
+  );
+  return [isToggled, toggle];
+};
+
+export default useToggleState;