refactor relative time logic to use new utility function

Author: neel1996

ui/src/Components/DashBoard/Compare/CommitCompareComponent/CommitCompareComponent.js

@@ -16,6 +16,7 @@ export default function CommitCompareComponent(props) {
   const [compareCommit, setCompareCommit] = useState("");
   const [errState, setErrState] = useState(false);
   const [referenceCommit, setReferenceCommit] = useState("");
+  const [loadingCommits, setLoadingCommits] = useState(false);
 
   const memoizedCommitFileDifference = useMemo(() => {
     return (
@@ -28,6 +29,7 @@ export default function CommitCompareComponent(props) {
   }, [props.repoId, baseCommit, compareCommit]);
 
   useEffect(() => {
+    setLoadingCommits(true);
     setErrState(false);
     axios({
       url: globalAPIEndpoint,
@@ -43,7 +45,6 @@ export default function CommitCompareComponent(props) {
                         hash
                         author
                         commitMessage
-                        commitRelativeTime
                         commitFilesCount
                     }  
                 }
@@ -52,6 +53,7 @@ export default function CommitCompareComponent(props) {
       },
     })
       .then((res) => {
+        setLoadingCommits(false);
         if (res.data.data) {
           const { commits, totalCommits } = res.data.data.gitCommitLogs;
           if (totalCommits === 0 || totalCommits == null) {
@@ -70,6 +72,7 @@ export default function CommitCompareComponent(props) {
         }
       })
       .catch((err) => {
+        setLoadingCommits(false);
         console.log(err);
         setErrState(true);
       });
@@ -90,16 +93,19 @@ export default function CommitCompareComponent(props) {
           })}
         {totalCommitCount > commitData.length ? (
           <div
-            className="p-3 border cursor-pointer hover:bg-gray-100 text-center font-sans font-semibold"
+            className={`p-3 border cursor-pointer hover:bg-gray-100 text-center font-sans ${
+              loadingCommits ? "text-gray-500" : "text-gray-800"
+            } font-semibold`}
             onClick={() => {
-              const len = commitData.length;
-
-              if (len >= 1) {
-                setReferenceCommit(commitData[len - 1].hash);
+              if (!loadingCommits) {
+                const len = commitData.length;
+                if (len >= 1) {
+                  setReferenceCommit(commitData[len - 1].hash);
+                }
               }
             }}
           >
-            Load More commits
+            {loadingCommits ? "Loading more commits..." : "Load More commits"}
           </div>
         ) : null}
       </>

ui/src/Components/DashBoard/Compare/CommitCompareComponent/CommitLogCardComponent.js

@@ -2,6 +2,7 @@ import React from "react";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { relativeCommitTimeCalculator } from "../../../../util/relativeCommitTimeCalculator";
 
 export default function CommitLogCardComponent(props) {
   library.add(fas);
@@ -35,7 +36,7 @@ export default function CommitLogCardComponent(props) {
           #{item.hash.substring(0, 7)}
         </div>
         <div className="my-2 shadow border rounded text-sm p-2 bg-orange-100 font-sans font-semibold">
-          {item.commitRelativeTime}
+          {relativeCommitTimeCalculator(item.commitTime)}
         </div>
       </div>
     </div>

ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CommitLogComponent.js

@@ -9,6 +9,7 @@ import moment from "moment";
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { globalAPIEndpoint } from "../../../../../../util/env_config";
+import { relativeCommitTimeCalculator } from "../../../../../../util/relativeCommitTimeCalculator";
 import InfiniteLoader from "../../../../../Animations/InfiniteLoader";
 import CommitLogFileCard from "./CommitLogFileCard";
 
@@ -339,42 +340,6 @@ export default function RepositoryCommitLogComponent(props) {
     );
   }
 
-  function relativeCommitTimeCalculator(commitTime) {
-    let commitRelativeTime;
-
-    const now = new Date();
-    const timeDiff = moment.duration(moment(now).diff(commitTime));
-
-    const days = Math.floor(timeDiff.asDays());
-    const hours = Math.floor(timeDiff.asHours());
-    const minutes = Math.floor(timeDiff.asMinutes());
-
-    if (days > 0) {
-      if (days >= 30) {
-        const month = Math.floor(timeDiff.asMonths());
-        commitRelativeTime =
-          month === 1 ? month + " Month Ago" : month + " Months Ago";
-      } else if (days >= 365) {
-        const year = Math.floor(timeDiff.asYears());
-        commitRelativeTime =
-          year === 1 ? year + " Year Ago" : year + " Years Ago";
-      } else {
-        commitRelativeTime =
-          days === 1 ? days + " Day Ago" : days + " Days Ago";
-      }
-    } else if (hours > 0) {
-      commitRelativeTime =
-        hours === 1 ? hours + " Hour Ago" : hours + " Hours Ago";
-    } else if (minutes > 0) {
-      commitRelativeTime =
-        minutes === 1 ? minutes + " Minute Ago" : minutes + " Minutes Ago";
-    } else {
-      commitRelativeTime = "recent commit";
-    }
-
-    return commitRelativeTime;
-  }
-
   return (
     <>
       {searchbarComponent()}

ui/src/util/relativeCommitTimeCalculator.js

@@ -0,0 +1,36 @@
+import moment from "moment";
+
+export function relativeCommitTimeCalculator(commitTime) {
+  let commitRelativeTime;
+
+  const now = new Date();
+  const timeDiff = moment.duration(moment(now).diff(commitTime));
+
+  const days = Math.floor(timeDiff.asDays());
+  const hours = Math.floor(timeDiff.asHours());
+  const minutes = Math.floor(timeDiff.asMinutes());
+
+  if (days > 0) {
+    if (days >= 30) {
+      const month = Math.floor(timeDiff.asMonths());
+      commitRelativeTime =
+        month === 1 ? month + " Month Ago" : month + " Months Ago";
+    } else if (days >= 365) {
+      const year = Math.floor(timeDiff.asYears());
+      commitRelativeTime =
+        year === 1 ? year + " Year Ago" : year + " Years Ago";
+    } else {
+      commitRelativeTime = days === 1 ? days + " Day Ago" : days + " Days Ago";
+    }
+  } else if (hours > 0) {
+    commitRelativeTime =
+      hours === 1 ? hours + " Hour Ago" : hours + " Hours Ago";
+  } else if (minutes > 0) {
+    commitRelativeTime =
+      minutes === 1 ? minutes + " Minute Ago" : minutes + " Minutes Ago";
+  } else {
+    commitRelativeTime = "recent commit";
+  }
+
+  return commitRelativeTime;
+}