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;