stop

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.5.1",
+    "clsx": "^1.0.4",
     "date-fns": "^2.7.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",

src/App.js

@@ -1,14 +1,25 @@
-import React, { createContext } from "react";
+import React, { useState, useEffect } from "react";
 import Header from "./Header.js";
 import Table from "./Table";
 import Map from "./Map";
 
-const App = () => (
+const App = () => {
+  let [now, setNow] = useState(new Date());
+  window.setTime = setNow;
+  useEffect(() => {
+    let interval = setInterval(() => {
+      setNow(new Date());
+    }, 10000);
+    return () => {
+      clearInterval(interval);
+    }
+  }, []);
+  return (
   <>
     <Header />
     <Map />
-    <Table />
+    <Table now={now} />
     </>
-);
+)};
 
 export default App;

src/Table.js

@@ -1,7 +1,14 @@
-import React, { Fragment } from "react";
+import React, {
+  Fragment,
+  useState,
+  useLayoutEffect,
+  useMemo,
+  useEffect
+} from "react";
 import styles from "./Table.module.css";
 import { events } from "./Stroll.js";
 import { parse } from "date-fns";
+import clsx from "clsx";
 /**
  *
  *
@@ -14,9 +21,6 @@ function getTime(date) {
     hour12: true
   });
 }
-function range(size, startAt = 0) {
-  return [...Array(size).keys()].map(i => i + startAt);
-}
 function ConvertEventObjToEvent({ time, title }) {
   let timeArray = time.split("-");
   let start = parse(
@@ -37,31 +41,77 @@ function ConvertEventObjToEvent({ time, title }) {
     endAsString: getTime(end)
   };
 }
-export default function() {
-  const timeRange = range(5, 5).map(a => <div key={a}>{a}</div>);
+function Event({ title, startAsString, endAsString}) {
+  const [showBackground, setShowBackground] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowBackground(true);
+    }, 0);
+  }, [title, startAsString, endAsString]);
+  useEffect(() => {
+    setTimeout(() => {
+      setShowBackground(false);
+    }, 300);
+  }, [title, startAsString, endAsString]);
+  if (!title || !startAsString || !endAsString) {
+    return (
+      <div
+        className={clsx({
+          [styles.event]: true,
+          [styles.white]: !showBackground
+        })}
+      ></div>
+    );
+  }
+  return (
+    <div
+      className={clsx({ [styles.event]: true, [styles.white]: !showBackground })}
+    >
+      {startAsString} - {endAsString}
+      {"\n"}
+      {title}
+    </div>
+  );
+}
+export default function({ now }) {
   const titleRow = (
     <>
-      <div />
       <div>Events</div>
-      {timeRange}
+      <div>Current Events</div>
+      <div>Upcoming</div>
     </>
   );
-  const eventRows = Object.entries(events).map(([item, eventObjs], index) => {
-    let eventsMaps = eventObjs
-    .map(ConvertEventObjToEvent)
-    .map(({ start, end, title, startAsString, endAsString }) => (
-      <div>
-        {startAsString} - {endAsString}{"\n"}{title}
-      </div>
-    ));
-    while(eventsMaps.length < timeRange.length) {
-      eventsMaps = eventsMaps.concat([<div />])
-    }
+  let sortedEvents = useMemo(
+    () =>
+      Object.entries(events).map(([item, eventObjs]) => {
+        let sortedEventObjects = eventObjs
+          .map(ConvertEventObjToEvent)
+          .sort((a, b) => a.start - b.start);
+        return { item, sortedEventObjects };
+      }),
+    [events]
+  );
+  const eventRows = sortedEvents.map(({ item, sortedEventObjects }) => {
+    let eventsMaps = sortedEventObjects.reduce(
+      (accum, current) => {
+        if (!accum.current && now >= current.start && now <= current.end) {
+          accum.current = current;
+          return accum;
+        }
+        if (!accum.upcoming && current.end > now) {
+          accum.upcoming = current;
+        }
+        return accum;
+      },
+      { current: null, upcoming: null }
+    );
+
     return (
       <Fragment key={item}>
-        <div>#{index}</div>
         <div>{item.replace(",", "\n").replace("\n ", "\n")}</div>
-        {eventsMaps}
+        {<Event {...eventsMaps.current} />}
+        {<Event {...eventsMaps.upcoming} />}
       </Fragment>
     );
   });

src/Table.module.css

@@ -41,14 +41,21 @@
 } */
 .eventContainer {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     row-gap: .8rem;
     font-size: .8em;
     white-space: pre-wrap;
     overflow-y: scroll;
     height: 42vh;
-    padding-top: .5em;
+    padding: .5em .5em;
 }
 .eventContainer > * {
     border-bottom: solid 1px #bdbdbd ;
+}
+.event {
+    background-color: #339966;
+}
+.event.white {
+    transition: background ease-out 2s;
+    background-color: inherit;
 }

src/TableOld.js

@@ -9,6 +9,17 @@ import {
   TableRow
 } from "@material-ui/core";
 import { events } from "./Stroll.js";
+
+function Event({ start, end, title, startAsString, endAsString }) {
+  return (
+    <TableCell>
+      {startAsString} - {endAsString}
+      {"\n"}
+      {title}
+    </TableCell>
+  );
+}
+
 /**
  *
  *
@@ -41,38 +52,51 @@ function ConvertEventObjToEvent({ time, title }) {
     endAsString: getTime(end)
   };
 }
-export default function() {
+export default function({ now }) {
   let rows = Object.entries(events).map(([item, eventObjs], index) => {
-    let cells = [
-      <Fragment>
-        <TableCell>{index + 1}</TableCell>
-        <TableCell>{item}</TableCell>
-      </Fragment>
-    ];
     let eventsMaps = eventObjs
       .map(ConvertEventObjToEvent)
-      .map(({ start, end, title, startAsString, endAsString }) => (
-        <TableCell>
-          {startAsString} - {endAsString} {title}
-        </TableCell>
-      ));
-    while(eventsMaps.length < 3) {
-      eventsMaps = eventsMaps.concat([<TableCell />])
-    }
-    return <TableRow>{cells.concat(eventsMaps)}</TableRow>;
+      .sort((a, b) => a.start - b.start)
+      .reduce(
+        (accum, current) => {
+          if (!accum.current && now >= current.start && now <= current.end) {
+            accum.current = current;
+          }
+          if (!accum.upcoming && current.end > now) {
+            accum.upcoming = current;
+          }
+          return accum;
+        },
+        { current: null, upcoming: null }
+      );
+    return (
+      <TableRow>
+        <TableCell>{item}</TableCell>
+        {eventsMaps.current ? (
+          <Event {...eventsMaps.current} />
+        ) : (
+          <TableCell></TableCell>
+        )}
+        {eventsMaps.upcoming ? (
+          <Event {...eventsMaps.upcoming} />
+        ) : (
+          <TableCell></TableCell>
+        )}
+      </TableRow>
+    );
   });
   return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell>#</TableCell>
-          <TableCell>Place</TableCell>
-          <TableCell>5:45-6:15</TableCell>
-          <TableCell>7:10-8:10</TableCell>
-          <TableCell>8:35-9:45</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>{rows}</TableBody>
-    </Table>
+    <Grid item xs={12}>
+      <Table padding="none">
+        <TableHead>
+          <TableRow>
+            <TableCell>Place</TableCell>
+            <TableCell>Current</TableCell>
+            <TableCell>Upcoming</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>{rows}</TableBody>
+      </Table>
+    </Grid>
   );
 }

yarn.lock

@@ -2711,6 +2711,11 @@ clone-deep@^2.0.1:
     kind-of "^6.0.0"
     shallow-clone "^1.0.0"
 
+clsx@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
+  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"