allows storing data for later recall

src/components/QR/QRModal.tsx

@@ -1,16 +1,18 @@
 import { Copy, QrCode } from 'lucide-react';
 import { QRCodeSVG } from 'qrcode.react';
-import { useMemo } from 'react';
-import { getFieldValue, useQRScoutState } from '../../store/store';
+import { useMemo, useState } from 'react';
+import { getFieldValue, useQRScoutState, clearSaveData,  } from '../../store/store';
 import { Button } from '../ui/button';
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogTitle,
   DialogTrigger,
+  DialogClose
 } from '../ui/dialog';
 import { PreviewText } from './PreviewText';
+import { useSaveState, saveData } from '../../store/store';
 
 export interface QRModalProps {
   disabled?: boolean;
@@ -23,19 +25,42 @@ export function QRModal(props: QRModalProps) {
     'matchNumber',
   )}`.toUpperCase();
 
-  const qrCodeData = useMemo(
-    () => fieldValues.map(f => f.value).join(','),
-    [fieldValues],
-  );
+const [stored, isStored] = useSaveState(state => [state.saveData, state.isSaveData]);
+  const [index, setCodeIndex] = useState(0);
+
+  const currentFormData = fieldValues.map(f => f.value).join(',')
+  if (index >= stored.length && index > 0){
+    setCodeIndex(0)
+  }
+ const qrCodeData = stored[index] 
 
   return (
     <Dialog>
+      <Button
+        disabled={props.disabled}
+        onClick={() => saveData(currentFormData)}>
+          Save
+      </Button>
       <DialogTrigger asChild>
-        <Button disabled={props.disabled}>
+        <Button 
+          //disabled={props.disabled}
+          onClick={() => {console.log("dd");/*saveData(currentFormData);*/ setCodeIndex(0)}}
+        >
           <QrCode className="size-5" />
-          Commit
+          Show QR
         </Button>
       </DialogTrigger>
+
+      <Button
+        disabled={!isStored}
+          onClick={() => {
+            if (!confirm("Clear saved QR codes?")){
+              return
+            }
+            setCodeIndex(0); clearSaveData()}}
+        >
+          Clear data
+        </Button>
       <DialogContent>
         <DialogTitle className="text-3xl text-primary text-center font-rhr-ns tracking-wider ">
           {title}
@@ -47,6 +72,19 @@ export function QRModal(props: QRModalProps) {
           <PreviewText data={qrCodeData} />
         </div>
         <DialogFooter>
+
+        <Button
+            variant="ghost"
+            onClick={() => setCodeIndex(index - 1)}
+            disabled={index <= 0}
+            >PREV CODE
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setCodeIndex(index + 1)}
+            disabled={index >= stored.length - 1}
+            >NEXT CODE
+            </Button>
           <Button
             variant="ghost"
             onClick={() => navigator.clipboard.writeText(qrCodeData)}

src/store/store.ts

@@ -105,3 +105,37 @@ export function inputSelector<T extends InputBase>(
     return field as T;
   };
 }
+
+export interface SaveState {
+  saveData: Array<string>;
+  isSaveData: boolean;
+}
+const initialSaveState: SaveState = {
+  saveData: [],
+  isSaveData: false
+};
+export const useSaveState = createStore<SaveState>(
+  initialSaveState,
+  'saveData',
+  {
+    version: 1,
+  },
+);
+export function saveData(newData: string) {
+  var data = useSaveState.getState().saveData;
+  if (data[data.length - 1] == newData){
+    if (!confirm("Last two saved items are the same. Save anyway?")){
+      return
+    }
+  }
+  data.push(newData);
+  useSaveState.setState({ saveData: data, isSaveData: true });
+}
+
+export function getSaveData() {
+  return useSaveState.getState().saveData;
+}
+
+export function clearSaveData(){
+  useSaveState.setState({ saveData: [], isSaveData: false });
+}