Simple form management

You can manage your form with eventrix using hooks. Full example you can find here

TextInput

TextInput use useEventrixState hook to update form state in eventrix.

Javascript

import React, { useCallback } from "react";
import TextField from "@material-ui/core/TextField";
import { useEventrixState } from "eventrix";

const TextInput = ({ onChange, value = "", type, label, name }) => {
  const [inputValue = value, setInputValue] = useEventrixState(`form.${name}`);

  const onInputChange = useCallback(
    (e) => {
      const newValue = e.target.value;
      onChange(newValue);
      setInputValue(newValue);
    },
    [setInputValue, onChange]
  );

  return (
    <TextField
      margin="dense"
      id={name}
      label={label}
      type={type}
      fullWidth
      variant="outlined"
      onChange={onInputChange}
      value={inputValue}
    />
  );
};

export default TextInput;

Submit and clear form receivers

Handle events of submit and clear form using EventsReceiver.

Javascript

import { EventsReceiver } from "eventrix";
import axios from "axios";
import { CLEAR_CONTACT_FORM, SUBMIT_CONTACT_FORM } from "./events";

const submitContactsFormReceiver = new EventsReceiver(
  SUBMIT_CONTACT_FORM,
  (name, eventData, stateManager) => {
    const contactData = stateManager.getState("form");
    return axios.post("/contacts", contactData).then(({ data }) => {
      const contacts = stateManager.getState("contacts");
      stateManager.setState("contacts", [...contacts, data]);
      stateManager.setState("form", {});
    });
  }
);

const clearContactsFormReceiver = new EventsReceiver(
  CLEAR_CONTACT_FORM,
  (name, data, stateManager) => {
    stateManager.setState("form", {});
  }
);

export default [submitContactsFormReceiver, clearContactsFormReceiver];

Form

Emit events about submit and clear form using useEmit hook.

Javascript

import React, { useCallback } from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextInput from "./TextInput";
import { useEmit, useEvent } from "eventrix";
import {
  CLEAR_CONTACT_FORM,
  OPEN_CONTACT_FORM,
  SUBMIT_CONTACT_FORM
} from "../eventrix/events";

const ContactModal = () => {
  const [open, setOpen] = React.useState(false);
  const emit = useEmit();
  const handleClickOpen = useCallback(() => {
    setOpen(true);
  }, [setOpen]);

  useEvent(OPEN_CONTACT_FORM, handleClickOpen);

  const handleClose = useCallback(() => {
    setOpen(false);
    emit(CLEAR_CONTACT_FORM);
  }, [emit, setOpen]);

  const handleCancel = useCallback(() => {
    handleClose();
    emit(CLEAR_CONTACT_FORM);
  }, [emit, handleClose]);

  const handleSave = useCallback(() => {
    handleClose();
    emit(SUBMIT_CONTACT_FORM);
  }, [emit, handleClose]);

  return (
    <div>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Contact</DialogTitle>
        <DialogContent dividers>
          <TextInput
            onChange={console.log}
            type="text"
            label="Name"
            name="name"
          />
          <TextInput
            onChange={console.log}
            type="text"
            label="Surname"
            name="surname"
          />
          <TextInput
            onChange={console.log}
            type="text"
            label="Email"
            name="email"
          />
          <TextInput
            onChange={console.log}
            type={"text"}
            label="Phone"
            name="phone"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCancel}>Cancel</Button>
          <Button onClick={handleSave} variant="contained">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default ContactModal;