extract access code handling to hook

packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx

@@ -3,8 +3,11 @@ import type { Meta, StoryFn } from '@storybook/react'
 import { FlexCol } from '@xylabs/react-flexbox'
 import React, { useState } from 'react'
 
+import { useAccessCodes } from '../hooks/index.ts'
 import { AccessCodeGateFlexbox } from './AccessCodeGateFlexbox.tsx'
 
+const ValidAccessCodes = ['100519']
+
 export default {
   component: AccessCodeGateFlexbox,
   title: 'access/AccessCodeGateFlexbox',
@@ -15,24 +18,24 @@ const Template: StoryFn<typeof AccessCodeGateFlexbox> = args => (
 )
 
 const TemplateWithAccessCodes: StoryFn<typeof AccessCodeGateFlexbox> = (args) => {
-  const validAccessCodes = ['100519']
-  const [validated, setValidated] = useState(false)
-  const onAccessCodeSuccess = () => {
-    setValidated(true)
-  }
-  const validateFunction = (code?: string) => code?.length === 6
+  const {
+    validated, onAccessCodeSuccess, onCodeInputChange,
+  } = useAccessCodes('storybook-access-codes-test')
 
   return validated
     ? <Alert severity="success">Success!</Alert>
     : (
         <FlexCol gap={2}>
           <AccessCodeGateFlexbox
             onAccessCodeSuccess={onAccessCodeSuccess}
-            validAccessCodes={validAccessCodes}
-            validateFunction={validateFunction}
+            validAccessCodes={ValidAccessCodes}
+            validateFunction={onCodeInputChange}
             {...args}
           />
-          <Typography variant="caption">Hint: 100519</Typography>
+          <Typography variant="caption">
+            Hint:
+            {ValidAccessCodes[0]}
+          </Typography>
         </FlexCol>
       )
 }

packages/sdk/packages/access-gate/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAccessCodes.ts'

packages/sdk/packages/access-gate/src/hooks/useAccessCodes.ts

@@ -0,0 +1,32 @@
+import { useMemo, useState } from 'react'
+
+export const useAccessCodes = (localStorageKey: string) => {
+  const [validated, setValidated] = useState(false)
+  const [codeInput, setCodeInput] = useState('')
+
+  const onAccessCodeSuccess = () => {
+    // Save the access code to local storage
+    if (codeInput) {
+      localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))
+      setValidated(true)
+    } else {
+      // If the codeInput is empty, but we have success, do nothing since the successful code is already saved
+      setValidated(true)
+    }
+  }
+  const onCodeInputChange = (code?: string) => {
+    setCodeInput(code ?? '')
+    return code?.length === 6
+  }
+  const userAccessCodes = useMemo(() => {
+    const storedCodes = localStorage.getItem(localStorageKey)
+    if (storedCodes) {
+      const parsedResult = JSON.parse(storedCodes ?? '')
+      if (Array.isArray(parsedResult)) return parsedResult
+    }
+  }, [])
+
+  return {
+    validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange,
+  }
+}