webui: Move time period format function to JSX code

Author: MKleusberg

.gitignore

@@ -63,6 +63,7 @@ webui/js/db-header.js
 webui/js/discussion-comments.js
 webui/js/discussion-create-mr.js
 webui/js/discussion-list.js
+webui/js/format.js
 webui/js/markdown-editor.js
 webui/js/profile-page.js
 webui/js/user-page.js

webui/js/local.js

@@ -7,63 +7,6 @@ function base64url(input) {
     return encoded
 }
 
-// Returns a string describing how long ago the given date was.  eg "3 seconds ago", "2 weeks ago", etc
-function getTimePeriod(date1, includeOn) {
-    let d1 = new Date(date1);
-    let secondsElapsed = (new Date() - d1) / 1000;
-
-    // Check if the time elapsed is more then 1 minute
-    if (secondsElapsed >= 60) {
-        let minutesElapsed = secondsElapsed / 60;
-
-        // Check if the time elapsed is more then 1 hour
-        if (minutesElapsed >= 60) {
-            let hoursElapsed = minutesElapsed / 60;
-
-            // Check if the time elapsed is more then 1 day
-            if (hoursElapsed >= 24) {
-                let daysElapsed = hoursElapsed / 24;
-                daysElapsed = Math.round(daysElapsed);
-
-                // Check if the time elapsed is more then 1 week
-                if (daysElapsed >= 7) {
-                    let weeksElapsed = daysElapsed / 7;
-                    weeksElapsed = Math.round(weeksElapsed);
-
-                    // If the time elapsed is more then 4 weeks ago, we return the date, nicely formatted
-                    if (weeksElapsed > 4) {
-                        let str = includeOn ? "on " : "";
-                        return str + d1.toLocaleTimeString(undefined, { year: "numeric", month: "short",
-                            day: "numeric", weekday: "short", hour: "2-digit", minute: "2-digit" });
-                    } else {
-                        let p0 = (weeksElapsed === 1) ? "" : "s";
-                        return weeksElapsed + " week" + p0 + " ago"
-                    }
-                } else {
-                    let p1 = (daysElapsed === 1) ? "" : "s";
-                    return daysElapsed + " day" + p1 + " ago"
-                }
-            } else {
-                hoursElapsed = Math.round(hoursElapsed);
-                let p2 = (hoursElapsed === 1 ) ? "" : "s";
-                return hoursElapsed + " hour" + p2 + " ago";
-            }
-        } else {
-            minutesElapsed = Math.round(minutesElapsed);
-            let p3 = (minutesElapsed === 1) ? "" : "s";
-            return minutesElapsed + " minute" + p3 + " ago";
-        }
-    } else {
-        secondsElapsed=Math.round(secondsElapsed);
-        if (secondsElapsed === 0) {
-            return "now"
-        } else {
-            let p4 = (secondsElapsed === 1) ? "" : "s";
-            return secondsElapsed+" second" + p4 + " ago";
-        }
-    }
-}
-
 // Construct a timestamp string for use in user messages
 function nowString() {
     // Construct a timestamp for the success message

webui/jsx/commit-list.js

@@ -1,6 +1,8 @@
 const React = require("react");
 const ReactDOM = require("react-dom");
 
+import {getTimePeriod} from "./format";
+
 export default function CommitList({commits, owner, database}) {
 	// Prepare rendered rows for commit table
 	const commitRows = (commits === null ? null : commits.map(row => (

webui/jsx/database-commits.js

@@ -2,6 +2,7 @@ const React = require("react");
 const ReactDOM = require("react-dom");
 
 import Select from "react-dropdown-select";
+import {getTimePeriod} from "./format";
 
 function DatabaseCommitRow({data, index, branch, setStatusMessage, setStatusMessageColour}) {
 	const [commitIndex, setCommitIndex] = React.useState(Number(index));

webui/jsx/database-tags.js

@@ -2,6 +2,7 @@ const React = require("react");
 const ReactDOM = require("react-dom");
 
 import MarkdownEditor from "./markdown-editor";
+import {getTimePeriod} from "./format";
 
 function DatabaseTagRow({name, data, releases, setStatusMessage, setStatusMessageColour}) {
 	// This is the tag name currently shown in the front end

webui/jsx/database-watchers.js

@@ -1,6 +1,8 @@
 const React = require("react");
 const ReactDOM = require("react-dom");
 
+import {getTimePeriod} from "./format";
+
 export default function DatabaseWatchers({stars}) {
 	let data = stars ? starsData : watchersData;
 

webui/jsx/db-header.js

@@ -1,6 +1,8 @@
 const React = require("react");
 const ReactDOM = require("react-dom");
 
+import {getTimePeriod} from "./format";
+
 function ToggleButton({icon, textSet, textUnset, redirectUrl, updateUrl, pageUrl, isSet, count, cyToggle, cyPage, disabled}) {
 	const [state, setState] = React.useState(isSet);
 	const [number, setNumber] = React.useState(count);

webui/jsx/discussion-comments.js

@@ -3,6 +3,7 @@ const ReactDOM = require("react-dom");
 
 import MarkdownEditor from "./markdown-editor";
 import CommitList from "./commit-list";
+import {getTimePeriod} from "./format";
 import { confirmAlert } from "react-confirm-alert";
 import "react-confirm-alert/src/react-confirm-alert.css";
 

webui/jsx/discussion-list.js

@@ -1,6 +1,8 @@
 const React = require("react");
 const ReactDOM = require("react-dom");
 
+import {getTimePeriod} from "./format";
+
 function DiscussionListRow({data, mergeRequests}) {
 	return (
 		<tr>

webui/jsx/format.js

@@ -0,0 +1,54 @@
+// Returns a string describing how long ago the given date was.  eg "3 seconds ago", "2 weeks ago", etc
+export function getTimePeriod(date1, includeOn) {
+	const d1 = new Date(date1);
+	let secondsElapsed = (new Date() - d1) / 1000;
+
+	// Check if the time elapsed is more then 1 minute
+	if (secondsElapsed >= 60) {
+		let minutesElapsed = secondsElapsed / 60;
+
+		// Check if the time elapsed is more then 1 hour
+		if (minutesElapsed >= 60) {
+			let hoursElapsed = minutesElapsed / 60;
+
+			// Check if the time elapsed is more then 1 day
+			if (hoursElapsed >= 24) {
+				const daysElapsed = Math.round(hoursElapsed / 24);
+
+				// Check if the time elapsed is more then 1 week
+				if (daysElapsed >= 7) {
+					const weeksElapsed = Math.round(daysElapsed / 7);
+
+					// If the time elapsed is more then 4 weeks ago, we return the date, nicely formatted
+					if (weeksElapsed > 4) {
+						const str = includeOn ? "on " : "";
+						return str + d1.toLocaleTimeString(undefined, {year: "numeric", month: "short",
+							day: "numeric", weekday: "short", hour: "2-digit", minute: "2-digit"});
+					} else {
+						const p0 = (weeksElapsed === 1) ? "" : "s";
+						return weeksElapsed + " week" + p0 + " ago";
+					}
+				} else {
+					const p1 = (daysElapsed === 1) ? "" : "s";
+					return daysElapsed + " day" + p1 + " ago";
+				}
+			} else {
+				hoursElapsed = Math.round(hoursElapsed);
+				const p2 = (hoursElapsed === 1 ) ? "" : "s";
+				return hoursElapsed + " hour" + p2 + " ago";
+			}
+		} else {
+			minutesElapsed = Math.round(minutesElapsed);
+			const p3 = (minutesElapsed === 1) ? "" : "s";
+			return minutesElapsed + " minute" + p3 + " ago";
+		}
+	} else {
+		secondsElapsed = Math.round(secondsElapsed);
+		if (secondsElapsed === 0) {
+			return "now";
+		} else {
+			const p4 = (secondsElapsed === 1) ? "" : "s";
+			return secondsElapsed + " second" + p4 + " ago";
+		}
+	}
+}