Polished CSS, refactored useApi Query hook

2020-01-06 18:36:47 +01:00
parent 64b237e046
commit a35b8319fd
21 changed files with 127 additions and 407 deletions
--- a/client/cypress/integration/issueDetails.spec.js
+++ b/client/cypress/integration/issueDetails.spec.js
@@ -69,9 +69,10 @@ describe('Issue details', () => {

    cy.get(testid`modal:tracking`).within(() => {
      cy.contains('No time logged').should('exist');
-      getNumberInputAtIndex(0).debounced('type', 1);

+      getNumberInputAtIndex(0).debounced('type', 1);
      cy.get('div[width="10"]').should('exist'); // tracking bar
+
      getNumberInputAtIndex(1).debounced('type', 2);

      cy.contains('button', 'Done')
@@ -124,7 +125,6 @@ describe('Issue details', () => {
  it('edits a comment successfully', () => {
    getIssueDetailsModal().within(() => {
      cy.get(testid`issue-comment`)
-        .first()
        .contains('Edit')
        .click()
        .should('not.exist');
@@ -139,7 +139,6 @@ describe('Issue details', () => {
        .should('not.exist');

      cy.get(testid`issue-comment`)
-        .first()
        .should('contain', 'Edit')
        .and('contain', 'TEST_COMMENT_EDITED');
    });
@@ -148,7 +147,6 @@ describe('Issue details', () => {
  it('deletes a comment successfully', () => {
    getIssueDetailsModal()
      .find(testid`issue-comment`)
-      .first()
      .contains('Delete')
      .click();

--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -5468,9 +5468,9 @@
      }
    },
    "formik": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.0.8.tgz",
-      "integrity": "sha512-PxC9G6EvLdJzMv7z+bsvpI/Euplv2vVgTQebD5yNza4t3fiMBB+iD90VOVTLCyH5Pnv3bljsZiKsIqGp/UNKKg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.1.tgz",
+      "integrity": "sha512-PdpgIPn7ipCzU5KBA+ED6Yy0kPqpZsWzoqI69ZJvcMtUfTzWrNfDeEdv2kd5aMAU3Iqs4PYFREAZjcthS/nqQw==",
      "requires": {
        "deepmerge": "^2.1.1",
        "hoist-non-react-statics": "^3.3.0",
--- a/client/package.json
+++ b/client/package.json
@@ -47,7 +47,7 @@
    "axios": "^0.19.0",
    "color": "^3.1.2",
    "core-js": "^3.4.7",
-    "formik": "^2.0.8",
+    "formik": "^2.1.1",
    "history": "^4.10.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.15",
--- a/client/src/Project/Board/Lists/List/Issue/Styles.js
+++ b/client/src/Project/Board/Lists/List/Issue/Styles.js
@@ -16,6 +16,9 @@ export const Issue = styled.div`
  box-shadow: 0px 1px 2px 0px rgba(9, 30, 66, 0.25);
  transition: background 0.1s;
  ${mixin.clickable}
+  @media (max-width: 1100px) {
+    padding: 10px 8px;
+  }
  &:hover {
    background: ${color.backgroundLight};
  }
@@ -30,6 +33,9 @@ export const Issue = styled.div`
 export const Title = styled.p`
  padding-bottom: 11px;
  ${font.size(15)}
+  @media (max-width: 1100px) {
+    ${font.size(14.5)}
+  }
 `;

 export const Bottom = styled.div`
--- a/client/src/Project/Board/Lists/List/Styles.js
+++ b/client/src/Project/Board/Lists/List/Styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';

-import { color, font } from 'shared/utils/styles';
+import { color, font, mixin } from 'shared/utils/styles';

 export const List = styled.div`
  display: flex;
@@ -17,6 +17,7 @@ export const Title = styled.div`
  text-transform: uppercase;
  color: ${color.textMedium};
  ${font.size(12.5)};
+  ${mixin.truncateText}
 `;

 export const IssuesCount = styled.span`
--- a/client/src/Project/Board/Lists/List/index.jsx
+++ b/client/src/Project/Board/Lists/List/index.jsx
@@ -4,7 +4,6 @@ import moment from 'moment';
 import { Droppable } from 'react-beautiful-dnd';
 import { intersection } from 'lodash';

-import useCurrentUser from 'shared/hooks/currentUser';
 import { IssueStatusCopy } from 'shared/constants/issues';

 import Issue from './Issue';
@@ -14,11 +13,14 @@ const propTypes = {
  status: PropTypes.string.isRequired,
  project: PropTypes.object.isRequired,
  filters: PropTypes.object.isRequired,
+  currentUserId: PropTypes.number,
 };

-const ProjectBoardList = ({ status, project, filters }) => {
-  const { currentUserId } = useCurrentUser();
+const defaultProps = {
+  currentUserId: null,
+};

+const ProjectBoardList = ({ status, project, filters, currentUserId }) => {
  const filteredIssues = filterIssues(project.issues, filters, currentUserId);
  const filteredListIssues = getSortedListIssues(filteredIssues, status);
  const allListIssues = getSortedListIssues(project.issues, status);
@@ -77,5 +79,6 @@ const formatIssuesCount = (allListIssues, filteredListIssues) => {
 };

 ProjectBoardList.propTypes = propTypes;
+ProjectBoardList.defaultProps = defaultProps;

 export default ProjectBoardList;
--- a/client/src/Project/Board/Lists/index.jsx
+++ b/client/src/Project/Board/Lists/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-beautiful-dnd';

+import useCurrentUser from 'shared/hooks/currentUser';
 import api from 'shared/utils/api';
 import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';
 import { IssueStatus } from 'shared/constants/issues';
@@ -16,6 +17,8 @@ const propTypes = {
 };

 const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
+  const { currentUserId } = useCurrentUser();
+
  const handleIssueDrop = ({ draggableId, destination, source }) => {
    if (!isPositionChanged(source, destination)) return;

@@ -35,7 +38,13 @@ const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
    <DragDropContext onDragEnd={handleIssueDrop}>
      <Lists>
        {Object.values(IssueStatus).map(status => (
-          <List key={status} status={status} project={project} filters={filters} />
+          <List
+            key={status}
+            status={status}
+            project={project}
+            filters={filters}
+            currentUserId={currentUserId}
+          />
        ))}
      </Lists>
    </DragDropContext>
--- a/client/src/Project/IssueSearch/Styles.js
+++ b/client/src/Project/IssueSearch/Styles.js
@@ -4,7 +4,7 @@ import { color, font, mixin } from 'shared/utils/styles';
 import { InputDebounced, Spinner, Icon } from 'shared/components';

 export const IssueSearch = styled.div`
-  padding: 25px 35px;
+  padding: 25px 35px 60px;
 `;

 export const SearchInputCont = styled.div`
--- a/client/src/Project/Sidebar/Styles.js
+++ b/client/src/Project/Sidebar/Styles.js
@@ -3,15 +3,20 @@ import styled from 'styled-components';
 import { color, sizes, font, mixin, zIndexValues } from 'shared/utils/styles';

 export const Sidebar = styled.div`
-  position: absolute;
+  position: fixed;
  z-index: ${zIndexValues.navLeft - 1};
  top: 0;
  left: ${sizes.appNavBarLeftWidth}px;
  height: 100vh;
-  width: 240px;
-  padding: 0 16px;
+  width: ${sizes.secondarySideBarWidth}px;
+  padding: 0 16px 24px;
  background: ${color.backgroundLightest};
  border-right: 1px solid ${color.borderLightest};
+  ${mixin.scrollableY}
+  ${mixin.customScrollbar()}
+  @media (max-width: 1100px) {
+    width: ${sizes.secondarySideBarWidth - 10}px;
+  }
 `;

 export const ProjectInfo = styled.div`
@@ -67,18 +72,20 @@ export const LinkText = styled.div`
 `;

 export const NotImplemented = styled.div`
-  display: none;
+  display: inline-block;
  position: absolute;
-  top: 9px;
-  left: 101%;
-  width: 120px;
-  padding: 3px 0 3px 8px;
+  top: 7px;
+  left: 40px;
+  width: 140px;
+  padding: 5px 0 5px 8px;
  border-radius: 3px;
-  color: #fff;
-  background: #000;
-  ${font.size(12.5)};
-  ${font.medium}
+  text-transform: uppercase;
+  color: ${color.textDark};
+  background: ${color.backgroundMedium};
+  opacity: 0;
+  ${font.size(11.5)};
+  ${font.bold}
  ${LinkItem}:hover & {
-    display: inline-block;
+    opacity: 1;
  }
 `;
--- a/client/src/Project/Styles.js
+++ b/client/src/Project/Styles.js
@@ -2,6 +2,12 @@ import styled from 'styled-components';

 import { sizes } from 'shared/utils/styles';

+const paddingLeft = sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40;
+
 export const ProjectPage = styled.div`
-  padding: 25px 32px 0 ${sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40}px;
+  padding: 25px 32px 50px ${paddingLeft}px;
+
+  @media (max-width: 1100px) {
+    padding: 25px 20px 50px ${paddingLeft - 20}px;
+  }
 `;
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -7,10 +7,3 @@ import ReactDOM from 'react-dom';
 import App from 'App';

 ReactDOM.render(<App />, document.getElementById('root'));
-
-// QUERY component cache-only doesn't work until first req finishes, look at currentUser on page load
-// APP IS NOT RESPONSIVE - REDUCE BROWSER HEIGHT, ISSUES DONT SCROLL
-// TODO: UPDATE FORMIK TO FIX SETFIELDVALUE TO EMPTY ARRAY ISSUE https://github.com/jaredpalmer/formik/pull/2144
-// REFACTOR HTML TO USE SEMANTIC ELEMENTS
-// MOVE SOME UTILS LIKE API TO SERVICES FOLDER
-// RENAME ISSUE DETAILS "USERS" TO ASSIGNEESREPORTER
--- a/client/src/shared/components/Modal/index.jsx
+++ b/client/src/shared/components/Modal/index.jsx
@@ -58,7 +58,14 @@ const Modal = ({

  useOnOutsideClick($modalRef, isOpen, closeModal, $clickableOverlayRef);
  useOnEscapeKeyDown(isOpen, closeModal);
-  useEffect(setBodyScrollLock, [isOpen]);
+
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'visible';
+    };
+  }, [isOpen]);

  return (
    <>
@@ -72,7 +79,6 @@ const Modal = ({
                className={className}
                variant={variant}
                width={width}
-                data-jira-modal="true"
                data-testid={testid}
                ref={$modalRef}
              >
@@ -89,11 +95,6 @@ const Modal = ({

 const $root = document.getElementById('root');

-const setBodyScrollLock = () => {
-  const areAnyModalsOpen = !!document.querySelector('[data-jira-modal]');
-  document.body.style.overflow = areAnyModalsOpen ? 'hidden' : 'visible';
-};
-
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;

--- a/client/src/shared/hooks/api/mutation.js
+++ b/client/src/shared/hooks/api/mutation.js
@@ -29,7 +29,13 @@ const useMutation = (method, url) => {
    [method, url, mergeState],
  );

-  return [{ ...state, [isWorkingAlias[method]]: state.isWorking }, makeRequest];
+  return [
+    {
+      ...state,
+      [isWorkingAlias[method]]: state.isWorking,
+    },
+    makeRequest,
+  ];
 };

 const isWorkingAlias = {
--- a/client/src/shared/hooks/api/query.js
+++ b/client/src/shared/hooks/api/query.js
@@ -8,44 +8,34 @@ import useDeepCompareMemoize from 'shared/hooks/deepCompareMemoize';
 const useQuery = (url, propsVariables = {}, options = {}) => {
  const { lazy = false, cachePolicy = 'cache-first' } = options;

+  const wasCalled = useRef(false);
+  const propsVariablesMemoized = useDeepCompareMemoize(propsVariables);
+
+  const isSleeping = lazy && !wasCalled.current;
+  const isCacheAvailable = cache[url] && isEqual(cache[url].apiVariables, propsVariables);
+  const canUseCache = isCacheAvailable && cachePolicy !== 'no-cache' && !wasCalled.current;
+
  const [state, mergeState] = useMergeState({
-    data: null,
+    data: canUseCache ? cache[url].data : null,
    error: null,
-    isLoading: !lazy,
+    isLoading: !lazy && !canUseCache,
    variables: {},
  });

-  const wasCalledRef = useRef(false);
-  const propsVariablesMemoized = useDeepCompareMemoize(propsVariables);
-
-  const stateRef = useRef();
-  stateRef.current = state;
-
  const makeRequest = useCallback(
-    (newVariables = {}, isAutoCalled) => {
-      const variables = { ...stateRef.current.variables, ...newVariables };
+    (newVariables, { skipLoading } = {}) => {
+      const variables = { ...state.variables, ...(newVariables || {}) };
      const apiVariables = { ...propsVariablesMemoized, ...variables };

-      const isCacheAvailable = cache[url] && isEqual(cache[url].apiVariables, apiVariables);
-
-      const isCacheAvailableAndPermitted =
-        isCacheAvailable && isAutoCalled && cachePolicy !== 'no-cache';
-
-      if (isCacheAvailableAndPermitted) {
-        mergeState({ data: cache[url].data, error: null, isLoading: false, variables });
-
-        if (cachePolicy === 'cache-only') {
-          return;
-        }
-      }
-
-      if (!isCacheAvailableAndPermitted && (lazy || wasCalledRef.current)) {
+      if (!skipLoading) {
        mergeState({ isLoading: true, variables });
+      } else if (newVariables) {
+        mergeState({ variables });
      }

      api.get(url, apiVariables).then(
        data => {
-          cache[url] = { apiVariables, data };
+          cache[url] = { data, apiVariables };
          mergeState({ data, error: null, isLoading: false });
        },
        error => {
@@ -53,26 +43,37 @@ const useQuery = (url, propsVariables = {}, options = {}) => {
        },
      );

-      wasCalledRef.current = true;
+      wasCalled.current = true;
    },
-    [propsVariablesMemoized, cachePolicy, url, lazy, mergeState],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [propsVariablesMemoized],
  );

  useEffect(() => {
-    if (!lazy || wasCalledRef.current) {
-      makeRequest({}, true);
-    }
-  }, [lazy, makeRequest]);
+    if (isSleeping) return;
+    if (canUseCache && cachePolicy === 'cache-only') return;
+
+    makeRequest(
+      {},
+      {
+        skipLoading: canUseCache && cachePolicy === 'cache-first',
+      },
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [makeRequest]);

  const setLocalData = useCallback(
-    getUpdatedData => mergeState(({ data }) => ({ data: getUpdatedData(data) })),
-    [mergeState],
+    getUpdatedData =>
+      mergeState(({ data }) => {
+        cache[url] = { ...(cache[url] || {}), data: getUpdatedData(data) };
+        return { data: getUpdatedData(data) };
+      }),
+    [mergeState, url],
  );

  return [
    {
      ...state,
-      wasCalled: wasCalledRef.current,
      variables: { ...propsVariablesMemoized, ...state.variables },
      setLocalData,
    },
--- a/client/src/shared/hooks/currentUser.js
+++ b/client/src/shared/hooks/currentUser.js
@@ -5,10 +5,10 @@ import useApi from 'shared/hooks/api';
 const useCurrentUser = ({ cachePolicy = 'cache-only' } = {}) => {
  const [{ data }] = useApi.get('/currentUser', {}, { cachePolicy });

-  const currentUser = get(data, 'currentUser');
-  const currentUserId = get(data, 'currentUser.id');
-
-  return { currentUser, currentUserId };
+  return {
+    currentUser: get(data, 'currentUser'),
+    currentUserId: get(data, 'currentUser.id'),
+  };
 };

 export default useCurrentUser;
--- a/client/src/shared/hooks/deepCompareMemoize.js
+++ b/client/src/shared/hooks/deepCompareMemoize.js
@@ -7,7 +7,6 @@ const useDeepCompareMemoize = value => {
  if (!isEqual(value, valueRef.current)) {
    valueRef.current = value;
  }
-
  return valueRef.current;
 };

--- a/client/src/shared/hooks/onEscapeKeyDown.js
+++ b/client/src/shared/hooks/onEscapeKeyDown.js
@@ -13,7 +13,6 @@ const useOnEscapeKeyDown = (isListening, onEscapeKeyDown) => {
    if (isListening) {
      document.addEventListener('keydown', handleKeyDown);
    }
-
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
--- a/client/src/shared/hooks/onOutsideClick.js
+++ b/client/src/shared/hooks/onOutsideClick.js
@@ -33,7 +33,6 @@ const useOnOutsideClick = (
      $listeningElement.addEventListener('mousedown', handleMouseDown);
      $listeningElement.addEventListener('mouseup', handleMouseUp);
    }
-
    return () => {
      $listeningElement.removeEventListener('mousedown', handleMouseDown);
      $listeningElement.removeEventListener('mouseup', handleMouseUp);
--- a/client/src/shared/utils/styles.js
+++ b/client/src/shared/utils/styles.js
@@ -58,7 +58,7 @@ export const issueStatusBackgroundColors = {

 export const sizes = {
  appNavBarLeftWidth: 64,
-  secondarySideBarWidth: 240,
+  secondarySideBarWidth: 230,
  minViewportWidth: 1000,
 };

@@ -137,10 +137,7 @@ export const mixin = {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  `,
-  customScrollbar: ({
-    width = 8,
-    background = mixin.darken(color.backgroundMedium, 0.2),
-  } = {}) => css`
+  customScrollbar: ({ width = 8, background = color.backgroundMedium } = {}) => css`
    &::-webkit-scrollbar {
      width: ${width}px;
    }
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,32 +4,6 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
-    "@babel/code-frame": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
-      "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
-      "dev": true,
-      "requires": {
-        "@babel/highlight": "^7.0.0"
-      }
-    },
-    "@babel/highlight": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz",
-      "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.0.0",
-        "esutils": "^2.0.2",
-        "js-tokens": "^4.0.0"
-      }
-    },
-    "@types/normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-      "dev": true
-    },
    "ansi-styles": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -116,28 +90,6 @@
        "parse-json": "^4.0.0"
      }
    },
-    "cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-      "dev": true,
-      "requires": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      }
-    },
-    "end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
-      "requires": {
-        "once": "^1.4.0"
-      }
-    },
    "error-ex": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -159,27 +111,6 @@
      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
      "dev": true
    },
-    "esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
-    },
-    "execa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^6.0.0",
-        "get-stream": "^4.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
-      }
-    },
    "find-up": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -196,44 +127,27 @@
      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
      "dev": true
    },
-    "get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "dev": true,
-      "requires": {
-        "pump": "^3.0.0"
-      }
-    },
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
      "dev": true
    },
-    "hosted-git-info": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
-      "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==",
-      "dev": true
-    },
    "husky": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-3.1.0.tgz",
-      "integrity": "sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==",
+      "version": "4.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.0.0-beta.5.tgz",
+      "integrity": "sha512-2pjLVRjXTkWoNpCFFltAiVD+qpaXDfVEldnzINgI5N7ncxY1cryFvUZnYoSQIG9NN7QDLZ6AtO/HtNObjBln6g==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.2",
        "ci-info": "^2.0.0",
        "cosmiconfig": "^5.2.1",
-        "execa": "^1.0.0",
        "get-stdin": "^7.0.0",
        "opencollective-postinstall": "^2.0.2",
        "pkg-dir": "^4.2.0",
        "please-upgrade-node": "^3.2.0",
-        "read-pkg": "^5.2.0",
-        "run-node": "^1.0.0",
-        "slash": "^3.0.0"
+        "slash": "^3.0.0",
+        "which-pm-runs": "^1.0.0"
      }
    },
    "import-fresh": {
@@ -258,24 +172,6 @@
      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
      "dev": true
    },
-    "is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
-    },
    "js-yaml": {
      "version": "3.13.1",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
@@ -292,12 +188,6 @@
      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
      "dev": true
    },
-    "lines-and-columns": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
-    },
    "locate-path": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -307,58 +197,16 @@
        "p-locate": "^4.1.0"
      }
    },
-    "nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
-    },
-    "normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-      "dev": true,
-      "requires": {
-        "path-key": "^2.0.0"
-      }
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
-      "requires": {
-        "wrappy": "1"
-      }
-    },
    "opencollective-postinstall": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
      "dev": true
    },
-    "p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
-    },
    "p-limit": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
-      "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
+      "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
      "dev": true,
      "requires": {
        "p-try": "^2.0.0"
@@ -395,18 +243,6 @@
      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
      "dev": true
    },
-    "path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-      "dev": true
-    },
-    "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
-    },
    "pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -425,146 +261,30 @@
        "semver-compare": "^1.0.0"
      }
    },
-    "pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "dev": true,
-      "requires": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
-      },
-      "dependencies": {
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        }
-      }
-    },
-    "resolve": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.13.1.tgz",
-      "integrity": "sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w==",
-      "dev": true,
-      "requires": {
-        "path-parse": "^1.0.6"
-      }
-    },
    "resolve-from": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
      "dev": true
    },
-    "run-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz",
-      "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==",
-      "dev": true
-    },
-    "semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true
-    },
    "semver-compare": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
      "dev": true
    },
-    "shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
-      "requires": {
-        "shebang-regex": "^1.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
-    },
-    "signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-      "dev": true
-    },
    "slash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
      "dev": true
    },
-    "spdx-correct": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
-      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
-      "dev": true,
-      "requires": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-exceptions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==",
-      "dev": true
-    },
-    "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
-      "dev": true,
-      "requires": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-license-ids": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
-      "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
-      "dev": true
-    },
    "sprintf-js": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
      "dev": true
    },
-    "strip-eof": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
-      "dev": true
-    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -574,35 +294,10 @@
        "has-flag": "^3.0.0"
      }
    },
-    "type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "dev": true
-    },
-    "validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
-      "requires": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
-    "which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "requires": {
-        "isexe": "^2.0.0"
-      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+    "which-pm-runs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
      "dev": true
    }
  }
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
    "install-deps": "npm install && cd api && npm install && cd ../client && npm install"
  },
  "devDependencies": {
-    "husky": "^3.1.0"
+    "husky": "^4.0.0-beta.5"
  },
  "husky": {
    "hooks": {