diff --git a/client/package.json b/client/package.json index a5b5196..fd80605 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx index 6abe6fb..a4cd30b 100644 --- a/client/src/components/App.jsx +++ b/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" }} /> 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
Loading...
; - 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 ( -
+
pre { margin: 0; diff --git a/client/src/components/Requests.jsx b/client/src/components/Requests.jsx index a837c89..4045720 100644 --- a/client/src/components/Requests.jsx +++ b/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 }) => ( -
-
    - +const Requests = ({ data, active, ts, appointmentId }) => { + const [redirect, setRedirect] = React.useState(null); + return ( +
    + {redirect && } +