anyone-oslo/pages

import React, { ChangeEvent, MouseEvent, KeyboardEvent, useState } from "react";

interface Props {
  addTag: (string) => void;
}

export default function AddTagForm(props: Props) {
  const [tag, setTag] = useState("");

  const submit = () => {
    props.addTag(tag);
    setTag("");
  };

  const handleSubmit = (evt: MouseEvent) => {
    evt.preventDefault();
    submit();
  };

  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {
    if (evt.which === 13) {
      evt.preventDefault();
      submit();
    }
  };

  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
    setTag(evt.target.value);
  };

  return (
    <div className="add-tag-form">
      <input
        name="add-tag"
        type="text"
        className="add-tag"
        value={tag}
        onKeyDown={handleKeyDown}
        onChange={handleChange}
        placeholder="Add tag..."
      />
      <button onClick={handleSubmit} disabled={!tag}>
        Add
      </button>
    </div>
  );
}