library hours

src/components/Homepage.tsx

@@ -11,6 +11,7 @@ import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../lib/store";
 import { selectGeneratedQuery } from "../lib/queryBuilderSlice";
 import { PostType } from "../lib/types";
+import LibraryHoursTable from "./LibraryHours";
 
 const Homepage = () => {
   const navigateTo = useNavigate();
@@ -127,6 +128,9 @@ const Homepage = () => {
             </div>
           )}
         </header>
+        <article>
+          <LibraryHoursTable />
+        </article>
         <article>
           <section>
             <div className="bulletin-list">

src/components/LibraryHours.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const LibraryHoursTable = () => {
+  const [services, setServices] = useState(null);
+  const [error, setError] = useState(false);
+
+  const loadLibraryHours = (retry = false) => {
+    const axiosHeaders = {
+      "X-Requested-With": "XMLHttpRequest",
+    };
+
+    axios({
+      url: "/library.json",
+      headers: axiosHeaders,
+    })
+      .then((response) => {
+        if (response.status !== 200 || response.statusText !== "OK") {
+          if (!retry) loadLibraryHours(true);
+          else setError(true);
+        } else {
+          setServices(Object.values(response.data.libraryservices));
+        }
+      })
+      .catch(() => {
+        if (!retry) loadLibraryHours(true);
+        else setError(true);
+      });
+  };
+
+  useEffect(() => {
+    loadLibraryHours();
+  }, []);
+
+  if (error) return <p>Unable to load hours.</p>;
+  if (!services) return <p>Loading…</p>;
+
+  return (
+    <div style={{ maxWidth: "60%", marginLeft: "auto", marginRight: "auto" }}>
+      <h3>Library Hours</h3>
+      <table style={{ border: "2px solid #D9D9D9" }}>
+        <thead>
+          <tr>
+            <th>Library</th>
+            <th>Opens</th>
+            <th>Closes</th>
+          </tr>
+        </thead>
+        <tbody>
+          {services.map((svc) =>
+            svc.hours.open.map((open, i) => (
+              <tr key={`${svc.name}-${i}`}>
+                {i === 0 && (
+                  <td
+                    style={{ backgroundColor: "#fcfcfc" }}
+                    rowSpan={svc.hours.open.length}
+                  >
+                    <b>{svc.name}</b>
+                  </td>
+                )}
+                <td style={{ backgroundColor: "#fcfcfc" }}>{open}</td>
+                <td style={{ backgroundColor: "#fcfcfc" }}>
+                  {svc.hours.close[i] || ""}
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default LibraryHoursTable;

src/setupProxy.js

@@ -34,6 +34,13 @@ module.exports = function (app) {
       secure: false,
     })
   );
+  app.use(
+    createProxyMiddleware("/library.json", {
+      target: "https://wso.williams.edu",
+      changeOrigin: true,
+      secure: false,
+    })
+  );
   app.use(
     createProxyMiddleware("/courses-*.json", {
       target: "https://wso.williams.edu",