update to 1.0.2 (#3)

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."

README.md

@@ -1,4 +1,4 @@
-# Plaid Pattern
+# Plaid Pattern (Beta)
 
 ![Plaid Pattern client][client-img]
 

client/package.json

@@ -1,14 +1,13 @@
 {
   "name": "client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
     "date-fns": "^1.30.1",
     "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",

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>
   );

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 });

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;

client/src/hooks/index.js

@@ -1 +1,2 @@
 export { default as useBoolean } from './useBoolean';
+export { default as useOnClickOutside } from './useOnClickOutside';

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;
+}

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:

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.
 

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "start": "node index.js",

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"
 

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