Coursemology/coursemology2

View on GitHub
client/app/bundles/course/forum/pages/ForumEdit/index.tsx

Summary

Maintainability
A
1 hr
Test Coverage
import { FC } from 'react';
import { defineMessages } from 'react-intl';
import { useNavigate } from 'react-router-dom';
import { ForumEntity, ForumFormData } from 'types/course/forums';

import { setReactHookFormError } from 'lib/helpers/react-hook-form-helper';
import { useAppDispatch } from 'lib/hooks/store';
import toast from 'lib/hooks/toast';
import useTranslation from 'lib/hooks/useTranslation';

import ForumForm from '../../components/forms/ForumForm';
import { updateForum } from '../../operations';

interface Props {
  forum: ForumEntity;
  isOpen: boolean;
  onClose: () => void;
  navigateToShowAfterUpdate?: boolean;
}

const translations = defineMessages({
  editForum: {
    id: 'course.forum.ForumEdit.editForum',
    defaultMessage: 'Edit Forum',
  },
  updateSuccess: {
    id: 'course.forum.ForumEdit.updateSuccess',
    defaultMessage: 'Forum {title} has been updated.',
  },
  updateFailure: {
    id: 'course.forum.ForumEdit.updateFailure',
    defaultMessage: 'Failed to update the forum.',
  },
});

const ForumEdit: FC<Props> = (props) => {
  const { isOpen, onClose, forum, navigateToShowAfterUpdate } = props;
  const { t } = useTranslation();
  const navigate = useNavigate();

  const initialValues = {
    id: forum.id,
    name: forum.name,
    description: forum.description,
    forumTopicsAutoSubscribe: forum.forumTopicsAutoSubscribe,
  };

  const dispatch = useAppDispatch();

  if (!isOpen) {
    return null;
  }

  const handleSubmit = (data: ForumFormData, setError): Promise<void> =>
    dispatch(updateForum(data, forum.id))
      .then((response) => {
        if (navigateToShowAfterUpdate) {
          navigate(response.forumUrl);
        }
        toast.success(t(translations.updateSuccess, { title: data.name }));
        onClose();
      })
      .catch((error) => {
        toast.error(t(translations.updateFailure));

        if (error.response?.data) {
          setReactHookFormError(setError, error.response.data.errors);
        }
      });
  return (
    <ForumForm
      editing
      initialValues={initialValues}
      onClose={onClose}
      onSubmit={handleSubmit}
      open={isOpen}
      title={t(translations.editForum)}
    />
  );
};

export default ForumEdit;