Merge pull request #108 from YotaYota/feature.config_change_step_1_fu…

…nctional

ConfigChangeStep1 rewrite to functional

public/components/ConfigChange/ConfigChangeStep1.js

@@ -1,122 +1,81 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Popup, Icon } from "semantic-ui-react";
 import { getData } from "../../utils/getData";
 import { putData } from "../../utils/sendData";
 import permissionsCheck from "../../utils/permissions/permissionsCheck";
 
-class ConfigChangeStep1 extends React.Component {
-  state = {
-    commitInfo: {},
-    commitUpdateInfo: {
-      settings: null,
-      templates: null,
-    },
-    expanded: true,
-  };
+function ConfigChangeStep1({ setRepoWorking, dryRunJobStatus, onDryRunReady }) {
+  const [commitInfo, setCommitInfo] = useState({});
+  const [commitUpdateInfo, setCommitUpdateInfo] = useState({
+    settings: null,
+    templates: null,
+  });
+  const [expanded, setExpanded] = useState(true);
+  const [buttonsDisabled, setButtonsDisabled] = useState(false);
 
-  toggleExpand = (e, props) => {
-    this.setState({ expanded: !this.state.expanded });
-  };
+  useEffect(() => {
+    setButtonsDisabled(
+      dryRunJobStatus ||
+        commitUpdateInfo.settings === "updating..." ||
+        commitUpdateInfo.templates === "updating...",
+    );
+  }, [commitUpdateInfo, dryRunJobStatus]);
 
-  getRepoStatus = (repo_name) => {
-    const credentials = localStorage.getItem("token");
-    const url = `${process.env.API_URL}/api/v1.0/repository/${repo_name}`;
-    const newCommitInfo = this.state.commitInfo;
-    getData(url, credentials).then((data) => {
-      // console.log("this should be data", data);
-      newCommitInfo[repo_name] = data.data;
-      {
-        this.setState(
-          {
-            commitInfo: newCommitInfo,
-          },
-          () => {
-            console.log("this is new state", this.state.commitInfo);
-          },
-        );
-      }
-    });
-  };
+  useEffect(() => {
+    async function getRepoStatus(repoName) {
+      const credentials = localStorage.getItem("token");
+      const url = `${process.env.API_URL}/api/v1.0/repository/${repoName}`;
 
-  refreshRepoAndDryRun = async (repo_name) => {
-    await this.refreshRepo(repo_name);
-    if (this.state.commitUpdateInfo.settings === "success") {
-      this.props.onDryRunReady();
-    } else {
-      console.log(
-        `Refresh error occured. Status${JSON.stringify(
-          this.state.commitUpdateInfo,
-        )}`,
-      );
+      getData(url, credentials).then((data) => {
+        setCommitInfo((prev) => ({ ...prev, [repoName]: data.data }));
+      });
     }
-  };
+    getRepoStatus("settings");
+    getRepoStatus("templates");
+  }, []);
 
   // this request takes some time, perhaps work in a "loading..."
-  refreshRepo = async (repo_name) => {
-    const newCommitUpdateInfo = this.state.commitUpdateInfo;
-    newCommitUpdateInfo[repo_name] = "updating...";
-    this.setState({ commitUpdateInfo: newCommitUpdateInfo });
-    this.props.setRepoWorking(true);
+  async function refreshRepo(repoName) {
+    setCommitUpdateInfo((prev) => ({ ...prev, [repoName]: "updating..." }));
+    setRepoWorking(true);
 
     const credentials = localStorage.getItem("token");
-    const url = `${process.env.API_URL}/api/v1.0/repository/${repo_name}`;
+    const url = `${process.env.API_URL}/api/v1.0/repository/${repoName}`;
     const dataToSend = { action: "REFRESH" };
-    const newCommitInfo = this.state.commitInfo;
 
-    // need to return a Promise in order to allow await
     return putData(url, credentials, dataToSend)
       .then((data) => {
         if (data.status === "success") {
-          newCommitUpdateInfo[repo_name] = "success";
-          newCommitInfo[repo_name] = data.data;
-          this.props.setRepoWorking(false);
-        } else {
-          newCommitUpdateInfo[repo_name] = "error";
-          newCommitInfo[repo_name] = data.message;
-        }
-        {
-          this.setState(
-            {
-              commitInfo: newCommitInfo,
-              commitUpdateInfo: newCommitUpdateInfo,
-            },
-            () => {
-              console.log(
-                "this is new state",
-                newCommitInfo,
-                newCommitUpdateInfo,
-              );
-            },
-          );
+          setRepoWorking(false);
         }
+        setCommitInfo((prev) => ({
+          ...prev,
+          [repoName]: data.status === "success" ? data.data : data.message,
+        }));
+        setCommitUpdateInfo((prev) => ({
+          ...prev,
+          [repoName]: data.status === "success" ? "success" : "error",
+        }));
       })
       .catch((error) => {
-        newCommitUpdateInfo[repo_name] = "error";
-        newCommitInfo[repo_name] = error.message;
-        this.setState(
-          {
-            commitInfo: newCommitInfo,
-            commitUpdateInfo: newCommitUpdateInfo,
-          },
-          () => {
-            console.log(
-              "this is new state",
-              newCommitInfo,
-              newCommitUpdateInfo,
-            );
-          },
-        );
+        setCommitInfo((prev) => ({ ...prev, [repoName]: error.message }));
+        setCommitUpdateInfo((prev) => ({ ...prev, [repoName]: "error" }));
       });
-  };
-
-  componentDidMount() {
-    this.getRepoStatus("settings");
-    this.getRepoStatus("templates");
   }
 
-  prettifyCommit(commitStr) {
-    //    const p = 'Commit addce6b8e7e62fbf0e6cf0adf6c05ccdab5fe24d master by Johan Marcusson at 2020-11-30 10:55:54+01:00';
+  async function refreshRepoAndDryRun(repoName) {
+    await refreshRepo(repoName);
+    if (commitUpdateInfo.settings === "success") {
+      onDryRunReady();
+    } else {
+      console.log(
+        `Refresh error occured. Status${JSON.stringify(commitUpdateInfo)}`,
+      );
+    }
+  }
 
+  function prettifyCommit(commitStr) {
+    // const p = 'Commit addce6b8e7e62fbf0e6cf0adf6c05ccdab5fe24d master by Johan Marcusson at 2020-11-30 10:55:54+01:00';
     const gitCommitRegex =
       /Commit ([a-z0-9]{8})([a-z0-9]{32}) (\w+) by (.+) at ([0-9:-\s]+)/i;
     const match = gitCommitRegex.exec(commitStr);
@@ -139,73 +98,65 @@ class ConfigChangeStep1 extends React.Component {
     }
   }
 
-  render() {
-    let buttonsDisabled = false;
-    if (this.props.dryRunJobStatus) {
-      buttonsDisabled = true;
-    } else if (
-      this.state.commitUpdateInfo.settings == "updating..." ||
-      this.state.commitUpdateInfo.templates == "updating..."
-    ) {
-      buttonsDisabled = true;
-    }
-    return (
-      <div className="task-container">
-        <div className="heading">
-          <h2>
-            <Icon
-              name="dropdown"
-              onClick={this.toggleExpand}
-              rotated={this.state.expanded ? null : "counterclockwise"}
-            />
-            Optional: Refresh repositories (1/4)
-            <Popup
-              content="Pull latest commits from git repository to NMS server. You can skip this step if you know there are no changes in the git repository."
-              trigger={<Icon name="question circle outline" size="small" />}
-              wide
-            />
-          </h2>
+  return (
+    <div className="task-container">
+      <div className="heading">
+        <h2>
+          <Icon
+            name="dropdown"
+            onClick={() => setExpanded((prev) => !prev)}
+            rotated={expanded ? null : "counterclockwise"}
+          />
+          Optional: Refresh repositories (1/4)
+          <Popup
+            content="Pull latest commits from git repository to NMS server. You can skip this step if you know there are no changes in the git repository."
+            trigger={<Icon name="question circle outline" size="small" />}
+            wide
+          />
+        </h2>
+      </div>
+      <div className="task-collapsable" hidden={!expanded}>
+        <div className="info">
+          <p>Latest settings repo commit: </p>
+          {prettifyCommit(commitInfo.settings)}
         </div>
-        <div className="task-collapsable" hidden={!this.state.expanded}>
-          <div className="info">
-            <p>Latest settings repo commit: </p>
-            {this.prettifyCommit(this.state.commitInfo.settings)}
-          </div>
-          <div className="info">
-            <p>Latest templates repo commit: </p>
-            {this.prettifyCommit(this.state.commitInfo.templates)}
-          </div>
-          <div className="info">
-            <button
-              hidden={!permissionsCheck("Config change", "write")}
-              disabled={buttonsDisabled}
-              onClick={() => this.refreshRepo("settings")}
-            >
-              Refresh settings
-            </button>
-            <button
-              hidden={!permissionsCheck("Config change", "write")}
-              disabled={buttonsDisabled}
-              onClick={() => this.refreshRepoAndDryRun("settings")}
-            >
-              Refresh settings + dry run
-            </button>
-            <p>{this.state.commitUpdateInfo.settings}</p>
-          </div>
-          <div className="info">
-            <button
-              hidden={!permissionsCheck("Config change", "write")}
-              disabled={buttonsDisabled}
-              onClick={() => this.refreshRepo("templates")}
-            >
-              Refresh templates
-            </button>
-            <p>{this.state.commitUpdateInfo.templates}</p>
-          </div>
+        <div className="info">
+          <p>Latest templates repo commit: </p>
+          {prettifyCommit(commitInfo.templates)}
+        </div>
+        <div className="info">
+          <button
+            type="button"
+            hidden={!permissionsCheck("Config change", "write")}
+            disabled={buttonsDisabled}
+            onClick={() => refreshRepo("settings")}
+          >
+            Refresh settings
+          </button>
+          <button
+            type="button"
+            hidden={!permissionsCheck("Config change", "write")}
+            disabled={buttonsDisabled}
+            onClick={() => refreshRepoAndDryRun("settings")}
+          >
+            Refresh settings + dry run
+          </button>
+          <p>{commitUpdateInfo.settings}</p>
+        </div>
+        <div className="info">
+          <button
+            type="button"
+            hidden={!permissionsCheck("Config change", "write")}
+            disabled={buttonsDisabled}
+            onClick={() => refreshRepo("templates")}
+          >
+            Refresh templates
+          </button>
+          <p>{commitUpdateInfo.templates}</p>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default ConfigChangeStep1;