@material-ui/core/#FormLabel JavaScript Examples

AddUpdateForm = () => {
  const [entry, setEntry] = useState(initialInputValues);
  const [tagInput, setTagInput] = useState('');
  const [error, setError] = useState('');
  const [{ editValues, isLoading }, dispatch] = useEntryContext();
  const history = useHistory();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const classes = useFormStyles();

  useEffect(() => {
    if (editValues) {
      setEntry(editValues);
    }
  }, [editValues]);

  const { title, link, description, type, tags } = entry;

  const handleOnChange = (e) => {
    setEntry({
      ...entry,
      [e.target.name]: e.target.value,
    });
  };

  const handleTagButton = () => {
    if (tagInput === '') return;
    if (tags.includes(tagInput)) {
      return setError(`Tags need to be unique. Two tags can't be same.`);
    }
    setEntry({ ...entry, tags: tags.concat(tagInput.toLowerCase()) });
    setTagInput('');
  };

  const handleTagDelete = (targetTag) => {
    setEntry({ ...entry, tags: tags.filter((t) => t !== targetTag) });
  };

  const handleClearInput = () => {
    if (editValues) {
      dispatch(resetEditValues());
    }
    setEntry(initialInputValues);
    setTagInput('');
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (tags.length === 0) {
      return setError('Atleast one tag is required.');
    }

    try {
      dispatch(toggleIsLoading());
      if (editValues) {
        const entryRes = await entryService.update(editValues.id, entry);
        dispatch(updateEntry(entryRes));
        notify(
          dispatch,
          `Entry "${editValues.title}" has been successfully updated.`,
          'success'
        );
        dispatch(resetEditValues());
      } else {
        const entryRes = await entryService.create(entry);
        dispatch(addEntry(entryRes));
        notify(
          dispatch,
          `New entry "${entryRes.title}" has been successfully added!`,
          'success'
        );
      }

      dispatch(toggleIsLoading());
      setEntry(initialInputValues);
      setTagInput('');
      history.push('/');
    } catch (err) {
      dispatch(toggleIsLoading());

      const errRes = err?.response?.data;

      if (
        errRes?.error.includes('title') &&
        errRes?.error.includes('allowed length (40)')
      ) {
        return setError(`Title field's maximum character limit is 40. `);
      } else if (
        errRes?.error.includes('description') &&
        errRes?.error.includes('allowed length (250)')
      ) {
        return setError(`Description field's maximum character limit is 250. `);
      } else if (errRes?.error) {
        return setError(errRes.error);
      } else {
        return setError(err.message);
      }
    }
  };

  return (
    <Paper>
      <form onSubmit={handleSubmit} className={classes.root}>
        <Typography
          variant={isMobile ? 'h5' : 'h4'}
          color="primary"
          className={classes.formTitle}
        >
          {editValues ? 'Update the entry' : 'Add a new entry'}
        </Typography>
        <div className={classes.input}>
          <TitleIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Title"
            value={title}
            name="title"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LinkIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Link"
            value={link}
            name="link"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <DescriptionIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            multiline
            label="Description"
            value={description}
            name="description"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.tagArea}>
          <div className={classes.input}>
            <LocalOfferIcon color="secondary" className={classes.inputIcon} />
            <TextField
              color="secondary"
              label="Add Tags"
              value={tagInput}
              onChange={({ target }) => setTagInput(target.value)}
            />
            <Button
              color="primary"
              size="small"
              variant="outlined"
              onClick={handleTagButton}
              className={classes.tagButton}
            >
              Add
            </Button>
          </div>
          <div className={classes.tagGroup}>
            {tags.map((tag) => (
              <Chip
                key={tag}
                label={tag}
                onDelete={() => handleTagDelete(tag)}
                variant="outlined"
                color="secondary"
                className={classes.tag}
              />
            ))}
          </div>
        </div>
        <div className={classes.radioInput}>
          <CheckCircleOutlineIcon color="secondary" />
          <FormLabel component="legend" className={classes.radioLabel}>
            Link Type:
          </FormLabel>
          <RadioGroup
            row
            label="Type"
            value={type}
            name="type"
            onChange={handleOnChange}
            className={classes.radioGroup}
          >
            <FormControlLabel
              label="Article"
              control={<Radio color="secondary" />}
              value="article"
              checked={type === 'article'}
            />
            <FormControlLabel
              label="Video"
              control={<Radio color="secondary" />}
              value="video"
              checked={type === 'video'}
            />
            <FormControlLabel
              label="Other"
              control={<Radio color="secondary" />}
              value="other"
              checked={type === 'other'}
            />
          </RadioGroup>
        </div>
        <div className={classes.buttonGroup}>
          <Button
            variant="outlined"
            color="primary"
            size={isMobile ? 'medium' : 'large'}
            startIcon={<BackspaceIcon />}
            onClick={handleClearInput}
          >
            Clear
          </Button>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            size={isMobile ? 'medium' : 'large'}
            startIcon={editValues ? <EditIcon /> : <PostAddIcon />}
            disabled={isLoading}
          >
            {editValues
              ? isLoading
                ? 'Updating Entry'
                : 'Update Entry'
              : isLoading
              ? 'Adding Entry'
              : 'Add Entry'}
          </Button>
        </div>
        {error && (
          <AlertBox
            message={error}
            severity="error"
            clearError={() => setError(null)}
          />
        )}
      </form>
    </Paper>
  );
}

UploadForm = ({ type, onSubmit, formRef }) => {
  const classes = useStyles();
  const form = (type) => {
    let validation = {};
    let initialValues = {};
    if (["details"].includes(type)) {
      initialValues = {
        title: "",
        description: "",
        category: 0,
      };
      validation = {
        title: Yup.string().required("Title is required"),
        description: Yup.string()
          .max(100, "Max characters is 100")
          .required("Description is required"),
        category: Yup.number().required("Category is required"),
      };
    }
    if (["visibility"].includes(type)) {
      initialValues.visibility = "0";
      validation.visibility = Yup.string().required("Visibility is required");
    }
    return { validationSchema: Yup.object().shape(validation), initialValues };
  };
  const validationSchema = form(type).validationSchema;
  const initialValues = form(type).initialValues;

  return (
    <Formik
      innerRef={formRef}
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        onSubmit(values);
      }}
      validateOnMount
    >
      {({ values, errors, touched, handleChange, handleBlur }) => (
        <>
          {type === "details" && (
            <>
              <TextField
                error={touched.title && errors.title}
                id="details-title"
                label="title"
                name="title"
                value={values.title}
                helperText={errors.title}
                variant="outlined"
                onChange={handleChange}
                onBlur={handleBlur}
                className={classes.spacing}
              />
              <TextField
                error={touched.description && errors.description}
                id="details-description"
                label="description"
                name="description"
                value={values.description}
                helperText={errors.description}
                variant="outlined"
                onChange={handleChange}
                className={classes.spacing}
                onBlur={handleBlur}
              />

              <Select
                id="category"
                label="category"
                name="category"
                value={values.category}
                className={classes.spacing}
                onChange={handleChange}
                onBlur={handleBlur}
              >
                {categories.map((value, index) => (
                  <MenuItem key={index} value={index}>
                    {capitalize(value)}
                  </MenuItem>
                ))}
              </Select>
              {errors.category && touched.color && (
                <FormHelperText>{errors.category}</FormHelperText>
              )}
            </>
          )}
          {type === "visibility" && (
            <>
              <FormControl
                component="fieldset"
                error={errors.visibility}
                className={classes.formControl}
              >
                <FormLabel component="legend">
                  Pick the visibility of this video:
                </FormLabel>
                <RadioGroup
                  aria-label="visibility"
                  name="visibility"
                  value={values.visibility}
                  onChange={handleChange}
                >
                  {visibility.map((value, index) => (
                    <FormControlLabel
                      key={index}
                      value={index + ""}
                      control={<Radio />}
                      label={capitalize(value)}
                    />
                  ))}
                </RadioGroup>
                {errors.visibility && touched.color && (
                  <FormHelperText>{errors.visibility}</FormHelperText>
                )}{" "}
              </FormControl>
            </>
          )}
        </>
      )}
    </Formik>
  );
}