Mobile enhancements

client/package.json

@@ -12,11 +12,13 @@
     "react-json-view": "^1.19.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
+    "react-select": "^3.1.0",
     "react-tabs": "^3.1.0",
     "react-time-ago": "^5.0.7",
     "react-timeago": "^4.4.0",
     "react-transition-group": "^4.3.0",
-    "socket.io": "^2.3.0"
+    "socket.io": "^2.3.0",
+    "timeago.js": "^4.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/components/App.jsx

@@ -27,8 +27,8 @@ const App = () => (
               className="octo-arm"
               d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
               style={{
-                "-webkit-transform-origin": "130px 106px",
-                "transform-origin": "130px 106px"
+                WebkitTransformOrigin: "130px 106px",
+                transformOrigin: "130px 106px"
               }}
             />
             <path

client/src/components/App.scss

@@ -46,7 +46,7 @@ h1 {
   width: 100%;
   top: 0;
   left: 0;
-  padding: 1rem 2rem;
+  padding: 1rem;
   margin: 0;
   font-size: 1rem;
   line-height: 1rem;
@@ -81,6 +81,7 @@ body {
 
 .flex {
   display: flex;
+  flex-wrap: wrap;
 }
 
 h1,

client/src/components/Appointment.jsx

@@ -9,7 +9,7 @@ class Appointment extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      requests: []
+      requests: null
     };
     this.onDelete = this.onDelete.bind(this);
   }
@@ -24,8 +24,10 @@ class Appointment extends Component {
     fetch(`${API_URL}/${id}.json`)
       .then(d => d.json())
       .then(d => {
-        let { requests } = d;
-        this.setState({ ...this.state, requests });
+        if (d) {
+          let { requests } = d;
+          this.setState({ ...this.state, requests });
+        }
       });
   }
   onDelete({ id, createdAt }) {
@@ -38,13 +40,12 @@ class Appointment extends Component {
   render() {
     const { requests } = this.state;
     const { ts, id } = this.props.match.params;
-    if (!requests.length && ts !== "new") return <div>Loading...</div>;
-    const active = requests.find(d => d.createdAt === ts);
-    const data = requests.sort(
-      (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
-    );
+    const active = requests && requests.find(d => d.createdAt === ts);
+    const data =
+      requests &&
+      requests.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
     return (
-      <div className="flex">
+      <div className="flex" data-testid="appointment">
         <Requests
           active={ts === "new" ? data[0] : active}
           appointmentId={id}

client/src/components/Request.scss

@@ -2,6 +2,10 @@
   flex: 4 !important;
   padding: 1em;
   position: relative;
+  @media all and (max-width: 40em) {
+    flex: auto !important;
+    padding: 2em 0;
+  }
   h2,
   h2 > pre {
     margin: 0;

client/src/components/Requests.jsx

@@ -1,41 +1,54 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, Redirect } from "react-router-dom";
 import "./Requests.scss";
-import Timeago from "react-timeago";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
+import * as timeago from "timeago.js";
+import Select from "react-select";
 
-const Requests = ({ data, active, ts, appointmentId }) => (
-  <div className="Requests">
-    <ul>
-      <TransitionGroup>
+const Requests = ({ data, active, ts, appointmentId }) => {
+  const [redirect, setRedirect] = React.useState(null);
+  return (
+    <div className="Requests">
+      {redirect && <Redirect to={redirect} />}
+      <Select
+        placeholder="Recent Requests"
+        onChange={({ value }) => setRedirect(`/${appointmentId}/${value}`)}
+        options={[
+          { value: "new", label: "try it" },
+          ...data.map(d => ({
+            value: d.createdAt,
+            label: `${d.method}/${d.id} - ${timeago.format(
+              new Date(d.createdAt)
+            )}`
+          }))
+        ]}
+      />
+      <ul style={{ display: "none" }}>
         {data.map(datum => (
-          <CSSTransition timeout={0} key={datum.createdAt}>
-            <li
-              data-key={datum.createdAt}
-              key={datum.createdAt}
-              className={
-                active &&
-                active.createdAt === datum.createdAt &&
-                ts !== "new" &&
-                "active"
-              }
-            >
-              <Link to={`/${appointmentId}/${datum.createdAt}`}>
-                <pre>
-                  {datum.method} /{datum.id}
-                </pre>
-                <pre className="soft">{datum.headers["user-agent"]}</pre>
-                <Timeago date={datum.createdAt} />
-              </Link>
-            </li>
-          </CSSTransition>
+          <li
+            data-key={datum.createdAt}
+            key={datum.createdAt}
+            className={
+              active &&
+              active.createdAt === datum.createdAt &&
+              ts !== "new" &&
+              "active"
+            }
+          >
+            <Link to={`/${appointmentId}/${datum.createdAt}`}>
+              <pre>
+                {datum.method} /{datum.id}
+              </pre>
+              <pre className="soft">{datum.headers["user-agent"]}</pre>
+              <span> date={datum.createdAt}</span>
+            </Link>
+          </li>
         ))}
         <li className={ts === "new" ? "active" : ""}>
           <Link to={"/" + appointmentId + "/new"}>Try it</Link>
         </li>
-      </TransitionGroup>
-    </ul>
-  </div>
-);
+      </ul>
+    </div>
+  );
+};
 
 export default Requests;

client/src/components/Requests.scss

@@ -4,6 +4,14 @@
   flex: 1;
   width: 300px;
   height: 100%;
+  @media all and (max-width: 40em) {
+    height: auto;
+    overflow: visible;
+  }
+  select {
+    border: 1px solid #222;
+    padding: 0.5em;
+  }
   h2 {
     padding-left: 1rem;
   }
@@ -25,8 +33,9 @@
     text-align: left;
 
     li {
-      border-bottom: 1px solid white;
       cursor: pointer;
+      border: 1px solid #fff;
+      border-radius: 3px;
       &:first-child time {
         border: 1px solid #ffd000;
         padding: 0.25em 0.5em;
@@ -47,6 +56,12 @@
       a:not(.try-it) {
         color: inherit;
       }
+      &:last-child {
+        border: 1px solid #222;
+      }
+      &.active + :last-child {
+        border-top: 1px solid transparent;
+      }
 
       &.active {
         background: #fff;