refactor: convert tag and group modals to functional components

Changelog.md

@@ -40,6 +40,7 @@
 ### 🔧 Internal changes
 - Added the passing `active_record_doctor` checks to the pre-commit hooks and CI (#8259)
 - Added indexes on the 22 foreign key columns reported by `rails active_record_doctor:unindexed_foreign_keys` (#8245)
+- Converted `CreateTagModal`, `EditTagModal`, `CreateGroupModal`, and `RenameGroupModal` to functional React components (#8232)
 - Moved the RuboCop, erb_lint and i18n-tasks dependencies into the Gemfile and run them in pre-commit hooks using the `rails` Docker Compose service (#8224)
 - Moved the Prettier and stylelint dependencies into `package.json` and run them in pre-commit hooks using the `rails` Docker Compose service (#8225)
 - Converted `AssignmentSummary`, `AssessmentChart`, `CoreStatistics`, and `FractionStat` to functional React components (#8220)

app/javascript/Components/Modals/create_group_modal.jsx

@@ -1,59 +1,46 @@
-import React from "react";
+import {useEffect, useState} from "react";
 import Modal from "react-modal";
 
-export default class CreateGroupModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      groupName: "",
-    };
-  }
+export default function CreateGroupModal({isOpen, onRequestClose, onSubmit}) {
+  const [groupName, setGroupName] = useState("");
 
-  componentDidMount() {
+  useEffect(() => {
     Modal.setAppElement("body");
-  }
+  }, []);
 
-  handleChange = event => {
-    this.setState({groupName: event.target.value});
+  const handleChange = event => {
+    setGroupName(event.target.value);
   };
 
-  handleSubmit = event => {
+  const handleSubmit = event => {
     event.preventDefault();
-    if (!this.state.groupName) {
+    if (!groupName) {
       return;
     }
-    this.props.onSubmit(this.state.groupName);
-    this.setState({groupName: ""});
+    onSubmit(groupName);
+    setGroupName("");
   };
 
-  render() {
-    return (
-      <Modal
-        className="react-modal markus-dialog"
-        isOpen={this.props.isOpen}
-        onRequestClose={this.props.onRequestClose}
-        id="create_group_modal"
-      >
-        <h2>{I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}</h2>
-        <form onSubmit={this.handleSubmit}>
-          <label htmlFor="groupName">{I18n.t("activerecord.models.group.one")}</label>
-          <input
-            id="groupName"
-            type="text"
-            value={this.state.groupName}
-            onChange={event => this.handleChange(event)}
-            autoFocus
-          />
-          <div className={"dialog-actions"}>
-            <button className="button" type="submit" disabled={!this.state.groupName}>
-              {I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}
-            </button>
-            <button className="button" type="reset" onClick={this.props.onRequestClose}>
-              {I18n.t("cancel")}
-            </button>
-          </div>
-        </form>
-      </Modal>
-    );
-  }
+  return (
+    <Modal
+      className="react-modal markus-dialog"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      id="create_group_modal"
+    >
+      <h2>{I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}</h2>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="groupName">{I18n.t("activerecord.models.group.one")}</label>
+        <input id="groupName" type="text" value={groupName} onChange={handleChange} autoFocus />
+        <div className={"dialog-actions"}>
+          <button className="button" type="submit" disabled={!groupName}>
+            {I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}
+          </button>
+          <button className="button" type="reset" onClick={onRequestClose}>
+            {I18n.t("cancel")}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
 }

app/javascript/Components/Modals/create_tag_modal.jsx

@@ -1,32 +1,26 @@
-import React from "react";
+import {useContext, useEffect, useState} from "react";
 import TagModal from "../Helpers/tag_modal";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import {ResultContext} from "../Result/result_context";
 
-export default class CreateTagModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: "",
-      description: "",
-    };
-  }
-
-  static contextType = ResultContext;
+export default function CreateTagModal({isOpen, onRequestClose}) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const context = useContext(ResultContext);
 
-  componentDidMount() {
+  useEffect(() => {
     Modal.setAppElement("body");
-  }
+  }, []);
 
-  onSubmit = event => {
+  const onSubmit = event => {
     event.preventDefault();
     const data = {
       tag: {
-        name: this.state.name,
-        description: this.state.description,
+        name,
+        description,
       },
-      grouping_id: this.context.grouping_id,
+      grouping_id: context.grouping_id,
     };
     const options = {
       method: "POST",
@@ -37,44 +31,36 @@ export default class CreateTagModal extends React.Component {
       body: JSON.stringify(data),
     };
     fetch(
-      Routes.course_tags_path(this.context.course_id, {assignment_id: this.context.assignment_id}),
+      Routes.course_tags_path(context.course_id, {assignment_id: context.assignment_id}),
       options
     )
       .catch(error => {
         console.error(`Error submitting form: ${error.message}`);
       })
       .finally(() => {
-        this.setState(
-          {
-            name: "",
-            description: "",
-          },
-          () => {
-            this.props.onRequestClose();
-          }
-        );
+        setName("");
+        setDescription("");
+        onRequestClose();
       });
   };
 
-  render() {
-    return (
-      <TagModal
-        name={this.state.name}
-        description={this.state.description}
-        handleNameChange={event => this.setState({name: event.target.value})}
-        handleDescriptionChange={event => this.setState({description: event.target.value})}
-        isOpen={this.props.isOpen}
-        onRequestClose={this.props.onRequestClose}
-        tagModalHeading={I18n.t("helpers.submit.create", {
-          model: I18n.t("activerecord.models.tag.one"),
-        })}
-        onSubmit={this.onSubmit}
-      />
-    );
-  }
+  return (
+    <TagModal
+      name={name}
+      description={description}
+      handleNameChange={event => setName(event.target.value)}
+      handleDescriptionChange={event => setDescription(event.target.value)}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      tagModalHeading={I18n.t("helpers.submit.create", {
+        model: I18n.t("activerecord.models.tag.one"),
+      })}
+      onSubmit={onSubmit}
+    />
+  );
 }
 
-CreateTagModal.propType = {
+CreateTagModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
 };

app/javascript/Components/Modals/edit_tag_modal.jsx

@@ -1,30 +1,32 @@
-import React from "react";
+import {useEffect, useState} from "react";
 import Modal from "react-modal";
 import TagModal from "../Helpers/tag_modal";
 import PropTypes from "prop-types";
 
-export default class EditTagModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: this.props.currentTagName,
-      description: this.props.currentTagDescription,
-    };
-  }
+export default function EditTagModal({
+  course_id,
+  currentTagDescription,
+  currentTagName,
+  isOpen,
+  onRequestClose,
+  tag_id,
+}) {
+  const [name, setName] = useState(currentTagName);
+  const [description, setDescription] = useState(currentTagDescription);
 
-  componentDidMount() {
+  useEffect(() => {
     Modal.setAppElement("body");
-  }
+  }, []);
 
-  onSubmit = event => {
+  const onSubmit = event => {
     event.preventDefault();
     const data = {
       tag: {
-        name: this.state.name,
-        description: this.state.description,
+        name,
+        description,
       },
-      course_id: this.props.course_id,
-      id: this.props.tag_id,
+      course_id,
+      id: tag_id,
       submit: "Save",
     };
     const options = {
@@ -35,34 +37,32 @@ export default class EditTagModal extends React.Component {
       },
       body: JSON.stringify(data),
     };
-    fetch(Routes.course_tag_path(this.props.course_id, this.props.tag_id), options)
+    fetch(Routes.course_tag_path(course_id, tag_id), options)
       .then(() => {
-        this.props.onRequestClose();
+        onRequestClose();
       })
       .catch(error => {
         console.error(error.message);
       });
   };
 
-  render() {
-    return (
-      <TagModal
-        name={this.state.name}
-        description={this.state.description}
-        handleNameChange={event => this.setState({name: event.target.value})}
-        handleDescriptionChange={event => this.setState({description: event.target.value})}
-        isOpen={this.props.isOpen}
-        onRequestClose={this.props.onRequestClose}
-        tagModalHeading={I18n.t("helpers.submit.update", {
-          model: I18n.t("activerecord.models.tag.one"),
-        })}
-        onSubmit={this.onSubmit}
-      />
-    );
-  }
+  return (
+    <TagModal
+      name={name}
+      description={description}
+      handleNameChange={event => setName(event.target.value)}
+      handleDescriptionChange={event => setDescription(event.target.value)}
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      tagModalHeading={I18n.t("helpers.submit.update", {
+        model: I18n.t("activerecord.models.tag.one"),
+      })}
+      onSubmit={onSubmit}
+    />
+  );
 }
 
-EditTagModal.propType = {
+EditTagModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
   tag_id: PropTypes.number.isRequired,