From 64189a573979e49d030fed9cd9e8c89511451a41 Mon Sep 17 00:00:00 2001 From: Rafa Date: Sat, 4 Jan 2025 22:52:38 -0800 Subject: [PATCH] after-action-change.tsx documentation --- .../nav-sidebar/config/use-cta-config.tsx | 25 +++++ .../UseCTAParameterAfterActionChange.tsx | 8 ++ .../components/topics/create-cta-context.tsx | 26 +++-- site/src/components/topics/create-cta.tsx | 22 ++-- site/src/components/topics/use-cta/index.tsx | 2 + .../parameters/after-action-change.tsx | 104 ++++++++++++++++++ .../topics/use-cta/parameters/compare.tsx | 95 ++++++++-------- site/src/util/getSourceFiles.ts | 1 + src/types/UseCTAParameterAfterActionChange.ts | 12 +- 9 files changed, 235 insertions(+), 60 deletions(-) create mode 100644 site/src/components/popover/UseCTAParameterAfterActionChange.tsx create mode 100644 site/src/components/topics/use-cta/parameters/after-action-change.tsx diff --git a/site/src/components/nav-sidebar/config/use-cta-config.tsx b/site/src/components/nav-sidebar/config/use-cta-config.tsx index 27bab49..6601464 100644 --- a/site/src/components/nav-sidebar/config/use-cta-config.tsx +++ b/site/src/components/nav-sidebar/config/use-cta-config.tsx @@ -65,6 +65,30 @@ export const useCTAParameterCompareConfig: NavItem = { ], title: 'Parameter: compare', }; + +export const useCTAParameterAfterActionChangeExampleConfig: NavItem = { + desc: <> + Parameter: + {' '} + afterActionChange + {' '} + Example + , + href: 'use-cta-parameter-after-action-change-example', + title: 'Parameter: afterActionChange Example', +}; +export const useCTAParameterAfterActionChangeConfig: NavItem = { + desc: <> + Parameter: + {' '} + afterActionChange + , + href: 'use-cta-parameter-after-action-change', + subNav: [ + useCTAParameterAfterActionChangeExampleConfig, + ], + title: 'Parameter: afterActionChange', +}; export const useCTAReturnValues0HistoryConfig: NavItem = { desc: <> useCTA return @@ -123,6 +147,7 @@ export const useCTAConfig: NavItem = { useCTAParameterInitialConfig, useCTAParameterOnInitConfig, useCTAParameterCompareConfig, + useCTAParameterAfterActionChangeConfig, useCTAParameterActionsConfig, useCTAReturnValuesConfig, ], diff --git a/site/src/components/popover/UseCTAParameterAfterActionChange.tsx b/site/src/components/popover/UseCTAParameterAfterActionChange.tsx new file mode 100644 index 0000000..4d482e7 --- /dev/null +++ b/site/src/components/popover/UseCTAParameterAfterActionChange.tsx @@ -0,0 +1,8 @@ +import { SourceCodeRecordProps, } from '../../types/source-code-record-props'; +import PopoverTypes from './index'; + +export default function PopoverUseCTAParameterAfterActionChange( props: SourceCodeRecordProps, ) { + return + {props.sourceCodeRecord[ 'types/UseCTAParameterAfterActionChange.ts' ]} + ; +} diff --git a/site/src/components/topics/create-cta-context.tsx b/site/src/components/topics/create-cta-context.tsx index 85761d0..1d7e854 100644 --- a/site/src/components/topics/create-cta-context.tsx +++ b/site/src/components/topics/create-cta-context.tsx @@ -7,7 +7,7 @@ import { } from '../nav-sidebar/config/create-cta-context-config'; import { useCTAConfig, - useCTAParameterActionsConfig, + useCTAParameterActionsConfig, useCTAParameterAfterActionChangeConfig, useCTAParameterCompareConfig, useCTAParameterInitialConfig, useCTAParameterOnInitConfig, @@ -17,6 +17,7 @@ import { useCTAReturnValues1DispatchConfig, } from '../nav-sidebar/config/use-ct import PopoverCTAHistory from '../popover/ctaHistory'; import PopoverCTAState from '../popover/ctaState'; import PopoverUseCTAParameterActionsRecordProp from '../popover/PopoverUseCTAParameterActionsRecordProp'; +import PopoverUseCTAParameterAfterActionChange from '../popover/UseCTAParameterAfterActionChange'; import PopoverUseCTAParameterCompare from '../popover/UseCTAParameterCompare'; import PopoverUseCTAParameterOnInit from '../popover/UseCTAParameterOnInit'; import Anchor from '../ui/anchor'; @@ -106,18 +107,20 @@ export const useCTADispatchContext = context.useCTADispatchContext;
  • - - actions + + afterActionChange {' '} - +
  • - - compare + + actions {' '} - +
    • @@ -174,6 +177,15 @@ export const useCTADispatchContext = context.useCTADispatchContext; {' '} +
  • + + afterActionChange + + {' '} + +
  • diff --git a/site/src/components/topics/create-cta.tsx b/site/src/components/topics/create-cta.tsx index 65c1ea8..3a49621 100644 --- a/site/src/components/topics/create-cta.tsx +++ b/site/src/components/topics/create-cta.tsx @@ -5,7 +5,7 @@ import { createCTAParametersConfig, createCTAReturnValuesConfig, } from '../nav-sidebar/config/create-cta-config'; import { - useCTAConfig, useCTAParameterActionsConfig, useCTAParameterCompareConfig, + useCTAConfig, useCTAParameterActionsConfig, useCTAParameterAfterActionChangeConfig, useCTAParameterCompareConfig, useCTAParameterInitialConfig, useCTAReturnValues0HistoryConfig, } from '../nav-sidebar/config/use-cta-config'; @@ -13,6 +13,7 @@ import { useCTAReturnValues1DispatchConfig, } from '../nav-sidebar/config/use-ct import PopoverCTAHistory from '../popover/ctaHistory'; import PopoverCTAState from '../popover/ctaState'; import PopoverUseCTAParameterActionsRecordProp from '../popover/PopoverUseCTAParameterActionsRecordProp'; +import PopoverUseCTAParameterAfterActionChange from '../popover/UseCTAParameterAfterActionChange'; import PopoverUseCTAParameterCompare from '../popover/UseCTAParameterCompare'; import Anchor from '../ui/anchor'; import Code from '../ui/code'; @@ -93,18 +94,25 @@ export dispatch = ctaValue[1];
  • - - actions + + compare {' '} - +
  • - - compare + + afterActionChange {' '} - + +
    • +
  • + + actions + + {' '} +
    • diff --git a/site/src/components/topics/use-cta/index.tsx b/site/src/components/topics/use-cta/index.tsx index 1c95ff7..d66c8cd 100644 --- a/site/src/components/topics/use-cta/index.tsx +++ b/site/src/components/topics/use-cta/index.tsx @@ -6,6 +6,7 @@ import CodeBlock from '../../ui/codeBlock'; import ExampleDetails from '../../ui/exampleDetails'; import Sect from '../../ui/sect'; import UseCTAParameterActionsTopic from './parameters/actions'; +import { UseCTAParameterAfterActionChangeTopic, } from './parameters/after-action-change'; import UseCTAParameterOnInitTopic from './parameters/on-init'; import UseCTAParameterInitialTopic from './parameters/initial'; import UseCTAParameterCompareTopic from './parameters/compare'; @@ -52,6 +53,7 @@ export function FC() { + ; diff --git a/site/src/components/topics/use-cta/parameters/after-action-change.tsx b/site/src/components/topics/use-cta/parameters/after-action-change.tsx new file mode 100644 index 0000000..e3dc407 --- /dev/null +++ b/site/src/components/topics/use-cta/parameters/after-action-change.tsx @@ -0,0 +1,104 @@ +import { SourceCodeRecordProps, } from '../../../../types/source-code-record-props'; +import { + useCTAParameterActionsConfig, + useCTAParameterAfterActionChangeConfig, + useCTAParameterAfterActionChangeExampleConfig, useCTAReturnValues0HistoryConfig, +} from '../../../nav-sidebar/config/use-cta-config'; +import { + useCTAParameterActionsCustomConfig, +} from '../../../nav-sidebar/config/use-cta-parameter-actions-custom-config'; +import PopoverUseCTAParameterActionsRecordProp from '../../../popover/PopoverUseCTAParameterActionsRecordProp'; +import Anchor from '../../../ui/anchor'; +import Code from '../../../ui/code'; +import CodeBlock from '../../../ui/codeBlock'; +import Content from '../../../ui/content'; +import ExampleDetails from '../../../ui/exampleDetails'; +import Sect from '../../../ui/sect'; + +export function UseCTAParameterAfterActionChangeTopic( props: SourceCodeRecordProps, ) { + return <> + + +

    + Optional + {' '} + callback: +

    + {props.sourceCodeRecord[ 'types/UseCTAParameterAfterActionChange.ts' ]} +
      +
    1. + ctaHistory + {': '} + New + {' '} + + state history + + . +
      2. +
    2. + ctaHistory + {': '} + Built-in + {' '} + + actions + + {' '} + + {' '} + keys. +
      3. +
    3. + customActionName + {': '} + If any + {' '} + + custom actions + + {' '} + were defined, the key will get passed to this parameter. +
      4. +
    + +

    + There's no return value. +

    + + Features: +
      +
    • Internally, this gets called asynchronously.
      • +
    • + Only runs after an action has changed the hook state history. +
      • +
    • + You can use this for logging, analytics, setting + {' '} + localStorage + , etc. +
      • +
    +     +     + + + Click to view + {' '} + useCTA + {' '} + afterActionChange + {' '} + parameter example + } + title="react-hook-use-cta useCTA afterActionChange parameter example" + src="" + /> + + ; +} diff --git a/site/src/components/topics/use-cta/parameters/compare.tsx b/site/src/components/topics/use-cta/parameters/compare.tsx index 914d3ff..f98e756 100644 --- a/site/src/components/topics/use-cta/parameters/compare.tsx +++ b/site/src/components/topics/use-cta/parameters/compare.tsx @@ -16,49 +16,58 @@ export default function UseCTAParameterCompareTopic( props: SourceCodeRecordProp {' '} callback:

    - {props.sourceCodeRecord[ 'types/UseCTAParameterCompare.ts' ]} -

    - previousValue - {': '} - current - {' '} - state property value. -

    -

    - nextValue - {': '} - value sent from calling an action. -

    -

    - extra.key - {' '} - related to the state property being compared. -

    -

    - extra.cmp - {' '} - gives you access to - {' '} - - strictDeepEqual - - {' '} - from - {' '} - - fast-equals - -

    + {props.sourceCodeRecord[ 'types/UseCTAParameterAfterActionChange.ts' ]} +
      +
    1. + previousValue + {': '} + current + {' '} + state property value. +
      2. +
    2. + nextValue + {': '} + value sent from calling an action. +
      3. +
    3. + extra + {': '} + object containing +
        +
      • + extra.key + {': '} + related to the state property being compared. +
        • +
      • + extra.cmp + {': '} + gives you access to + {' '} + + strictDeepEqual + + {' '} + from + {' '} + + fast-equals + +
        • +
      +
      4. +

    It should return: diff --git a/site/src/util/getSourceFiles.ts b/site/src/util/getSourceFiles.ts index 6ba1f56..ea30bd1 100644 --- a/site/src/util/getSourceFiles.ts +++ b/site/src/util/getSourceFiles.ts @@ -21,6 +21,7 @@ const sourceFileList = [ 'types/CTAHistory.ts', 'types/UseCTAParameterOnInit.ts', 'types/UseCTAParameterCompare.ts', + 'types/UseCTAParameterAfterActionChange.ts', 'types/UseCTAParameterActionsRecordProp.ts', { filePath: 'types/UseCTAParameterActionsRecordProp.ts', diff --git a/src/types/UseCTAParameterAfterActionChange.ts b/src/types/UseCTAParameterAfterActionChange.ts index ca9d7d8..608e058 100644 --- a/src/types/UseCTAParameterAfterActionChange.ts +++ b/src/types/UseCTAParameterAfterActionChange.ts @@ -1,9 +1,11 @@ import { CTAHistory, } from './CTAHistory'; import type { CTAState, } from './CTAState'; -import type { UseCTAParameterActionsOptionalDefaultRecord, } from './UseCTAParameterActionsOptionalDefaultRecord'; +import type { + UseCTAParameterActionsOptionalDefaultRecord, +} from './UseCTAParameterActionsOptionalDefaultRecord'; /** - * A `function` than only runs after an action has changed the hook state history. + * A `function` that only runs after an action has changed the hook state history. * Does not run if the action has not changed the hook state history. * Useful for performing side effects after an action has changed the hook state history, such as logging, analytics, setting local storage, etc. * Can run `async` or `sync` code. @@ -15,4 +17,8 @@ import type { UseCTAParameterActionsOptionalDefaultRecord, } from './UseCTAParam */ export type UseCTAParameterAfterActionChange< State extends CTAState, -> = ( ctaHistory: CTAHistory, actionType: keyof UseCTAParameterActionsOptionalDefaultRecord, customActionName?: string | number ) => Promise | void; +> = ( + ctaHistory: CTAHistory, + actionType: keyof UseCTAParameterActionsOptionalDefaultRecord, + customActionName?: string | number +) => Promise | void;