From 28079c418423ceda6f58d25cf8595daf18bcb945 Mon Sep 17 00:00:00 2001
From: Matt Jones <885417+jonesmac@users.noreply.github.com>
Date: Mon, 7 Oct 2024 16:59:00 -0400
Subject: [PATCH] extract access code handling to hook

---
 .../AccessCodeGateFlexbox.stories.tsx         | 21 ++++++------
 .../packages/access-gate/src/hooks/index.ts   |  1 +
 .../access-gate/src/hooks/useAccessCodes.ts   | 32 +++++++++++++++++++
 3 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 packages/sdk/packages/access-gate/src/hooks/index.ts
 create mode 100644 packages/sdk/packages/access-gate/src/hooks/useAccessCodes.ts

diff --git a/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx b/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx
index bac5a4aee..1ff34d7dd 100644
--- a/packages/sdk/packages/access-gate/src/components/AccessCodeGateFlexbox.stories.tsx
+++ b/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,12 +18,9 @@ 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>
@@ -28,11 +28,14 @@ const TemplateWithAccessCodes: StoryFn<typeof AccessCodeGateFlexbox> = (args) =>
         <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>
       )
 }
diff --git a/packages/sdk/packages/access-gate/src/hooks/index.ts b/packages/sdk/packages/access-gate/src/hooks/index.ts
new file mode 100644
index 000000000..aee7fb244
--- /dev/null
+++ b/packages/sdk/packages/access-gate/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useAccessCodes.ts'
diff --git a/packages/sdk/packages/access-gate/src/hooks/useAccessCodes.ts b/packages/sdk/packages/access-gate/src/hooks/useAccessCodes.ts
new file mode 100644
index 000000000..0b96b69b6
--- /dev/null
+++ b/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,
+  }
+}