Export weatherTemplate to component

Author: a1icja

components/weatherTemplate.js

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import { basePath } from "../next.config.js";
+
+const icons = [
+  "sunny.svg",
+  "partially-sunny.svg",
+  "cloudy.svg",
+  "rainy.svg",
+  "stormy.svg",
+];
+
+export const getWeatherIndex = (stat) => {
+  let fail_rate = 0;
+  fail_rate = (stat["fails"] + stat["skips"]) / stat["runs"];
+  // e.g. failing 3/9 runs is .33, or idx=1
+  var idx = Math.floor((fail_rate * 10) / 2);
+  if (idx == icons.length) {
+    // edge case: if 100% failures, then we go past the end of icons[]
+    // back the idx down by 1
+    console.assert(fail_rate == 1.0);
+    idx -= 1;
+  }
+
+  // This error checks if there are zero runs.
+  // Currently, will display stormy weather.
+  if (isNaN(idx)) {
+    idx = 4;
+  }
+  return idx;
+};
+
+const getWeatherIcon = (stat) => {
+  const idx = getWeatherIndex(stat);
+  return icons[idx];
+};
+
+export const weatherTemplate = (data) => {
+  const icon = getWeatherIcon(data);
+  return (
+    <div>
+      <Image
+        src={`${basePath}/${icon}`}
+        alt="weather"
+        width={32}
+        height={32}
+        // priority
+      />
+    </div>
+  );
+};

pages/index.js

@@ -1,23 +1,15 @@
 import { useEffect, useState } from "react";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
-import Image from "next/image";
-import { basePath } from "../next.config.js";
+import { weatherTemplate, getWeatherIndex } from "../components/weatherTemplate";
+
 
 export default function Home() {
   const [loading, setLoading] = useState(true);
   const [jobs, setJobs] = useState([]);
   const [rows, setRows] = useState([]);
   const [expandedRows, setExpandedRows] = useState([]);
 
-  const icons = [
-    "sunny.svg",
-    "partially-sunny.svg",
-    "cloudy.svg",
-    "rainy.svg",
-    "stormy.svg",
-  ];
-
   useEffect(() => {
     const fetchData = async () => {
       let data = {};
@@ -56,46 +48,6 @@ export default function Home() {
     setLoading(false);
   }, [jobs]);
 
-  const getWeatherIndex = (stat) => {
-    let fail_rate = 0;
-    fail_rate = (stat["fails"] + stat["skips"]) / stat["runs"];
-    // e.g. failing 3/9 runs is .33, or idx=1
-    var idx = Math.floor((fail_rate * 10) / 2);
-    if (idx == icons.length) {
-      // edge case: if 100% failures, then we go past the end of icons[]
-      // back the idx down by 1
-      console.assert(fail_rate == 1.0);
-      idx -= 1;
-    }
-
-    // This error checks if there are zero runs.
-    // Currently, will display stormy weather.
-    if (isNaN(idx)) {
-      idx = 4;
-    }
-    return idx;
-  };
-
-  const getWeatherIcon = (stat) => {
-    const idx = getWeatherIndex(stat);
-    return icons[idx];
-  };
-
-  const weatherTemplate = (data) => {
-    const icon = getWeatherIcon(data);
-    return (
-      <div>
-        <Image
-          src={`${basePath}/${icon}`}
-          alt="weather"
-          width={32}
-          height={32}
-          // priority
-        />
-      </div>
-    );
-  };
-
   const toggleRow = (rowData) => {
     const isRowExpanded = expandedRows.includes(rowData);