Post-quiz cleaning (#99)

vforge · web-flow · commit e5e9638b23d3 · 2019-05-23T16:18:54.000-07:00
Post-quiz cleaning
diff --git a/config/jest.config.js b/config/jest.config.js
@@ -9,7 +9,6 @@ module.exports = {
     snapshotSerializers: [
         'enzyme-to-json/serializer',
     ],
-    collectCoverage: true,
     collectCoverageFrom: [
         'source/components/**/*.js',
         'source/hocs/**/*.js',
diff --git a/config/styleguide.config.json b/config/styleguide.config.json
@@ -1,8 +1,6 @@
-[
-  {
+[{
     "name": "Documentation",
-    "sections": [
-      {
+    "sections": [{
         "name": "Introduction",
         "content": "../docs/PREAMBULE.md"
       },
@@ -68,6 +66,7 @@
       "ImagePreloader",
       "Input",
       "List",
+      "Portal",
       "Select",
       "SimpleLocalNavigation",
       "Spinner",
@@ -94,13 +93,13 @@
     "directory": "hooks",
     "items": [
       "useInterval",
-      "useLazyLoad"
+      "useLazyLoad",
+      "usePortal"
     ]
   },
   {
     "name": "Utils",
-    "sections": [
-      {
+    "sections": [{
         "name": "Environment",
         "content": "../source/utils/ENVIRONMENT.md"
       },
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "build:lib": "yarn clean && yarn lib:build",
     "clean": "node ./scripts/clean.js",
     "coverage": "yarn test --coverage",
-    "coveralls": "yarn test --runInBand && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "coveralls": "yarn coverage --runInBand && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
     "dev": "concurrently --names \"SERVER,TESTS\" --prefix \"{time}|{name}\" \"yarn styleguide:watch\" \"yarn test:watch\"",
     "git:reset": "git checkout master && git pull",
     "lib:build": "rollup -c config/rollup.config.js",
@@ -29,7 +29,7 @@
     "release:patch": "yarn git:reset && yarn bump:version patch && yarn build && git add . && yarn create:tag && git push --follow-tags && yarn publish",
     "styleguide:build": "styleguidist build --config ./config/styleguide.config.js",
     "styleguide:watch": "styleguidist server --config ./config/styleguide.config.js",
-    "ci": "yarn lint && yarn test --runInBand",
+    "ci": "yarn lint && yarn coverage --runInBand",
     "test": "jest --config ./config/jest.config.js",
     "test:update": "jest -u --config ./config/jest.config.js",
     "test:watch": "yarn test --watchAll --notify"
diff --git a/source/components/HideComponent/__snapshots__/index.spec.js.snap b/source/components/HideComponent/__snapshots__/index.spec.js.snap
diff --git a/source/components/HideComponent/index.js b/source/components/HideComponent/index.js
@@ -1,19 +1,57 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 
-const HideComponent = ({ hide, children }) => {
-    if (hide === true) {
+// use class component so `react-docgen` can parse this file as a component (doesn't work with functional components)
+/**
+ * Component that's used to either show or hide own children.
+ *
+ * Since both `show` and `hide` shouldn't be used at the same time, `hide` has a priority
+ *
+ * | `hide` | `show` | Component visible? |
+ * | ----------- | ----------- | ----------- |
+ * | `undefined` | `undefined` | yes |
+ * | `undefined` | `true` | yes |
+ * | `undefined` | `false` | no |
+ * | `true` | (any value) | no |
+ * | `false` | (any value) | yes |
+ */
+class HideComponent extends React.PureComponent {
+    shouldShow() {
+        const { show, hide } = this.props;
+
+        if (typeof hide !== 'undefined') {
+            if (hide === true) {
+                return false;
+            }
+
+            return true;
+        }
+
+        if (typeof show === 'undefined' || show === true) {
+            return true;
+        }
+
         return false;
     }
 
-    return children;
-};
+    render() {
+        return this.shouldShow() ? this.props.children : null;
+    }
+}
 
 HideComponent.propTypes = {
+    /** @ignore */
+    children: PropTypes.node,
+    /** if `true` the component will be hidden; if `false` the component will be shown */
     hide: PropTypes.bool,
+    /** if `true` the component will be shown; if `false` the component will be hidden */
+    show: PropTypes.bool,
 };
 
 HideComponent.defaultProps = {
-    hide: false,
+    children: null,
+    hide: undefined,
+    show: undefined,
 };
 
 export default HideComponent;
diff --git a/source/components/HideComponent/index.spec.js b/source/components/HideComponent/index.spec.js
@@ -3,20 +3,26 @@ import { mount } from 'enzyme';
 
 import HideComponent from './index';
 
-test('Hide component tree', () => {
-    const component = mount(
-        <HideComponent hide>
-            <div> test </div>
-        </HideComponent>,
-    );
-    expect(component).toMatchSnapshot();
-});
+describe('Check if show/hide logic works', () => {
+    const testData = [
+        { hide: undefined, show: undefined, result: true },
+        { hide: undefined, show: true, result: true },
+        { hide: undefined, show: false, result: false },
+        { hide: true, show: undefined, result: false },
+        { hide: true, show: true, result: false },
+        { hide: true, show: false, result: false },
+        { hide: false, show: undefined, result: true },
+        { hide: false, show: true, result: true },
+        { hide: false, show: false, result: true },
+    ];
+
+    testData.forEach((testSet) => {
+        test(`Data set (hide: ${String(testSet.hide)}, show: ${String(testSet.show)}) => ${String(testSet.result)}`, () => {
+            const component = mount(
+                <HideComponent hide={testSet.hide} show={testSet.show}>test</HideComponent>
+            );
 
-test('Show component tree', () => {
-    const component = mount(
-        <HideComponent>
-            <div> test </div>
-        </HideComponent>,
-    );
-    expect(component).toMatchSnapshot();
+            expect(component.text()).toBe(testSet.result ? 'test' : null);
+        });
+    });
 });
diff --git a/source/components/Portal/README.md b/source/components/Portal/README.md
@@ -0,0 +1,7 @@
+Open the source and search for "Portal demo".
+
+```js static
+<Portal id="asd">
+  <p>This Portal demo will be rendered in Body</p>
+</Portal>
+```
diff --git a/source/components/Portal/index.js b/source/components/Portal/index.js
@@ -0,0 +1,26 @@
+// disable jest here
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+
+import usePortal from '../../hooks/usePortal';
+
+/**
+ * A `Portal` Component that simplifies the usage of React portals.
+ */
+const Portal = /* istanbul ignore next */ ({ id, children }) => {
+    const target = usePortal(id);
+
+    return createPortal(
+        children,
+        target,
+    );
+};
+
+Portal.propTypes = {
+    /** @ignore */
+    children: PropTypes.node.isRequired,
+    /** `ID` of the DOM element */
+    id: PropTypes.string.isRequired,
+};
+
+export default Portal;
diff --git a/source/components/index.js b/source/components/index.js
@@ -37,6 +37,7 @@ export { default as Spinner } from './Spinner';
 export { default as Switch } from './Switch';
 export { default as Timeago } from './Timeago';
 export { default as VideoPlayIcon } from './VideoPlayIcon';
+export { default as Portal } from './Portal';
 
 export { default as StyledErrorDisplayingContent } from './StyledErrorDisplayingContent';
 
diff --git a/source/hooks/index.js b/source/hooks/index.js
@@ -4,5 +4,6 @@
  * importable.
  */
 
+export { default as usePortal } from './usePortal';
 export { default as useLazyLoad } from './useLazyLoad';
 export { default as useInterval } from './useInterval';
diff --git a/source/hooks/usePortal/README.md b/source/hooks/usePortal/README.md
@@ -0,0 +1,15 @@
+
+Hook to create a React Portal.
+
+Automatically handles creating and tearing-down the root elements (no SRR makes this trivial), so there is no need to ensure the parent target already exists.
+
+## Usage
+
+```js static
+import usePortal from '@react-common/hooks/useLazyLoad';
+
+function Component({ id, children }) {
+    const target = usePortal(id, [id]);
+    return createPortal(children, target);
+}
+```
diff --git a/source/hooks/usePortal/index.js b/source/hooks/usePortal/index.js
@@ -0,0 +1,85 @@
+/* istanbul ignore file */
+// @see https://www.jayfreestone.com/writing/react-portals-with-hooks/
+import { useRef, useEffect } from 'react';
+
+/**
+ * Creates DOM element to be used as React root.
+ * @returns {HTMLElement}
+ */
+function createRootElement(id) {
+    const rootContainer = document.createElement('div');
+    rootContainer.setAttribute('id', id);
+    return rootContainer;
+}
+
+/**
+ * Appends element as last child of body.
+ * @param {HTMLElement} rootElem
+ */
+function addRootElement(rootElem) {
+    document.body.insertBefore(
+        rootElem,
+        document.body.lastElementChild.nextElementSibling,
+    );
+}
+
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ *
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ *
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+function usePortal(id) {
+    const rootElemRef = useRef(null);
+
+    // eslint-disable-next-line
+    useEffect(function setupElement() {
+        // Look for existing target dom element to append to
+        const existingParent = document.querySelector(`#${id}`);
+        // Parent is either a new root or the existing dom element
+        const parentElem = existingParent || createRootElement(id);
+
+        // If there is no existing DOM element, add a new one.
+        if (!existingParent) {
+            addRootElement(parentElem);
+        }
+
+        // Add the detached element to the parent
+        parentElem.appendChild(rootElemRef.current);
+
+        return function removeElement() {
+            rootElemRef.current.remove();
+            if (parentElem.childNodes.length === -1) {
+                parentElem.remove();
+            }
+        };
+    }, [id]);
+
+    /**
+     * It's important we evaluate this lazily:
+     * - We need first render to contain the DOM element, so it shouldn't happen
+     *   in useEffect. We would normally put this in the constructor().
+     * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+     *   since this will run every single render (that's a lot).
+     * - We want the ref to consistently point to the same DOM element and only
+     *   ever run once.
+     * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+     */
+    function getRootElem() {
+        if (!rootElemRef.current) {
+            rootElemRef.current = document.createElement('div');
+        }
+        return rootElemRef.current;
+    }
+
+    return getRootElem();
+}
+
+export default usePortal;
