diff --git a/packages/react/components/Account/Control.mjs b/packages/react/components/Account/Control.mjs index 85a0a43437f..c22e1c44c93 100644 --- a/packages/react/components/Account/Control.mjs +++ b/packages/react/components/Account/Control.mjs @@ -44,7 +44,7 @@ const strings = { */ export const Control = ({ welcome = false }) => { // Hooks - const { control, updateControl } = useControl() + const { control, setControl } = useControl() // Helper to get the link to the next onboarding step const nextHref = welcome @@ -69,7 +69,7 @@ export const Control = ({ welcome = false }) => { desc: controlDesc[val].desc, }))} current={control} - update={updateControl} + update={setControl} /> {welcome ? ( <> diff --git a/packages/react/hooks/useControl/index.mjs b/packages/react/hooks/useControl/index.mjs index 5afb9255e02..0794be5433f 100644 --- a/packages/react/hooks/useControl/index.mjs +++ b/packages/react/hooks/useControl/index.mjs @@ -17,16 +17,25 @@ export const useControl = () => { const { setLoadingStatus } = useContext(LoadingStatusContext) // State - const [control, setControl] = useState(account.control) + const [control, __setControl] = useState(account.control) - // Method to update the control setting + /* + * Legacy method to update the control setting + * Deprecated because its naming is inconsistent with other hooks + */ const updateControl = async (newControl) => { + console.warn('The updateControl method is deprecated. Use setControl instead.') + return setControl(newControl) + } + + // Method to set the control setting + const setControl = async (newControl) => { if (newControl !== control) { if (token) { setLoadingStatus([true, 'Updating preferences']) const [status, body] = await backend.updateAccount({ control: newControl }) if (status === 200) { - setControl(newControl) + __setControl(newControl) setAccount(body.account) setLoadingStatus([true, 'Preferences updated', true, true]) } else @@ -37,10 +46,10 @@ export const useControl = () => { * So this ensures control is always available, even if people are not authenticated */ setAccount({ ...account, control: newControl }) - setControl(newControl) + __setControl(newControl) } } } - return { control, updateControl } + return { control, setControl, updateControl } } diff --git a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx index 55e074de60c..1dfbc910ffa 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx @@ -2,7 +2,6 @@ title: useBackend --- - import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { MiniTip } from '@freesewing/react/components/Mini' import { Popout } from '@freesewing/react/components/Popout' diff --git a/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx index 4d7df39dbb6..e833d4d75aa 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx @@ -2,6 +2,56 @@ title: useControl --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { MiniTip } from '@freesewing/react/components/Mini' +import { Popout } from '@freesewing/react/components/Popout' + + + +The **useControl** hook provides access to the control setting of a FreeSewing user. +Use this hook whether you have a UI element that should be hidden or shown +based on the control setting. + + + The **useControl** hook guarantees that a control value will always be available, even if no user + is authenticated. As such, it is recommended to use this rather than the + [useAccount](/reference/packages/react/hooks/useaccount/) hook when all you need is a control + value, and no access to the user account. + + +## Example + +```js +import { useControl } from '@freesewing/react/hooks/useControl' + +const MyComponent = () => { + control, + setControl, +} = useControl() + + // ... +} +``` + +## Return value + +Calling the hook returns an object with the following properties which are all methods: + +- [control](#control) +- [setControl](#setControl) + +### control + +The control value. + +### setControl + +A method to set the new control value. + +```js +function setControl ( + Number control // The new control value to set +) +``` + +