Form validation example

ComposeNewChatForm.js

import React, { useState } from "react";
import { useQuery, useMutation } from "@apollo/client";
import Capitalize from "../../helpers/capitalize";
import { gql } from "@apollo/client";
import Select from "react-select";
import useUser from "../../customHooks/useUser";
import * as R from "ramda";

const GET_ORG_USERS = gql`
  query getInboxUser($userId: String, $role: String, $manager: String) {
    orgUsers: getInboxUser(userId: $userId, role: $role, manager: $manager) {
      _id
      first_name
      last_name
    }
  }
`;

const ADD_NEW_CHAT = gql`
  mutation saveMessageNew(
    $from: String
    $to: JSON
    $message: String
    $subject_line: String
  ) {
    saveMessageNew(
      from: $from
      to: $to
      message: $message
      subject_line: $subject_line
    )
  }
`;

const initFormState = {
  people: [],
  subject: "",
  text: "",
};

const errorInitState = {
  ...initFormState,
  people: "",
};

const ComposeNewChatForm = ({ history }) => {
  const user = useUser();
  const [form, setForm] = useState(initFormState);
  const [error, setError] = useState(errorInitState);

  const [addNewChat] = useMutation(ADD_NEW_CHAT, {
    onCompleted: history.goBack,
  });

  const { loading, apiError, data } = useQuery(GET_ORG_USERS, {
    variables: { userId: user._id, role: user.role },
  });

  if (loading) return <p>loading ...</p>;
  if (apiError) return <p>error...</p>;

  const { orgUsers } = data;

  const options = orgUsers.map(({ first_name, last_name, _id }) => ({
    value: _id,
    label: `${Capitalize(first_name)} ${Capitalize(last_name)}`,
  }));

  const handleSelect = (selectedOption) => {
    setForm((s) => ({ ...s, people: selectedOption }));
    setError((s) => ({ ...s, people: "" }));
  };

  const handleChange = (event) => {
    const {
      target: { name, value },
    } = event;

    setForm((s) => ({ ...s, [name]: value }));
    setError((s) => ({ ...s, [name]: "" }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const isValid = validateForm();
    if (!isValid) return;

    const { people, text, subject } = form;
    addNewChat({
      variables: {
        from: user._id,
        to: people.map((person) => person.value),
        message: text,
        subject_line: subject,
      },
      refetchQueries: ["loadMessageDetailArrayNew", "loadMessageNew"],
    }).then((r) => console.log("fetch contact list"));
  };

  const validateForm = () => {
    let isError = false;

    const { people, text } = form;

    if (R.isEmpty(people)) {
      isError = true;
      setError((state) => ({
        ...state,
        people: "Please select at least one person.",
      }));
    }

    if (R.isEmpty(text)) {
      isError = true;
      setError((state) => ({ ...state, text: "Please add some text." }));
    }

    if (isError) {
      return false;
    } else {
      setError(errorInitState);
      return true;
    }
  };

  return (
    <div className="bg-white ">
      <div className="tw-h-24 tw-px-8  tw-border-b tw-shadow-sm tw-grid">
        <p className="tw-self-center tw-font-bold tw-text-lg">
          Compose New Message
        </p>
      </div>
      <form className="tw-m-8 tw-space-y-10" onSubmit={handleSubmit}>
        <div>
          <label className="tw-text-sm tw-text-gray-600">
            Add Group Members
          </label>
          <Select
            value={form.people}
            onChange={handleSelect}
            options={options}
            multi={true}
            required
          />
          <p className="error">{error.people}</p>
        </div>
        <div className="">
          <p className="tw-text-sm tw-text-gray-600">Subject</p>
          <input
            name="subject"
            type="input"
            placeholder="subject line"
            value={form.subject}
            onChange={handleChange}
            className="input"
          />
        </div>
        <div className="">
          <label className="tw-text-sm tw-text-gray-600">Write Message</label>
          <textarea
            name="text"
            placeholder="Type your message here"
            row={5}
            value={form.text}
            required
            onChange={handleChange}
            className="input"
          />
          <p className="error">{error.text}</p>
        </div>
        <div className="tw-flex tw-justify-end tw-space-x-4">
          <button
            className="button button-gray"
            onClick={() => history.push("/inbox")}
          >
            CANCEL
          </button>
          <button className="button button-green" type="submit">
            COMPOSE
          </button>
        </div>
      </form>
    </div>
  );
};

export default ComposeNewChatForm;