# Save and Resume

This form saves and rehydrates it's state from localStage

```tsx live id='ex-sar1'
// filename=index.tsx
import { SaveButton } from "./SaveButton"
import { saveAndResume } from "./saveAndResume"

function IndividualInputs() {
  return (
    <>
      <Label label="Username" prop="username">
        <Input>
          <Validate required>
            <div>Username is required</div>
          </Validate>
          <Validations />
        </Input>
      </Label>

      <Label label="Email" prop="email">
        <Input resetOnError>
          <Validate required>
            <div>Email is required</div>
          </Validate>
          <Validate invalid={(email) => !email?.includes("@")}>
            <div>Email must be valid</div>
          </Validate>
          <Validations />
        </Input>
      </Label>
    </>
  )
}

function SaveAndResume() {
  const form = useCreateForm()
  const validation = useCreateValidationState()
  const [saves, loaded] = saveAndResume.use()
  const [loadedFrom, setLoadedFrom] = useState(null)

  const loadFromSave = useCallback(
    (save) => {
      form.set((state) => {
        state.value = save.state
      })
      form.validate()
      setLoadedFrom(save)
    },
    [form]
  )

  useEffect(() => {
    if (!loaded) return
    if (saves.length) {
      loadFromSave(saves[0])
    }
  }, [form, loaded])

  return (
    <>
      {saves.map((save, i) => (
        <SaveButton
          key={save.at}
          index={i}
          active={loadedFrom?.at === save.at}
          onClick={() => loadFromSave(save)}
          save={save}
        />
      ))}
      {!!saves?.length && <hr />}
      <Form
        onChange={() => {
          setLoadedFrom(null)
        }}
        connect={form}
      >
        <h2>Add users</h2>
        <Repeater prop="users">
          <RepeaterContent>
            <IndividualInputs />
            <div>
              <RemoveRepeaterItem>
                <button name="children" type="button">
                  Remove
                </button>
              </RemoveRepeaterItem>
            </div>
            <hr />
          </RepeaterContent>
          <AddRepeaterItem initialValue={{}}>
            <button
              style={{ marginBottom: "10px" }}
              name="children"
              type="button"
            >
              Add
            </button>
          </AddRepeaterItem>
        </Repeater>
        <div>
          <button
            onClick={() => {
              saveAndResume.add({
                state: form.state.value,
                at: Date.now(),
              })
              form.reset()
            }}
          >
            Save
          </button>
          {"  "}
          <button type="button" onClick={() => form.reset()}>
            Reset
          </button>
        </div>
      </Form>
    </>
  )
}

render(SaveAndResume)
// filename=SaveButton.tsx
import { formatDate } from "./formatDate"
import { saveAndResume } from "./saveAndResume"

export function SaveButton({ save, onClick, index, active }) {
  return (
    <div>
      <button
        onClick={onClick}
        disabled={active}
        style={{ opacity: active ? 0.5 : "" }}
      >
        Save {index + 1} – {formatDate(new Date(save.at))}
      </button>
      <button onClick={() => saveAndResume.remove(index)}>X</button>
    </div>
  )
}
// filename=saveAndResume.js
export const saveAndResume = {
  saves: [],
  listeners: [],
  key: "sar",
  use() {
    const [saves, setSaves] = useState([])
    const [loaded, setLoaded] = useState(false)
    useEffect(
      () =>
        saveAndResume.onUpdate((saves) => {
          setLoaded(true)
          setSaves(saves)
        }),
      []
    )
    return [saves, loaded]
  },
  async get() {
    const saved = localStorage.getItem(this.key)
    if (saved) {
      this.saves = JSON.parse(saved)
    } else {
      this.saves = []
    }
    this.update()
    return this.saves
  },
  async add(save) {
    this.saves.unshift(save)
    this.saves = this.saves.slice()
    localStorage.setItem(this.key, JSON.stringify(this.saves))
    this.update()
  },
  async remove(index) {
    this.saves = this.saves.filter((_, i) => i !== index)
    localStorage.setItem(this.key, JSON.stringify(this.saves))
    this.update()
  },
  update() {
    this.listeners.forEach((cb) => {
      cb(this.saves)
    })
  },
  onUpdate(fn) {
    this.listeners.push(fn)
    this.get()
    return () => {
      let idx = this.listeners.findIndex(fn)
      if (idx !== -1) {
        this.listeners.splice(idx, 1)
      }
    }
  },
}
// filename=formatDate.js
const padNum = (num) => (String(num).length === 1 ? "0" + num : num)
export function formatDate(date) {
  let hour = date.getHours()
  let pm = hour >= 12
  return (
    padNum(hour > 12 ? hour - 12 : hour) +
    ":" +
    padNum(date.getMinutes()) +
    ":" +
    padNum(date.getSeconds()) +
    (pm ? "pm" : "am")
  )
}
```
