Upgrade RenderConfig staticString prop to staticContent that is ReactNode instead of string

Author: davidde

src/components/common/indicators/loading-pulse.tsx

@@ -1,6 +1,9 @@
+import { ReactNode } from 'react';
+
+
 export default function LoadingPulse(props: {
   loadingPulseColor?: string, // Takes background color from currentcolor (i.e. text color) by default!
-  content?: string // `content` is just used to determine width, but not actually displayed!
+  content?: ReactNode // `content` is just used to determine width, but not actually displayed!
   className?: string,
 }) {
   const color = props.loadingPulseColor ?? 'bg-[currentcolor]';

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

@@ -27,7 +27,7 @@ export default function BlockReward(props: {
   return (
     <span className='pl-2 md:pl-4'>
       <blockRewardData.Render
-        staticString='Block Reward:'
+        staticContent='Block Reward:'
         loadingPulseColor='bg-(--grey-fg-color)'
       />
       &nbsp;&nbsp;

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

@@ -72,7 +72,7 @@ export default function Block(props: {
           </span>
           <span className='pl-2 md:pl-4 leading-5'>
             <blockData.Render
-              staticString='Recipient:'
+              staticContent='Recipient:'
               loadingPulseColor='bg-(--grey-fg-color)'
             />
             &nbsp;&nbsp;

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

@@ -35,7 +35,7 @@ export default function Transaction(props: {
             </span>
             <span className='px-2 md:pl-4'>
               <props.blockWithTransactions.Render
-                staticString='Amount:'
+                staticContent='Amount:'
                 loadingPulseColor='bg-(--grey-fg-color)'
               />
               &nbsp;&nbsp;
@@ -50,7 +50,7 @@ export default function Transaction(props: {
         <div className='flex flex-col ml-12 md:ml-4 my-2 md:my-0'>
           <span className='pl-2 md:pl-4'>
             <props.blockWithTransactions.Render
-              staticString='From:'
+              staticContent='From:'
               loadingPulseColor='bg-(--grey-fg-color)'
             />
             &nbsp;&nbsp;
@@ -67,7 +67,7 @@ export default function Transaction(props: {
           </span>
           <span className='pl-7 md:pl-9'>
             <props.blockWithTransactions.Render
-              staticString='To:'
+              staticContent='To:'
               loadingPulseColor='bg-(--grey-fg-color)'
             />
             &nbsp;&nbsp;

src/lib/data-state/constructors/index.tsx

@@ -76,15 +76,15 @@ export const useConfig: DataStateConstructor = <T, A extends any[], R>(config: F
   }
 
   const Render = <K extends keyof T>(conf: RenderConfig<T, K> = {}): ReactNode => {
-    const { valueCallback, field, staticString, error, loadingMessage, loadingPulseColor,
+    const { valueCallback, field, staticContent, error, loadingMessage, loadingPulseColor,
       showFallback = true, loadingFallback, errorFallback, jointClass } = conf;
 
     switch (dataRoot.status) {
       case 'loading':
         if (showFallback) {
           if (loadingFallback) return loadingFallback;
           else if (loadingMessage) return <LoadingIndicator message={loadingMessage} className={jointClass} />;
-          else return <LoadingPulse loadingPulseColor={loadingPulseColor} className={jointClass} content={staticString} />;
+          else return <LoadingPulse loadingPulseColor={loadingPulseColor} className={jointClass} content={staticContent} />;
         } return;
       case 'value':
         if (valueCallback) {
@@ -105,15 +105,15 @@ export const useConfig: DataStateConstructor = <T, A extends any[], R>(config: F
           return value;
         } else if (field) {
           return <span className={jointClass}>{ String(dataRoot.value[field]) }</span>;
-        } else if (staticString) {
-          return <span className={jointClass}>{ staticString }</span>;
+        } else if (staticContent) {
+          return <span className={jointClass}>{ staticContent }</span>;
         } else return <span className={jointClass}>{ String(dataRoot.value) }</span>;
       case 'error':
-        // When only the staticString prop was provided for the Render function,
-        // the staticString should be displayed regardless of possible errors,
-        // since the errors have nothing to do with the static string to display:
-        if (!valueCallback && !field && staticString) {
-          return <span className={jointClass}>{ staticString }</span>;
+        // When only the staticContent prop was provided for the Render function,
+        // the staticContent should be displayed regardless of possible errors,
+        // since the errors have nothing to do with the static content to be displayed:
+        if (!valueCallback && !field && staticContent) {
+          return <span className={jointClass}>{ staticContent }</span>;
         }
         else if (showFallback) {
           return errorFallback ?? <ErrorIndicator refetch={fetch} error={error} className={jointClass} />;

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

@@ -69,14 +69,14 @@ export type RenderConfig<T, K extends keyof T> = {
   // Optionally render a specific key/field of the DataState's value (IFF it is present):
   // If valueCallback() is provided, it will take precedence over field!
   field?: K;
-  // Optionally provide a static string to render:
-  // This is useful for static content that should only display when other data
-  // is also available to display, and show a LoadingIndicator if not.
-  // If valueCallback() or field are provided, they will take precedence over staticString!
-  // The staticString is also used for setting the width of the LoadingPulse component,
+  // Optionally provide static content to render:
+  // This is useful for content that should only display when other data
+  // is already available to display, or show a LoadingIndicator when not ready available.
+  // If valueCallback() or field are provided, they will take precedence over staticContent!
+  // The staticContent is also used for setting the width of the LoadingPulse component,
   // so it can also be used for this even when providing a field or valueCallback that
   // will take precedence for the value that will be displayed.
-  staticString?: string;
+  staticContent?: ReactNode;
   // Optional error message to display instead of 'Error':
   error?: string;
   // Optional message to display while loading: