Remove DataState postProcessing() function in favour of renamed useSubset()

Author: davidde

src/components/content/home-page/blocks/block.tsx

@@ -22,16 +22,17 @@ export default function Block(props: {
   const alchemy = useAlchemy(props.network);
   const blockNumber = props.latestBlockData.value && props.latestBlockData.value - props.id;
 
-  const blockData = useDataState<BlockP, [Alchemy, number?], Block>({
+  const blockData = useDataState<Block>({
     fetcher: (alchemy, num) => alchemy.core.getBlock(num!),
     args: [alchemy, blockNumber],
-    postProcess: (response) => ({
+  }).useTransform(
+    (response) => ({
       timestamp: `(${getBlockAgeFromSecs(getSecsFromUnixSecs(response.timestamp))} ago)`,
       transactions: `${response.transactions.length} transactions`,
       recipientHashFull: response.miner,
       recipientHashShort: truncateAddress(response.miner, 20),
-    }),
-  });
+    })
+  );
 
   return (
     <div className='min-h-[8.5rem] md:min-h-[5.8rem] p-2 md:p-3 border-b border-(--border-color) last:border-0'>
@@ -84,14 +85,14 @@ export default function Block(props: {
               className='w-[11rem]'
               loadingPulseColor='bg-(--link-color)'
             >
-            {
-              ({ recipientHashFull, recipientHashShort }) =>
-                <PopoverLink
-                  href={`/${props.network}/address?hash=${recipientHashFull}`}
-                  content={recipientHashShort}
-                  popover={recipientHashFull}
-                  className='left-[-37%] top-[-2.6rem] w-78 py-1.5 px-2.5'
-                />
+              {
+                ({ recipientHashFull, recipientHashShort }) =>
+                  <PopoverLink
+                    href={`/${props.network}/address?hash=${recipientHashFull}`}
+                    content={recipientHashShort}
+                    popover={recipientHashFull}
+                    className='left-[-37%] top-[-2.6rem] w-78 py-1.5 px-2.5'
+                  />
               }
             </blockData.Render>
           </span>

src/components/content/home-page/transactions/index.tsx

@@ -13,7 +13,7 @@ export default function Transactions(props: {
 }) {
   const alchemy = useAlchemy(props.network);
 
-  const blockWithTransactionsData = useDataState<BlockWithTransactions, [Alchemy, number?]>({
+  const blockWithTransactionsData = useDataState<BlockWithTransactions>({
     fetcher: (alchemy, num) => alchemy.core.getBlockWithTransactions(num!),
     args: [alchemy, props.latestBlockData.value],
   });

src/components/content/home-page/transactions/transaction.tsx

@@ -12,7 +12,7 @@ export default function Transaction(props: {
   network: string,
   blockWithTransactionsData: DataState<BlockWithTransactions>,
 }) {
-  const txData = props.blockWithTransactionsData.useSubset(
+  const txData = props.blockWithTransactionsData.useTransform(
     (data, id) => ({ ...data.transactions[id] }),
     [props.id]
   );

src/lib/data-state/constructors/data-state.ts

@@ -20,7 +20,7 @@ Constructors for the DataState type:
 // Create a `DataState<T>` type from a FetchConfig object, and initialize it as a LoadingRoot.
 // This function needs to create all DataStateMethods to pass on to the DataState!
 // Contrary to `useDataState()`, this constructor does NOT actually run the fetch!
-export const useConfig: DataStateConstructor = <T, A extends any[], R>(config: FetchConfig<T, A, R>) => {
+export const useConfig: DataStateConstructor = <T, A extends any[] = any[]>(config: FetchConfig<T, A>) => {
   // Initialize a LoadingRoot as root variant for the DataState:
   // Calling `DataState.loading()` inside `useState()` is required to
   // get a LoadingRoot (DataRoot<undefined>) instead of an `undefined`.

src/lib/data-state/methods.tsx

@@ -10,10 +10,10 @@ import { RenderError } from './types/errors';
 import { createLoadingRoot, createValueRoot, createErrorRoot } from './constructors/data-root';
 
 
-export function useDataStateMethods<T, A extends any[], R>(
+export function useDataStateMethods<T, A extends any[] = any[]>(
   dataRoot: DataRoot<T>,
   setDataRoot: Dispatch<SetStateAction<DataRoot<T>>>,
-  config: FetchConfig<T, A, R>
+  config: FetchConfig<T, A>
 ) {
   const setLoading = () => setDataRoot(createLoadingRoot());
   const setValue = (dataValue: T) => setDataRoot(createValueRoot(dataValue));
@@ -31,25 +31,22 @@ export function useDataStateMethods<T, A extends any[], R>(
   // it always KEEPS the FIRST VERSION that it received!
   // Those variables have to be provided as ARGUMENTS!
   const fetcher = useRef(config.fetcher).current;
-  const postProcess = useRef(config.postProcess).current;
 
   // Attach setDataRoot to fetcher so fetching can update the DataState:
   const fetch = useCallback(async () => {
     try {
       // Skip fetching if one of the arguments is still undefined:
       if (args?.some(arg => arg === undefined)) return;
 
-      let response: R;
+      let response: T;
       if (fetcher) response = await fetcher(...args);
       else response = await fetchJson(args[0] as string);
 
-      const result = (postProcess ? postProcess(response) : response) as T;
-
-      setDataRoot(createValueRoot(result));
+      setDataRoot(createValueRoot(response));
     } catch (err) {
       setDataRoot(createErrorRoot(err));
     }
-  }, [fetcher, args, postProcess, setDataRoot]);
+  }, [fetcher, args, setDataRoot]);
 
   // Get an actual value by doing initial fetch in useEffect():
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -109,38 +106,32 @@ export function useDataStateMethods<T, A extends any[], R>(
   }
 
   // Create a new DataState containing a subset of the fields of another:
-  const useSubset = <S, B extends any[]>(
-    selectorFn: (data: T, ...args: B) => S,
-    selectorArgs?: B,
-  ): DataState<S> => {
+  const useTransform = <U, B extends any[]>(
+    transformer: (data: T, ...args: B) => U,
+    transformerArgs?: B,
+  ): DataState<U> => {
     // Stabilize the selector function once - it never changes:
-    const stableSelector = useRef(selectorFn).current;
+    const stableTransformer = useRef(transformer).current;
     // Stabilize the arguments:
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const stableArgs = useMemo(() => selectorArgs || [] as unknown as B, selectorArgs || [] as unknown as B);
-
-    const subsetPostProcess = useCallback((response: R): S => {
-      const result = (postProcess ? postProcess(response) : response) as unknown as T;
-      return stableSelector(result, ...stableArgs);
-    }, [stableArgs, stableSelector]);
+    const stableArgs = useMemo(() => transformerArgs || [] as unknown as B, transformerArgs || [] as unknown as B);
 
-    const subsetConfig = {
-      fetcher: fetcher,
-      args: args,
-      postProcess: subsetPostProcess,
+    const transformConfig = {
+      transformer: stableTransformer,
+      args: stableArgs,
     };
 
     // Construct the new subset DataState to return:
-    const subsetData = useConfig<S, A, R>(subsetConfig);
+    const subsetData = useConfig<U, A>(transformConfig);
 
     useEffect(() => {
       switch (dataRoot.status) {
         case 'loading':
           break;
         case 'value':
           try {
-            const selectedValue = stableSelector(dataRoot.value, ...stableArgs);
-            subsetData.setValue(selectedValue);
+            const transformedValue = stableTransformer(dataRoot.value, ...stableArgs);
+            subsetData.setValue(transformedValue);
           } catch (err) {
             // Handle selector errors gracefully:
             subsetData.setError(
@@ -160,5 +151,5 @@ export function useDataStateMethods<T, A extends any[], R>(
     return subsetData;
   }
 
-  return { setLoading, setValue, setError, fetch, useInit, Render, useSubset };
+  return { setLoading, setValue, setError, fetch, useInit, Render, useTransform };
 }

src/lib/data-state/types/index.ts

@@ -1,4 +1,4 @@
-import { DependencyList, Dispatch, ReactNode, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 
 
 export type LoadingRoot = {
@@ -26,12 +26,6 @@ export type LoadingRootConstructor = <T,>() => DataRoot<T>;
 export type ValueRootConstructor = <T,>(dataValue: T) => DataRoot<T>;
 export type ErrorRootConstructor = <T,>(unknownError: unknown, errorPrefix?: string) => DataRoot<T>;
 
-// Function to transform an object by selecting/transforming the input object
-// and returning a modified object containing only the selected fields.
-// S is the type of the resulting selection, I is the input type, and A are the
-// OPTIONAL arguments from outside the caller to be used for transforming the data:
-type Selector<S, I, A extends any[] = []> = (input: I, ...args: A) => S;
-
 // DataState Methods that extend the DataRoot<T> into a full DataState<T> type:
 export type DataStateMethods<T> = {
   // These methods set the DataRoot value using React's useState.
@@ -53,10 +47,10 @@ export type DataStateMethods<T> = {
   // and render that, or otherwise default to rendering the DataState's value directly.
   Render: <K extends keyof T>(options?: RenderConfig<T, K>) => ReactNode;
   // Create a new DataState containing a subset of the fields of another:
-  useSubset: <S, A extends any[]>(
-    selector: Selector<S, T, A>,
+  useTransform: <U, A extends any[]>(
+    transformer: Transformer<U, T, A>,
     args?: A,
-  ) => DataState<S>;
+  ) => DataState<U>;
   // Create a new DataState by composing the values from 2 different DataStates:
   // (E.g. When some data transformation requires data from 2 different fetches)
   // useCompose: <U, C>(
@@ -132,17 +126,34 @@ export type DataState<T> = DataRoot<T> & DataStateMethods<T>;
 
 // FetchConfig is used to initialize a DataState<T>, which is a DataRoot<T>,
 // together with its fetching function for potentially refetching it:
-export type FetchConfig<T, A extends any[] = any[], R = T> = {
+export type FetchConfig<T, A extends any[] = []> = {
   // `fetcher` takes any async function, and can be omitted
   // if the fetcher is the standard Fetch API:
-  fetcher?: (...args: A) => Promise<R>; // R is the raw Response type!
+  fetcher?: (...args: A) => Promise<T>;
   // Optionally provide arguments for the fetcher:
   args?: A;
-  // Optional postprocessing function to transform fetched data from
-  // raw Response type R to DataState type T before creating DataState<T>:
-  postProcess?: Selector<T, R>;
 };
 
-export type DataStateConstructor = <T, A extends any[] = any[], R = T>(
-  config: FetchConfig<T, A, R>
+// Function to transform an object by selecting/transforming the input object
+// and returning a modified object containing only the selected fields.
+// S is the type of the resulting selection, I is the input type, and A are the
+// OPTIONAL arguments from outside the caller to be used for transforming the data:
+type Transformer<T, I, A extends any[] = any[]> = (input: I, ...args: A) => T;
+
+// Config for selecting/transforming an input object and returning
+// a new, modified object containing only the selected/transformed fields.
+// T is the type of the resulting transformation, I is the input type,
+// and A are the OPTIONAL arguments from outside the caller to be used
+// for transforming the data:
+export type TransformConfig<T, I, A extends any[] = any[]> = {
+  // Transformer does the actual transformation by returning a selection of fields:
+  transformer: Transformer<T, I, A>;
+  // Optionally provide arguments for the transformer:
+  args?: A;
+};
+
+// A DataState is either initialized from a fetcher function,
+// or transformed from an input object:
+export type DataStateConstructor = <T, I = T, A extends any[] = any[]>(
+  config: FetchConfig<T, A> | TransformConfig<T, I, A>
 ) => DataState<T>;