# Proposal for handling form data in DIRWallet app

SInce we wanna support rendering forms in the app I suppose the using the following library:

[react-hook-form](https://github.com/react-hook-form/react-hook-form)

Why?

* is widely used (has >>30.000 stars on GH)
* Can produce all(I can think of)/most the HTML form fields
* reduces overhead
* handles state with hooks
* handles validation
* handles submit

This allows for pretty straight forward Frontend implementation. Additionally, we then create corresponding interfaces/types for all the schemas and credentials defined by NYM so we can use those in validation and for using the data (type) safely around the rest of the app.

Example (using Basic account info schema):

1) Create type/interface from [Basic account schema](https://docs.google.com/spreadsheets/d/1BUjBOPKgqT3eoXqfRMLCd6knt8eY4nFLNaMfMMILzmY/edit#gid=689186193):

       type BasicAccoutnSchema = {
           firstName: string
           lastName: string
           personImage: string // Base64 encoded (Maybe we can have a typecheck/validator for that even)
           dateOfBirth: Date 
       }

2. Create a form with react hook form - something along the lines of (untested):

import { useState, useRef } from "react"
import { useForm } from "react-hook-form"
import Header from "./Header"

export function App() {
  const { register, handleSubmit } = useForm()
  const [data, setData] = useState('')
  const [birthday, setBirthday] = useState<Date>(new Date())
  const inputRef = useRef()

  return (
    <form onSubmit={handleSubmit((data) => setData(JSON.stringify(data)))}>
      <input {...register("firstName", {
    required: true
  })} placeholder="First name" />
      <input {...register("lastName", {
    required: true
  })} placeholder="Last name" />
      
        <input
          ref={inputRef}
          value={birthdate}
          type="hidden"
          {...register("dateOfBirth", {
            required: true
          })}
        />
      // Let the user pic an image
      // (eg their profile pic they have taken during account onboarding) 
      <select {...register("personImage", {
    required: true
  })}>
        <option value="">Select...</option>
        <option value="A">Pic A</option>
        <option value="B">Pic B</option>
      </select>
        
      <p>{data}</p>
      // Also show the image rendered here that the user has selected
      <input type="submit" />
    </form>
  )
}

3. OnSubmit grabs the data and uses the type from step 1. for validation
4. Transform to JSON and stringify to:
5. send in basicMessage/plainText to any backend or send as JSON

    {
        firstName: 'Hans',
        lastName: 'van Rental',
        DateOfBirth: '01-01-1969',
        personImage: 'abcdefghjkllsdnckjsdncjks'
    }

or
`"{firstName:'Hans',lastName:'vanRental',DateOfBirth:'01-01-1969',personImage:'abcdefghjkllsdnckjsdncjks'}"`
7. safe in app storage (MMKV) if desired (no need really as they will also be in the credential records from aries)
6. Write and use transformer to use in CredentialExchange/ProofRequest

3. Conclusion

This will make devlopment a bit more straight forward. It will still be quite some tedious work with all the schemas/cases. However, collecting data this way should minimize filling in forms incorrectly by the user.

Feedback, critique, and thoughts on this more than welcome.

# Wireframes/Example (Basic Account Info):


# Wireframe Playground code:

<iframe src="https://codesandbox.io/embed/react-hook-form-js-forked-d9sfb1?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="React Hook Form (JS) (forked)"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>