add docker compose powered development environment (#71)

* docker-compose up client working

* update devenv with docker-compose

* ui working w/ server and docker

* fix role issues

* hide scrollbars

* prettier ignore

* remove console.log

.prettierignore

@@ -0,0 +1 @@
+docker-entrypoint-initdb.d/mongo-init.js

client/.dockerignore

@@ -0,0 +1 @@
+node_modules

client/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:16
+
+COPY package.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+CMD ["npm", "start"]

client/package.json

@@ -6,10 +6,9 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "node-sass": "^4.13.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-json-view": "^1.19.1",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "react-tabs": "^3.1.0",

client/src/components/App.scss → client/src/components/App.css

@@ -16,6 +16,21 @@ body,
   color: #222;
 }
 
+body {
+  -ms-overflow-style: none;
+  /** For IE */
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  scrollbar-width: none;
+}
+
 hr {
   border: none;
   height: 1px;
@@ -29,10 +44,11 @@ button {
   font: inherit;
   cursor: pointer;
   padding: 0.5em 1rem;
-  &:hover {
-    background: #222;
-    color: #fff;
-  }
+}
+
+button:hover {
+  background: #222;
+  color: #fff;
 }
 
 .App {
@@ -52,16 +68,18 @@ h1 {
   line-height: 1rem;
   z-index: 2;
   border-bottom: 1px solid #ebebeb;
-  a {
-    text-decoration: none;
-  }
+}
+
+h1 a {
+  text-decoration: none;
 }
 
 pre.bash {
   position: relative;
-  &:before {
-    content: "$ ";
-  }
+}
+
+pre.bash:before {
+  content: "$ ";
 }
 
 .flex {
@@ -127,6 +145,7 @@ header {
     width: 100%;
     padding: 0;
   }
+
   .meta abbr {
     margin-top: 0.5em;
     display: block;

client/src/components/App.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./App.scss";
+import "./App.css";
 import Home from "./Home";
 import Appointment from "./Appointment";
 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

client/src/components/Appointment.jsx

@@ -15,7 +15,7 @@ class Appointment extends Component {
   }
   componentDidMount() {
     const { id } = this.props.match.params;
-    const socket = io(API_URL);
+    const socket = io(API_URL, { query: `id=${id}` });
     socket.on("request", d => {
       let { requests } = this.state;
       requests.push(d);

client/src/components/NewRequest.css

@@ -0,0 +1,41 @@
+.NewRequest {
+  flex: 1;
+}
+
+.NewRequest script {
+  color: black;
+  padding: 1em;
+  margin: 0;
+  white-space: pre;
+  margin-bottom: 1em;
+}
+.NewRequest .react-tabs__tab-list,
+.NewRequest .react-tabs__tab--selected {
+  border-color: #222;
+}
+.NewRequest .react-tabs__tab-list {
+  margin-bottom: 0;
+}
+.NewRequest .react-tabs__tab-panel--selected {
+  border: 1px solid #222;
+  padding: 1em;
+  border-top: none;
+}
+.NewRequest script,
+.NewRequest pre {
+  padding: 0.25em;
+  border: 1px solid #222;
+  border-radius: 3px;
+  font-size: 1.2rem;
+  background: #222;
+  color: #fff;
+}
+
+.NewRequest h3 {
+  margin-top: 0;
+}
+
+.NewRequest pre.wrap {
+  white-space: pre-wrap;
+  word-break: break-all;
+}

client/src/components/NewRequest.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./NewRequest.scss";
+import "./NewRequest.css";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 

client/src/components/Request.css

@@ -0,0 +1,63 @@
+.Request {
+  flex: 4 !important;
+  padding: 1em;
+  position: relative;
+}
+.Request h2,
+.Request h2 > pre {
+  margin: 0;
+}
+.Request .headers,
+.Request .payload,
+.Request pre {
+  white-space: normal;
+}
+.Request .react-json-view {
+  background: white !important;
+  font-family: Inconsolata, monospace !important;
+  padding: 1em;
+  word-break: break-all;
+}
+.Request .response {
+  border: 1px solid #ebebeb;
+  display: inline-block;
+  margin-left: 1rem;
+  padding: 0.25rem;
+}
+.Request .controls {
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  margin-top: 2em;
+  flex-wrap: wrap;
+}
+.Request .controls button,
+.Request .controls input {
+  padding: 0.25em 0.5em;
+  font: inherit;
+  border-radius: 3px;
+}
+.Request .controls button {
+  cursor: pointer;
+}
+.Request .controls input {
+  margin-top: 5px;
+  display: block;
+  border: 1px solid #bbb;
+  width: 100%;
+}
+.Request .controls .delete {
+  color: #db2828;
+  display: inline-block;
+  border-radius: 3px;
+  border: 1px solid #db2828;
+}
+.Request .controls .delete:hover,
+.Request .controls .delete:active {
+  background: #db2828;
+  color: #fff;
+}
+.Request .controls .delete:focus {
+  outline: none;
+  box-shadow: 0 0 3px #db2828;
+}

client/src/components/Request.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import "./Request.scss";
+import "./Request.css";
 import ReactJson from "react-json-view";
 
 const parseJSON = stringOrObject => {