From bef1c3328b098a2cffc31acc91340a2f336e027b Mon Sep 17 00:00:00 2001
From: Lucas Guild <luke.guild@gmail.com>
Date: Wed, 12 Jun 2019 13:58:12 -0400
Subject: [PATCH] update to 1.0.2 (#3)

---
 Makefile                              |  8 +++-----
 README.md                             |  2 +-
 client/package-lock.json              |  2 +-
 client/package.json                   |  3 +--
 client/src/components/Banner.jsx      |  4 ++--
 client/src/components/LinkButton.jsx  |  2 +-
 client/src/components/MoreDetails.jsx | 20 +++++++++---------
 client/src/hooks/index.js             |  1 +
 client/src/hooks/useOnClickOutside.js | 29 +++++++++++++++++++++++++++
 docker-compose.yml                    |  6 +++---
 server/README.md                      |  2 +-
 server/package-lock.json              |  2 +-
 server/package.json                   |  2 +-
 version.sh                            |  4 ++--
 wait-for-client.sh                    | 14 +++++++------
 15 files changed, 65 insertions(+), 36 deletions(-)
 create mode 100644 client/src/hooks/useOnClickOutside.js

diff --git a/Makefile b/Makefile
index f063e0b9..c34401f6 100644
--- a/Makefile
+++ b/Makefile
@@ -16,7 +16,7 @@ help:
 	@echo '  make <target>'
 	@echo ''
 	@echo 'Targets:'
-	@awk '/^[a-zA-Z\-\_0-9]+:/ { \
+	@awk '/^[a-zA-Z_0-9-]+:/ { \
 		helpMessage = match(lastLine, /^## (.*)/); \
 		if (helpMessage) { \
 			helpCommand = substr($$1, 0, index($$1, ":")-1); \
@@ -59,13 +59,11 @@ logs:
 ## Stop the services
 stop:
 	docker-compose down
-	docker volume rm $(current_dir)_client_node_modules || true
-	docker volume rm $(current_dir)_server_node_modules || true
+	docker volume rm $(current_dir)_{client,server}_node_modules 2>/dev/null || true
 
 ## Clear the sandbox and development databases
 clear-db: stop
-	docker volume rm $(current_dir)_pg_sandbox_data || true
-	docker volume rm $(current_dir)_pg_development_data || true
+	docker volume rm $(current_dir)_pg_{sandbox,development}_data 2>/dev/null || true
 
 $(envfile):
 	@echo "Error: .env file does not exist! See the README for instructions."
diff --git a/README.md b/README.md
index 89d1f061..cc4d13da 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Plaid Pattern
+# Plaid Pattern (Beta)
 
 ![Plaid Pattern client][client-img]
 
diff --git a/client/package-lock.json b/client/package-lock.json
index 953d7de5..a705d03d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/client/package.json b/client/package.json
index 46b5b92d..7610d364 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
@@ -8,7 +8,6 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-onclickoutside": "^6.8.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.1",
     "react-toastify": "^5.1.0",
diff --git a/client/src/components/Banner.jsx b/client/src/components/Banner.jsx
index ff19dfd9..7d7642eb 100644
--- a/client/src/components/Banner.jsx
+++ b/client/src/components/Banner.jsx
@@ -18,7 +18,7 @@ const Banner = ({ initialSubheading }) => {
   const successText =
     'Success! You can explore account and transaction details for the linked item';
 
-  const subdeadingText = initialSubheading ? initialText : successText;
+  const subheadingText = initialSubheading ? initialText : successText;
   return (
     <div id="banner" className="bottom-border-content">
       <h4>{PLAID_ENV} User</h4>
@@ -34,7 +34,7 @@ const Banner = ({ initialSubheading }) => {
         </a>
       </div>
       <p id="intro" className="everpresent-content__subheading">
-        {subdeadingText}
+        {subheadingText}
       </p>
     </div>
   );
diff --git a/client/src/components/LinkButton.jsx b/client/src/components/LinkButton.jsx
index 2981d339..4653c91a 100644
--- a/client/src/components/LinkButton.jsx
+++ b/client/src/components/LinkButton.jsx
@@ -28,7 +28,7 @@ export default function LinkButton({
   const { linkHandlers, getLinkHandler } = useLink();
 
   const isPrimary = primary ? 'button--is-primary' : '';
-  const classlist = altClasses !== undefined ? altClasses : '';
+  const classlist = altClasses !== null ? altClasses : '';
 
   useEffect(() => {
     getLinkHandler({ userId, itemId });
diff --git a/client/src/components/MoreDetails.jsx b/client/src/components/MoreDetails.jsx
index aa710d8b..e7f2ebea 100644
--- a/client/src/components/MoreDetails.jsx
+++ b/client/src/components/MoreDetails.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import onClickOutside from 'react-onclickoutside';
 import { IconDots, Button, LinkButton } from '.';
+import { useOnClickOutside } from '../hooks';
 
 const propTypes = {
   handleDelete: PropTypes.func.isRequired,
@@ -23,19 +23,23 @@ export function MoreDetails({
   itemId,
 }) {
   const [menuShown, setmenuShown] = useState(false);
-
-  MoreDetails.handleClickOutside = () => setmenuShown(false);
+  const refToButton = useRef();
+  const refToMenu = useOnClickOutside({
+    callback: () => setmenuShown(false),
+    ignoreRef: refToButton,
+  });
 
   return (
     <div className="more-details">
       <button
+        ref={refToButton}
         className="more-details__icon"
         onClick={() => setmenuShown(current => !current)}
       >
         <IconDots />
       </button>
       {menuShown && (
-        <div className="more-details__button-group">
+        <div className="more-details__button-group" ref={refToMenu}>
           {setBadStateShown && (
             <Button
               altClasses="more-details_button"
@@ -66,8 +70,4 @@ export function MoreDetails({
 MoreDetails.propTypes = propTypes;
 MoreDetails.defaultProps = defaultProps;
 
-const clickOutsideConfig = {
-  handleClickOutside: () => MoreDetails.handleClickOutside,
-};
-
-export default onClickOutside(MoreDetails, clickOutsideConfig);
+export default MoreDetails;
diff --git a/client/src/hooks/index.js b/client/src/hooks/index.js
index e0c09094..a6707fd7 100644
--- a/client/src/hooks/index.js
+++ b/client/src/hooks/index.js
@@ -1 +1,2 @@
 export { default as useBoolean } from './useBoolean';
+export { default as useOnClickOutside } from './useOnClickOutside';
diff --git a/client/src/hooks/useOnClickOutside.js b/client/src/hooks/useOnClickOutside.js
new file mode 100644
index 00000000..b9291d52
--- /dev/null
+++ b/client/src/hooks/useOnClickOutside.js
@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+
+export default function useOnClickOutside({ callback, ignoreRef }) {
+  const ref = useRef();
+
+  useEffect(() => {
+    const listener = event => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      if (!ignoreRef.current || ignoreRef.current.contains(event.target)) {
+        return;
+      }
+
+      callback(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [callback, ignoreRef]);
+
+  return ref;
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index 55ff8690..1c0399bc 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,7 +20,7 @@ services:
 
   server:
     build: ./server
-    image: plaidinc/pattern-server:1.0.1
+    image: plaidinc/pattern-server:1.0.2
     ports:
       - 5000:5000
     environment:
@@ -38,7 +38,7 @@ services:
 
   ngrok:
     build: ./ngrok
-    image: plaidinc/pattern-ngrok:1.0.1
+    image: plaidinc/pattern-ngrok:1.0.2
     command: ["ngrok", "http", "server:5000"]
     ports:
       - 4040:4040
@@ -47,7 +47,7 @@ services:
 
   client:
     build: ./client
-    image: plaidinc/pattern-client:1.0.1
+    image: plaidinc/pattern-client:1.0.2
     ports:
       - 3000:3000
     environment:
diff --git a/server/README.md b/server/README.md
index 22788f32..fe52c5cb 100644
--- a/server/README.md
+++ b/server/README.md
@@ -14,7 +14,7 @@ Plaid does not prevent item duplication. It is entirely possible for a user to c
 
 ### Using webhooks to update transaction data.
 
-Plaid uses [webhooks][transactions-webhooks] to notify you whenever there are new transactions associated with an Item. This allows you to make a call to Plaid's transactions endpoint only when there are new transactions available, rather than polling for them. For an example of this, see the [transactions webhook handler][transactions-handler].
+Plaid uses [webhooks][transactions-webhooks] to notify you whenever there are new transactions associated with an item. This allows you to make a call to Plaid's transactions endpoint only when there are new transactions available, rather than polling for them. For an example of this, see the [transactions webhook handler][transactions-handler].
 
 For webhooks to work, the server must be publicly accessible on the internet. For development purposes, this application uses [ngrok][ngrok-readme] to accomplish that.
 
diff --git a/server/package-lock.json b/server/package-lock.json
index d09d435c..40bee83d 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/server/package.json b/server/package.json
index e0791417..510c4b70 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "start": "node index.js",
diff --git a/version.sh b/version.sh
index 052d0381..1cdb8f28 100755
--- a/version.sh
+++ b/version.sh
@@ -25,14 +25,14 @@ echo "done"
 # update client package files
 echo -n "client/package*.json ... "
 cd client
-npm version $version >/dev/null 2>&1
+npm version $version &>/dev/null
 cd ..
 echo "done"
 
 # update server package files
 echo -n "server/package*.json ... "
 cd server
-npm version $version >/dev/null 2>&1
+npm version $version &>/dev/null
 cd ..
 echo "done"
 
diff --git a/wait-for-client.sh b/wait-for-client.sh
index a2c82aec..faf239fb 100755
--- a/wait-for-client.sh
+++ b/wait-for-client.sh
@@ -10,9 +10,11 @@ do
 done
 
 # print message
-echo
-echo "The client is ready!"
-echo "Open localhost:3000 in your browser to view the client."
-echo "Run 'make logs' to view the service logs."
-echo "Run 'make stop' to stop the docker containers."
-echo "Run 'make help' to view other available commands."
+cat <<EOF
+
+The client is ready!
+Open localhost:3000 in your browser to view the client.
+Run 'make logs' to view the service logs.
+Run 'make stop' to stop the docker containers.
+Run 'make help' to view other available commands.
+EOF