├── .babelrc
├── .coveralls.yml
├── .github
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── bin
    └── introspection-fetch.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
    ├── composers.jsx
    ├── header
    │   ├── header.jsx
    │   ├── header.scss
    │   ├── index.js
    │   ├── mapper.js
    │   └── query.js
    ├── index.js
    ├── main
    │   ├── README.md
    │   ├── index.js
    │   ├── main.jsx
    │   ├── main.module.scss
    │   ├── query.js
    │   ├── router.js
    │   └── wp-routing.js
    ├── menu
    │   ├── context.js
    │   ├── index.js
    │   ├── menu-item.jsx
    │   ├── menu-item.module.scss
    │   ├── menu.jsx
    │   ├── menu.module.scss
    │   ├── query.js
    │   ├── state-manager.js
    │   ├── sub-menu.jsx
    │   └── sub-menu.module.scss
    ├── post-type
    │   ├── archive.jsx
    │   ├── archive.scss
    │   ├── attachment-mapper.js
    │   ├── attachment.jsx
    │   ├── attachment.module.scss
    │   ├── context.js
    │   ├── index.js
    │   ├── mappers.js
    │   ├── page.jsx
    │   ├── post.global.scss
    │   ├── post.jsx
    │   ├── post.module.scss
    │   ├── query.js
    │   └── state-managers.js
    ├── provider.jsx
    ├── user
    │   ├── index.js
    │   ├── login-form-handler.js
    │   ├── login.jsx
    │   ├── login.scss
    │   ├── query.js
    │   ├── user-controls.jsx
    │   ├── user-controls.scss
    │   └── user-status-handler.js
    └── utils
    │   ├── error.jsx
    │   ├── error.module.scss
    │   ├── icon.jsx
    │   ├── icon.module.scss
    │   ├── index.js
    │   ├── loading.jsx
    │   ├── loading.module.scss
    │   ├── process-errors.js
    │   └── process-loading.js
└── test
    ├── __unit_tests__
        ├── archive.test.js
        ├── attachment.test.js
        ├── header.test.js
        ├── login.test.js
        ├── main.test.js
        ├── menu.test.js
        ├── page.test.js
        └── post.test.js
    ├── __util_tests__
        ├── error.test.js
        └── loading.test.js
    ├── composers.test.js
    └── fragmentTypes.json


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "presets": [
 3 |         [ "@babel/preset-env", { "modules": false } ],
 4 |         "react-app"
 5 |     ],
 6 |     "plugins": [
 7 |         "@babel/plugin-proposal-class-properties",
 8 |         "@babel/plugin-external-helpers",
 9 |     ],
10 |     "env": {
11 |         "test": {
12 |             "presets": [
13 |                 [ "@babel/preset-env" ],
14 |                 "react-app"
15 |             ],
16 |             "plugins": [
17 |                 "@babel/plugin-proposal-class-properties",
18 |                 "@babel/plugin-external-helpers",
19 |             ],
20 |         },
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/.coveralls.yml:
--------------------------------------------------------------------------------
1 | service_name: travis-pro
2 | repo_token: uTNLsmHFJAqx7EcZgNaELc0B4QRnYIvE4


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | 
 5 | ---
 6 | 
 7 | **Describe the bug**
 8 | A clear and concise description of what the bug is.
 9 | 
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 | 
17 | **Expected behavior**
18 | A clear and concise description of what you expected to happen.
19 | 
20 | **Screenshots**
21 | If applicable, add screenshots to help explain your problem.
22 | 
23 | **Desktop (please complete the following information):**
24 |  - OS: [e.g. iOS]
25 |  - Browser [e.g. chrome, safari]
26 |  - Version [e.g. 22]
27 | 
28 | **Smartphone (please complete the following information):**
29 |  - Device: [e.g. iPhone6]
30 |  - OS: [e.g. iOS8.1]
31 |  - Browser [e.g. stock browser, safari]
32 |  - Version [e.g. 22]
33 | 
34 | **Additional context**
35 | Add any other context about the problem here.
36 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | 
 5 | ---
 6 | 
 7 | **Is your feature request related to a problem? Please describe.**
 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 9 | 
10 | **Describe the solution you'd like**
11 | A clear and concise description of what you want to happen.
12 | 
13 | **Describe alternatives you've considered**
14 | A clear and concise description of any alternative solutions or features you've considered.
15 | 
16 | **Additional context**
17 | Add any other context or screenshots about the feature request here.
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /dist
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 | - '8'
 5 | branches:
 6 |   only:
 7 |   - develop
 8 | cache:
 9 |   directories:
10 |   - node_modules
11 | before_install:
12 | - npm update
13 | install:
14 | - npm install
15 | script:
16 | - npm run build
17 | - npm test
18 | - npm run coveralls


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | ## [0.4.0] Breaking Change
  3 | ### Added
  4 | - **mappers.js** created in `./src/post-type`. Defines `post` and `archive` prop mapper functions.
  5 | 
  6 | ### Changes
  7 | - **archive** code moved to `./src/post-type`.
  8 | - **Archive** default view component set to `post` view component.
  9 | - **Two composer functions** renamed, `utilComposer` => `baseComposer` and `baseComposer` => `standardComposer`.
 10 | - **Post, Page, Menu, Login, and UserControls** state manager converted to pure components.
 11 | - **Main** default routing function renamed and moved to `wpRouting` and moved to [./src/main/wp-routing.js](https://github.com/kidunot89/wp-graphql-composer/blob/develop/src/main/wp-routing.js).
 12 | - **routeProcessor** renamed to `router`.
 13 | - **schema patch** modified to work with changes in new `WPGraphQL` default schema shape. 
 14 | 
 15 | ### Removed
 16 | - **./user/profile.jsx**
 17 | - **./user/profile.scss**
 18 | - **./style.css**
 19 | 
 20 | ## [0.3.2]
 21 | ### Changes
 22 | - **README.md** updated.
 23 | - **WPProvider** refactored.
 24 | 
 25 | ### Fixes
 26 | - **Jest runs against distribution instead of source code** see more [here](https://github.com/kidunot89/wp-graphql-composer/issues/18)
 27 | - **Hard-coded meta data in Archive and Main tests** see more [here](https://github.com/kidunot89/wp-graphql-composer/issues/17)
 28 | - **Move certain packages to peerDependencies & devDependencies** see more [here](https://github.com/kidunot89/wp-graphql-composer/issues/16)
 29 | 
 30 | ## [0.3.1] Breaking Change
 31 | ### Added
 32 | - **Introspectation CLI** use `wpg-intro <endpoint> <output>` to run execute an introspection query against `<endpoint>`, and a json file will be save at `<output>` which defaults to the project working directory root.
 33 | 
 34 | ### Changes
 35 | - **Package.json updated** `scripts` and `files` files added for dependency optimization and new feature. See added above. 
 36 | 
 37 | ### Removed
 38 | - **PostComments** removed due several design flawed. Deprecation stage was skipped on account that the component was broken.
 39 | 
 40 | ## [0.3.0] - skipped due to issue with git history
 41 | 
 42 | ## [0.2.2]
 43 | ### Added
 44 | - **Coveralls and Travis-CI** support Travis-CI and code coverage /w Coveralls.io added.
 45 | 
 46 | ## [0.2.1]
 47 | ### Added 
 48 | - **CUSTOM_LOGO_QUERY** new query add to Attachment default stack. 
 49 | Example use with default Attachment stack: `<Attachment customLogo />`.
 50 | 
 51 | ### Changes
 52 | - **Header** `CUSTOM_LOGO_QUERY` now used by Attachment component in default Header view component. 
 53 | 
 54 | ## [0.2.0] Breaking Change
 55 | ### Added
 56 | - **New build configuration** see changes below
 57 | 
 58 | ### Changes
 59 | - **PWD restructured** `src/lib/` => `src/`
 60 | - **Create-React-App ejected** to solves some styling issues as well as for optimization purposes the CRA has been ejected and all dependencies directly related to react-scripts have been removed.
 61 | - **Circular dependencies removed** all `/[component-group]/index.js` have modified to be solely exporters all composer definitions are defined in the same file as the view layer for modularity and optimization.
 62 | - **Unit Tests** they now run against the `dist/` instead of the `src/`
 63 | 
 64 | ### Fixed
 65 | - **Unit Tests** unit test were broken somewhere between [0.1.5] - [0.1.3]
 66 | 
 67 | ### Removed
 68 | - **`wp-graphql-compose` CLI ** see [0.1.10]:Deprecated
 69 | - **`./src/demo`** Incomplete demo replace
 70 | 
 71 | ## [0.1.10]
 72 | ### Deprecated
 73 | - **wp-graphql-compose CLI ** code related to the command line interface `wp-graphql-compose` is official deprecated and its recommend that you use [Oil-Based Boilerplate](https://github.com/kidunot89/oil-based-boilerplate) instead. `wp-graphql-compose` CLI will be remove in 0.2.x
 74 | 
 75 | ## [0.1.9 and below]
 76 | ### Added
 77 | 
 78 | #### New components 
 79 | - **Archive** only post-results created
 80 | - **Header** custom schema required until updates made to WP-GraphQL
 81 | - **Main**
 82 | - **Menu**
 83 | - **MenuItem**
 84 | - **SubMenu**
 85 | - **Attachment** 
 86 | - **Page**
 87 | - **Post**
 88 | - **PostComments**
 89 | - **Comment**
 90 | - **EditComment**
 91 | - **Login**
 92 | - **UserControls**
 93 | - **Error**
 94 | - **Loading**
 95 | - **Icon**
 96 | - **WPProvider**
 97 | 
 98 | #### Tests
 99 | - **Archive** only post-results created
100 | - **Header** custom schema required until updates made to WP-GraphQL
101 | - **Main**
102 | - **Menu**
103 | - **Attachment** 
104 | - **Page**
105 | - **Post**
106 | - **PostComments**
107 | - **Login**
108 | - **Error**
109 | - **Loading**
110 | - **Icon**
111 | - **WPProvider**
112 | 
113 | #### WP-Composer functions
114 | - **baseComposer**
115 | - **composeQuery**
116 | - **errorHandler**
117 | - **forError**
118 | - **queryComposer**
119 | - **utilComposer**
120 | - **whileLoading**
121 | 
122 | #### `wp-graphql-compose` CLI commands
123 | - `wp-graphql-compose init` - for scaffolding a WordPress theme or plugin stub
124 | - `wp-graphql-compose build` - for adding stub code to build directory
125 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at geoffrey.taylor@outlook.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Geoffrey K Taylor
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/bin/introspection-fetch.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | /**
 3 |  * Uses node-fetch to retrieves schema fragment data and it to a file for use
 4 |  */
 5 | 
 6 | 'use strict';
 7 | const chalk = require( 'chalk' );
 8 | const fs = require( 'fs' );
 9 | const fetch = require( 'node-fetch' );
10 | const path = require( 'path' );
11 | 
12 | /**
13 |  * Retrieves schema fragment data and saves it to a json file 
14 |  * 
15 |  * @param endpoint - WPGraphQL endpoint
16 |  * @param output - output path
17 |  * 
18 |  * @returns { void }
19 |  */
20 | const introspectionFetch = (endpoint, output) => {
21 |   fetch(endpoint, {
22 |     method: 'POST',
23 |     headers: { 'Content-Type': 'application/json' },
24 |     body: JSON.stringify({
25 |       variables: {},
26 |       operationName: '',
27 |       query: `
28 |         {
29 |           __schema {
30 |             types {
31 |               kind
32 |               name
33 |               possibleTypes {
34 |                 name
35 |               }
36 |             }
37 |           }
38 |         }
39 |       `,
40 |     }),
41 |   })
42 |   .then(result => result.json())
43 |   .then(result => {
44 |     // here we're filtering out any type information unrelated to unions or interfaces
45 |     const filteredData = result.data.__schema.types.filter(
46 |       type => type.possibleTypes !== null,
47 |     );
48 |     result.data.__schema.types = filteredData;
49 |     const outputFile = output.endsWith('.json') ? output : path.resolve(output, 'fragments.json');
50 |     fs.writeFile(outputFile, JSON.stringify(result.data), err => {
51 |       if (err) {
52 |         console.error('Error writing fragmentTypes file', err);
53 |       } else {
54 |         console.log('Fragment types successfully extracted!');
55 |       }
56 |     });
57 |   });
58 | };
59 | 
60 | try {
61 |   // Throw if path to WP installation provided 
62 |   if ( !process.argv[2] ) {
63 |       throw new Error( chalk.red( 'no WPGraphQL endpoint provided' ) );
64 |   }
65 | 
66 |   const endpoint = process.argv[2]
67 |   const output = process.argv[3] || path.resolve(process.cwd());
68 | 
69 |   introspectionFetch(endpoint, output);
70 | 
71 | } catch ( error ) {
72 |   console.error( error );
73 | }
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "wp-graphql-composer",
  3 |   "version": "0.4.0",
  4 |   "description": "A light-weight React component library for developing React apps served by WPGraphQL servers",
  5 |   "keywords": [
  6 |     "wp-graphql",
  7 |     "wordpress",
  8 |     "react",
  9 |     "apollo",
 10 |     "graphql",
 11 |     "react-apollo",
 12 |     "recompose"
 13 |   ],
 14 |   "author": {
 15 |     "name": "kidunot89",
 16 |     "url": "https://axistaylor.com/"
 17 |   },
 18 |   "license": "MIT",
 19 |   "repository": {
 20 |     "type": "git",
 21 |     "url": "https://github.com/kidunot89/wp-graphql-composer.git"
 22 |   },
 23 |   "bugs": {
 24 |     "url": "https://github.com/kidunot89/wp-graphql-composer/issues"
 25 |   },
 26 |   "bin": {
 27 |     "wpg-intro": "./bin/introspection-fetch.js"
 28 |   },
 29 |   "main": "dist/index.js",
 30 |   "module": "dist/index.module.js",
 31 |   "files": [
 32 |     "dist",
 33 |     "bin"
 34 |   ],
 35 |   "dependencies": {
 36 |     "moment": "^2.22.2",
 37 |     "react-html-parser": "^2.0.2"
 38 |   },
 39 |   "peerDependencies": {
 40 |     "apollo-boost": "^0.1.20",
 41 |     "chalk": "^2.4.1",
 42 |     "graphql": "^14.0.2",
 43 |     "node-fetch": "^2.3.0",
 44 |     "react": "^16.6.3",
 45 |     "react-apollo": "^2.2.4",
 46 |     "react-dom": "^16.6.3",
 47 |     "react-router-dom": "^4.3.1",
 48 |     "recompose": "^0.30.0"
 49 |   },
 50 |   "devDependencies": {
 51 |     "apollo-boost": "^0.1.20",
 52 |     "@babel/cli": "^7.1.5",
 53 |     "@babel/core": "^7.1.6",
 54 |     "@babel/plugin-external-helpers": "^7.0.0",
 55 |     "@babel/plugin-proposal-class-properties": "^7.1.0",
 56 |     "@babel/preset-env": "^7.1.6",
 57 |     "babel-core": "^7.0.0-bridge.0",
 58 |     "babel-jest": "^23.6.0",
 59 |     "babel-preset-react-app": "^6.1.0",
 60 |     "babel-register": "^6.26.0",
 61 |     "chalk": "^2.4.1",
 62 |     "classnames": "^2.2.6",
 63 |     "coveralls": "^3.0.2",
 64 |     "css-loader": "^1.0.1",
 65 |     "eslint": "^5.9.0",
 66 |     "graphql": "^14.0.2",
 67 |     "identity-obj-proxy": "^3.0.0",
 68 |     "jest": "^23.6.0",
 69 |     "node-fetch": "^2.3.0",
 70 |     "node-sass": "^4.10.0",
 71 |     "postcss-scss": "^2.0.0",
 72 |     "react": "^16.6.3",
 73 |     "react-apollo": "^2.2.4",
 74 |     "react-dom": "^16.6.3",
 75 |     "react-router-dom": "^4.3.1",
 76 |     "react-test-renderer": "^16.6.3",
 77 |     "react-testing-library": "^5.2.3",
 78 |     "recompose": "^0.30.0",
 79 |     "rollup": "^0.67.3",
 80 |     "rollup-plugin-babel": "^4.0.3",
 81 |     "rollup-plugin-commonjs": "^9.2.0",
 82 |     "rollup-plugin-json": "^3.1.0",
 83 |     "rollup-plugin-node-resolve": "^3.4.0",
 84 |     "rollup-plugin-postcss": "^1.6.3",
 85 |     "rollup-plugin-replace": "^2.1.0",
 86 |     "rollup-plugin-serve": "^0.6.0",
 87 |     "rollup-watch": "^4.3.1",
 88 |     "style-loader": "^0.23.1",
 89 |     "url-loader": "^1.1.2"
 90 |   },
 91 |   "proxy": "http://wpgraphql.example:8000",
 92 |   "browserslist": [
 93 |     ">0.2%",
 94 |     "not dead",
 95 |     "not ie <= 11",
 96 |     "not op_mini all"
 97 |   ],
 98 |   "jest": {
 99 |     "coverageDirectory": "./coverage/",
100 |     "collectCoverage": true,
101 |     "moduleNameMapper": {
102 |       "\\.(?:scss|css|sass)$": "identity-obj-proxy"
103 |     }
104 |   },
105 |   "scripts": {
106 |     "build": "rollup -c",
107 |     "start": "rollup -c -w",
108 |     "prepublish": "rm -rf ./dist && npm run build",
109 |     "tester": "jest test --no-cache --watch",
110 |     "test": "jest test --no-cache",
111 |     "coveralls": "jest test --coverage --coverageReporters=text-lcov | coveralls"
112 |   }
113 | }
114 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import babel from 'rollup-plugin-babel';
  3 | import resolve from 'rollup-plugin-node-resolve';
  4 | import commonjs from 'rollup-plugin-commonjs';
  5 | import replace from 'rollup-plugin-replace';
  6 | import postcss from 'rollup-plugin-postcss';
  7 | import json from 'rollup-plugin-json';
  8 | 
  9 | const env = 'development';
 10 | process.env.NODE_ENV = env;
 11 | process.env.BABEL_ENV = env;
 12 | 
 13 | export default {
 14 |     external: [
 15 |         'apollo-boost',
 16 |         'apollo-client',
 17 |         'apollo-link',
 18 |         'apollo-cache-inmemory',
 19 |         'graphql',
 20 |         'lodash',
 21 |         'moment',
 22 |         'node-fetch',
 23 |         'react',
 24 |         'react-apollo',
 25 |         'react-dom',
 26 |         'react-html-parser',
 27 |         'react-router-dom',
 28 |         'recompose',
 29 |         'uuid/v3',
 30 |     ],
 31 |     context: 'global',
 32 |     input: 'src/index.js',
 33 |     output: [
 34 |         {
 35 |             name: 'WPGraphQLComposer',
 36 |             file: 'dist/index.js',
 37 |             format: 'umd',
 38 |             sourcemap: true,
 39 |             globals: {
 40 |                 'apollo-boost': 'apollo-boost',
 41 |                 'apollo-client': 'apollo-client',
 42 |                 'apollo-link': 'apollo-link',
 43 |                 'apollo-cache-inmemory': 'apollo-cache-inmemory',
 44 |                 'graphql': 'graphql',
 45 |                 'lodash': '_',
 46 |                 'moment': 'moment',
 47 |                 'node-fetch': 'fetch',
 48 |                 'react': 'React',
 49 |                 'react-apollo': 'react-apollo',
 50 |                 'react-dom': 'ReactDOM',
 51 |                 'react-html-parser': 'react-html-parser',
 52 |                 'react-router-dom': 'react-router-dom',
 53 |                 'recompose': 'recompose',
 54 |                 'uuid/v3': 'v3',
 55 |             },
 56 |             exports: 'named',
 57 |         },
 58 |         {
 59 |             file: 'dist/index.module.js',
 60 |             format: 'es',
 61 |             sourcemap: true,
 62 |             globals: {
 63 |                 'apollo-boost': 'apollo-boost',
 64 |                 'apollo-client': 'apollo-client',
 65 |                 'apollo-link': 'apollo-link',
 66 |                 'apollo-cache-inmemory': 'apollo-cache-inmemory',
 67 |                 'graphql': 'graphql',
 68 |                 'lodash': '_',
 69 |                 'moment': 'moment',
 70 |                 'node-fetch': 'fetch',
 71 |                 'react': 'React',
 72 |                 'react-apollo': 'react-apollo',
 73 |                 'react-dom': 'ReactDOM',
 74 |                 'react-html-parser': 'ReactHtmlParser',
 75 |                 'react-router-dom': 'react-router-dom',
 76 |                 'recompose': 'recompose',
 77 |                 'uuid/v3': 'v3',
 78 |             },
 79 |             exports: 'named',
 80 |         },
 81 |     ],
 82 |     plugins: [
 83 |         postcss({ modules: true }),
 84 |         babel({ exclude: 'node_modules/**', runtimeHelpers: true }),
 85 |         replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
 86 |         resolve({ extensions: [ '.mjs', '.js', '.jsx', '.json' ] }),
 87 |         commonjs({
 88 |             namedExports: {
 89 |                 'node_modules/lodash/lodash.js': [
 90 |                     'each',
 91 |                     'get',
 92 |                     'filter',
 93 |                     'find',
 94 |                     'findIndex',
 95 |                     'isEmpty',
 96 |                     'isNull',
 97 |                     'map',
 98 |                     'omit',
 99 |                     'sortBy',
100 |                 ]
101 |             }
102 |         }),
103 |         json(),
104 |     ],
105 | };


--------------------------------------------------------------------------------
/src/composers.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { each, get, map } from 'lodash';
  3 | import { 
  4 |   branch, compose, renderComponent, mapProps,
  5 |   setDisplayName, wrapDisplayName,
  6 | } from 'recompose';
  7 | import { graphql } from 'react-apollo';
  8 | 
  9 | /**
 10 |  * HOCs for rendering a component when loading flag is found in props
 11 |  * maps loading progress props to provided component 
 12 |  * 
 13 |  * @param {React.Component} component - component to be rendered
 14 |  * @param {string} propName - name of prop holding loading flag
 15 |  * @param {object} loadingStatus - holds loading progress properties
 16 |  */
 17 | export const whileLoading = ({ view, cond = props => !!get(props, 'data.loading') }) =>
 18 |   branch(
 19 |     cond,
 20 |     renderComponent(view)
 21 |   );
 22 | 
 23 | /**
 24 |  * HOCs for catching errors in all child components
 25 |  */
 26 | export const errorHandler = BaseComponent => {
 27 |   const BaseFactory = React.createFactory(BaseComponent);
 28 | 
 29 |   class ErrorHandler extends React.Component {
 30 |     constructor(props) {
 31 |       super(props);
 32 |       this.state = {};
 33 |     }
 34 | 
 35 |     componentDidCatch(error, errorInfo) {
 36 |       this.setState({
 37 |         error: error.toString(),
 38 |         errorInfo: map(errorInfo, e => e.toString())
 39 |       })
 40 |     }
 41 | 
 42 |     render() {
 43 |       return BaseFactory({ ...this.props, ...this.state });
 44 |     }
 45 |   }
 46 | 
 47 |   if (process.env.NODE_ENV !== 'production') {
 48 |     return setDisplayName(wrapDisplayName(BaseComponent, 'errorHandler'))(ErrorHandler);
 49 |   }
 50 | 
 51 |   return ErrorHandler;
 52 | }
 53 | 
 54 | /**
 55 |  * HOCs for rendering a component when error flag/message is found in props
 56 |  * maps error message props to provided component
 57 |  * 
 58 |  * @param {React.Component} component - component to be rendered
 59 |  * @param {string} errorType - error type prop to be passed to component
 60 |  * @param {string} messagePropName - name of prop holding error message
 61 |  */
 62 | export const forError = ({
 63 |   view,
 64 |   type: errorType,
 65 |   errorProp = "data.error.message",
 66 |   cond = props => (!!get(props, errorProp) || !!get(props, 'error'))
 67 | }) =>
 68 |   compose(
 69 |     // Catch errors below
 70 |     errorHandler,
 71 |     // Catch errors above
 72 |     branch(
 73 |       props => cond(props) && !props.fallback,
 74 |       renderComponent(
 75 |         compose(
 76 |           mapProps(props => {
 77 |             const type = errorType || 'system';
 78 |             const graphqlError = get(props, errorProp);
 79 |             if (graphqlError) {
 80 |               return { message: graphqlError, type };
 81 |             }
 82 | 
 83 |             const systemError = get(props, 'error');
 84 |             if (systemError) {
 85 |               let message = systemError;
 86 |               const errorInfo = props.errorInfo;
 87 |               if (Array.isArray(errorInfo)) {
 88 |                 each(errorInfo, e => (message = `${message} ${e}`))
 89 |               } else if (errorInfo) {
 90 |                 message = `${message} ${errorInfo}`;
 91 |               }
 92 |               return { message, type };
 93 |             }
 94 | 
 95 |             return { message: 'Unknown error', type: 'system' };
 96 |           })
 97 |         )(view)
 98 |       ),
 99 | 
100 |     ),
101 |     mapProps(({ error, errorInfo, ...rest }) => {
102 |       return rest;
103 |     }),
104 |   );
105 | 
106 | /**
107 |  * @typedef QueryCondition 
108 |  * @property {gql} query - query to be request
109 |  * @property {func} cond - condition function ex. (props) -> !!props.id
110 |  * @property {object} config - graphql(query, config)
111 |  * @property {func} mapper - props mapper function
112 |  */
113 | 
114 | /**
115 |  * Return an instance of the `graphql` higher order component for 
116 |  * the first QueryCondition to return true.  
117 |  * @param {QueryCondition} queries 
118 |  */
119 | export const composeQuery = queries => 
120 |   compose(
121 |     ...map(
122 |       queries, 
123 |       ({
124 |         query,
125 |         config,
126 |         cond = () => true
127 |       }) => branch(
128 |           props => cond(props),
129 |           graphql(query, config),
130 |         )      
131 |     )
132 |   );
133 | 
134 | /**
135 |  * 
136 |  * @param {React.Component} defaultView
137 |  * @param {func} defaultMapper 
138 |  */
139 | export const baseComposer = ({
140 |   view: defaultView, mapper: defaultMapper
141 | }) => ({
142 |     view = defaultView, 
143 |     mapper = defaultMapper ,
144 |   } = {}) => compose(
145 |     mapProps(mapper)
146 |   )(view);
147 | 
148 | /**
149 |  * Returns composer function that creates a component 
150 |  * wrapped multiple components for handling rudimentary
151 |  * Loading->Error->mapper->...extraHocs(view)
152 |  * 
153 |  * @param {React.Component} view - default properties for view layer component
154 |  * @param {object} whileLoading - default properties for loading component
155 |  * @param {object} forError - default properties for error component
156 |  * @param {func} mapper - default function for mapping props
157 |  * @param {React.Component[]} extraHocs - default extra higher order components added before mapper
158 |  * @param {*} extraDefaults - default extra props passed to the view layer component
159 |  */
160 | export const standardComposer = ({
161 |   view: defaultView,
162 |   whileLoading: defaultWhileLoading,
163 |   forError: defaultForError,
164 |   mapper: defaultMapper,
165 |   extraHocs: defaultExtraHocs = [],
166 |   ...extraDefaults
167 | }) =>
168 |   ({
169 |     view = defaultView,
170 |     loading = defaultWhileLoading,
171 |     error = defaultForError,
172 |     mapper = defaultMapper,
173 |     extraHocs = defaultExtraHocs,
174 |     ...rest
175 |   } = {}) => compose(
176 |     whileLoading(loading),
177 |     forError(error),
178 |     ...extraHocs,
179 |     mapProps(props => ({ ...mapper(props), ...extraDefaults, ...rest })),
180 |   )(view);
181 | 
182 | /**
183 |  * Returns composer function that creates a component 
184 |  * wrapped multiple components for handling rudimentary
185 |  * and conditional graphql components
186 |  * GraphQL->Loading->Error->queryMapper->defaultExtraHocs->ExtraHocs->sharedMapper(view)
187 |  * 
188 |  * @param {React.Component} view - default properties for view layer component
189 |  * @param {object[]} queries - array of default properties of the GraphQL components
190 |  * @param {object} whileLoading - default properties for loading component
191 |  * @param {object} forError - default properties for error component
192 |  * @param {func} mapper - default function for mapping props
193 |  * @param {React.Component[]} extraHocs - default extra higher order components added before sharedMapper
194 |  * @param {*} extraDefaults - default extra props passed to the view layer component
195 |  */
196 | export const queryComposer = ({
197 |   view: defaultView,
198 |   queries: defaultQueries,
199 |   whileLoading: defaultWhileLoading,
200 |   forError: defaultForError,
201 |   sharedMapper: defaultSharedMapper = p => p,
202 |   extraHocs: defaultExtraHocs = [],
203 |   ...extraDefaults
204 | }) =>
205 |   ({
206 |     view = defaultView,
207 |     queries = defaultQueries,
208 |     loading = defaultWhileLoading,
209 |     error = defaultForError,
210 |     sharedMapper = defaultSharedMapper,
211 |     extraHocs = defaultExtraHocs,
212 |     ...rest
213 |   } = {}) => compose(
214 |     composeQuery(queries),
215 |     whileLoading(loading),
216 |     forError(error),
217 |     ...map(
218 |       queries, 
219 |       ({ cond = () => true, mapper = p => p }) => 
220 |         branch(
221 |           props => cond(props),
222 |           mapProps(mapper),
223 |         ),
224 |     ),
225 |     ...extraHocs,
226 |     mapProps(props => ({ ...sharedMapper(props), ...extraDefaults, ...rest })),
227 |   )(view);


--------------------------------------------------------------------------------
/src/header/header.jsx:
--------------------------------------------------------------------------------
 1 | // header.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import PropTypes from 'prop-types';
 7 | 
 8 | /**
 9 |  * Internal dependencies
10 |  */
11 | import { queryComposer } from '../composers';
12 | import { Error, Loading } from '../utils'
13 | import { Attachment } from '../post-type'
14 | import { headerMapper } from './mapper';
15 | import { HEADER_QUERY } from './query';
16 | 
17 | /**
18 |  * SCSS Module
19 |  */
20 | import './header.scss';
21 | 
22 | /**
23 |  * Header view component
24 |  * 
25 |  * @param {object} props
26 |  * 
27 |  * @returns {React.Component} 
28 |  */
29 | const header = ({ url, title, description, children, Attachment, ...rest }) => {
30 |   return (
31 |     <div className="site-header" role="banner" {...rest}>
32 |       <div id="masthead" className="site-branding">
33 |         <Attachment
34 |           customLogo
35 |           className="custom-logo"
36 |           alt={title}
37 |           fallback
38 |           style={{
39 |             width: '256px',
40 |             padding: '2em',
41 |           }}
42 |         />
43 |         <h1 className="site-title">{title}</h1>
44 |         <h1 className="site-description"><small>{description}</small></h1>
45 |       </div>
46 |       <div id="main-navigation" className="app-navigation">
47 |         {children}
48 |       </div>
49 |     </div>
50 |   )
51 | }
52 | 
53 | header.propTypes = {
54 |   Attachment: PropTypes.func.isRequired,
55 |   url: PropTypes.string,
56 |   title: PropTypes.string,
57 |   description: PropTypes.string,
58 |   logo: PropTypes.number,
59 | };
60 | 
61 | header.defaultProps = {
62 |   url :undefined,
63 |   title: undefined,
64 |   description: undefined,
65 |   logo: undefined,
66 | };
67 | 
68 | /**
69 |  * Creates composer for header component
70 |  */
71 | header.compose = queryComposer({
72 |   view: header,
73 |   Attachment,
74 |   whileLoading: { view: Loading },
75 |   forError: { view: Error, type: 'query' },
76 |   queries: [{ query: HEADER_QUERY }],
77 |   sharedMapper: headerMapper,
78 | });
79 | 
80 | /**
81 |  * Compose default Header Component
82 |  * @var {React.Component} Header
83 |  */
84 | const Header = header.compose();
85 | 
86 | export { header, Header };


--------------------------------------------------------------------------------
/src/header/header.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * HEADER COMPONENT
 3 |  */
 4 |  .app-header {
 5 |   width: 100%;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   align-items: flex-end;
 9 |   padding-right: 2em;
10 | }
11 | 
12 | .app-header > * {
13 |   margin: 0em auto 1em;
14 | }
15 | 
16 | .app-header .site-branding {
17 |   display: inline-flex;
18 |   flex-direction: column;
19 |   align-items: center;
20 |   padding: 2em 4em 1.25em;
21 | }
22 | 
23 | .app-header .site-branding .site-logo {
24 |   margin: 0 auto;
25 | }
26 | 
27 | .app-header .site-branding .site-title, {
28 |   font-size: 2em;
29 | }
30 | 
31 | .app-header .site-branding .site-description {
32 |   font-size: 1.9em;
33 | }


--------------------------------------------------------------------------------
/src/header/index.js:
--------------------------------------------------------------------------------
1 | // Header component exporter
2 | export * from './header';
3 | export * from './mapper';
4 | export * from './query';
5 | 


--------------------------------------------------------------------------------
/src/header/mapper.js:
--------------------------------------------------------------------------------
 1 | // header-mapper.js
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import { get } from 'lodash';
 6 | 
 7 | /**
 8 |  * Header component mapper function
 9 |  * 
10 |  * @param {object} props
11 |  * 
12 |  * @returns {object}
13 |  */
14 | export const headerMapper = ({ data, ...rest }) => {
15 |   const title = get(data, 'allSettings.generalSettingsTitle');
16 |   const description = get(data, 'allSettings.generalSettingsDescription');
17 |   const url = get(data, 'allSettings.generalSettingsUrl');
18 |   const logo = get(data, 'themeMods.customLogo');
19 |   
20 |   return { title, url, description, logo, ...rest };
21 | }


--------------------------------------------------------------------------------
/src/header/query.js:
--------------------------------------------------------------------------------
 1 | import { gql } from 'apollo-boost';
 2 | 
 3 | export const HEADER_QUERY = gql`
 4 |   query HeaderQuery {
 5 |     allSettings {
 6 |       generalSettingsTitle
 7 |       generalSettingsDescription
 8 |       generalSettingsUrl
 9 |     }
10 |   }
11 | `;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Default Template Exporter
 3 |  */
 4 | export * from './provider'
 5 | export * from './composers';
 6 | export * from './utils';
 7 | export * from './user';
 8 | export * from './post-type';
 9 | export * from './menu';
10 | export * from './header';
11 | export * from './main';
12 | 


--------------------------------------------------------------------------------
/src/main/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kidunot89/wp-graphql-composer/96296b72b7a5b58dfe63da20d9618973f9d4f77d/src/main/README.md


--------------------------------------------------------------------------------
/src/main/index.js:
--------------------------------------------------------------------------------
1 | // Main component exporter
2 | export { default as wpRouting } from './wp-routing';
3 | export * from './router';
4 | export * from './query';
5 | export * from './main';
6 | 


--------------------------------------------------------------------------------
/src/main/main.jsx:
--------------------------------------------------------------------------------
 1 | // main.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import PropTypes from 'prop-types';
 7 | import classNames from 'classnames';
 8 | 
 9 | /**
10 |  * Internal dependencies
11 |  */
12 | import { queryComposer } from '../composers';
13 | import { Loading, Error } from '../utils';
14 | import { Archive, Page, Post } from '../post-type';
15 | import wpRouting from './wp-routing';
16 | import { mapLoopProps, router } from './router'; 
17 | import { LOOP_QUERY } from './query';
18 | 
19 | /**
20 |  * SCSS Module
21 |  */
22 | import styles from './main.module.scss';
23 | 
24 | /**
25 |  * Main view component
26 |  * 
27 |  * @param {object} props
28 |  * 
29 |  * @returns {React.Component}
30 |  */
31 | const main = ({ Archive, children, className: added, Page, Post, Routes, topChildren, ...rest }) => {
32 |   const className = classNames(
33 |     styles.main,
34 |     added,
35 |   );
36 |   return (
37 |     <main role="main" className={className} {...rest}>
38 |       {topChildren}
39 |       <Routes archive={Archive} page={Page} post={Post} />
40 |       {children}
41 |     </main>
42 |   );
43 | };
44 | 
45 | main.propTypes = {
46 |   Archive: PropTypes.func.isRequired,
47 |   Page: PropTypes.func.isRequired,
48 |   Post: PropTypes.func.isRequired,
49 |   Routes: PropTypes.func.isRequired,
50 |   className: PropTypes.string,
51 | };
52 | 
53 | main.defaultProps = {
54 |   className: undefined,
55 | };
56 | 
57 | /**
58 |  * Creates composer for main component
59 |  */
60 | main.compose = queryComposer({
61 |   view: main,
62 |   Archive,
63 |   Page,
64 |   Post,
65 |   queries: [{ query: LOOP_QUERY, mapper: mapLoopProps }],
66 |   whileLoading: { view: Loading },
67 |   forError: { view: Error },
68 |   extraHocs: [router(wpRouting)],
69 | });
70 | 
71 | /**
72 |  * Compose default Main Component
73 |  * @var {React.Component} Main
74 |  */
75 | const Main = main.compose();
76 | 
77 | export { main, Main };


--------------------------------------------------------------------------------
/src/main/main.module.scss:
--------------------------------------------------------------------------------
1 | .main {
2 |   max-width: 100vw;
3 |   margin: 0 auto;
4 |   overflow-x: hidden;
5 | }


--------------------------------------------------------------------------------
/src/main/query.js:
--------------------------------------------------------------------------------
 1 | import { gql } from 'apollo-boost';
 2 | 
 3 | export const LOOP_QUERY = gql`
 4 |   query LoopQuery {
 5 |     allSettings {
 6 |       readingSettingsPageForPosts
 7 |       readingSettingsPageOnFront
 8 |       readingSettingsPostsPerPage
 9 |       permalinkSettingsStructure
10 |       permalinkSettingsTagBase
11 |       permalinkSettingsCategoryBase
12 |     }
13 |   }
14 | `;


--------------------------------------------------------------------------------
/src/main/router.js:
--------------------------------------------------------------------------------
 1 | import React, { createFactory } from 'react';
 2 | import { get } from 'lodash';
 3 | import { setDisplayName, wrapDisplayName } from 'recompose';
 4 | 
 5 | export const mapLoopProps = ({ data, ...rest }) => {
 6 |   const pageForPostsSlug = get(data, 'allSettings.readingSettingsPageForPosts');
 7 |   const pageOnFront = get(data, 'allSettings.readingSettingsPageOnFront');
 8 |   const structure = get(data, 'allSettings.permalinkSettingsStructure');
 9 |   const tagBase = get(data, 'allSettings.permalinkSettingsTagBase');
10 |   const categoryBase = get(data, 'allSettings.permalinkSettingsCategoryBase');
11 |   const limit = get(data, 'allSettings.readingSettingsPostsPerPage');
12 |   
13 |   return {
14 |     pageForPostsSlug,
15 |     pageOnFront,
16 |     structure,
17 |     tagBase,
18 |     categoryBase,
19 |     limit,
20 |     ...rest
21 |   };
22 | };
23 | 
24 | export const router = (routesView) => (BaseComponent) => {
25 |   const BaseFactory = createFactory(BaseComponent);
26 | 
27 |   const RoutesProcessor = ({
28 |     pageForPostsSlug,
29 |     pageOnFront,
30 |     structure,
31 |     tagBase,
32 |     categoryBase,
33 |     limit,
34 |     ...rest
35 |   }) => {
36 |     const Routes = routesView({
37 |       limit, 
38 |       pageOnFront, 
39 |       structure, 
40 |       tagBase, 
41 |       categoryBase, 
42 |       pageForPostsSlug
43 |     });
44 |     
45 |     return BaseFactory({
46 |       Routes,
47 |       ...rest
48 |     });
49 |   }
50 | 
51 |   if (process.env.NODE_ENV !== 'production') {
52 |     return setDisplayName(wrapDisplayName(BaseComponent, 'routesProcessor'))(RoutesProcessor)
53 |   }
54 | 
55 |   return RoutesProcessor;
56 | }


--------------------------------------------------------------------------------
/src/main/wp-routing.js:
--------------------------------------------------------------------------------
  1 | // wp-routing.js
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import PropTypes from 'prop-types';
  7 | import { Switch, Route } from 'react-router-dom';
  8 | 
  9 | /**
 10 |  * Renders routes using react-router-dom to mimic WordPress routing.
 11 |  * 
 12 |  * @return { React.Component }
 13 |  */
 14 | const wpRoutes = ({
 15 |   limit,
 16 |   pageOnFront,
 17 |   structure,
 18 |   pageForPostsSlug,
 19 |   categoryBase,
 20 |   tagBase
 21 | }) => 
 22 |   ({
 23 |     archive: Archive,
 24 |     page: Page,
 25 |     post: Post,
 26 |     frontChildren,
 27 |     children,
 28 |     ...rest
 29 |   }) => {
 30 |     // Formats path-to-regex expression from permalink structure
 31 |     if (!structure) {
 32 |       throw new Error('Pretty permalinks must be on');
 33 |     }
 34 |     
 35 |     const postsPath = structure.replace(/%([A-z]+)%/g, ':$1')
 36 |       .replace(/:(monthnum|day|hour|minute|second)/g, ':$1(\\d{2})')
 37 |       .replace(/:(post_id)/g, ':$1(\\d{3})')
 38 |       .replace(/:(year)/g, ':$1(\\d{4})');
 39 | 
 40 |     return (
 41 |       <Switch {...rest}>
 42 |         {/* Extra Routes */}
 43 |         { frontChildren }
 44 | 
 45 |         {/* Home */}
 46 |         <Route exact path={`/`} render={() => {
 47 |           if (pageOnFront) {
 48 |             return (<Page id={pageOnFront} />);
 49 |           }
 50 |           return (<Archive first={limit} noHeader showContent />)
 51 |         }} />
 52 |         
 53 |         {/* Archive by year */}
 54 |         <Route
 55 |           exact
 56 |           path={`/:year(\\d{4})`}
 57 |           render={({ match: { params } }) => {
 58 |             const year = parseInt(params.year, 10);
 59 | 
 60 |             return (
 61 |               <Archive first={limit} where={{ year }} />
 62 |             );
 63 |           }}
 64 |         />
 65 |         {/* Archive by month */}
 66 |         <Route
 67 |           exact
 68 |           path={`/:year(\\d{4})/:monthnum(\\d{2})/:day(\\d{2})`}
 69 |           render={({ match: { params } }) => {
 70 |             const day = parseInt(params.day, 10);
 71 |             const year = parseInt(params.year, 10);
 72 |             const month = parseInt(params.monthnum, 10);
 73 |             
 74 |             return (
 75 |               <Archive first={limit} where={{ month, year, day }} />
 76 |             );
 77 |           }}
 78 |         />
 79 |         {/* Archive by month */}
 80 |         <Route
 81 |           exact
 82 |           path={`/:year(\\d{4})/:monthnum(\\d{2})`}
 83 |           render={({ match: { params } }) => {
 84 |             const year = parseInt(params.year, 10);
 85 |             const month = parseInt(params.monthnum, 10);
 86 |             
 87 |             return (
 88 |               <Archive first={limit} where={{ month, year }} />
 89 |             );
 90 |           }}
 91 |         />
 92 |         
 93 |         {/* Archive by category */}
 94 |         <Route
 95 |           path={`/${categoryBase && categoryBase !== '' ? categoryBase : 'category'}/:category`}
 96 |           render={({ match: { params } }) => (
 97 |             <Archive first={limit} where={params} />
 98 |           )}
 99 |         />
100 |         
101 |         {/* Archive by tag */}
102 |         <Route
103 |           path={`/${tagBase && tagBase !== '' ? tagBase : 'tag'}/:tag`}
104 |           render={({ match: { params } }) => (
105 |             <Archive first={limit} where={params} />
106 |           )} 
107 |         />
108 |         
109 |         {/* Archive by author */}
110 |         <Route
111 |           path={`/author/:author`}
112 |           render={({ match: { params } }) => (
113 |             <Archive first={limit} where={params} />
114 |           )}
115 |         />
116 |         
117 |         {/* Archive by search */}
118 |         <Route
119 |           path={`/search/:search`}
120 |           render={({ match: { params } }) => {
121 |             return (
122 |               <Archive first={limit} where={params} />
123 |             )
124 |         }}
125 |         />
126 |         
127 |         {/* Page for posts */}
128 |         {pageForPostsSlug & (
129 |           <Route
130 |             exact
131 |             path={`/${pageForPostsSlug}`}
132 |             render={() => (
133 |               <Archive first={limit} />
134 |             )} 
135 |           />
136 |         )}
137 |         
138 |         {/* Post */}
139 |         <Route
140 |           exact
141 |           path={postsPath}
142 |           render={({ match: { params } }) => {
143 |             const { post_id, postname } = params;
144 |             if (post_id) return (<Post postId={post_id} />);
145 |             if (postname) return (<Post slug={postname} />);
146 |             else throw new Error('Post not found');
147 |           }}
148 |         />
149 | 
150 |         {/* Extra Routes */}
151 |         { children }
152 | 
153 |         {/* Page */}
154 |         <Route
155 |           path={`/(.*)`}
156 |           render={({ match: { params } }) => (<Page uri={params[0]} />)}
157 |         />
158 |       </Switch>
159 |     );
160 |   };
161 | 
162 | wpRoutes.propTypes = {
163 |   limit: PropTypes.number,
164 |   pageOnFront: PropTypes.string,
165 |   structure: PropTypes.string.isRequired,
166 |   pageForPostsSlug: PropTypes.string,
167 |   categoryBase: PropTypes.string,
168 |   tagBase: PropTypes.string,
169 | };
170 | 
171 | wpRoutes.defaultProps = {
172 |   limit: 10,
173 |   pageOnFront: undefined,
174 |   pageForPostsSlug: undefined,
175 |   categoryBase: undefined,
176 |   tagBase: undefined,
177 | };
178 | 
179 | export default wpRoutes;


--------------------------------------------------------------------------------
/src/menu/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export const menuInitialState = {
4 |   homeUrl: '',
5 | };
6 | 
7 | export const MenuContext = React.createContext(
8 |   menuInitialState
9 | );


--------------------------------------------------------------------------------
/src/menu/index.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Menu Exporter
3 |  */
4 | export * from './query';
5 | export * from './context';
6 | export * from './menu';
7 | export * from './menu-item';
8 | export * from './sub-menu';
9 | 


--------------------------------------------------------------------------------
/src/menu/menu-item.jsx:
--------------------------------------------------------------------------------
  1 | // menu-item.jsx
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import { NavLink } from 'react-router-dom';
  7 | import PropTypes from 'prop-types';
  8 | import { get, omit, isEmpty } from 'lodash';
  9 | 
 10 | /**
 11 |  * Internal dependencies
 12 |  */
 13 | import { MENU_ITEM_QUERY } from './query';
 14 | import { queryComposer } from '../composers'
 15 | import { Error, Loading } from '../utils';
 16 | import { MenuContext } from './context';
 17 | 
 18 | /**
 19 |  * SCSS Module
 20 |  */
 21 | import styles from './menu-item.module.scss';
 22 | 
 23 | /**
 24 |  * MenuItem Link component
 25 |  * 
 26 |  * @param {object} props
 27 |  * 
 28 |  * @returns {React.Component} 
 29 |  */
 30 | const Link = ({ url, children, homeUrl, ...rest }) => {
 31 |   if (!url || url === '#') return (
 32 |     <span className={styles.text}>
 33 |       {children}
 34 |     </span>
 35 |   );
 36 | 
 37 |   if (url.startsWith(homeUrl)) return (
 38 |     <NavLink className={styles.link} exact to={`${url.substring(homeUrl.length)}`} {...rest}>
 39 |       {children}
 40 |     </NavLink>
 41 |   );
 42 | 
 43 |   return (
 44 |     <a className={styles.link} href={url} {...rest}>
 45 |       {children}
 46 |     </a>
 47 |   );
 48 | } 
 49 | 
 50 | /**
 51 |  * MenuItem view component
 52 |  * 
 53 |  * @param {object} props
 54 |  * 
 55 |  * @returns {React.Component} 
 56 |  */
 57 | const menuItem = ({
 58 |   url, label, items, description,
 59 |   cssClasses, SubMenu, MenuItem,
 60 |   ...rest
 61 | }) => (
 62 |   <React.Fragment>
 63 |     <MenuContext.Consumer>
 64 |       {({ homeUrl }) => (
 65 |         <Link {...{ ...rest, url, homeUrl }}>
 66 |           {label}
 67 |           {description &&
 68 |             <div className={styles.description}>
 69 |               {description}
 70 |             </div>
 71 |           }
 72 |         </Link>
 73 |       )}
 74 |     </MenuContext.Consumer>
 75 |     {!isEmpty(items) && <SubMenu {...{ items, SubMenu, MenuItem }} />}
 76 |   </React.Fragment>
 77 | );
 78 | 
 79 | menuItem.propTypes = {
 80 |   SubMenu: PropTypes.func.isRequired,
 81 |   MenuItem: PropTypes.func.isRequired,
 82 |   url: PropTypes.string,
 83 |   label: PropTypes.string,
 84 |   items: PropTypes.arrayOf(PropTypes.shape({})),
 85 | };
 86 | 
 87 | menuItem.defaultProps = {
 88 |   url: undefined,
 89 |   label: undefined,
 90 |   items: [],
 91 | };
 92 | 
 93 | /**
 94 |  * Creates composer for menuItem component
 95 |  */
 96 | menuItem.compose = queryComposer({
 97 |   view: menuItem,
 98 |   whileLoading: { view: Loading },
 99 |   forError: { view: Error },
100 |   queries: [{
101 |     query: MENU_ITEM_QUERY,
102 |     config: {
103 |       options: ({ id }) => ({ id }),
104 |       skip: ({ noSubMenu }) => !!noSubMenu,
105 |     }
106 |   }],
107 |   sharedMapper: ({ data, ...rest, }) => {
108 |     const items = get(data, 'menuItem.childItems.nodes');
109 |     return { items, ...omit(rest, 'id') };
110 |   },
111 | });
112 | 
113 | /**
114 |  * Compose default MenuItem Component
115 |  * @var {React.Component} MenuItem
116 |  */
117 | const MenuItem = menuItem.compose();
118 | 
119 | export { menuItem, MenuItem, Link };
120 | 


--------------------------------------------------------------------------------
/src/menu/menu-item.module.scss:
--------------------------------------------------------------------------------
 1 | .description {
 2 |   font-size: 80%;
 3 | }
 4 | 
 5 | .link { text-decoration: none; }
 6 | 
 7 | .link,
 8 | .text {
 9 |   order: 0;
10 |   flex-grow: 8;
11 |   flex-shrink: 0;
12 | 
13 |   padding: 1.5em 1em;
14 |   transition:
15 |     color 250ms ease-out,
16 |     background-color 320ms ease-in;
17 | }


--------------------------------------------------------------------------------
/src/menu/menu.jsx:
--------------------------------------------------------------------------------
  1 | // menu.jsx
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import PropTypes from 'prop-types';
  7 | import classNames from 'classnames';
  8 | import { get, isEmpty, map } from 'lodash';
  9 | 
 10 | /**
 11 |  * Internal dependencies
 12 |  */
 13 | import { queryComposer } from '../composers'
 14 | import { Error, Loading } from '../utils';
 15 | import { MENU_WHERE_QUERY, MENU_QUERY } from './query';
 16 | import { MenuItem } from './menu-item';
 17 | import { SubMenu } from './sub-menu';
 18 | import { menuStateManager } from './state-manager';
 19 | 
 20 | /**
 21 |  * SCSS Module
 22 |  */
 23 | import styles from './menu.module.scss';
 24 | 
 25 | /**
 26 |  * Menu view component
 27 |  * 
 28 |  * @param {object} props
 29 |  * 
 30 |  * @returns {React.Component} 
 31 |  */
 32 | const menu = ({ as: Element, className: addedCN, slug, items, SubMenu, MenuItem, ...rest }) => {
 33 |   const className = classNames(styles.menu, addedCN);
 34 |   
 35 |   return (
 36 |     <Element id={`menu-${slug}`} className={className} {...rest}>
 37 |       { !isEmpty(items) &&
 38 |         map(items, ({ id, menuItemId, cssClasses, ...r }) => {
 39 |           const itemClassName = classNames(
 40 |             styles.item,
 41 |             ...cssClasses,
 42 |             `menu-item-${menuItemId}`,
 43 |           );
 44 | 
 45 |           return (
 46 |             <li
 47 |               id={`menu-item-${menuItemId}`}
 48 |               className={itemClassName}
 49 |               key={id}
 50 |             >
 51 |               <MenuItem id={id} {...{...r, SubMenu, MenuItem }} />
 52 |             </li>
 53 |           );
 54 |         })
 55 |       }
 56 |     </Element>
 57 |   );
 58 | };
 59 | 
 60 | menu.propTypes = {
 61 |   slug: PropTypes.string.isRequired,
 62 |   SubMenu: PropTypes.func.isRequired,
 63 |   MenuItem: PropTypes.func.isRequired,
 64 |   items: PropTypes.arrayOf(PropTypes.shape({})),
 65 |   as: PropTypes.oneOfType([
 66 |     PropTypes.string,
 67 |     PropTypes.func,
 68 |   ]),
 69 |   className: PropTypes.string,
 70 | }
 71 | 
 72 | menu.defaultProps = {
 73 |   items: [],
 74 |   as: 'ul',
 75 |   className: undefined,
 76 | };
 77 | 
 78 | /**
 79 |  * Creates composer for menu component
 80 |  */
 81 | menu.compose = queryComposer({
 82 |   view: menu,
 83 |   MenuItem,
 84 |   SubMenu,
 85 |   whileLoading: { view: Loading },
 86 |   forError: { view: Error },
 87 |   queries: [{
 88 |     cond: ({ menuId, location, slug }) => !!menuId || !!location || !!slug,
 89 |     query: MENU_WHERE_QUERY,
 90 |     config: {
 91 |       options: ({ menuId, location, slug }) => ({ menuId, location, slug }),
 92 |       skip: ({ optional, location, menuId, slug }) => !location && !menuId && !slug && optional ,
 93 |     },
 94 |     mapper: ({ data, ...rest }) => ({ 
 95 |       homeUrl: get(data, 'generalSettings.url'),
 96 |       menu: get(data, 'menus.nodes[0]'),
 97 |       ...rest
 98 |     }),
 99 |   }, {
100 |     cond: ({ id }) => !!id,
101 |     query: MENU_QUERY,
102 |     config: {
103 |       options: ({ id }) => ({ id }),
104 |       skip: ({ optional, id }) => !id && optional 
105 |     },
106 |     mapper: ({ data, ...rest }) => ({
107 |       homeUrl: get(data, 'generalSettings.url'),
108 |       menu: get(data, 'menu'),
109 |       ...rest
110 |     }),
111 |   }],
112 |   extraHocs: [menuStateManager],
113 | });
114 | 
115 | /**
116 |  * Compose default Menu Component
117 |  * @var {React.Component} Menu
118 |  */
119 | const Menu = menu.compose();
120 | 
121 | export { menu, Menu };


--------------------------------------------------------------------------------
/src/menu/menu.module.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Menu Component Styling
 3 |  */
 4 | .menu {
 5 |   position: relative;
 6 |   margin: 0 auto;
 7 |   padding: 0; 
 8 |   max-width: 100%;
 9 |   list-style: none;
10 |   display: flex;
11 |   flex-direction: column;
12 | 
13 |   .item {
14 |     display: inline-flex;
15 |     flex-flow: row wrap;
16 |     align-content: space-between;
17 |     justify-content: space-between;
18 |     width: 100%;
19 |     padding: 0;
20 |     margin: 0;
21 | 
22 |     &:after {
23 |       content: "";
24 |       display: table;
25 |       clear: both;
26 |     }
27 | 
28 |   }
29 | }  


--------------------------------------------------------------------------------
/src/menu/query.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Menu Queries
 3 |  */
 4 | import { gql } from 'apollo-boost';
 5 | 
 6 | export const MENU_QUERY = gql`
 7 |   query MenuQuery($id: ID!){
 8 |     menu(id: $id) {
 9 |       id
10 |       slug
11 |       menuItems{
12 | 				nodes {
13 |           id
14 |           menuItemId
15 |           url
16 |           label
17 |           cssClasses
18 |           description
19 |         }
20 |       }
21 |     }
22 |     generalSettings {
23 |       url
24 |     }
25 |   }
26 | `;
27 | 
28 | export const MENU_WHERE_QUERY = gql`
29 |   query MenuWhereQuery(
30 |     $menuId: Int
31 |     $location: MenuLocationEnum
32 |     $slug: String
33 |   ){
34 |     menus(where: { id: $menuId, location: $location, slug: $slug }) {
35 |       nodes{
36 |         id
37 |         slug
38 |         menuItems{
39 |           nodes {
40 |             id
41 |             menuItemId
42 |             url
43 |             label
44 |             cssClasses
45 |             description
46 |           }
47 |         }
48 |       }
49 |     }
50 |     generalSettings {
51 |       url
52 |     }
53 |   }
54 | `;
55 | 
56 | export const MENU_ITEM_QUERY = gql`
57 |   query MenuItemQuery($id: ID!) {
58 |     menuItem(id: $id) {
59 |       childItems{
60 |         nodes{
61 |           id
62 |           menuItemId
63 |           url
64 |           label
65 |           cssClasses
66 |           description
67 |         }
68 |       }
69 |     }
70 |   }
71 | `;


--------------------------------------------------------------------------------
/src/menu/state-manager.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { get, omit } from 'lodash';
 3 | import { setDisplayName, wrapDisplayName } from 'recompose';
 4 | import { MenuContext, menuInitialState } from './context';
 5 | 
 6 | export const menuStateManager = (BaseComponent) => {
 7 |   const BaseFactory = React.createFactory(BaseComponent);
 8 | 
 9 |   class MenuStateManager extends React.PureComponent {
10 |     constructor(props) {
11 |       super(props);
12 |       this.state = menuInitialState;
13 |     }
14 | 
15 |     render() {
16 |       const { menu, homeUrl, ...rest } = this.props;
17 | 
18 |       const newProps = {
19 |         items: get(menu, 'menuItems.nodes'),
20 |         ...omit(menu, 'id', 'menuItems'),
21 |         ...omit(rest, 'id'),
22 |       };
23 | 
24 |       return (
25 |         <MenuContext.Provider value={{ homeUrl }}>
26 |           <BaseFactory {...newProps} />
27 |         </MenuContext.Provider>
28 |       );
29 |     }
30 |   }
31 | 
32 |   if (process.env.NODE_ENV !== 'production') {
33 |     return setDisplayName(wrapDisplayName(BaseComponent, 'menuStateManager'))(MenuStateManager)
34 |   }
35 | 
36 |   return MenuStateManager;
37 | 
38 | }


--------------------------------------------------------------------------------
/src/menu/sub-menu.jsx:
--------------------------------------------------------------------------------
  1 | // sub-menu.jsx
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import PropTypes from 'prop-types';
  7 | import { map } from 'lodash';
  8 | import classNames from 'classnames';
  9 | 
 10 | /**
 11 |  * Internal dependencies
 12 |  */
 13 | import { Error, Loading, Icon } from '../utils';
 14 | import { baseComposer } from '../composers';
 15 | 
 16 | /**
 17 |  * SCSS Module
 18 |  */
 19 | import baseStyles from './menu.module.scss';
 20 | import styles from './sub-menu.module.scss';
 21 | 
 22 | /**
 23 |  * SubMenu view component
 24 |  */
 25 | class subMenu extends React.Component {
 26 |   constructor(props) {
 27 |     super(props);
 28 |     this.toggle = this.toggle.bind(this);
 29 |     this.state = { isCollapsed: true };
 30 |   }
 31 | 
 32 |   toggle() {
 33 |     this.setState({ isCollapsed: !this.state.isCollapsed })
 34 |   }
 35 | 
 36 |   render() {
 37 |     const className = classNames(
 38 |       baseStyles.menu,
 39 |       styles.menu,
 40 |       { [styles.on]: this.state.isCollapsed }
 41 |     );
 42 | 
 43 |     const dropdownClassName = classNames(
 44 |       styles.dropdown,
 45 |       { [styles.on]: this.state.isCollapsed }
 46 |     );
 47 |     const { isCollapsed } = this.state;
 48 |     const { MenuItem, SubMenu, items, ...rest } = this.props;
 49 | 
 50 |     return (
 51 |       <React.Fragment>
 52 |         <button
 53 |           className={dropdownClassName}
 54 |           aria-expanded={isCollapsed}
 55 |           onClick={this.toggle}
 56 |         >
 57 |           <Icon className={styles.icon} name="arrow_drop_down" dark />
 58 |         </button>
 59 |         <ul className={className} {...rest}>
 60 |           {map(items, ({ id, menuItemId, cssClasses, ...r }) => {
 61 |             const itemClassName = classNames(
 62 |               baseStyles.item,
 63 |               styles.item,
 64 |               ...cssClasses,
 65 |               `menu-item-${menuItemId}`,
 66 |             );
 67 | 
 68 |             return (
 69 |               <li
 70 |                 id={`menu-item-${menuItemId}`}
 71 |                 className={itemClassName}
 72 |                 key={id}
 73 |               >
 74 |                 <MenuItem id={id} {...{ ...r, MenuItem, SubMenu }} />
 75 |               </li>
 76 |             );
 77 |           })}
 78 |         </ul>
 79 |       </React.Fragment>
 80 |     )
 81 |   }
 82 | }
 83 | 
 84 | subMenu.propTypes = {
 85 |   SubMenu: PropTypes.func.isRequired,
 86 |   MenuItem: PropTypes.func.isRequired,
 87 |   items: PropTypes.arrayOf(PropTypes.shape({})),
 88 | };
 89 | 
 90 | subMenu.defaultProps = {
 91 |   items: [],
 92 | };
 93 | 
 94 | /**
 95 |  * Creates composer for subMenu component
 96 |  */
 97 | subMenu.compose = baseComposer({
 98 |   view: subMenu,
 99 |   whileLoading: { view: Loading },
100 |   forError: { view: Error },
101 |   mapper: props => props,
102 | });
103 | 
104 | /**
105 |  * Compose default SubMenu Component
106 |  * @var {React.Component} SubMenu
107 |  */
108 | const SubMenu = subMenu.compose();
109 | 
110 | export { subMenu, SubMenu };


--------------------------------------------------------------------------------
/src/menu/sub-menu.module.scss:
--------------------------------------------------------------------------------
 1 | .dropdown { // Sub Menu toggle button
 2 |   flex-basis: auto;
 3 |   flex-grow: 1;
 4 |   flex-shrink: 1;
 5 |   margin: auto;
 6 | 
 7 |   position: relative;
 8 |   width: 3em;
 9 |   height: 3em;
10 |   padding: 1em;
11 |   background: transparent;
12 |   border: none;
13 | 
14 | 
15 |   &.on {}
16 | }
17 | 
18 | .menu {
19 |   margin-left: 0.8em;
20 |   padding: 0;
21 |   flex-basis: 100%;
22 |   order: 2;
23 | 
24 |   overflow: hidden;
25 |   max-height: 0;
26 |   transition: max-height 550ms ease-out;
27 | 
28 |   &.on {
29 |     transition: max-height 3s ease-out;
30 |     max-height: 100vh;
31 |   }
32 | 
33 |   &:before {
34 |     content: "";
35 |     display: table;
36 |     clear: both;
37 |   }
38 | }


--------------------------------------------------------------------------------
/src/post-type/archive.jsx:
--------------------------------------------------------------------------------
  1 | // archive.jsx
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import PropTypes from 'prop-types';
  7 | import { map } from 'lodash';
  8 | 
  9 | /**
 10 |  * Internal dependencies
 11 |  */
 12 | import { queryComposer } from '../composers';
 13 | import { Error, Loading } from '../utils';
 14 | import { archiveMapper } from './mappers';
 15 | import { post } from './post';
 16 | import { ARCHIVE_QUERY } from './query'
 17 | 
 18 | /**
 19 |  * SCSS Module
 20 |  */
 21 | import './archive.scss';
 22 | 
 23 | /**
 24 |  * Archives view component
 25 |  * 
 26 |  * @param {object} props
 27 |  * 
 28 |  * @returns {React.Component} 
 29 |  */
 30 | const archive = ({
 31 |   resultView: Result,
 32 |   container,
 33 |   containerProps,
 34 |   header,
 35 |   noHeader,
 36 |   resultsData,
 37 |   ...rest
 38 | }) => {
 39 |   const Results = () => (
 40 |     <React.Fragment>
 41 |       {!noHeader && (
 42 |         <header className="page-header">
 43 |           <h1 className="page-title">{header}</h1>
 44 |         </header>
 45 |       )}
 46 |       {map(resultsData, ({ id, ...r}) => (
 47 |         <Result {...r} id={id} key={id} {...rest} />
 48 |       ))}
 49 |     </React.Fragment>
 50 |   );
 51 | 
 52 |   if (container === true) {
 53 |     return (
 54 |       <div {...containerProps }>
 55 |         <Results />
 56 |       </div>
 57 |     )
 58 |   } else if ( container ) {
 59 |     const Container = container;
 60 | 
 61 |     return (
 62 |       <Container {...containerProps }>
 63 |         <Results />
 64 |       </Container>
 65 |     );
 66 |   }
 67 | 
 68 |   return (<Results />);
 69 | };
 70 | 
 71 | archive.propTypes = {
 72 |   resultView: PropTypes.func.isRequired,
 73 |   container: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.func]),
 74 |   containerProps: PropTypes.shape({}),
 75 |   noHeader: PropTypes.bool,
 76 |   header: PropTypes.string,
 77 |   resultsData: PropTypes.arrayOf(PropTypes.shape({})),
 78 | }
 79 | 
 80 | archive.defaultProps = {
 81 |   container: undefined,
 82 |   containerProps: {},
 83 |   noHeader: false,
 84 |   header: undefined,
 85 |   resultsData: [],
 86 | }
 87 | 
 88 | /**
 89 |  * Default where args for ARCHIVE_QUERY
 90 |  */
 91 | const whereArgsDefaults = {
 92 |   category: null,
 93 |   tag: null,
 94 |   year: null,
 95 |   month: null,
 96 |   day: null,
 97 |   author: null,
 98 |   search: null,
 99 | };
100 | 
101 | /**
102 |  * Creates composer for archive component
103 |  */
104 | archive.compose = queryComposer({
105 |   view: archive,
106 |   resultView: post,
107 |   queries: [{ 
108 |     query: ARCHIVE_QUERY,
109 |     config: {
110 |       options: ({ first, where }) => ({ variables: { first, ...whereArgsDefaults, ...where } })
111 |     }
112 |   }],
113 |   whileLoading: { view: Loading },
114 |   forError: { view: Error },
115 |   sharedMapper: archiveMapper,
116 | });
117 | 
118 | /**
119 |  * Compose default Archive Component
120 |  * @var {React.Component} Archive
121 |  */
122 | const Archive = archive.compose();
123 | 
124 | export { archive, Archive };
125 | 


--------------------------------------------------------------------------------
/src/post-type/archive.scss:
--------------------------------------------------------------------------------
 1 | /* Extra Small */
 2 | 
 3 | /* Small */
 4 | @media (min-width: 576px) {
 5 |   
 6 | }
 7 | 
 8 | /* Medium */
 9 | @media (min-width: 768px) {
10 |   
11 | }
12 | 
13 | /* Large */
14 | @media (min-width: 992px) {
15 | 
16 | }
17 | 
18 | /* Extra Large */
19 | @media (min-width: 1200px) {
20 | 
21 | }


--------------------------------------------------------------------------------
/src/post-type/attachment-mapper.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Attachment Props Mapper
  3 |  */
  4 | import {
  5 |   filter, get, isEmpty, map,
  6 |   omit, sortBy
  7 | } from 'lodash';
  8 | 
  9 | /**
 10 |  * Maps image source for srcSet attribute
 11 |  * 
 12 |  * @param {string} sourceUrl - url to image,
 13 |  * @param {string} width - string representation of image width, 
 14 |  */
 15 | const mapSources = ({ sourceUrl, width }) => (`${sourceUrl} ${width}w`);
 16 | 
 17 | /**
 18 |  * Maps image source for sizes attribute
 19 |  * 
 20 |  * @param {string} rawWidth - string representation of image width
 21 |  */
 22 | const mapBreakpoints = ({ width: rawWidth }) => {
 23 |   const width = parseInt(rawWidth, 10);
 24 |   if (width > 1200) return `${width}px` 
 25 |   else if (width <= 1200 && width > 992) return `(max-width: 1200px) ${width}px`;
 26 |   else if (width <= 992 && width > 768) return `(max-width: 992px) ${width}px`;
 27 |   else if (width <= 768 && width > 576) return `(max-width: 768px) ${width}px`;
 28 |   else return `(max-width: 576px) ${width}px`;
 29 | };
 30 | 
 31 | /**
 32 |  * Maps alternate images to breakpoints and returns an array of media query strings
 33 |  * 
 34 |  * @param {array} sizes - data about image sources
 35 |  * @returns {array}
 36 |  */
 37 | const reduceBreakpoints = (sizes) => {
 38 |   const breakpoints = map(
 39 |     filter(sizes, ({width}) => parseInt(width, 10) >= 576),
 40 |     mapBreakpoints
 41 |   );
 42 | 
 43 |   const reduced = [];
 44 |   const sort = /^(?:\(max-width: \d+px\) )?(\d+)px$/;
 45 |   const sm = sortBy(
 46 |     filter(breakpoints, mediaQuery => /^\(max-width: 576px\)/.test(mediaQuery)),
 47 |     mediaQuery => parseInt(mediaQuery.match(sort), 10),
 48 |   );
 49 |   const md = sortBy(
 50 |     filter(breakpoints, mediaQuery => /^\(max-width: 768px\)/.test(mediaQuery)),
 51 |     mediaQuery => parseInt(mediaQuery.match(sort), 10),
 52 |   );
 53 |   const lg = sortBy(
 54 |     filter(breakpoints, mediaQuery => /^\(max-width: 992px\)/.test(mediaQuery)),
 55 |     mediaQuery => parseInt(mediaQuery.match(sort), 10),
 56 |   );
 57 |   const xl = sortBy(
 58 |     filter(breakpoints, mediaQuery => /^\(max-width: 1200px\)/.test(mediaQuery)),
 59 |     mediaQuery => parseInt(mediaQuery.match(sort), 10),
 60 |   );
 61 |   const max = sortBy(
 62 |     filter(breakpoints, mediaQuery => !/^\(max-width:/.test(mediaQuery)),
 63 |     mediaQuery => parseInt(mediaQuery.match(sort), 10),
 64 |   );
 65 | 
 66 |   if (!isEmpty(sm)) reduced.push(sm[0]);
 67 |   if (!isEmpty(md)) reduced.push(md[0]);
 68 |   if (!isEmpty(lg)) reduced.push(lg[0]);
 69 |   if (!isEmpty(xl)) reduced.push(xl[0]);
 70 |   if (!isEmpty(max)) reduced.push(max[0]);
 71 | 
 72 |   return reduced;
 73 | };
 74 | 
 75 | const variables = [
 76 |   'id',
 77 |   'mediaItemId',
 78 |   'slug',
 79 |   'uri',
 80 |   'customLogo',
 81 | ];
 82 | 
 83 | export const attachmentMapper = ({ data, src, alt, ...rest }) => {
 84 |   const imgSrc = get(data, 'mediaItemBy.sourceUrl') || src;
 85 |   const altText = alt || get(data, 'mediaItemBy.altText');
 86 | 
 87 |   const sizes = get(data, 'mediaItemBy.mediaDetails.sizes');
 88 |   if (sizes && sizes.length > 0) {
 89 |     const sources = map(sizes, mapSources);
 90 |     const srcSizes = reduceBreakpoints(sizes);
 91 | 
 92 |     return {
 93 |       src: imgSrc,  alt: altText, srcSet: sources.join(', '), sizes: srcSizes.join(', '),
 94 |       ...omit(rest, ['fallback', ...variables]),
 95 |     };
 96 |   }
 97 | 
 98 |   return { src: imgSrc,  alt: altText, ...omit(rest, ['fallback', ...variables]) };
 99 | };
100 | 
101 | export const customLogoMapper = ({ data, src, alt, ...rest }) => {
102 |   const imgSrc = get(data, 'themeMods.customLogo.sourceUrl') || src;
103 |   const altText = alt || get(data, 'themeMods.customLogo.altText');
104 | 
105 |   const sizes = get(data, 'themeMods.customLogo.mediaDetails.sizes');
106 |   if (sizes && sizes.length > 0) {
107 |     const sources = map(sizes, mapSources);
108 |     const srcSizes = reduceBreakpoints(sizes);
109 | 
110 |     return {
111 |       src: imgSrc,  alt: altText, srcSet: sources.join(', '), sizes: srcSizes.join(', '),
112 |       ...omit(rest, ['fallback', ...variables]),
113 |     };
114 |   }
115 | 
116 |   return { src: imgSrc,  alt: altText, ...omit(rest, ['fallback', ...variables]) };
117 | }


--------------------------------------------------------------------------------
/src/post-type/attachment.jsx:
--------------------------------------------------------------------------------
 1 | // attachment.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react'
 6 | import PropTypes from 'prop-types';
 7 | import classNames from 'classnames';
 8 | 
 9 | /**
10 |  * Internal dependencies
11 |  */
12 | import { Error, Loading } from '../utils'; 
13 | import { queryComposer } from '../composers';
14 | import { CUSTOM_LOGO_QUERY, ATTACHMENT_QUERY } from './query';
15 | import { customLogoMapper, attachmentMapper } from './attachment-mapper';
16 | 
17 | /**
18 |  * SCSS Module
19 |  */
20 | import styles from './attachment.module.scss';
21 | 
22 | /**
23 |  * Attachment view component
24 |  * 
25 |  * @param {object} props
26 |  * 
27 |  * @returns {React.Component} 
28 |  */
29 | const attachment = ({ src, className: added, alt, ...rest }) => {
30 |   const className = classNames(
31 |     styles.attachment,
32 |     added,
33 |   );
34 | 
35 |   return (src) ?
36 |     (<img src={src} className={className} alt={alt} {...rest} />) :
37 |     null;
38 | }
39 | 
40 | attachment.propTypes = {
41 |   src: PropTypes.string,
42 |   alt: PropTypes.string,
43 | };
44 | 
45 | attachment.defaultProps = {
46 |   src: undefined,
47 |   alt: 'image',
48 | };
49 | 
50 | /**
51 |  * Creates composer for attachment component
52 |  */
53 | attachment.compose = queryComposer({
54 |   view: attachment,
55 |   whileLoading: { view: Loading },
56 |   forError: { view: Error, type: '404-image' },
57 |   queries: [
58 |     {
59 |       query: CUSTOM_LOGO_QUERY,
60 |       cond: ({ customLogo }) => !!customLogo,
61 |       mapper: customLogoMapper,
62 |     },
63 |     {
64 |       query: ATTACHMENT_QUERY,
65 |       cond: ({ customLogo }) => !customLogo,
66 |       mapper: attachmentMapper,
67 |       config: {
68 |         options: ({ id, mediaItemId, slug, uri }) => ({ id, mediaItemId, slug, uri }),
69 |         skip: ({ id, mediaItemId, slug, uri }) => !id && !mediaItemId && !slug && !uri
70 |       }
71 |     },
72 |   ],
73 | });
74 | 
75 | /**
76 |  * Compose default Attachment Component
77 |  * @var {React.Component} Attachment
78 |  */
79 | const Attachment = attachment.compose();
80 | 
81 | export { attachment, Attachment };
82 | 


--------------------------------------------------------------------------------
/src/post-type/attachment.module.scss:
--------------------------------------------------------------------------------
 1 | /* Extra Small */
 2 | 
 3 | /* Small */
 4 | @media (min-width: 576px) {
 5 |   
 6 | }
 7 | 
 8 | /* Medium */
 9 | @media (min-width: 768px) {
10 |   
11 | }
12 | 
13 | /* Large */
14 | @media (min-width: 992px) {
15 | 
16 | }
17 | 
18 | /* Extra Large */
19 | @media (min-width: 1200px) {
20 | 
21 | }


--------------------------------------------------------------------------------
/src/post-type/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export const postCommentsInitialState = {
4 |   editing: {},
5 |   workingState: {},
6 | };
7 | export const PostCommentsContext = React.createContext(
8 |   postCommentsInitialState
9 | );


--------------------------------------------------------------------------------
/src/post-type/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Post-Type Exporter
 3 |  */
 4 | export * from './mappers';
 5 | export * from './query';
 6 | export * from './attachment';
 7 | export * from './page';
 8 | export * from './post';
 9 | export * from './archive';
10 | 


--------------------------------------------------------------------------------
/src/post-type/mappers.js:
--------------------------------------------------------------------------------
 1 | // mappers.js
 2 | /**
 3 |  * External dependencies 
 4 |  */
 5 | import { find, get, map, omit } from 'lodash';
 6 | 
 7 | export const postPropsMapper = post => {
 8 |   const featured = get(post, 'featuredImage.id');
 9 |   const details = {
10 |     author: get(post, 'author'),
11 |     categories: get(post, 'categories.nodes'),
12 |     date: get(post, 'date'),
13 |     modified: get(post, 'modified'),
14 |     tags: get(post, 'tags.nodes'),
15 |   };
16 | 
17 |   return {
18 |     details,
19 |     featured,
20 |     ...omit(post, [
21 |       'author',
22 |       'categories',
23 |       'featuredImage',
24 |       'tags',
25 |       'date',
26 |       'modified',
27 |     ])
28 |   };
29 | };
30 | 
31 | const monthNames = [
32 |   '', 'January', 'February', 'March', 
33 |   'April', 'May', 'June', 'July', 
34 |   'August', 'September', 'October', 'November',
35 |   'December'
36 | ]
37 | 
38 | const thisYear = new Date().getFullYear();
39 | 
40 | const getTermName = (term_slug, results, taxonomy = 'tags') => {
41 |   const allTerms = get(results, `[0].details.${taxonomy}`);
42 |   const term = find(allTerms, ({ slug }) => slug === term_slug);
43 |   return term.name;
44 | }
45 | 
46 | /**
47 |  * Return archive header based on query variables
48 |  * @param {object} where  
49 |  * @param {number} resultCount 
50 |  */
51 | const getHeader = ({ category, tag, day, month, year, author, search }, results) => {
52 |   switch(true) {
53 |     case results.length === 0:
54 |       return 'No posts found';
55 | 
56 |     case !!category:
57 |       return `Posts categorized in ${getTermName(category, results, 'categories')}`;
58 |     
59 |     case !!tag:
60 |       return `Posts tagged in ${getTermName(tag, results)}`;
61 | 
62 |     case !!year && !!month && !!day:
63 |       return `Posts made ${monthNames[month]} ${day}, ${year}`;
64 | 
65 |     case !!year && !!month:
66 |       return `Posts made ${monthNames[month]} ${year}`;
67 | 
68 |     case !!year:
69 |       return (thisYear === year) ? 
70 |         'Posts made this year' : 
71 |         (thisYear - 1 === year) ? 
72 |           'Posts made last year' :
73 |           `Posts made in ${year}`;
74 | 
75 |     case !!author:
76 |       return `Posts made by ${author}`;
77 | 
78 |     case !!search:
79 |       return `Searching "${search}"`;
80 | 
81 |     default:
82 |       return 'Recent Posts';
83 |   }
84 | };
85 | 
86 | export const archiveMapper = ({ data, first, ...rest }) => {
87 |   const resultsData = map(get(data, 'posts.nodes'), postPropsMapper );
88 |   const header = getHeader(data.variables, resultsData);  
89 | 
90 |   return { header, resultsData, ...rest };
91 | }


--------------------------------------------------------------------------------
/src/post-type/page.jsx:
--------------------------------------------------------------------------------
 1 | // page.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react'
 6 | import PropTypes from 'prop-types';
 7 | import ReactHtmlParser from 'react-html-parser';
 8 | import classNames from 'classnames';
 9 | 
10 | /**
11 |  * Internal dependencies
12 |  */
13 | import { Error, Loading } from '../utils'; 
14 | import { queryComposer } from '../composers';
15 | import { PAGE_QUERY, PAGE_BY_QUERY } from './query';
16 | import { pageStateManager } from './state-managers';
17 | 
18 | /**
19 |  * SCSS Module
20 |  */
21 | import styles from './post.module.scss';
22 | import './post.global.scss';
23 | 
24 | /**
25 |  * Page view component
26 |  * 
27 |  * @param {object} props
28 |  * 
29 |  * @returns {React.Component} 
30 |  */
31 | const page = ({
32 |   as: Container, pageId, title, content,
33 |   date, modified, className: added, ...rest
34 | }) => {
35 |   const className = classNames(
36 |     styles.page,
37 |     added,
38 |   );
39 | 
40 |   return (
41 |     <Container
42 |       id={`page-${pageId}`}
43 |       className={className}
44 |       {...rest}
45 |     >
46 |       <div className="entry-content">{ReactHtmlParser(content)}</div>
47 |     </Container>
48 |   );
49 | }
50 | 
51 | page.propTypes = {
52 |   title: PropTypes.string,
53 |   content: PropTypes.string,
54 |   className: PropTypes.string,
55 |   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
56 | };
57 | 
58 | page.defaultProps = {
59 |   title: undefined,
60 |   content: '',
61 |   className: undefined,
62 |   as: 'article', 
63 | };
64 | 
65 | /**
66 |  * Creates composer for page component
67 |  */
68 | page.compose = queryComposer({
69 |   view: page,
70 |   queries: [{
71 |     cond: ({ pageId, uri }) => !!pageId || !!uri,
72 |     query: PAGE_BY_QUERY,
73 |     config: { options: ({ pageId, uri }) => ({ pageId, uri }) }
74 |   }, {
75 |     cond: ({ id }) => !!id,
76 |     query: PAGE_QUERY,
77 |     config: { options: ({ id }) => ({ id }) }
78 |   }],
79 |   whileLoading: { view: Loading },
80 |   forError: { view: Error, type: '404-page' },
81 |   extraHocs: [pageStateManager],
82 | });
83 | 
84 | /**
85 |  * Compose default Page Component
86 |  * @var {React.Component} Page
87 |  */
88 | const Page = page.compose();
89 | 
90 | export { page, Page };
91 | 


--------------------------------------------------------------------------------
/src/post-type/post.global.scss:
--------------------------------------------------------------------------------
  1 | .alignleft,
  2 | .alignright {
  3 |   max-width: 636px !important;	/* Let's work to make this !important unnecessary */
  4 |   img,
  5 |   figcaption {
  6 |     max-width: 50%;
  7 |     width: 50%;
  8 |   } 
  9 | }
 10 | 
 11 | .alignleft {
 12 |   figcaption {
 13 |     clear: left;
 14 |   }
 15 | 
 16 |   img,
 17 |   figcaption {
 18 |     float: left;
 19 |     margin-right: 1.5em;
 20 |   }
 21 | }
 22 | 
 23 | .alignright {
 24 |   figcaption {
 25 |     clear: right;
 26 |   }
 27 | 
 28 |   img,
 29 |   figcaption {
 30 |     float: right;
 31 |     margin-left: 1.5em;
 32 |   }
 33 | }
 34 | 
 35 | .aligncenter {
 36 |   clear: both;
 37 |   display: block;
 38 |   margin-left: auto;
 39 |   margin-right: auto;
 40 | }
 41 | 
 42 | .entry-content > * {
 43 |   margin: 36px auto;
 44 |   padding-left: 14px;
 45 |   padding-right: 14px;
 46 | }
 47 | 
 48 | .entry-content > .alignwide {
 49 |   max-width: 1100px;
 50 | }
 51 | 
 52 | .entry-content > .alignfull {
 53 |   margin: 1.5em 0;
 54 |   max-width: 100%;
 55 | }
 56 | 
 57 | .entry-content ul,
 58 | .entry-content ol {
 59 |   margin: 1.5em auto;
 60 |   list-style-position: outside;
 61 | }
 62 | 
 63 | .wp-block-video video {}
 64 | 
 65 | .wp-block-image img {
 66 |   display: block;
 67 | }
 68 | 
 69 | .wp-block-image.alignleft,
 70 | .wp-block-image.alignright {
 71 |   width: 100%
 72 | }
 73 | 
 74 | .wp-block-image.alignfull img {
 75 |   width: 100vw;
 76 | }
 77 | 
 78 | .wp-block-gallery:not(.components-placeholder) {
 79 |   margin: 1.5em auto;
 80 | }
 81 | 
 82 | .wp-block-cover-text p {
 83 |   padding: 1.5em 14px;
 84 | }
 85 | 
 86 | ul.wp-block-latest-posts.alignwide,
 87 | ul.wp-block-latest-posts.alignfull,
 88 | ul.wp-block-latest-posts.is-grid.alignwide,
 89 | ul.wp-block-latest-posts.is-grid.alignwide {
 90 |   padding: 0 14px;
 91 | }
 92 | 
 93 | .wp-block-table {
 94 |   display: block;
 95 |   overflow-x: auto;
 96 | }
 97 | 
 98 | .wp-block-table table {
 99 |   border-collapse: collapse;
100 |   width: 100%
101 | }
102 | 
103 | .wp-block-table td, .wp-block-table th {
104 |   padding: .5em;
105 | }
106 | 
107 | .entry-content li {
108 |   margin-left: 2.5em;
109 |   margin-bottom: 6px;
110 | }
111 | 
112 | .entry-content ul ul,
113 | .entry-content ol ol,
114 | .entry-content ul ol,
115 | .entry-content ol ul {
116 |   margin: 0 auto;
117 | }
118 | 
119 | .entry-content ul ul li,
120 | .entry-content ol ol li,
121 | .entry-content ul ol li,
122 | .entry-content ol ul li {
123 |   margin-left: 0;
124 | }
125 | 
126 | 
127 | .wp-block-embed.type-video > .wp-block-embed__wrapper {
128 |   position: relative;
129 |   width: 100%;
130 |   height: 0;
131 |   padding-top: 56.25%;
132 | }
133 | 
134 | .wp-block-embed.type-video > .wp-block-embed__wrapper > iframe {
135 |   position: absolute;
136 |   width: 100%;
137 |   height: 100%;
138 |   top: 0;
139 |   left: 0;
140 |   bottom: 0;
141 |   right: 0;
142 | }
143 | 
144 | .wp-block-quote.is-large {
145 |   margin: 0 auto 16px;
146 | }
147 | 
148 | .wp-block-pullquote>p:first-child {
149 |   margin-top: 0;
150 | }
151 | 
152 | .wp-block-separator {
153 |   margin: 3em auto;
154 |   padding: 0;
155 | }
156 | 
157 | @media screen and (min-width: 768px) {
158 |   .wp-block-cover-text p {
159 |     padding: 1.5em 0;
160 |   }
161 | 
162 |   .entry-content > * {
163 |     padding-left: 0px;
164 |     padding-right: 0px;
165 |   }
166 | 
167 | }
168 | 
169 | /*--------------------------------------------------------------
170 | # Block Color Palette Colors
171 | --------------------------------------------------------------*/
172 | .has-strong-blue-color {
173 |   color: #0073aa;
174 | }
175 | 
176 | .has-strong-blue-background-color {
177 |   background-color: #0073aa;
178 | }
179 | 
180 | .has-lighter-blue-color {
181 |   color: #229fd8;
182 | }
183 | 
184 | .has-lighter-blue-background-color {
185 |   background-color: #229fd8;
186 | }
187 | 
188 | .has-very-light-gray-color {
189 |   color: #eee;
190 | }
191 | 
192 | .has-very-light-gray-background-color {
193 |   background-color: #eee;
194 | }
195 | 
196 | .has-very-dark-gray-color {
197 |   color: #444;
198 | }
199 | 
200 | .has-very-dark-gray-background-color {
201 |   background-color: #444;
202 | }


--------------------------------------------------------------------------------
/src/post-type/post.jsx:
--------------------------------------------------------------------------------
  1 | // post.jsx
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import PropTypes from 'prop-types';
  7 | import ReactHtmlParser from 'react-html-parser';
  8 | import classNames from 'classnames';
  9 | 
 10 | /**
 11 |  * Internal dependencies
 12 |  */
 13 | import { Error, Loading } from '../utils'; 
 14 | import { queryComposer } from '../composers';
 15 | import { Attachment } from './attachment';
 16 | import { POST_QUERY, POST_BY_QUERY } from './query';
 17 | import { postStateManager } from './state-managers';
 18 | 
 19 | /**
 20 |  * SCSS Module
 21 |  */
 22 | import './post.global.scss';
 23 | import styles from './post.module.scss';
 24 | 
 25 | /**
 26 |  * Post view component
 27 |  * 
 28 |  * @param {object} props
 29 |  * 
 30 |  * @returns {React.Component}
 31 |  */
 32 | const post = ({
 33 |   featured,
 34 |   postId,
 35 |   title,
 36 |   content,
 37 |   details,
 38 |   attachmentView: Attachment,
 39 |   detailsView: Details,
 40 |   as: Container,
 41 |   className: added,
 42 |   ...rest
 43 | }) => {
 44 |   const className = classNames( 
 45 |     styles.post,
 46 |     added,
 47 |   );
 48 | 
 49 |   return (
 50 |     <Container
 51 |       id={`post-${postId}`}
 52 |       className={className}
 53 |       {...rest}
 54 |     >
 55 |       {Attachment && <Attachment
 56 |         id={featured}
 57 |         data-attachment-id={featured}
 58 |         className="wp-post-image"
 59 |         fallback
 60 |       />}
 61 |       {ReactHtmlParser(content)}
 62 |       {Details && <Details className={styles.details} {...details} />}
 63 |     </Container>
 64 |   );
 65 | };
 66 | 
 67 | post.propTypes = {
 68 |   featured: PropTypes.number,
 69 |   postId: PropTypes.number.isRequired,
 70 |   title: PropTypes.string,
 71 |   content: PropTypes.string,
 72 |   details: PropTypes.shape({
 73 |     author: PropTypes.shape({}),
 74 |     date: PropTypes.string,
 75 |     modified: PropTypes.string,
 76 |     tags: PropTypes.arrayOf(PropTypes.shape({})),
 77 |     categories: PropTypes.arrayOf(PropTypes.shape({})),
 78 |   }),
 79 |   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 80 | };
 81 | 
 82 | post.defaultProps = {
 83 |   featured: undefined,
 84 |   title: undefined,
 85 |   content: undefined,
 86 |   details: undefined,
 87 |   as: 'article',
 88 | };
 89 | 
 90 | /**
 91 |  * Creates composer for page component
 92 |  */
 93 | post.compose = queryComposer({
 94 |   view: post,
 95 |   attachmentView: Attachment,
 96 |   queries: [{
 97 |     cond: ({ postId, uri, slug }) => !!postId || !!uri || !!slug,
 98 |     query: POST_BY_QUERY,
 99 |     config: { options: ({ postId, uri, slug }) => ({ postId, uri, slug }) }
100 |   }, {
101 |     cond: ({ id }) => !!id,
102 |     query: POST_QUERY,
103 |     config: { options: ({ id }) => ({ id }) }
104 |   }],
105 |   whileLoading: { view: Loading },
106 |   forError: { view: Error, type: '404-post' },
107 |   extraHocs: [postStateManager],
108 | });
109 | 
110 | /**
111 |  * Compose default Post Component
112 |  * @var {React.Component} Post
113 |  */
114 | const Post = post.compose();
115 | 
116 | export { post, Post };
117 | 


--------------------------------------------------------------------------------
/src/post-type/post.module.scss:
--------------------------------------------------------------------------------
 1 | .page,
 2 | .post {
 3 |   .entry-footer {
 4 |     max-width: initial;
 5 |     padding: 0.5em 1.5em 1.5em; 
 6 |     margin: 0 auto;
 7 |     border-bottom: none;
 8 | 
 9 |     a {
10 |       text-decoration: none;
11 |       transition: color 350ms ease-in;
12 | 
13 |       &:hover {
14 |         transition: color 550ms ease-out;
15 |       }
16 | 
17 |       &:visited {}
18 |     }
19 | 
20 |     .posted-on {
21 |       .date, 
22 |       .modified {
23 |         position: relative;
24 |         display: inline-block;
25 |       }
26 | 
27 |       .modified::before {
28 |       }
29 |     }
30 | 
31 |     .byline,
32 |     .tags-links,
33 |     .cat-links {
34 |       a {
35 |         position: relative;
36 |         display: inline-block;
37 |       }
38 |     }
39 | 
40 |     .byline a::before { content: ""; }
41 |     .tags-links a::before { content: ""; }
42 |     .cat-links a::before { content: ""; }
43 | 
44 |     .tags-links a::after {
45 |       content: ", ";
46 |     }
47 | 
48 |     .tags-links a:last-of-type::after {
49 |       content: none;
50 |     }
51 |   }
52 | }


--------------------------------------------------------------------------------
/src/post-type/query.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Post-Type Queries and Mutations
  3 |  */
  4 | import { gql } from 'apollo-boost';
  5 | 
  6 | /**
  7 |  * Queries
  8 |  */
  9 | export const CUSTOM_LOGO_QUERY = gql`
 10 |   query CustomLogoQuery {
 11 |     themeMods {
 12 |       customLogo {
 13 |         id
 14 |         altText
 15 |         mediaType
 16 |         sourceUrl
 17 |         mediaDetails{
 18 |           sizes {
 19 |             width
 20 |             height
 21 |             sourceUrl
 22 |           }
 23 |         }
 24 |       }
 25 |     }
 26 |   }
 27 | `;
 28 | 
 29 | export const ATTACHMENT_QUERY = gql`
 30 |   query AttachmentQuery($id: String, $mediaItemId: ID, $slug: String, $uri: String) {
 31 |     mediaItemBy(id: $id, mediaItemId: $mediaItemId, slug: $slug, uri: $uri){
 32 |       id
 33 |       altText
 34 |       mediaType
 35 |       sourceUrl
 36 |       mediaDetails{
 37 |         sizes {
 38 |           width
 39 |           height
 40 |           sourceUrl
 41 |         }
 42 |       }
 43 |     }
 44 |   }
 45 | `;
 46 | 
 47 | export const PAGE_QUERY = gql`
 48 |   query PageQuery($id: ID!) {
 49 |     page(id: $id){
 50 |       id
 51 |       uri
 52 |       pageId
 53 |       title
 54 |       content
 55 |       date
 56 |       modified
 57 |     }
 58 |   }
 59 | `;
 60 | 
 61 | export const PAGE_BY_QUERY = gql`
 62 |   query PageByQuery($uri: String, $pageId: Int) {
 63 |     pageBy(uri: $uri, pageId: $pageId) {
 64 |       id
 65 |       uri
 66 |       pageId
 67 |       title
 68 |       content
 69 |       date
 70 |       modified
 71 |     }
 72 |   }
 73 | `;
 74 | 
 75 | export const POST_QUERY = gql`
 76 |   query PostQuery($id: ID!) {
 77 |     post(id: $id) {
 78 |       id
 79 |       postId
 80 |       slug
 81 |       uri
 82 |       content
 83 |       date
 84 |       modified
 85 |       title
 86 |       permalink
 87 |       author {
 88 |         id
 89 |         userId
 90 |         nicename
 91 |         avatar {
 92 |           url
 93 |           foundAvatar
 94 |         }
 95 |       }
 96 |       categories {
 97 |         nodes {
 98 |           id
 99 |           name
100 |         }
101 |       }
102 |       tags {
103 |         nodes {
104 |           id
105 |           name
106 |         }
107 |       }
108 |       featuredImage {
109 |         id
110 |         mediaItemId
111 |         title
112 |         altText
113 |         sourceUrl
114 |       }
115 |     }
116 |   }
117 | `;
118 | 
119 | export const POST_BY_QUERY = gql`
120 |   query PostQuery($postId: Int, $slug: String, $uri: String) {
121 |     postBy(postId: $postId, slug: $slug, uri: $uri) {
122 |       id
123 |       postId
124 |       slug
125 |       uri
126 |       content
127 |       date
128 |       modified
129 |       title
130 |       permalink
131 |       author {
132 |         id
133 |         userId
134 |         nicename
135 |         avatar {
136 |           url
137 |           foundAvatar
138 |         }
139 |       }
140 |       categories {
141 |         nodes {
142 |           id
143 |           name
144 |         }
145 |       }
146 |       tags {
147 |         nodes {
148 |           id
149 |           name
150 |         }
151 |       }
152 |       featuredImage {
153 |         id
154 |         mediaItemId
155 |         title
156 |         altText
157 |         sourceUrl
158 |       }
159 |     }
160 |   }
161 | `;
162 | 
163 | export const ARCHIVE_QUERY = gql`
164 |   query ArchiveQuery(
165 |       $first: Int,
166 |       $category: String,
167 |       $tag: String,
168 |       $year: Int,
169 |       $month: Int,
170 |       $day: Int,
171 |       $author: String,
172 |       $search: String
173 |     ) {
174 |     posts(
175 |       first: $first,
176 |       where: {
177 |         categoryName: $category,
178 |         tag: $tag,
179 |         authorName: $author,
180 |         dateQuery: { year: $year, month: $month, day: $day },
181 |         search: $search
182 |       }
183 |     ) {
184 |       nodes {
185 |         id
186 |         postId
187 |         excerpt
188 |         content
189 |         date
190 |         modified
191 |         title
192 |         permalink
193 |         featuredImage {
194 |           id
195 |           mediaItemId
196 |           title
197 |           altText
198 |           sourceUrl
199 |         }
200 |         tags {
201 |           nodes {
202 |             id
203 |             name
204 |             slug
205 |           }
206 |         }
207 |         categories {
208 |           nodes {
209 |             id
210 |             name
211 |             slug
212 |           }
213 |         }
214 |         author {
215 |           id
216 |           userId
217 |           nicename
218 |           avatar {
219 |             url
220 |             foundAvatar
221 |           }
222 |         }
223 |       }
224 |     }
225 |   }
226 | `;


--------------------------------------------------------------------------------
/src/post-type/state-managers.js:
--------------------------------------------------------------------------------
 1 | // state-managers.js
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import { get } from 'lodash';
 7 | import { setDisplayName, wrapDisplayName } from 'recompose';
 8 | 
 9 | /**
10 |  * Internal dependencies 
11 |  */
12 | import { postPropsMapper } from './mappers';
13 | 
14 | export const pageStateManager = (BaseComponent) => {
15 |   const BaseFactory = React.createFactory(BaseComponent);
16 | 
17 |   class PageStateManager extends React.PureComponent {
18 |     componentDidUpdate(prevProps) {
19 |       const { id, pageId, uri } = this.props;
20 |       if(
21 |         prevProps.id !== id ||
22 |         prevProps.pageId !== pageId ||
23 |         prevProps.uri !== uri
24 |       ) {
25 |         this.props.data.refetch();
26 |       }
27 |     }
28 | 
29 |     render() {
30 |       const { data: { page, pageBy }, ...rest } = this.props;
31 | 
32 |       const newProps = { ...page, ...pageBy, ...rest };
33 | 
34 |       return BaseFactory(newProps);
35 |     }
36 |   }
37 | 
38 |   if (process.env.NODE_ENV !== 'production') {
39 |     return setDisplayName(wrapDisplayName(BaseComponent, 'pageStateManager'))(PageStateManager)
40 |   }
41 | 
42 |   return PageStateManager;
43 | }
44 | 
45 | export const postStateManager = (BaseComponent) => {
46 |   const BaseFactory = React.createFactory(BaseComponent);
47 | 
48 |   class PostStateManager extends React.PureComponent {
49 |     componentDidUpdate(prevProps) {
50 |       const { id, pageId, uri, slug } = this.props;
51 |       if(
52 |         prevProps.id !== id ||
53 |         prevProps.pageId !== pageId ||
54 |         prevProps.uri !== uri ||
55 |         prevProps.slug !== slug
56 |       ) {
57 |         this.props.data.refetch();
58 |       }
59 |     }
60 | 
61 |     render() {
62 |       const { data, ...rest } = this.props;
63 |       const post = get(data, 'post') || get(data, 'postBy');
64 | 
65 |       return BaseFactory({...postPropsMapper(post), ...rest});
66 |     }
67 |   }
68 | 
69 |   if (process.env.NODE_ENV !== 'production') {
70 |     return setDisplayName(wrapDisplayName(BaseComponent, 'postStateManager'))(PostStateManager)
71 |   }
72 | 
73 |   return PostStateManager;
74 | }


--------------------------------------------------------------------------------
/src/provider.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ApolloClient from 'apollo-client';
 3 | import { ApolloProvider } from 'react-apollo';
 4 | import { ApolloLink, concat } from 'apollo-link';
 5 | import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 6 | 
 7 | export const createClient = (httpLink, fragmentData) => {
 8 |   const cache = { dataIdFromObject: object => object.id };
 9 |   if ( fragmentData ) {
10 |     cache.fragmentMatcher = new IntrospectionFragmentMatcher({
11 |       introspectionQueryResultData: fragmentData,
12 |     });
13 |   }
14 | 
15 |   // Add the authorization to the headers
16 |   const authMiddleware = new ApolloLink((operation, forward) => {
17 |     const userToken = localStorage.getItem('user-token');
18 |     if ( userToken ) {
19 |       operation.setContext({
20 |         headers: {
21 |           authorization: userToken,
22 |         } 
23 |       });
24 |     }
25 | 
26 |     return forward(operation);
27 |   });
28 | 
29 |   return new ApolloClient({
30 |     link: concat(authMiddleware, httpLink),
31 |     cache: new InMemoryCache(cache),
32 |     clientState: {
33 | 
34 |     }
35 |   });
36 | };
37 | 
38 | export const WPProvider = ({ fragmentData, link, children }) => {
39 |   const client = createClient(link, fragmentData);
40 |   return (
41 |     <ApolloProvider client={client}>
42 |       {children}
43 |     </ApolloProvider>
44 |   )
45 | };


--------------------------------------------------------------------------------
/src/user/index.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * User Exporter
3 |  */
4 | export * from './query';
5 | export * from './login';
6 | export * from './user-controls';
7 | 


--------------------------------------------------------------------------------
/src/user/login-form-handler.js:
--------------------------------------------------------------------------------
  1 | import React, { createFactory } from 'react';
  2 | import { omit, isEmpty } from 'lodash';
  3 | import { setDisplayName, wrapDisplayName } from 'recompose';
  4 | import v3 from 'uuid/v3';
  5 | import { VIEWER_QUERY } from './query';
  6 | 
  7 | export default () => (BaseComponent) => {
  8 |   const BaseFactory = createFactory(BaseComponent);
  9 | 
 10 |   class LoginFormHandler extends React.PureComponent {
 11 |     constructor(props) {
 12 |       super(props);
 13 |       this.reset = this.reset.bind(this);
 14 |       this.valid = this.valid.bind(this);
 15 |       this.printErrors = this.printErrors.bind(this);
 16 |       this.processResults = this.processResults.bind(this);
 17 |       this.onChange = this.onChange.bind(this);
 18 |       this.onSubmit = this.onSubmit.bind(this);
 19 |       this.state = {};
 20 |     }
 21 | 
 22 |     componentWillMount() {
 23 |       this.reset();
 24 |     }
 25 |     
 26 |     valid() {
 27 |       const { username, password } = this.state.form;
 28 |       const errors = {};
 29 | 
 30 |       if (username.length < 1) errors.user = true;
 31 |       if (password.length < 1) errors.pass = true;
 32 |       if (!isEmpty(errors)) {
 33 |         this.setState({form: this.printErrors(errors)});
 34 |         return false;
 35 |       };
 36 | 
 37 |       this.setState({ form: { username, password } });
 38 |       return true;
 39 |     }
 40 | 
 41 |     printErrors({ user, pass }) {
 42 |       const formError = undefined
 43 |       const userFieldError = (user) ? 'You must enter a username': undefined;
 44 |       const passFieldError = (pass) ? 'You must enter a password': undefined;
 45 |       return Object.assign(this.state.form, { formError, userFieldError, passFieldError });
 46 |     }
 47 | 
 48 |     processResults(payload) {
 49 |       const { data: { login } } = payload;
 50 | 
 51 |       if (login && login.authToken) {
 52 |         this.props.login(login.authToken);
 53 |       }
 54 | 
 55 |     }
 56 | 
 57 |     onChange({ target: { name, value } }) {
 58 |       const form = Object.assign(this.state.form, { [name]: value });
 59 |       this.setState(form);
 60 |     }
 61 | 
 62 |     onSubmit(event) {
 63 |       event.preventDefault();
 64 |       const { mutate } = this.props;
 65 |       const { password, username } = this.state.form;
 66 | 
 67 |       // Validate
 68 |       if(!this.valid()) return;
 69 | 
 70 |       // Mutate
 71 |       mutate({ 
 72 |         variables: { clientId: v3(`${password}${username}`, v3.URL), username, password },
 73 |         refetchQueries: [{ query: VIEWER_QUERY }],
 74 |       })
 75 |         .then(payload => {
 76 |           this.processResults(payload)
 77 |         })
 78 |         .catch(err => {
 79 |           const form = Object.assign({ formError: 'Invalid Login' }, this.state.form)
 80 |           this.setState({ form });
 81 |         });
 82 |     }
 83 | 
 84 |     reset(event) {
 85 |       this.setState({ 
 86 |         form: {
 87 |           username: '',
 88 |           password: '',
 89 |         }
 90 |       });
 91 |     }
 92 | 
 93 |     render() {
 94 |       const { onChange, onSubmit } = this;
 95 |       const { form } = this.state;
 96 |       const newProps = {
 97 |         ...omit(this.props, [
 98 |           'login', 'logout', 'mutate', 'loggedIn',
 99 |           'data'
100 |         ]),
101 |         ...form,
102 |         onChange,
103 |         onSubmit,
104 |       };
105 | 
106 |       return <BaseFactory {...newProps} />;
107 |     }
108 |   }
109 | 
110 |   if (process.env.NODE_ENV !== 'production') {
111 |     return setDisplayName(wrapDisplayName(BaseComponent, 'loginFormHandler'))(LoginFormHandler)
112 |   }
113 | 
114 |   return LoginFormHandler;
115 | }


--------------------------------------------------------------------------------
/src/user/login.jsx:
--------------------------------------------------------------------------------
  1 | // login.jsx
  2 | /**
  3 |  * External dependencies
  4 |  */
  5 | import React from 'react';
  6 | import PropTypes from 'prop-types';
  7 | import { graphql, withApollo } from 'react-apollo';
  8 | import { branch, compose, renderComponent } from 'recompose';
  9 | import { get } from 'lodash';
 10 | 
 11 | /**
 12 |  * Internal dependencies
 13 |  */
 14 | import { forError } from '../composers';
 15 | import { Error } from '../utils';
 16 | import { LOGIN_MUTATION } from './query';
 17 | import loginFormHandler from './login-form-handler';
 18 | import userStatusHandler from './user-status-handler';
 19 | import { UserControls } from './user-controls';
 20 | 
 21 | /**
 22 |  * SCSS Module
 23 |  */
 24 | import './login.scss';
 25 | 
 26 | /**
 27 |  * Login view component
 28 |  * 
 29 |  * @param {object} props
 30 |  * 
 31 |  * @returns { React.Component } 
 32 |  */
 33 | const login = ({
 34 |   username, password, userFieldError, passFieldError,
 35 |   formError, onChange, onSubmit, className, reset,
 36 |   ...rest
 37 | }) => (
 38 |   <form className={`login-form${className ? ' ' + className : ''} `} onSubmit={onSubmit} {...rest}>
 39 |     { formError && <legend className="login-form-info">{formError}</legend> }
 40 |     {/* Login */}
 41 |     <div className={`username-field${userFieldError ? ' error' : ''}`}>
 42 |       <input
 43 |         type="text"
 44 |         name="username"
 45 |         value={username}
 46 |         onChange={onChange}
 47 |         placeholder="Enter Username"
 48 |       />
 49 |       { userFieldError && <small className="field-info">{userFieldError}</small> }
 50 |     </div>
 51 |     {/* Password */}
 52 |     <div className={`password-field${passFieldError ? ' error' : ''}`}>
 53 |       <input
 54 |         type="password"
 55 |         name="password"
 56 |         value={password}
 57 |         onChange={onChange}
 58 |         placeholder="Enter Password"
 59 |       />
 60 |       { passFieldError && <small className="field-info">{passFieldError}</small> }
 61 |     </div>
 62 |     <button className="login-submit" type="submit">Sign In</button>
 63 |   </form>
 64 | );
 65 | 
 66 | login.propTypes = {
 67 |   username: PropTypes.string,
 68 |   password: PropTypes.string,
 69 |   userFieldError: PropTypes.string,
 70 |   passFieldError: PropTypes.string,
 71 |   onChange: PropTypes.func,
 72 |   onSubmit: PropTypes.func,
 73 | };
 74 | 
 75 | login.defaultProps = {
 76 |   username: '',
 77 |   password: '',
 78 |   userFieldError: undefined,
 79 |   passFieldError: undefined,
 80 |   onChange: () => null,
 81 |   onSubmit: () => null,
 82 | };
 83 | 
 84 | /**
 85 |  * Creates composer for login component
 86 |  */
 87 | login.compose = ({
 88 |   view = login,
 89 |   userControlsView = UserControls,
 90 |   forError: error = { view: Error },
 91 |   loginCond = props => get(props, 'loggedIn'),
 92 | } = {}) => 
 93 |   compose(
 94 |     forError(error),
 95 |     withApollo,
 96 |     userStatusHandler(),
 97 |     branch(
 98 |       props => loginCond(props),
 99 |       renderComponent(userControlsView),
100 |     ),
101 |     graphql(LOGIN_MUTATION),
102 |     loginFormHandler(),
103 |   )(view);
104 | 
105 | /**
106 |  * Compose default Login Component
107 |  * @var {React.Component} Login
108 |  */
109 | const Login = login.compose();
110 | 
111 | export { login, Login };
112 | 


--------------------------------------------------------------------------------
/src/user/login.scss:
--------------------------------------------------------------------------------
 1 | /* Extra Small */
 2 | form.login-form {
 3 |   max-width: 400px;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   margin: 0 auto;
 7 | 
 8 |   .login-form-info {
 9 |     margin: 0.45em auto;
10 |     color: tomato;
11 |     font-size: 1.2em
12 |   }
13 | 
14 |   .username-field,
15 |   .password-field {
16 |     margin: 0.3em;
17 | 
18 |     &.error {
19 |       input {
20 |         border-color: Tomato;
21 |       }
22 |     }
23 | 
24 |     input {
25 |       width: 100%;
26 |       border-width: 0.07em;
27 |       border-radius: 0.2em;
28 |     }
29 | 
30 |     .field-info {
31 |       display: block;
32 |       color: gray;
33 |     }
34 |   }
35 | 
36 |   .login-submit {
37 |     margin: 0.3em;
38 |     border-width: 0.07em;
39 |     border-radius: 0.2em;
40 |     box-shadow: none;
41 | 
42 |     font-size: 0.9em;
43 |     color: #fff;
44 |     background-color: #005F4C;
45 |   }
46 | }
47 | 
48 | /* Small */
49 | @media (min-width: 576px) {
50 |   
51 | }
52 | 
53 | /* Medium */
54 | @media (min-width: 768px) {
55 |   
56 | }
57 | 
58 | /* Large */
59 | @media (min-width: 992px) {
60 | 
61 | }
62 | 
63 | /* Extra Large */
64 | @media (min-width: 1200px) {
65 | 
66 | }


--------------------------------------------------------------------------------
/src/user/query.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Login Queries and Mutations
 3 |  */
 4 | import { gql } from 'apollo-boost';
 5 | 
 6 | export const VIEWER_QUERY = gql`
 7 | query GetViewer {
 8 |   viewer {
 9 |     id
10 |     userId
11 |     nicename
12 |     firstName
13 |   }
14 | }
15 | `;
16 | 
17 | export const LOGIN_MUTATION = gql`
18 | mutation LoginMutation( $clientId: String!, $username: String!, $password: String! ) {
19 |   login( input: { clientMutationId: $clientId, username: $username, password: $password } ) {
20 |     authToken
21 |   }
22 | }
23 | `;


--------------------------------------------------------------------------------
/src/user/user-controls.jsx:
--------------------------------------------------------------------------------
 1 | // user-controls.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import PropTypes from 'prop-types';
 7 | import { get } from 'lodash';
 8 | 
 9 | /**
10 |  * Internal dependencies
11 |  */
12 | import { queryComposer } from '../composers';
13 | import { Loading, Error } from '../utils';
14 | import { VIEWER_QUERY } from './query';
15 | 
16 | /**
17 |  * SCSS Module
18 |  */
19 | import './user-controls.scss';
20 | 
21 | /**
22 |  * UserControls view component
23 |  * 
24 |  * @param {object} props
25 |  * 
26 |  * @returns {React.Component} 
27 |  */
28 | const userControls = ({ className, userId, nicename, firstName, logout, ...rest }) => (
29 |   <div className={`user-controls${className ? ' '+className : ''}`} {...rest}>
30 |     <div className="greeting">
31 |       <h3>Welcome back, {' '} <strong>{nicename ? nicename : firstName}</strong>!</h3>
32 |     </div>
33 |     <div className="logout">
34 |       <button onClick={logout}>Logout</button>
35 |     </div>
36 |   </div>
37 | );
38 | 
39 | userControls.propTypes = {
40 |   userId: PropTypes.number,
41 |   nicename: PropTypes.string,
42 |   firstName: PropTypes.string,
43 |   logout: PropTypes.func,
44 | };
45 | 
46 | userControls.defaultProps = {
47 |   userId: undefined,
48 |   nicename: undefined,
49 |   firstName: undefined,
50 |   logout: undefined,
51 | };
52 | 
53 | /**
54 |  * Creates composer for userControls component
55 |  */
56 | userControls.compose = queryComposer({
57 |   view: userControls,
58 |   queries:[{ query: VIEWER_QUERY }],
59 |   whileLoading: { view: Loading },
60 |   forError: { view: Error },
61 |   sharedMapper: ({ loggedIn, login, data, ...rest }) => {
62 |     const userId = get(data, 'viewer.userId');
63 |     const nicename = get(data, 'viewer.nicename');
64 |     const firstName = get(data, 'viewer.firstName');
65 | 
66 |     return { userId, nicename, firstName, ...rest };
67 |   },
68 | });
69 | 
70 | /**
71 |  * Compose default UserControls Component
72 |  * @var {React.Component} UserControls
73 |  */
74 | const UserControls = userControls.compose();
75 | 
76 | export { userControls, UserControls };
77 | 


--------------------------------------------------------------------------------
/src/user/user-controls.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * USER CONTROLS
 3 |  */
 4 | .user-controls {
 5 | 
 6 | }
 7 | 
 8 | .user-controls .greeting {
 9 | 
10 | }
11 | 
12 | .user-controls .logout {
13 |   
14 | }


--------------------------------------------------------------------------------
/src/user/user-status-handler.js:
--------------------------------------------------------------------------------
 1 | import React, { createFactory } from 'react';
 2 | import { omit } from 'lodash';
 3 | import { setDisplayName, wrapDisplayName } from 'recompose';
 4 | 
 5 | export default () => (BaseComponent) => {
 6 |   const BaseFactory = createFactory(BaseComponent);
 7 | 
 8 |   class UserStatusHandler extends React.PureComponent {
 9 |     constructor(props) {
10 |       super(props);
11 |       this.login = this.login.bind(this);
12 |       this.logout = this.logout.bind(this);
13 |       this.returningUser = this.returningUser.bind(this);
14 |       this.state = {
15 |         loggedIn: false
16 |       }
17 |     }
18 | 
19 |     componentWillMount() {
20 |       this.returningUser();
21 |     }
22 | 
23 |     returningUser() {
24 |       const loggedIn = localStorage.getItem('user-token');
25 |       if (loggedIn) this.setState({ loggedIn });
26 |     }
27 | 
28 |     login(loggedIn) {
29 |       localStorage.setItem('user-token', loggedIn);
30 |       this.setState({ loggedIn });
31 |     }
32 | 
33 |     logout() {
34 |       new Promise((resolve) =>{
35 |         this.setState({ loggedIn: false }, () => {
36 |           localStorage.removeItem('user-token');
37 |           resolve();
38 |         });
39 |       }).then(() => this.props.client.resetStore());
40 |     }
41 | 
42 |     render() {
43 |       const { login, logout } = this;
44 |       
45 |       return BaseFactory({
46 |         ...omit(this.props, ['client']),
47 |         ...this.state,
48 |         login,
49 |         logout,
50 |       })
51 |     }
52 |   }
53 | 
54 |   if (process.env.NODE_ENV !== 'production') {
55 |     return setDisplayName(wrapDisplayName(BaseComponent, 'userStatusHandler'))(UserStatusHandler)
56 |   }
57 | 
58 |   return UserStatusHandler;
59 | }


--------------------------------------------------------------------------------
/src/utils/error.jsx:
--------------------------------------------------------------------------------
 1 | // error.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import PropTypes from 'prop-types';
 7 | import _ from 'lodash';
 8 | import classNames from 'classnames';
 9 | 
10 | /**
11 |  * Internal dependencies
12 |  */
13 | import { baseComposer } from '../composers';
14 | import errorMapper from './process-errors';
15 | 
16 | /**
17 |  * SCSS Module
18 |  */
19 | import styles from './error.module.scss';
20 | 
21 | /**
22 |  * Error view component
23 |  * 
24 |  * @param {Object} props
25 |  * 
26 |  * @returns {React.Component}
27 |  */
28 | const error = ({ icon, message, type, ...rest }) => {
29 |   const className = classNames(
30 |     styles.error,
31 |     `${type}-error`,
32 |     styles.on,
33 |   );
34 | 
35 |   return (
36 |     <div className={className} {...rest}>
37 |       <div className={styles.content}>
38 |         <div className={styles.icon} data-testid="error-icon">{icon}</div>
39 |         <div className={styles.message} data-testid="error-message">
40 |           { Array.isArray(message) ?
41 |             (<ul>{_.map(message, (item, i) => (<li key={`item-${i+2}`}>{item}</li>))}</ul>) : 
42 |             message}    
43 |         </div>
44 |       </div>
45 |     </div>
46 |   );
47 | }
48 | 
49 | error.propTypes = {
50 |   icon: PropTypes.oneOfType([
51 |     PropTypes.shape({}),
52 |     PropTypes.string,
53 |   ]),
54 |   message: PropTypes.oneOfType([
55 |     PropTypes.string,
56 |     PropTypes.arrayOf(PropTypes.string),
57 |   ]),
58 | };
59 | 
60 | error.defaultProps = {
61 |   icon: undefined,
62 |   message: 'Hold it, there has been a problem!'
63 | };
64 | 
65 | /**
66 |  * Creates composer for error component
67 |  */
68 | error.compose = baseComposer({ view: error, mapper: errorMapper });
69 | const Error = error.compose();
70 | 
71 | export {
72 |   error,
73 |   Error,
74 |   errorMapper,
75 | };
76 | 


--------------------------------------------------------------------------------
/src/utils/error.module.scss:
--------------------------------------------------------------------------------
 1 | .error {
 2 |   position: relative;
 3 |   width: 100%;
 4 |   min-height: 450px;
 5 |   
 6 |   .content {
 7 |     position: absolute;
 8 |     top: 50%;
 9 |     left: 50%;
10 |     transform: translate(-50%, -50%);
11 | 
12 |     display: inline-flex;
13 |     flex-direction: column;
14 | 
15 |     .icon {
16 |       padding: 0;
17 |       margin: 0;
18 |       text-align: center;
19 |       transform-origin: center;
20 |       transition: 
21 |         transform 450ms ease-out;
22 |     }
23 | 
24 |     .message {
25 |       font-size: 1.3em;
26 |       text-align: center;
27 |     }
28 |   }
29 | }


--------------------------------------------------------------------------------
/src/utils/icon.jsx:
--------------------------------------------------------------------------------
 1 | // icon.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import PropTypes from 'prop-types';
 7 | import classNames from 'classnames';
 8 | 
 9 | /**
10 |  * SCSS Module
11 |  */
12 | import styles from './icon.module.scss';
13 | 
14 | /**
15 |  * Icon Component
16 |  * 
17 |  * @param {Object} props
18 |  * 
19 |  * @return {React.Component} 
20 |  */
21 | const Icon = ({
22 |   as: Element, name, size, className: added,
23 |   color, dark, light, inactive
24 | }) => {
25 |   const className = classNames(
26 |     styles.icon,
27 |     styles[size],
28 |     { [styles.dark]: dark },
29 |     { [styles.light]: light },
30 |     { [styles.inactive]: inactive },
31 |     added
32 |   );
33 |   
34 |   const style = (color) ? (inactive) ?
35 |     { color: `${color}30` } :
36 |     { color } :
37 |     undefined;
38 |   return (
39 |     <Element className={className} style={style}>{name}</Element>
40 |   )};
41 | 
42 | Icon.propTypes = {
43 |   name: PropTypes.string,
44 |   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
45 |   className: PropTypes.string,
46 |   size: PropTypes.oneOf([
47 |     'tiny', 'small', 'medium', 'large'
48 |   ]),
49 |   color: PropTypes.string,
50 |   light: PropTypes.bool,
51 |   dark: PropTypes.bool,
52 |   inactive: PropTypes.bool,
53 | };
54 | 
55 | Icon.defaultProps = {
56 |   name: undefined,
57 |   as: 'i',
58 |   className: undefined,
59 |   size: 'small',
60 |   color: undefined,
61 |   light: undefined,
62 |   dark: undefined,
63 |   inactive: undefined
64 | };
65 | 
66 | export { Icon };
67 | 


--------------------------------------------------------------------------------
/src/utils/icon.module.scss:
--------------------------------------------------------------------------------
 1 | /* fallback */
 2 | @font-face {
 3 | 	font-family: 'Material Icons';
 4 | 	font-style: normal;
 5 | 	font-weight: 400;
 6 | 	src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
 7 | }
 8 | 
 9 | .icon {
10 | 	font-family: 'Material Icons';
11 | 	font-weight: normal;
12 | 	font-style: normal;
13 | 	font-size: 24px;  /* Preferred icon size */
14 | 	display: inline-block;
15 | 	line-height: 1;
16 | 	text-transform: none;
17 | 	letter-spacing: normal;
18 | 	word-wrap: normal;
19 | 	white-space: nowrap;
20 | 	direction: ltr;
21 | 
22 | 	/* Support for all WebKit browsers. */
23 | 	-webkit-font-smoothing: antialiased;
24 | 	/* Support for Safari and Chrome. */
25 | 	text-rendering: optimizeLegibility;
26 | 
27 | 	/* Support for Firefox. */
28 | 	-moz-osx-font-smoothing: grayscale;
29 | 
30 | 	/* Support for IE. */
31 | 	font-feature-settings: 'liga';
32 | 
33 | 	/* Rules for sizing the icon. */
34 | 	&.tiny { font-size: 18px; }
35 | 	&.small { font-size: 24px; }
36 | 	&.medium { font-size: 36px; }
37 | 	&.large { font-size: 48px; }
38 | 
39 | 	/* Rules for using icons as black on a light background. */
40 | 	&.dark {
41 | 		color: rgba(0, 0, 0, 0.54); 
42 | 		&.inactive { color: rgba(0, 0, 0, 0.26); }
43 | 	}
44 | 
45 | 	/* Rules for using icons as white on a dark background. */
46 | 	&.light {
47 | 		color: rgba(255, 255, 255, 1);
48 | 		&.md-inactive { color: rgba(255, 255, 255, 0.3); }
49 | 	}
50 | }


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | 
2 | /**
3 |  * Utils Exporter
4 |  */
5 | export * from './loading';
6 | export * from './error';
7 | export * from './icon'; 


--------------------------------------------------------------------------------
/src/utils/loading.jsx:
--------------------------------------------------------------------------------
 1 | // loading.jsx
 2 | /**
 3 |  * External dependencies
 4 |  */
 5 | import React from 'react';
 6 | import PropTypes from 'prop-types';
 7 | import classNames from 'classnames';
 8 | 
 9 | /**
10 |  * Internal dependencies
11 |  */
12 | import { baseComposer } from '../composers';
13 | import progressMapper from './process-loading';
14 | 
15 | /**
16 |  * SCSS Module
17 |  */
18 | import styles from './loading.module.scss';
19 | 
20 | /**
21 |  * Loading view component
22 |  * 
23 |  * @param {object} props
24 |  * 
25 |  * @returns {React.Component}
26 |  */
27 | const loading = ({ icon, message, progress: { total, max } }) => {
28 |   const className = classNames(
29 |     styles.loading,
30 |     styles.on,
31 |   );
32 |   
33 |   const percentage = (total && max) ?
34 |     `${Math.ceil(total / max)}%` :
35 |     undefined;
36 |   return (
37 |     <div className={className}>
38 |       <div className={styles.content}>
39 |         <div className={styles.icon} data-testid="loading-icon">{icon}</div>
40 |         <div className={styles.message}>{message} {percentage}</div>
41 |       </div>
42 |     </div>
43 |   )
44 | }
45 | 
46 | loading.propTypes = {
47 |   icon: PropTypes.oneOfType([
48 |     PropTypes.shape({}),
49 |     PropTypes.string,
50 |   ]),
51 |   message: PropTypes.oneOfType([
52 |     PropTypes.arrayOf(PropTypes.string),
53 |     PropTypes.string,
54 |   ]),
55 |   progress: PropTypes.shape({
56 |     min: PropTypes.number,
57 |     max: PropTypes.number,
58 |     total: PropTypes.number,
59 |   }),
60 | };
61 | 
62 | loading.defaultProps = {
63 |   icon: undefined,
64 |   message: 'Loading...',
65 |   progress: { min: 0, max: 0, total: 0 },
66 | };
67 | 
68 | /**
69 |  * Creates composer for loading component
70 |  */
71 | loading.compose = baseComposer({ view: loading, mapper: progressMapper });
72 | const Loading = loading.compose();
73 | 
74 | export {
75 |   loading,
76 |   Loading,
77 |   progressMapper
78 | };
79 | 


--------------------------------------------------------------------------------
/src/utils/loading.module.scss:
--------------------------------------------------------------------------------
 1 | @keyframes icon_rotate {
 2 |   0% { transform: rotate(0deg); }
 3 |   100% { transform: rotate(359deg); }
 4 | }
 5 | 
 6 | .loading {
 7 |   position: relative;
 8 |   width: 100%;
 9 |   min-height: 450px;
10 |   
11 |   .content {
12 |     position: absolute;
13 |     top: 50%;
14 |     left: 50%;
15 |     transform: translate(-50%, -50%);
16 | 
17 |     display: inline-flex;
18 |     flex-direction: column;
19 | 
20 |     .icon {
21 |       padding: 0;
22 |       margin: 0;
23 |       text-align: center;
24 |       transform-origin: center;
25 |       transition: 
26 |         transform 450ms ease-out;
27 |     }
28 | 
29 |     .message {
30 |       font-size: 1.3em;
31 |       text-align: center;
32 |     }
33 |   }
34 | 
35 |   &.on {
36 |     .icon {
37 |       animation: icon_rotate 1s linear infinite;
38 |     }
39 |   }
40 | }


--------------------------------------------------------------------------------
/src/utils/process-errors.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { Icon } from './icon';
 4 | 
 5 | export const processMessage = (defaultMessage, message) => {
 6 |   return message || defaultMessage;
 7 | }
 8 | 
 9 | export default ({ type = '', message, ...rest }) => {    
10 |   const notFound = /^404(?:-(.*))?$/;
11 |   const notAuthorized = /^403(?:-(.*))?$/;
12 |   const queryError = /^query(?:-(.*))?$/;
13 |   const systemError = /^component(?:-(.*))?$/;
14 |   let typename;
15 |   switch(true) {
16 |     case notFound.test(type):
17 |       typename = (type.replace(notFound, '$1') !== '') ? type.replace(notFound, '$1') : 'content';
18 |       return { 
19 |         message: processMessage(
20 |           `Sorry, we can't locate the ${typename} you're looking for. Please, try again later.`,
21 |           message,
22 |         ),
23 |         icon: (<Icon name="error" size="large" />),
24 |         type,
25 |         ...rest
26 |       };
27 | 
28 |     case notAuthorized.test(type):
29 |       typename = (type.replace(notAuthorized, '$1') !== '') ? type.replace(notAuthorized, '$1') : 'content';
30 |       return { 
31 |         message: processMessage(
32 |           `Sorry, you aren't authorized to view this ${typename}.`,
33 |           message,
34 |         ),
35 |         icon: (<Icon name="block" size="large" />),
36 |         type,
37 |         ...rest
38 |       };
39 | 
40 |     case queryError.test(type):
41 |       typename = (type.replace(queryError, '$1') !== '') ? type.replace(queryError, '$1') : 'content';
42 |       return { 
43 |         message: processMessage(
44 |           `Sorry, there was a problem loading the ${typename} you are trying to access. Please, try again later.`,
45 |           message,
46 |         ),
47 |         icon: (<Icon name="error_outline" size="large" />),
48 |         type,
49 |         ...rest
50 |       };
51 | 
52 |     case systemError.test(type):
53 |       typename = (type.replace(systemError, '$1') !== '') ? type.replace(systemError, '$1') : 'content';
54 |       return { 
55 |         message: processMessage(
56 |           `Sorry, there was a system error while loading the ${typename} you request. Please, try again later or report this to us.`,
57 |           message,
58 |         ),
59 |         icon: (<Icon name="report" size="large" />),
60 |         type,
61 |         ...rest
62 |       };
63 | 
64 |     default:
65 |       return { 
66 |         message: processMessage(
67 |           'Wow, this is embarassing! We\'re not sure what happened. Or... a lazy dev just forgot to add a message here. Sorry!.',
68 |           message,
69 |         ),
70 |         icon: (<Icon name="sentiment_very_dissatisfied" size="large" />),
71 |         type,
72 |         ...rest
73 |       };
74 |   }
75 | };


--------------------------------------------------------------------------------
/src/utils/process-loading.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { get } from 'lodash';
 3 | 
 4 | import { Icon } from './icon';
 5 | 
 6 | export default ({ data, icon: altIcon, message, ...rest }) => {
 7 |   const icon = (altIcon) ? altIcon : <Icon name="autorenew" size="large" />;
 8 | 
 9 |   const total = get(data, 'networkStatus') || get(data, 'loading');
10 |   if ( total ) {
11 |     const min = 0;
12 |     const max = 7;
13 | 
14 |     return {
15 |       progress: { total, min, max },
16 |       icon,
17 |       message,
18 |       ...rest,
19 |     };
20 |   }
21 | 
22 |   return { icon, message, ...rest };
23 | }


--------------------------------------------------------------------------------
/test/__unit_tests__/attachment.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { render, cleanup, waitForElement, wait } from 'react-testing-library';
  3 | import { MockedProvider } from 'react-apollo/test-utils';
  4 | 
  5 | import { CUSTOM_LOGO_QUERY, ATTACHMENT_QUERY, Attachment, attachment } from '../../src';
  6 | 
  7 | afterEach(cleanup);
  8 | 
  9 | it(`renders mock image at different sizes while maintaining the image's aspect ratio`, async () => {
 10 |   const mocks = [{
 11 |     request: {
 12 |       query: ATTACHMENT_QUERY,
 13 |       variables: { 
 14 |         mediaItemId: 1,
 15 |         id: null,
 16 |         slug: null,
 17 |         uri: null,
 18 |       },
 19 |     },
 20 |     result: {
 21 |       data: {
 22 |         mediaItemBy: {
 23 |           id: "YXR0YWNobWVudDoxNTk=",
 24 |           altText: 'dummy-image',
 25 |           mediaType: "image",
 26 |           sourceUrl: "https://source.unsplash.com/1250x833",
 27 |           mediaDetails: {
 28 |             sizes: [{
 29 |               width: "150",
 30 |               height: "150",
 31 |               sourceUrl: "https://source.unsplash.com/150x150"
 32 |             }, {
 33 |               width: "300",
 34 |               height: "200",
 35 |               sourceUrl: "https://source.unsplash.com/300x200"
 36 |             }, {
 37 |               width: "768",
 38 |               height: "512",
 39 |               sourceUrl: "https://source.unsplash.com/768x512"
 40 |             }, {
 41 |               width: "1024",
 42 |               height: "682",
 43 |               sourceUrl: "https://source.unsplash.com/1024x682"
 44 |             }]
 45 |           }
 46 |         }
 47 |       }
 48 |     },
 49 |   }]
 50 | 
 51 |   /**
 52 |    * Original Size and className
 53 |    */
 54 |   const { getByAltText } = render(
 55 |     <MockedProvider mocks={mocks} addTypename={false}>
 56 |       <Attachment mediaItemId={1} className="dummy-image" alt="dummy-image" />
 57 |     </MockedProvider>
 58 |   );
 59 | 
 60 |   let image = await waitForElement(() => getByAltText(/dummy-image/));
 61 |   expect(image).toBeTruthy();
 62 |   expect(image.classList).toContain('dummy-image');
 63 |   expect(image.getAttribute('srcSet'))
 64 |     .toEqual('https://source.unsplash.com/150x150 150w, https://source.unsplash.com/300x200 300w, https://source.unsplash.com/768x512 768w, https://source.unsplash.com/1024x682 1024w');
 65 | 
 66 |   expect(image.getAttribute('sizes'))
 67 |     .toEqual('(max-width: 768px) 768px, (max-width: 1200px) 1024px');
 68 | 
 69 |   /**
 70 |    * custom alt attribute
 71 |    */
 72 |   render(
 73 |     <MockedProvider mocks={mocks} addTypename={false}>
 74 |       <Attachment mediaItemId={1} alt="test image" />
 75 |     </MockedProvider>
 76 |   );
 77 | 
 78 |   image = await waitForElement(() => getByAltText(/test image/));
 79 |   expect(image).toBeTruthy();
 80 | });
 81 | 
 82 | it(`render theme custom logo`, async() => {
 83 |   const mocks = [{
 84 |     request: {
 85 |       query: CUSTOM_LOGO_QUERY,
 86 |     },
 87 |     result: {
 88 |       data: {
 89 |         themeMods: {
 90 |           customLogo: {
 91 |             id: "YXR0YWNobWVudDoxNTk=",
 92 |             altText: 'dummy-image',
 93 |             mediaType: "image",
 94 |             sourceUrl: "https://source.unsplash.com/1250x833",
 95 |             mediaDetails: {
 96 |               sizes: [{
 97 |                 width: "150",
 98 |                 height: "150",
 99 |                 sourceUrl: "https://source.unsplash.com/150x150"
100 |               }, {
101 |                 width: "300",
102 |                 height: "200",
103 |                 sourceUrl: "https://source.unsplash.com/300x200"
104 |               }, {
105 |                 width: "768",
106 |                 height: "512",
107 |                 sourceUrl: "https://source.unsplash.com/768x512"
108 |               }, {
109 |                 width: "1024",
110 |                 height: "682",
111 |                 sourceUrl: "https://source.unsplash.com/1024x682"
112 |               }]
113 |             }
114 |           }
115 |         }
116 |       }
117 |     },
118 |   }];
119 | 
120 |   /**
121 |    * Original Size and className
122 |    */
123 |   const { getByAltText } = render(
124 |     <MockedProvider mocks={mocks} addTypename={false}>
125 |       <Attachment customLogo className="dummy-image" alt="dummy-image" />
126 |     </MockedProvider>
127 |   );
128 | 
129 |   let image = await waitForElement(() => getByAltText(/dummy-image/));
130 |   expect(image).toBeTruthy();
131 |   expect(image.classList).toContain('dummy-image');
132 |   expect(image.getAttribute('srcSet'))
133 |     .toEqual('https://source.unsplash.com/150x150 150w, https://source.unsplash.com/300x200 300w, https://source.unsplash.com/768x512 768w, https://source.unsplash.com/1024x682 1024w');
134 | 
135 |   expect(image.getAttribute('sizes'))
136 |     .toEqual('(max-width: 768px) 768px, (max-width: 1200px) 1024px');
137 | });
138 | 
139 | it(`renders fallback image`, async () => {
140 |   const mocks = [{
141 |     request: {
142 |       query: ATTACHMENT_QUERY,
143 |       variables: { mediaItemId: 1 },
144 |     },
145 |     result: { data: { mediaItemBy: null } },
146 |     error: new Error('not found'),
147 |   }];
148 | 
149 |   const { getByAltText } = render(
150 |     <MockedProvider mocks={mocks} addTypename={false}>
151 |       <Attachment src="https://source.unsplash.com/768x512" alt="dummy-image" fallback />
152 |     </MockedProvider>
153 |   );
154 | 
155 |   const image = await waitForElement(() => getByAltText(/dummy-image/));
156 |   expect(image).toBeTruthy();
157 |   expect(image.getAttribute('src') === 'https://source.unsplash.com/768x512').toBeTruthy();
158 | })
159 | 
160 | it(`renders nothing if fallback flag set and no src attribute is provided`, async () => {
161 |   const mocks = [{
162 |     request: {
163 |       query: ATTACHMENT_QUERY,
164 |       variables: { mediaItemId: 1 },
165 |     },
166 |     data: { mediaItemBy: null },
167 |     error: new Error('not found'),
168 |   }];
169 | 
170 |   const { container, getByAltText } = render(
171 |     <MockedProvider mocks={mocks} addTypename={false}>
172 |       <Attachment alt="dummy-image" fallback />
173 |     </MockedProvider>
174 |   );
175 | 
176 |   await wait(() => expect(container.querySelector('img')).toBeFalsy());
177 | });
178 | 
179 | it(`renders fallback image with a custom attachment template component`, async () => {
180 |   const NewAttachment = attachment.compose({
181 |     view: props => <div data-testid="container"><img {...props} /></div>
182 |   });
183 |   const mocks = [{
184 |     request: {
185 |       query: ATTACHMENT_QUERY,
186 |       variables: { mediaItemId: 1 },
187 |     },
188 |     result: { data: { mediaItemBy: null } },
189 |     error: new Error('not found'),
190 |   }];
191 | 
192 |   const { getByTestId } = render(
193 |     <MockedProvider mocks={mocks} addTypename={false}>
194 |       <NewAttachment src="https://source.unsplash.com/768x512" alt="dummy-image" fallback />
195 |     </MockedProvider>
196 |   );
197 | 
198 |   const container = await waitForElement(() => getByTestId(/container/));
199 |   expect(container).toBeTruthy();
200 |   
201 |   const image = container.querySelector('img[alt="dummy-image"]');
202 |   expect(image).toBeTruthy();
203 |   expect(image.getAttribute('src') === 'https://source.unsplash.com/768x512').toBeTruthy();
204 | });
205 | 
206 | it(`renders loading state initially`, () => {
207 |   const { getByText, getByTestId } = render(
208 |     <MockedProvider mocks={[]} addTypename={false}>
209 |       <Attachment mediaItemId={1} />
210 |     </MockedProvider>,
211 |   );
212 | 
213 |   const icon = getByTestId(/loading-icon/);
214 |   expect(icon).toBeTruthy();
215 |   expect(icon.innerHTML === '').toBeFalsy();
216 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
217 | });
218 | 
219 | it(`render error state`, async () => {
220 |   const mocks = [{
221 |     request: {
222 |       query: ATTACHMENT_QUERY,
223 |       variables: { mediaItemId: 1 },
224 |     },
225 |     error: new Error('its broke'),
226 |   }];
227 | 
228 |   const { getByTestId } = render(
229 |     <MockedProvider mocks={mocks} addTypename={false}>
230 |       <Attachment mediaItemId={1} />
231 |     </MockedProvider>,
232 |   );
233 | 
234 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
235 |   expect(icon).toBeTruthy();
236 |   expect(icon.innerHTML === '').toBeFalsy();
237 |   const message = getByTestId(/error-message/);
238 |   expect(message).toBeTruthy()
239 |   expect(message.innerHTML === '').toBeFalsy();
240 | })


--------------------------------------------------------------------------------
/test/__unit_tests__/header.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { render, cleanup, waitForElement } from 'react-testing-library';
  3 | import { MockedProvider } from 'react-apollo/test-utils';
  4 | import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
  5 | import { MemoryRouter } from 'react-router-dom';
  6 | 
  7 | import introspectionQueryResultData from '../fragmentTypes.json';
  8 | import { CUSTOM_LOGO_QUERY, HEADER_QUERY, Header, header } from '../../src';
  9 | 
 10 | afterEach(cleanup);
 11 | 
 12 | const fragmentMatcher = new IntrospectionFragmentMatcher({
 13 |   introspectionQueryResultData
 14 | });
 15 | 
 16 | const mocks = [
 17 |   {
 18 |     request: { query: HEADER_QUERY, },
 19 |     result: {
 20 |       data: {
 21 |         allSettings: {
 22 |           generalSettingsTitle: 'ChumBucket',
 23 |           generalSettingsDescription: 'Eat here, dammit!!',
 24 |           generalSettingsUrl: 'https://buccogrease.net',
 25 |           __typename: 'Settings'
 26 |         },
 27 |         themeMods: {
 28 |           customLogo: 1,
 29 |           __typename: 'ThemeMods',
 30 |         }
 31 |       }
 32 |     }
 33 |   }, {
 34 |     request: {
 35 |       query: CUSTOM_LOGO_QUERY,
 36 |     },
 37 |     result: {
 38 |       data: {
 39 |         themeMods: {
 40 |           customLogo: {
 41 |             id: "YXR0YWNobWVudDoxNTk=",
 42 |             altText: 'dummy-image',
 43 |             mediaType: "image",
 44 |             sourceUrl: "https://source.unsplash.com/1250x833",
 45 |             mediaDetails: {
 46 |               sizes: [{
 47 |                 width: "150",
 48 |                 height: "150",
 49 |                 sourceUrl: "https://source.unsplash.com/150x150",
 50 |                 __typename: 'MediaSizes',
 51 |               }, {
 52 |                 width: "300",
 53 |                 height: "200",
 54 |                 sourceUrl: "https://source.unsplash.com/300x200",
 55 |                 __typename: 'MediaSizes',
 56 |               }, {
 57 |                 width: "768",
 58 |                 height: "512",
 59 |                 sourceUrl: "https://source.unsplash.com/768x512",
 60 |                 __typename: 'MediaSizes',
 61 |               }, {
 62 |                 width: "1024",
 63 |                 height: "682",
 64 |                 sourceUrl: "https://source.unsplash.com/1024x682",
 65 |                 __typename: 'MediaSizes',
 66 |               }],
 67 |               __typename: 'MediaDetails'
 68 |             },
 69 |             __typename: 'MediaItem',
 70 |           },
 71 |           __typename: 'ThemeMods',
 72 |         }
 73 |       }
 74 |     },
 75 |   }
 76 | ];
 77 | 
 78 | const cache = new InMemoryCache({ fragmentMatcher });
 79 | 
 80 | it(`renders a header component with a logo, title, and description loaded with mock data`, async () => {
 81 |   
 82 | 
 83 |   const { getByText, getByTestId, getByAltText } = render(
 84 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
 85 |       <MemoryRouter>
 86 |         <Header />
 87 |       </MemoryRouter>
 88 |     </MockedProvider>,
 89 |   );
 90 | 
 91 |   const title = await waitForElement(() => getByText('ChumBucket'));
 92 |   expect(title).toBeTruthy();
 93 |   expect(getByText('Eat here, dammit!!')).toBeTruthy();
 94 | 
 95 |   const image = await waitForElement(() => getByAltText(/ChumBucket/));
 96 |   expect(image).toBeTruthy();
 97 |   expect(image.classList).toContain('custom-logo');
 98 |   expect(image.getAttribute('srcSet'))
 99 |     .toEqual('https://source.unsplash.com/150x150 150w, https://source.unsplash.com/300x200 300w, https://source.unsplash.com/768x512 768w, https://source.unsplash.com/1024x682 1024w');
100 | 
101 |   expect(image.getAttribute('sizes'))
102 |     .toEqual('(max-width: 768px) 768px, (max-width: 1200px) 1024px');
103 | });
104 | 
105 | it(`render a header component with a custom view layer`, async () => {
106 |   const view = ({title, description, url}) => (
107 |     <div>
108 |       <h1 data-testid="header-title">{title}</h1>
109 |       <h1><small data-testid="header-description">{description}</small></h1>
110 |     </div>
111 |   )
112 | 
113 |   const CustomHeader = header.compose({ view });
114 |   
115 |   const { getByTestId } = render(
116 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
117 |       <MemoryRouter>
118 |         <CustomHeader />
119 |       </MemoryRouter>
120 |     </MockedProvider>,
121 |   );
122 | 
123 |   const title = await waitForElement(() => getByTestId(/header-title/));
124 |   expect(title).toBeTruthy();
125 |   expect(title.innerHTML).toMatch(/ChumBucket/);
126 |   
127 |   const description = getByTestId(/header-description/);
128 |   expect(description).toBeTruthy();
129 |   expect(description.innerHTML).toMatch(/Eat here, dammit!!/);
130 | });
131 | 
132 | it(`renders loading state initially`, () => {
133 |   const { getByText, getByTestId } = render(
134 |     <MockedProvider mocks={[]} addTypename={false}>
135 |       <MemoryRouter>
136 |         <Header />
137 |       </MemoryRouter>
138 |     </MockedProvider>,
139 |   );
140 | 
141 |   const icon = getByTestId(/loading-icon/);
142 |   expect(icon).toBeTruthy();
143 |   expect(icon.innerHTML === '').toBeFalsy();
144 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
145 | });
146 | 
147 | it(`renders error state`, async () => {
148 |   const errorMocks = [{
149 |     request: {
150 |       query: HEADER_QUERY,
151 |     },
152 |     error: new Error('its broke'),
153 |   }];
154 | 
155 |   const { getByTestId } = render(
156 |     <MockedProvider mocks={errorMocks} addTypename={false}>
157 |       <MemoryRouter>
158 |         <Header />
159 |       </MemoryRouter>
160 |     </MockedProvider>,
161 |   );
162 | 
163 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
164 |   expect(icon).toBeTruthy();
165 |   expect(icon.innerHTML === '').toBeFalsy();
166 |   const message = getByTestId(/error-message/);
167 |   expect(message).toBeTruthy()
168 |   expect(message.innerHTML === '').toBeFalsy();
169 | })
170 | 


--------------------------------------------------------------------------------
/test/__unit_tests__/login.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { render, cleanup, waitForElement, fireEvent } from 'react-testing-library';
  3 | import { MockedProvider } from 'react-apollo/test-utils';
  4 | import v3 from 'uuid/v3';
  5 | 
  6 | import { Login, login, UserControls, userControls, LOGIN_MUTATION, VIEWER_QUERY } from '../../src';
  7 | 
  8 | // test-utils.js
  9 | class LocalStorageMock {
 10 |   constructor() {
 11 |     this.store = {};
 12 |   }
 13 | 
 14 |   clear() {
 15 |     this.store = {};
 16 |   }
 17 | 
 18 |   getItem(key) {
 19 |     return this.store[key] || null;
 20 |   }
 21 | 
 22 |   setItem(key, value) {
 23 |     this.store[key] = value.toString();
 24 |   }
 25 | 
 26 |   removeItem(key) {
 27 |     delete this.store[key];
 28 |   }
 29 | };
 30 | 
 31 | global.localStorage = new LocalStorageMock();
 32 | 
 33 | afterEach(() => {
 34 |   localStorage.clear();
 35 |   cleanup();
 36 | });
 37 | 
 38 | it(`renders login form`, () => {
 39 |   const Log = login;
 40 |   const { getByTestId } = render(<Log data-testid="test-login" />)
 41 | 
 42 |   expect(getByTestId(/test-login/)).toBeTruthy();
 43 | });
 44 | 
 45 | it(`renders user controls`, () => {
 46 |   const User = userControls;
 47 |   const { getByTestId } = render(<User data-testid="test-controls" />)
 48 | 
 49 |   expect(getByTestId(/test-controls/)).toBeTruthy();
 50 | });
 51 | 
 52 | it(`renders failed login`, async () => {
 53 |   const mocks = [
 54 |     {
 55 |       request: {
 56 |         query: LOGIN_MUTATION,
 57 |         variables: {
 58 |           username: "invalid",
 59 |           password: "invalid",
 60 |           clientId: v3("invalidinvalid", v3.URL),
 61 |         }
 62 |       },
 63 |       result: {
 64 |         errors: [
 65 |           {
 66 |             message: "invalid_username",
 67 |             category: "user",
 68 |             locations: [{ line: 2, column: 3 }],
 69 |             path: ["login"]
 70 |           }
 71 |         ],
 72 |         data: { login: null }
 73 |       }
 74 |     }
 75 |   ];
 76 | 
 77 |   const { getByTestId, getByText, getByPlaceholderText } = render(
 78 |     <MockedProvider mocks={mocks} addTypename={false}>
 79 |       <Login data-testid="test-login" />
 80 |     </MockedProvider>
 81 |   );
 82 | 
 83 |   const form = await waitForElement(() => getByTestId(/test-login/));
 84 |   expect(form).toBeTruthy();
 85 | 
 86 |   const userInput = getByPlaceholderText(/Username/);
 87 |   expect(userInput).toBeTruthy();
 88 |   const passInput = getByPlaceholderText(/Password/);
 89 |   expect(passInput).toBeTruthy();
 90 |   
 91 |   // Input login info
 92 |   fireEvent.change(userInput, { target: { value: "invalid" } });
 93 |   fireEvent.change(passInput, { target: { value: "invalid" } });
 94 | 
 95 |   // Fire click event
 96 |   fireEvent.click(getByText(/Sign In/));
 97 | 
 98 |   const errorMessage = await waitForElement(() => form.querySelector('.login-form-info'));
 99 |   expect(errorMessage.innerHTML).toMatch(/Invalid Login/);
100 |   
101 | });
102 | 
103 | it(`renders successful login action`, async () => {
104 |   const mocks = [
105 |     {
106 |       request: {
107 |         query: LOGIN_MUTATION,
108 |         variables: {
109 |           username: "your_login",
110 |           password: "your_password",
111 |           clientId: v3("your_passwordyour_login", v3.URL),
112 |         }
113 |       },
114 |       result: {
115 |         data: {
116 |           login: {
117 |             authToken: 'some_id',
118 |             user: {
119 |               id: 'YCP1V9RWz',
120 |               nicename: 'ProxyWarrior',
121 |             }
122 |           }
123 |         }
124 |       }
125 |     }, {
126 |       request: {
127 |         query: VIEWER_QUERY
128 |       },
129 |       result: {
130 |         data: {
131 |           viewer: {
132 |             id: 'YCP1V9RWz',
133 |             userId: 1,
134 |             nicename: 'ProxyWarrior',
135 |             firstName: 'Dexter'
136 |           }
137 |         }
138 |       }
139 |     } 
140 |   ];
141 | 
142 |   const { getByTestId, getByText, getByPlaceholderText, container } = render(
143 |     <MockedProvider mocks={mocks} addTypename={false}>
144 |       <Login data-testid="test-login" />
145 |     </MockedProvider>
146 |   );
147 | 
148 |   const form = await waitForElement(() => getByTestId(/test-login/));
149 |   expect(form).toBeTruthy();
150 | 
151 |   const userInput = getByPlaceholderText(/Username/);
152 |   expect(userInput).toBeTruthy();
153 |   const passInput = getByPlaceholderText(/Password/);
154 |   expect(passInput).toBeTruthy();
155 |   
156 |   // Input login info
157 |   fireEvent.change(userInput, { target: { value: "your_login" } });
158 |   fireEvent.change(passInput, { target: { value: "your_password" } });
159 | 
160 |   // Fire click event
161 |   fireEvent.click(getByText(/Sign In/));
162 | 
163 |   const controls = await waitForElement(() => container.querySelector('.user-controls'));
164 |   expect(controls).toBeTruthy();
165 | 
166 |   const greeting = getByText(/Welcome back/);
167 |   expect(greeting).toBeTruthy();
168 |   const logoutButton = getByText(/Logout/);
169 |   expect(logoutButton).toBeTruthy();
170 | });
171 | 
172 | it(`renders successful login with custom templates`, async () => {
173 |   const customUserControls = userControls.compose({
174 |     view: ({ userId, nicename, firstName, logout, ...rest }) => (
175 |       <div {...rest} data-testid="user-controls">
176 |         <button
177 |           data-testid="logout-button"
178 |           onClick={logout}
179 |         >Logout</button>
180 |       </div>
181 |     )
182 |   });
183 | 
184 |   const CustomLogin = login.compose({
185 |     view: ({
186 |       username, password, userFieldError, passFieldError,
187 |       formError, onChange, onSubmit, reset,
188 |       ...rest,
189 |     }) => (
190 |       <form className="custom-login" {...rest} onSubmit={onSubmit}>
191 |         <input 
192 |           type="text"
193 |           name="username"
194 |           value={username}
195 |           onChange={onChange}
196 |           placeholder="Email"
197 |         />
198 |         <input 
199 |           type="text"
200 |           name="password"
201 |           value={password}
202 |           onChange={onChange}
203 |           placeholder="Password"
204 |         />
205 |         <button data-testid="login-button" type="submit">Log In</button>
206 |       </form>
207 |     ),
208 |     userControlsView: customUserControls,
209 |   });
210 | 
211 |   const mocks = [
212 |     {
213 |       request: {
214 |         query: LOGIN_MUTATION,
215 |         variables: {
216 |           username: "your_login",
217 |           password: "your_password",
218 |           clientId: v3("your_passwordyour_login", v3.URL),
219 |         }
220 |       },
221 |       result: {
222 |         data: {
223 |           login: {
224 |             authToken: 'some_id',
225 |             user: {
226 |               id: 'YCP1V9RWz',
227 |               nicename: 'ProxyWarrior',
228 |             }
229 |           }
230 |         }
231 |       }
232 |     }, {
233 |       request: {
234 |         query: VIEWER_QUERY
235 |       },
236 |       result: {
237 |         data: {
238 |           viewer: {
239 |             id: 'YCP1V9RWz',
240 |             userId: '1',
241 |             nicename: 'ProxyWarrior',
242 |             firstName: 'Dexter'
243 |           }
244 |         }
245 |       }
246 |     } 
247 |   ];
248 | 
249 |   const { getByTestId, getByPlaceholderText, container } = render(
250 |     <MockedProvider mocks={mocks} addTypename={false}>
251 |       <CustomLogin data-testid="custom-login" />
252 |     </MockedProvider>
253 |   );
254 | 
255 |   const form = await waitForElement(() => getByTestId(/custom-login/));
256 |   expect(form).toBeTruthy();
257 | 
258 |   const userInput = getByPlaceholderText(/Email/);
259 |   expect(userInput).toBeTruthy();
260 |   const passInput = getByPlaceholderText(/Password/);
261 |   expect(passInput).toBeTruthy();
262 |   
263 |   // Input login info
264 |   fireEvent.change(userInput, { target: { value: "your_login" } });
265 |   fireEvent.change(passInput, { target: { value: "your_password" } });
266 | 
267 |   // Fire login event
268 |   fireEvent.click(getByTestId(/login-button/));
269 | 
270 |   // Confirm user controls
271 |   const controls = await waitForElement(() => getByTestId(/user-controls/));
272 |   expect(controls).toBeTruthy();
273 |   
274 |   // Fire logout event
275 |   fireEvent.click(getByTestId(/logout-button/));
276 | 
277 |   // Confirm login form
278 |   const newForm = await waitForElement(() => getByTestId(/custom-login/));
279 |   expect(newForm).toBeTruthy();
280 | 
281 |   const newUserInput = getByPlaceholderText(/Email/);
282 |   expect(newUserInput).toBeTruthy();
283 |   const newPassInput = getByPlaceholderText(/Password/);
284 |   expect(newPassInput).toBeTruthy();
285 | });
286 | 
287 | it(`renders user controls loading state`, () => {
288 |   localStorage.setItem('user-token', 'yes_sir_a_legit_token');
289 |   const { getByText, getByTestId } = render(
290 |     <MockedProvider mocks={[]} addTypename={false}>
291 |       <Login data-testid="test-login" />
292 |     </MockedProvider>,
293 |   );
294 | 
295 |   const icon = getByTestId(/loading-icon/);
296 |   expect(icon).toBeTruthy();
297 |   expect(icon.innerHTML === '').toBeFalsy();
298 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
299 | });
300 | 
301 | it(`renders user controls error state`, async () => {
302 |   localStorage.setItem('user-token', 'yes_sir_a_legit_token');
303 |   const mocks = [{
304 |     request: {
305 |       query: VIEWER_QUERY,
306 |     },
307 |     error: {
308 |       message: 'Logged in user not found'
309 |     }
310 |   }];
311 | 
312 |   const { getByTestId } = render(
313 |     <MockedProvider mocks={mocks} addTypename={false}>
314 |       <Login data-test-id="test-user-controls" />
315 |     </MockedProvider>,
316 |   );
317 | 
318 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
319 |   expect(icon).toBeTruthy();
320 |   expect(icon.innerHTML === '').toBeFalsy();
321 |   const message = getByTestId(/error-message/);
322 |   expect(message).toBeTruthy()
323 |   expect(message.innerHTML === '').toBeFalsy();
324 | });


--------------------------------------------------------------------------------
/test/__unit_tests__/main.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { render, cleanup, waitForElement } from 'react-testing-library';
  3 | import { MockedProvider } from 'react-apollo/test-utils';
  4 | import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
  5 | import { MemoryRouter } from 'react-router-dom';
  6 | 
  7 | import introspectionQueryResultData from '../fragmentTypes.json';
  8 | import {
  9 |   ARCHIVE_QUERY,
 10 |   Main,
 11 |   main,
 12 |   LOOP_QUERY,
 13 |   PAGE_QUERY,
 14 |   PAGE_BY_QUERY,
 15 |   POST_BY_QUERY,
 16 | } from '../../src';
 17 | 
 18 | afterEach(cleanup);
 19 | 
 20 | const fragmentMatcher = new IntrospectionFragmentMatcher({
 21 |   introspectionQueryResultData
 22 | });
 23 | 
 24 | const loopQueryResults = {
 25 |   request: { query: LOOP_QUERY },
 26 |   result: {
 27 |     data: {
 28 |       allSettings: {
 29 |         readingSettingsPageForPosts: 'blog',
 30 |         readingSettingsPageOnFront: "W0T5R0x",
 31 |         readingSettingsPostsPerPage: 5,
 32 |         permalinkSettingsStructure: '/%monthnum%/%year%/%day%/%postname%/',
 33 |         permalinkSettingsTagBase: 'hash',
 34 |         permalinkSettingsCategoryBase: 'cat',
 35 |         __typename: 'Settings',
 36 |       },
 37 |     }
 38 |   },
 39 | }
 40 | 
 41 | const archiveResults = [{
 42 |   id: "P0TSH0t",
 43 |   postId: 7,
 44 |   uri: "parent-post/child-post",
 45 |   slug: "test-post",
 46 |   content: "<h1>Hello World</h1>",
 47 |   excerpt: "<h1>Hello World</h1>",
 48 |   date: "2018-09-12 23:02:46",
 49 |   modified: "2018-09-19 00:26:14",
 50 |   title: "Hello world!",
 51 |   permalink: "2018/09/hello-world/",
 52 |   author: {
 53 |     id: "Bugger",
 54 |     userId: 3,
 55 |     nicename: "kimboChop",
 56 |     avatar: {
 57 |       url: "http://2.gravatar.com/avatar/8cbbea0504f915ea88622f97badd1bed?s=96&d=mm&r=g",
 58 |       foundAvatar: true,
 59 |       __typename: 'Avatar',
 60 |     },
 61 |     __typename: 'User',
 62 |   },
 63 |   categories: {
 64 |     nodes: [
 65 |       {
 66 |         id: "Y2F0ZWdvcnk6MTM=",
 67 |         name: "Test One",
 68 |         slug: "test-one",
 69 |         __typename: 'Category',
 70 |       },
 71 |       {
 72 |         id: "Y2F0ZWdvcnk6MTQ=",
 73 |         name: "Test Two",
 74 |         slug: "test-two",
 75 |         __typename: 'Category',
 76 |       },
 77 |       {
 78 |         id: "Y2F0ZWdvcnk6MQ==",
 79 |         name: "Uncategorized",
 80 |         slug: "uncategorized",
 81 |         __typename: 'Category',
 82 |       },
 83 |       {
 84 |         id: "Y2F0ZWfvxwk6MQ==",
 85 |         name: "Web Development",
 86 |         slug: "web-dev",
 87 |         __typename: 'Category',
 88 |       }
 89 |     ],
 90 |     __typename: 'PostCategoriesConnection'
 91 |   },
 92 |   tags: {
 93 |     nodes: [
 94 |       {
 95 |         id: "cG9zdF90YWc6OQ==",
 96 |         name: "Forsha",
 97 |         slug: "forsha",
 98 |         __typename: 'Tag',
 99 |       },
100 |       {
101 |         id: "cG9zdF90YWc6MTA=",
102 |         name: "GetIt",
103 |         slug: 'get-it',
104 |         __typename: 'Tag',
105 |       },
106 |       {
107 |         id: "cG9zdF90YWc6MTI=",
108 |         name: "Jane",
109 |         slug: "jane",
110 |         __typename: 'Tag',
111 |       },
112 |       {
113 |         id: "cG9zdF90YWc6MTE=",
114 |         name: "Plain",
115 |         slug: "plain",
116 |         __typename: 'Tag',
117 |       },
118 |       {
119 |         id: "cG9zdF90YWc6OA==",
120 |         name: "Yep",
121 |         slug: "yep",
122 |         __typename: 'Tag',
123 |       },
124 |       {
125 |         id: "cG9zdF90YWc6OS==",
126 |         name: "Javascript",
127 |         slug: "javascript",
128 |         __typename: 'Tag',
129 |       }
130 |     ],
131 |     __typename: 'PostTagsConnection',
132 |   },
133 |   featuredImage: null,
134 |   __typename: 'Post',
135 | }];
136 | 
137 | const mocks = [
138 |   loopQueryResults,
139 |   {
140 |     request: {
141 |       query: POST_BY_QUERY,
142 |       variables: {
143 |         uri: null,
144 |         postId: null,
145 |         slug: 'test-post' 
146 |       },
147 |     },
148 |     result: {
149 |       data: {
150 |         postBy: {
151 |           id: "P0TSH0t",
152 |           postId: 7,
153 |           uri: "parent-post/child-post",
154 |           slug: "test-post",
155 |           content: "<h1>Hello World</h1>",
156 |           date: "2018-09-12 23:02:46",
157 |           modified: "2018-09-19 00:26:14",
158 |           title: "Hello world!",
159 |           permalink: "2018/09/hello-world/",
160 |           author: {
161 |             id: "Bugger",
162 |             userId: 3,
163 |             nicename: "kimboChop",
164 |             avatar: {
165 |               url: "http://2.gravatar.com/avatar/8cbbea0504f915ea88622f97badd1bed?s=96&d=mm&r=g",
166 |               foundAvatar: true,
167 |               __typename: 'Avatar',
168 |             },
169 |             __typename: 'User',
170 |           },
171 |           categories: {
172 |             nodes: [
173 |               {
174 |                 id: "Y2F0ZWdvcnk6MTM=",
175 |                 name: "testOne",
176 |                 __typename: 'Category',
177 |               },
178 |               {
179 |                 id: "Y2F0ZWdvcnk6MTQ=",
180 |                 name: "testtwo",
181 |                 __typename: 'Category',
182 |               },
183 |               {
184 |                 id: "Y2F0ZWdvcnk6MQ==",
185 |                 name: "Uncategorized",
186 |                 __typename: 'Category',
187 |               }
188 |             ],
189 |             __typename: 'PostCategoriesConnection'
190 |           },
191 |           tags: {
192 |             nodes: [
193 |               {
194 |                 id: "cG9zdF90YWc6OQ==",
195 |                 name: "Forsha",
196 |                 __typename: 'Tag',
197 |               },
198 |               {
199 |                 id: "cG9zdF90YWc6MTA=",
200 |                 name: "GetIt",
201 |                 __typename: 'Tag',
202 |               },
203 |               {
204 |                 id: "cG9zdF90YWc6MTI=",
205 |                 name: "Jane",
206 |                 __typename: 'Tag',
207 |               },
208 |               {
209 |                 id: "cG9zdF90YWc6MTE=",
210 |                 name: "Plain",
211 |                 __typename: 'Tag',
212 |               },
213 |               {
214 |                 id: "cG9zdF90YWc6OA==",
215 |                 name: "Yep",
216 |                 __typename: 'Tag',
217 |               }
218 |             ],
219 |             __typename: 'PostTagsConnection',
220 |           },
221 |           featuredImage: null,
222 |           __typename: 'Post',
223 |         }
224 |       }
225 |     }
226 |   },
227 |   {
228 |     request: {
229 |       query: PAGE_BY_QUERY,
230 |       variables: { 
231 |         pageId: null,
232 |         uri: 'sample-page',
233 |       },
234 |     },
235 |     result: {
236 |       data: {
237 |         pageBy: {
238 |           id: "W0T5R0x",
239 |           uri: "sample-page",
240 |           pageId: 3,
241 |           title: "Sample Page",
242 |           content: "<h1>Hello World</h1>",
243 |           modified: "2018-09-19 00:27:35",
244 |           date: "2018-09-15 23:19:11",
245 |           __typename: 'Page',
246 |         }
247 |       }
248 |     }
249 |   },
250 |   {
251 |     request: {
252 |       query: PAGE_QUERY,
253 |       variables: { 
254 |         id: "W0T5R0x",
255 |       },
256 |     },
257 |     result: {
258 |       data: {
259 |         page: {
260 |           id: "W0T5R0x",
261 |           uri: "sample-page",
262 |           pageId: 3,
263 |           title: "Sample Page",
264 |           content: "<h1>Hello World</h1>",
265 |           modified: "2018-09-19 00:27:35",
266 |           date: "2018-09-15 23:19:11",
267 |           __typename: 'Page',
268 |         }
269 |       }
270 |     }
271 |   },
272 |   {
273 |     request: {
274 |       query: ARCHIVE_QUERY,
275 |       variables: { 
276 |         first: 5,
277 |         category: null,
278 |         tag: null,
279 |         day: null,
280 |         month: null,
281 |         year: null,
282 |         author: null,
283 |         search: null,
284 |       },
285 |     },
286 |     result: {
287 |       data: {
288 |         posts: {
289 |           nodes: archiveResults,
290 |           __typename: 'RootPostsConnection'
291 |         }
292 |       }
293 |     }
294 |   },
295 |   {
296 |     request: {
297 |       query: ARCHIVE_QUERY,
298 |       variables: { 
299 |         first: 5,
300 |         category: null,
301 |         tag: null,
302 |         day: 1,
303 |         month: 9,
304 |         year: 2018,
305 |         author: null,
306 |         search: null,
307 |       },
308 |     },
309 |     result: {
310 |       data: {
311 |         posts: {
312 |           nodes: archiveResults,
313 |           __typename: 'RootPostsConnection'
314 |         }
315 |       }
316 |     }
317 |   },
318 |   {
319 |     request: {
320 |       query: ARCHIVE_QUERY,
321 |       variables: { 
322 |         first: 5,
323 |         category: null,
324 |         tag: null,
325 |         day: null,
326 |         month: 9,
327 |         year: 2018,
328 |         author: null,
329 |         search: null,
330 |       },
331 |     },
332 |     result: {
333 |       data: {
334 |         posts: {
335 |           nodes: archiveResults,
336 |           __typename: 'RootPostsConnection'
337 |         }
338 |       }
339 |     }
340 |   },
341 |   {
342 |     request: {
343 |       query: ARCHIVE_QUERY,
344 |       variables: { 
345 |         first: 5,
346 |         category: null,
347 |         tag: null,
348 |         day: null,
349 |         month: null,
350 |         year: 2018,
351 |         author: null,
352 |         search: null,
353 |       },
354 |     },
355 |     result: {
356 |       data: {
357 |         posts: {
358 |           nodes: archiveResults,
359 |           __typename: 'RootPostsConnection'
360 |         }
361 |       }
362 |     }
363 |   },
364 |   {
365 |     request: {
366 |       query: ARCHIVE_QUERY,
367 |       variables: { 
368 |         first: 5,
369 |         category: null,
370 |         tag: null,
371 |         day: null,
372 |         month: null,
373 |         year: null,
374 |         author: 'punch45',
375 |         search: null,
376 |       },
377 |     },
378 |     result: {
379 |       data: {
380 |         posts: {
381 |           nodes: archiveResults,
382 |           __typename: 'RootPostsConnection'
383 |         }
384 |       }
385 |     }
386 |   },
387 |   {
388 |     request: {
389 |       query: ARCHIVE_QUERY,
390 |       variables: { 
391 |         first: 5,
392 |         category: 'web-dev',
393 |         tag: null,
394 |         day: null,
395 |         month: null,
396 |         year: null,
397 |         author: null,
398 |         search: null,
399 |       },
400 |     },
401 |     result: {
402 |       data: {
403 |         posts: {
404 |           nodes: archiveResults,
405 |           __typename: 'RootPostsConnection'
406 |         }
407 |       }
408 |     }
409 |   },
410 |   {
411 |     request: {
412 |       query: ARCHIVE_QUERY,
413 |       variables: { 
414 |         first: 5,
415 |         category: null,
416 |         tag: 'javascript',
417 |         day: null,
418 |         month: null,
419 |         year: null,
420 |         author: null,
421 |         search: null,
422 |       },
423 |     },
424 |     result: {
425 |       data: {
426 |         posts: {
427 |           nodes: archiveResults,
428 |           __typename: 'RootPostsConnection'
429 |         }
430 |       }
431 |     }
432 |   },
433 |   {
434 |     request: {
435 |       query: ARCHIVE_QUERY,
436 |       variables: { 
437 |         first: 5,
438 |         category: null,
439 |         tag: null,
440 |         day: null,
441 |         month: null,
442 |         year: null,
443 |         author: null,
444 |         search: 'lorem ipsum',
445 |       },
446 |     },
447 |     result: {
448 |       data: {
449 |         posts: {
450 |           nodes: archiveResults,
451 |           __typename: 'RootPostsConnection'
452 |         }
453 |       }
454 |     }
455 |   },
456 |   {
457 |     request: {
458 |       query: PAGE_BY_QUERY,
459 |       variables: { 
460 |         pageId: null,
461 |         uri: 'nothing',
462 |       },
463 |     },
464 |     result: {
465 |       errors: [
466 |         {
467 |           message: "The \"uri\" is invalid",
468 |           category: "user",
469 |           locations: [
470 |             {
471 |               line: 2,
472 |               column: 3
473 |             }
474 |           ],
475 |           path: [
476 |             "page"
477 |           ]
478 |         }
479 |       ],
480 |       data: {
481 |         pageBy: null,
482 |       }
483 |     }
484 |   },
485 | ];
486 | 
487 | const cache = new InMemoryCache({ fragmentMatcher });
488 | 
489 | it(`navigates to a post`, async () => {
490 |   const { getByTestId, getByText } = render(
491 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
492 |       <MemoryRouter initialEntries={[ '/09/2018/12/test-post' ]}>
493 |         <Main data-testid="test-main" />
494 |       </MemoryRouter>
495 |     </MockedProvider>
496 |   );
497 | 
498 |   // Confirms Main
499 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
500 |   expect(mainElement).toBeTruthy();
501 | 
502 |   // Confirms Content
503 |   const content = await waitForElement(() => getByText(/Hello World/));
504 |   expect(content).toBeTruthy();
505 | });
506 | 
507 | it(`navigates to a page`, async () => {
508 |   const { getByTestId, getByText } = render(
509 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
510 |       <MemoryRouter initialEntries={[ '/sample-page' ]}>
511 |         <Main data-testid="test-main" />
512 |       </MemoryRouter>
513 |     </MockedProvider>
514 |   );
515 | 
516 |   // Confirms Main
517 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
518 |   expect(mainElement).toBeTruthy();
519 | 
520 |   // Confirms Content
521 |   const content = await waitForElement(() => getByText(/Hello World/));
522 |   expect(content).toBeTruthy();
523 | });
524 | 
525 | it(`navigates to homepage`, async () => {
526 |   const { getByTestId, getByText } = render(
527 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
528 |       <MemoryRouter initialEntries={[ '/' ]}>
529 |         <Main data-testid="test-main" />
530 |       </MemoryRouter>
531 |     </MockedProvider>
532 |   );
533 | 
534 |   // Confirms Main
535 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
536 |   expect(mainElement).toBeTruthy();
537 | 
538 |   // Confirms Content
539 |   const content = await waitForElement(() => getByText(/Hello World/));
540 |   expect(content).toBeTruthy();
541 | });
542 | 
543 | it(`navigates to an posts archive of the most recent posts
544 |   with custom view layer component`, async () => {
545 |   const customMain = ({ Archive, Page, Post, Routes, ...rest }) => (
546 |     <main {...rest}>
547 |       <Routes archive={Archive} page={Page} post={Post} />
548 |     </main>
549 |   );
550 | 
551 |   const CustomMain = main.compose({ view: customMain });
552 | 
553 |   const { getByTestId, getByText } = render(
554 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
555 |       <MemoryRouter initialEntries={[ '/' ]}>
556 |         <CustomMain data-testid="test-main" />
557 |       </MemoryRouter>
558 |     </MockedProvider>
559 |   );
560 | 
561 |   // Confirms Main
562 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
563 |   expect(mainElement).toBeTruthy();
564 | 
565 |   // Confirms Content
566 |   const content = await waitForElement(() => getByText(/Hello World/));
567 |   expect(content).toBeTruthy();
568 | });
569 | 
570 | it(`navigates to an posts archive by month`, async () => {
571 |   const { getByTestId, getByText } = render(
572 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
573 |       <MemoryRouter initialEntries={[ '/2018/09/01' ]}>
574 |         <Main data-testid="test-main" />
575 |       </MemoryRouter>
576 |     </MockedProvider>
577 |   );
578 | 
579 |   // Confirms Main
580 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
581 |   expect(mainElement).toBeTruthy();
582 | 
583 |   // Confirms Content
584 |   const content = await waitForElement(() => getByText(/Posts made September 1, 2018/));
585 |   expect(content).toBeTruthy();
586 | });
587 | 
588 | it(`navigates to an posts archive by month`, async () => {
589 |   const { getByTestId, getByText } = render(
590 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
591 |       <MemoryRouter initialEntries={[ '/2018/09' ]}>
592 |         <Main data-testid="test-main" />
593 |       </MemoryRouter>
594 |     </MockedProvider>
595 |   );
596 | 
597 |   // Confirms Main
598 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
599 |   expect(mainElement).toBeTruthy();
600 | 
601 |   // Confirms Content
602 |   const content = await waitForElement(() => getByText(/Posts made September 2018/));
603 |   expect(content).toBeTruthy();
604 | });
605 | 
606 | it(`navigates to an posts archive by year`, async () => {
607 |   const { getByTestId, getByText } = render(
608 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
609 |       <MemoryRouter initialEntries={[ '/2018' ]}>
610 |         <Main data-testid="test-main" />
611 |       </MemoryRouter>
612 |     </MockedProvider>
613 |   );
614 | 
615 |   // Confirms Main
616 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
617 |   expect(mainElement).toBeTruthy();
618 | 
619 |   // Confirms Content
620 |   const content = await waitForElement(() => getByText(/Posts made this year|Posts made last year|Posts made in 2018/));
621 |   expect(content).toBeTruthy();
622 | });
623 | 
624 | it(`navigates to an posts archive by author`, async () => {
625 |   const { getByTestId, getByText } = render(
626 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
627 |       <MemoryRouter initialEntries={[ '/author/punch45' ]}>
628 |         <Main data-testid="test-main" />
629 |       </MemoryRouter>
630 |     </MockedProvider>
631 |   );
632 | 
633 |   // Confirms Main
634 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
635 |   expect(mainElement).toBeTruthy();
636 | 
637 |   // Confirms Content
638 |   const content = await waitForElement(() => getByText(/Posts made by punch45/));
639 |   expect(content).toBeTruthy();
640 | });
641 | 
642 | it(`navigates to an posts archive by category using categoryBase`, async () => {
643 |   const { getByTestId, getByText } = render(
644 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
645 |       <MemoryRouter initialEntries={[ '/cat/web-dev' ]}>
646 |         <Main data-testid="test-main" />
647 |       </MemoryRouter>
648 |     </MockedProvider>
649 |   );
650 | 
651 |   // Confirms Main
652 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
653 |   expect(mainElement).toBeTruthy();
654 | 
655 |   // Confirms Content
656 |   const content = await waitForElement(() => getByText(/Posts categorized in Web Development/));
657 |   expect(content).toBeTruthy();
658 | });
659 | 
660 | it(`navigates to an posts archive by tag using tagBase`, async () => {
661 |   const { getByTestId, getByText } = render(
662 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
663 |       <MemoryRouter initialEntries={[ '/hash/javascript' ]}>
664 |         <Main data-testid="test-main" />
665 |       </MemoryRouter>
666 |     </MockedProvider>
667 |   );
668 | 
669 |   // Confirms Main
670 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
671 |   expect(mainElement).toBeTruthy();
672 | 
673 |   // Confirms Content
674 |   const content = await waitForElement(() => getByText(/Posts tagged in Javascript/));
675 |   expect(content).toBeTruthy();
676 | });
677 | 
678 | it(`navigates to an posts archive by search`, async () => {
679 |   const { getByTestId, getByText } = render(
680 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
681 |       <MemoryRouter initialEntries={[ '/search/lorem ipsum' ]}>
682 |         <Main data-testid="test-main" />
683 |       </MemoryRouter>
684 |     </MockedProvider>
685 |   );
686 | 
687 |   // Confirms Main
688 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
689 |   expect(mainElement).toBeTruthy();
690 | 
691 |   // Confirms Content
692 |   const content = await waitForElement(() => getByText(/Searching "lorem ipsum"/));
693 |   expect(content).toBeTruthy();
694 | });
695 | 
696 | it(`navigates to an 404 error`, async () => {
697 |   const { getByTestId, getByText } = render(
698 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
699 |       <MemoryRouter initialEntries={[ '/nothing' ]}>
700 |         <Main data-testid="test-main" />
701 |       </MemoryRouter>
702 |     </MockedProvider>
703 |   );
704 | 
705 |   // Confirms Main
706 |   const mainElement = await waitForElement(() => getByTestId(/test-main/));
707 |   expect(mainElement).toBeTruthy();
708 | 
709 |   // Confirms Content
710 |   const content = await waitForElement(() => 
711 |     getByText(/^Sorry, we can't locate the page you're looking for. Please, try again later.$|^GraphQL error: The "uri" is invalid$/));
712 |   expect(content).toBeTruthy();
713 | });
714 | 
715 | it(`renders loading state`, () => {
716 |   const { getByText, getByTestId } = render(
717 |     <MockedProvider mocks={[]} addTypename={false}>
718 |       <MemoryRouter initialEntries={[ '/' ]}>
719 |         <Main />
720 |       </MemoryRouter>
721 |     </MockedProvider>,
722 |   );
723 | 
724 |   const icon = getByTestId(/loading-icon/);
725 |   expect(icon).toBeTruthy();
726 |   expect(icon.innerHTML === '').toBeFalsy();
727 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
728 | })
729 | 
730 | it(`renders error state`, async () => {
731 |   const errorMocks = [{
732 |     request: {
733 |       query: LOOP_QUERY,
734 |     },
735 |     error: new Error('its broke'),
736 |   }];
737 | 
738 |   const { getByTestId } = render(
739 |     <MockedProvider mocks={errorMocks} addTypename={false}>
740 |       <MemoryRouter initialEntries={[ '/' ]}>
741 |         <Main />
742 |       </MemoryRouter>
743 |     </MockedProvider>,
744 |   );
745 | 
746 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
747 |   expect(icon).toBeTruthy();
748 |   expect(icon.innerHTML === '').toBeFalsy();
749 |   const message = getByTestId(/error-message/);
750 |   expect(message).toBeTruthy();
751 |   expect(message.innerHTML === '').toBeFalsy();
752 | });


--------------------------------------------------------------------------------
/test/__unit_tests__/menu.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import _ from 'lodash';
  3 | import { render, cleanup, waitForElement } from 'react-testing-library';
  4 | import { MockedProvider } from 'react-apollo/test-utils';
  5 | import { MemoryRouter as Router } from 'react-router-dom';
  6 | import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
  7 | 
  8 | import introspectionQueryResultData from '../fragmentTypes.json';
  9 | import {
 10 |   MENU_QUERY,
 11 |   MENU_WHERE_QUERY,
 12 |   MENU_ITEM_QUERY,
 13 |   Menu,
 14 |   menu,
 15 |   menuItem,
 16 |   subMenu,
 17 |   Link,
 18 | } from '../../src';
 19 | 
 20 | afterEach(cleanup);
 21 | 
 22 | const fragmentMatcher = new IntrospectionFragmentMatcher({
 23 |   introspectionQueryResultData
 24 | });
 25 | 
 26 | const cache = new InMemoryCache({ fragmentMatcher });
 27 | 
 28 | const menuData = {
 29 |   id: "TWVudTo2",
 30 |   slug: "primary",
 31 |   menuItems: {
 32 |     nodes: [
 33 |       {
 34 |         id: "TWVudUl0ZW06MTQw",
 35 |         menuItemId: 100,
 36 |         url: "https://facebook.com",
 37 |         label: "Facebook",
 38 |         cssClasses: [],
 39 |         description: null,
 40 |         __typename: 'MenuItem',
 41 |       },
 42 |       {
 43 |         id: "TWVudUl0ZW06MTQx",
 44 |         menuItemId: 101,
 45 |         url: "https://twitter.com",
 46 |         label: "Twitter",
 47 |         cssClasses: [],
 48 |         description: null,
 49 |         __typename: 'MenuItem',
 50 |       },
 51 |       {
 52 |         id: "TWVudUl0ZW06MTQy",
 53 |         menuItemId: 102,
 54 |         url: "https://github.com",
 55 |         label: "GitHub",
 56 |         cssClasses: [],
 57 |         description: null,
 58 |         __typename: 'MenuItem',
 59 |       },
 60 |       {
 61 |         id: "TWVudUl0ZW06MTQz",
 62 |         menuItemId: 103,
 63 |         url: "https://linkedin.com",
 64 |         label: "LinkedIn",
 65 |         cssClasses: [],
 66 |         description: null,
 67 |         __typename: 'MenuItem',
 68 |       },
 69 |       {
 70 |         id: "TWVudUl0ZW06MTQ0",
 71 |         menuItemId: 104,
 72 |         url: "https://wordpress.org",
 73 |         label: "WordPress",
 74 |         cssClasses: [],
 75 |         description: null,
 76 |         __typename: 'MenuItem',
 77 |       }
 78 |     ],
 79 |     __typename: 'MenuItemsConnection'
 80 |   },
 81 |   __typename: 'Menu'
 82 | };
 83 | 
 84 | const generalSettingsData = {
 85 |   url: 'https://example.com',
 86 |   __typename: 'Settings',
 87 | }
 88 | 
 89 | const menuItemRequests = [
 90 |   {
 91 |     request: {
 92 |       query: MENU_ITEM_QUERY,
 93 |       variables: { id: "TWVudUl0ZW06MTQw" }
 94 |     },
 95 |     result: {
 96 |       data: {
 97 |         menuItem: {
 98 |           childItems: {
 99 |             nodes: [],
100 |             __typename: 'MenuItemsConnection',
101 |           },
102 |           __typename: 'MenuItem',
103 |         }
104 |       }
105 |     }
106 |   }, {
107 |     request: {
108 |       query: MENU_ITEM_QUERY,
109 |       variables: { id: "TWVudUl0ZW06MTQx" }
110 |     },
111 |     result: {
112 |       data: {
113 |         menuItem: {
114 |           childItems: {
115 |             nodes: [],
116 |             __typename: 'MenuItemsConnection',
117 |           },
118 |           __typename: 'MenuItem',
119 |         }
120 |       }
121 |     }
122 |   }, {
123 |     request: {
124 |       query: MENU_ITEM_QUERY,
125 |       variables: { id: "TWVudUl0ZW06MTQy" }
126 |     },
127 |     result: {
128 |       data: {
129 |         menuItem: {
130 |           childItems: {
131 |             nodes: [],
132 |             __typename: 'MenuItemsConnection',
133 |           },
134 |           __typename: 'MenuItem',
135 |         }
136 |       }
137 |     }
138 |   }, {
139 |     request: {
140 |       query: MENU_ITEM_QUERY,
141 |       variables: { id: "TWVudUl0ZW06MTQz" }
142 |     },
143 |     result: {
144 |       data: {
145 |         menuItem: {
146 |           childItems: {
147 |             nodes: [
148 |               {
149 |                 id: "TWVudUl0ZW06MTQs",
150 |                 menuItemId: 110,
151 |                 url: "https://google.com",
152 |                 label: "Google",
153 |                 cssClasses: [],
154 |                 description: null,
155 |                 __typename: 'MenuItem',
156 |               },
157 |               {
158 |                 id: "TWVudUl0ZW06MTQj",
159 |                 menuItemId: 111,
160 |                 url: "https://yahoo.com",
161 |                 label: "Yahoo",
162 |                 cssClasses: [],
163 |                 description: null,
164 |                 __typename: 'MenuItem',
165 |               },
166 |               {
167 |                 id: "TWVudUl0ZW06MTQp",
168 |                 menuItemId: 112,
169 |                 url: "https://bing.com",
170 |                 label: "Bing",
171 |                 cssClasses: [],
172 |                 description: null,
173 |                 __typename: 'MenuItem',
174 |               },
175 |             ],
176 |             __typename: 'MenuItemsConnection',
177 |           },
178 |           __typename: 'MenuItem',
179 |         }
180 |       }
181 |     }
182 |   }, {
183 |     request: {
184 |       query: MENU_ITEM_QUERY,
185 |       variables: { id: "TWVudUl0ZW06MTQ0" }
186 |     },
187 |     result: {
188 |       data: {
189 |         menuItem: {
190 |           childItems: {
191 |             nodes: [],
192 |             __typename: 'MenuItemsConnection',
193 |           },
194 |           __typename: 'MenuItem',
195 |         }
196 |       }
197 |     }
198 |   }, {
199 |     request: {
200 |       query: MENU_ITEM_QUERY,
201 |       variables: { id: "TWVudUl0ZW06MTQs" }
202 |     },
203 |     result: {
204 |       data: {
205 |         menuItem: {
206 |           childItems: {
207 |             nodes: [],
208 |             __typename: 'MenuItemsConnection',
209 |           },
210 |           __typename: 'MenuItem',
211 |         }
212 |       }
213 |     }
214 |   }, {
215 |     request: {
216 |       query: MENU_ITEM_QUERY,
217 |       variables: { id: "TWVudUl0ZW06MTQj" }
218 |     },
219 |     result: {
220 |       data: {
221 |         menuItem: {
222 |           childItems: {
223 |             nodes: [],
224 |             __typename: 'MenuItemsConnection',
225 |           },
226 |           __typename: 'MenuItem',
227 |         }
228 |       }
229 |     }
230 |   }, {
231 |     request: {
232 |       query: MENU_ITEM_QUERY,
233 |       variables: { id: "TWVudUl0ZW06MTQp" }
234 |     },
235 |     result: {
236 |       data: {
237 |         menuItem: {
238 |           childItems: {
239 |             nodes: [],
240 |             __typename: 'MenuItemsConnection',
241 |           },
242 |           __typename: 'MenuItem',
243 |         }
244 |       }
245 |     }
246 |   }
247 | ];
248 | 
249 | const mocks = [
250 |   {
251 |     request: {
252 |       query: MENU_QUERY,
253 |       variables: { id: "TWVudTo2" },
254 |     },
255 |     result: {
256 |       data: {
257 |         menu: menuData,
258 |         generalSettings: generalSettingsData,
259 |       }
260 |     }
261 |   },
262 |   {
263 |     request: {
264 |       query: MENU_WHERE_QUERY,
265 |       variables: { menuId: null, location: "PRIMARY", slug: null },
266 |     },
267 |     result: {
268 |       data: {
269 |         menus: {
270 |           nodes: [menuData],
271 |           __typename: 'MenusConnection',
272 |         },
273 |         generalSettings: generalSettingsData,
274 |       }
275 |     }
276 |   },
277 |   ...menuItemRequests
278 | ];
279 | 
280 | it(`renders a menu by id`, async () => {
281 |   const { getByTestId, getByText } = render(
282 |     <MockedProvider mocks={mocks} cache={cache} addTypename>
283 |       <Router initialEntries={['/']}>
284 |         <Menu id="TWVudTo2" className="test-menu" data-testid="test-menu" />
285 |       </Router>
286 |     </MockedProvider>
287 |   );
288 | 
289 |   const testMenu = await waitForElement(() => getByTestId('test-menu'));
290 |   expect(testMenu).toBeTruthy();
291 |   expect(testMenu.getAttribute('id')).toEqual('menu-primary');
292 | 
293 |   const facebook = await waitForElement(() => getByText(/Facebook/));
294 |   expect(facebook).toBeTruthy();
295 |   expect(facebook.getAttribute('href')).toEqual('https://facebook.com');
296 | 
297 |   const twitter = getByText(/Twitter/);
298 |   expect(twitter).toBeTruthy();
299 |   expect(twitter.getAttribute('href')).toEqual('https://twitter.com');
300 | 
301 |   const github = getByText(/GitHub/);
302 |   expect(github).toBeTruthy();
303 |   expect(github.getAttribute('href')).toEqual('https://github.com');
304 | 
305 |   const linkedIn = getByText(/LinkedIn/);
306 |   expect(linkedIn).toBeTruthy();
307 |   expect(linkedIn.getAttribute('href')).toEqual('https://linkedin.com');
308 | 
309 |   const wordpress = getByText(/WordPress/);
310 |   expect(wordpress).toBeTruthy();
311 |   expect(wordpress.getAttribute('href')).toEqual('https://wordpress.org');
312 | 
313 |   const sub = testMenu.querySelector('.menu');
314 |   expect(sub).toBeTruthy();
315 | 
316 |   const google = await waitForElement(() => getByText(/Google/));
317 |   expect(google).toBeTruthy();
318 |   expect(google.getAttribute('href')).toEqual('https://google.com');
319 | 
320 |   const yahoo = getByText(/Yahoo/);
321 |   expect(yahoo).toBeTruthy();
322 |   expect(yahoo.getAttribute('href')).toEqual('https://yahoo.com');
323 | 
324 |   const bing = getByText(/Bing/);
325 |   expect(bing).toBeTruthy();
326 |   expect(bing.getAttribute('href')).toEqual('https://bing.com');
327 | });
328 | 
329 | it(`renders a menu by location`, async () => {
330 |   const { getByTestId, getByText } = render(
331 |     <MockedProvider mocks={mocks}  cache={cache} addTypename>
332 |       <Router initialEntries={['/']}>
333 |         <Menu location="PRIMARY" className="test-menu" data-testid="test-menu" />
334 |       </Router>
335 |     </MockedProvider>
336 |   );
337 | 
338 |   const testMenu = await waitForElement(() => getByTestId('test-menu'));
339 |   expect(testMenu).toBeTruthy();
340 |   expect(testMenu.getAttribute('id')).toEqual('menu-primary'); 
341 | 
342 |   const facebook = getByText(/Facebook/);
343 |   expect(facebook).toBeTruthy();
344 |   expect(facebook.getAttribute('href')).toEqual('https://facebook.com');
345 | 
346 |   const twitter = getByText(/Twitter/);
347 |   expect(twitter).toBeTruthy();
348 |   expect(twitter.getAttribute('href')).toEqual('https://twitter.com');
349 | 
350 |   const github = getByText(/GitHub/);
351 |   expect(github).toBeTruthy();
352 |   expect(github.getAttribute('href')).toEqual('https://github.com');
353 | 
354 |   const linkedIn = getByText(/LinkedIn/);
355 |   expect(linkedIn).toBeTruthy();
356 |   expect(linkedIn.getAttribute('href')).toEqual('https://linkedin.com');
357 | 
358 |   const wordpress = getByText(/WordPress/);
359 |   expect(wordpress).toBeTruthy();
360 |   expect(wordpress.getAttribute('href')).toEqual('https://wordpress.org');
361 | 
362 |   const sub = testMenu.querySelector('.menu');
363 |   expect(sub).toBeTruthy();
364 | 
365 |   const google = await waitForElement(() => getByText(/Google/));
366 |   expect(google).toBeTruthy();
367 |   expect(google.getAttribute('href')).toEqual('https://google.com');
368 | 
369 |   const yahoo = getByText(/Yahoo/);
370 |   expect(yahoo).toBeTruthy();
371 |   expect(yahoo.getAttribute('href')).toEqual('https://yahoo.com');
372 | 
373 |   const bing = getByText(/Bing/);
374 |   expect(bing).toBeTruthy();
375 |   expect(bing.getAttribute('href')).toEqual('https://bing.com');
376 | });
377 | 
378 | it(`renders a menu with a custom template`, async () => {
379 |   const subMenuView = ({ MenuItem, SubMenu, items, ...rest }) => (
380 |     <ol data-testid="custom-submenu" {...rest}>
381 |       {_.map(items, ({ id, menuItemId, cssClasses, ...r}) => (
382 |         <li key={id}>
383 |           <MenuItem
384 |             className={`menuItem ${cssClasses.join(' ')}`}
385 |             id={id}
386 |             {...{ ...r, MenuItem, SubMenu }}
387 |           />
388 |         </li>
389 |       ))}
390 |     </ol>
391 |   )
392 | 
393 |   const menuItemView = ({ url, label, items, SubMenu, MenuItem, description, ...rest }) => (
394 |     <React.Fragment>
395 |       <Link {...{ ...rest, url }}>{label}</Link>
396 |       {!_.isEmpty(items) && (
397 |         <SubMenu
398 |           className="sub-menu"
399 |           {...{ items, SubMenu, MenuItem}}
400 |         />
401 |       )}
402 |     </React.Fragment>
403 |   )
404 | 
405 |   const customMenuView = ({ slug, className, items, MenuItem, SubMenu, ...rest }) => (
406 |     <div id={`menu-${slug}`} className={className} {...rest}>
407 |       {_.map(items, ({ id, menuItemId, cssClasses, ...r}) => (
408 |         <MenuItem
409 |           className={`menuItem ${cssClasses.join(' ')}`}
410 |           key={id}
411 |           id={id}
412 |           {...{ ...r, MenuItem, SubMenu }}
413 |         />
414 |       ))}
415 |     </div>
416 |   );
417 | 
418 |   const SubMenu = subMenu.compose({ view: subMenuView });
419 |   const MenuItem = menuItem.compose({ view: menuItemView });
420 |   const CustomMenu = menu.compose({
421 |     view: customMenuView,
422 |     MenuItem,
423 |     SubMenu
424 |   });
425 | 
426 |   const { getByTestId, getByText } = render(
427 |     <MockedProvider mocks={mocks}  cache={cache} addTypename>
428 |       <CustomMenu location="PRIMARY" data-testid="test-menu" />
429 |     </MockedProvider>
430 |   );
431 | 
432 |   const testMenu = await waitForElement(() => getByTestId('test-menu'));
433 |   expect(testMenu).toBeTruthy();
434 |   expect(testMenu.getAttribute('id')).toEqual('menu-primary');
435 | 
436 |   const facebook = await waitForElement(() => getByText(/Facebook/));
437 |   expect(facebook).toBeTruthy();
438 |   expect(facebook.getAttribute('href')).toEqual('https://facebook.com');
439 | 
440 |   const twitter = getByText(/Twitter/);
441 |   expect(twitter).toBeTruthy();
442 |   expect(twitter.getAttribute('href')).toEqual('https://twitter.com');
443 | 
444 |   const github = getByText(/GitHub/);
445 |   expect(github).toBeTruthy();
446 |   expect(github.getAttribute('href')).toEqual('https://github.com');
447 | 
448 |   const linkedIn = getByText(/LinkedIn/);
449 |   expect(linkedIn).toBeTruthy();
450 |   expect(linkedIn.getAttribute('href')).toEqual('https://linkedin.com');
451 | 
452 |   const wordpress = getByText(/WordPress/);
453 |   expect(wordpress).toBeTruthy();
454 |   expect(wordpress.getAttribute('href')).toEqual('https://wordpress.org');
455 | 
456 |   const sub = testMenu.querySelector('.sub-menu');
457 |   expect(sub).toBeTruthy();
458 | 
459 |   const google = await waitForElement(() => getByText(/Google/));
460 |   expect(google).toBeTruthy();
461 |   expect(google.getAttribute('href')).toEqual('https://google.com');
462 | 
463 |   const yahoo = getByText(/Yahoo/);
464 |   expect(yahoo).toBeTruthy();
465 |   expect(yahoo.getAttribute('href')).toEqual('https://yahoo.com');
466 | 
467 |   const bing = getByText(/Bing/);
468 |   expect(bing).toBeTruthy();
469 |   expect(bing.getAttribute('href')).toEqual('https://bing.com');
470 | });
471 | 
472 | it(`renders loading state initially`, () => {
473 |   const { getByText, getByTestId } = render(
474 |     <MockedProvider mocks={[]} addTypename={false}>
475 |       <Menu id={1} />
476 |     </MockedProvider>,
477 |   );
478 | 
479 |   const icon = getByTestId(/loading-icon/);
480 |   expect(icon).toBeTruthy();
481 |   expect(icon.innerHTML === '').toBeFalsy();
482 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
483 | });
484 | 
485 | it(`renders error state`, async () => {
486 |   const errorMocks = [{
487 |     request: {
488 |       query: MENU_QUERY,
489 |       variables: { id: 1 },
490 |     },
491 |     error: new Error('its broke'),
492 |   }];
493 | 
494 |   const { getByTestId } = render(
495 |     <MockedProvider mocks={errorMocks} cache={cache} addTypename>
496 |       <Menu id={1} />
497 |     </MockedProvider>,
498 |   );
499 | 
500 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
501 |   expect(icon).toBeTruthy();
502 |   expect(icon.innerHTML === '').toBeFalsy();
503 |   const message = getByTestId(/error-message/);
504 |   expect(message).toBeTruthy()
505 |   expect(message.innerHTML === '').toBeFalsy();
506 | });


--------------------------------------------------------------------------------
/test/__unit_tests__/page.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactHtmlParser from 'react-html-parser';
  3 | import { render, cleanup, waitForElement } from 'react-testing-library';
  4 | import { MockedProvider } from 'react-apollo/test-utils';
  5 | 
  6 | import { PAGE_QUERY, PAGE_BY_QUERY, Page, page } from '../../src';
  7 | 
  8 | afterEach(cleanup);
  9 | 
 10 | it(`renders a page`, async () => {
 11 |   const mocks = [{
 12 |     request: {
 13 |       query: PAGE_QUERY,
 14 |       variables: { id: "W0T5R0x" },
 15 |     },
 16 |     result: {
 17 |       data: {
 18 |         page: {
 19 |           id: "W0T5R0x",
 20 |           uri: "test-page",
 21 |           pageId: 125,
 22 |           title: "Sample Page",
 23 |           content: "<h1>Hello World</h1>",
 24 |           modified: "2018-09-19 00:27:35",
 25 |           date: "2018-09-15 23:19:11"
 26 |         }
 27 |       }
 28 |     }
 29 |   }];
 30 |   const { getByTestId } = render(
 31 |     <MockedProvider mocks={mocks} addTypename={false}>
 32 |       <Page id="W0T5R0x" data-testid="test-page" />
 33 |     </MockedProvider>
 34 |   );
 35 |   
 36 |   const body = await waitForElement(() => getByTestId(/test-page/));
 37 |   expect(body).toBeTruthy();
 38 | });
 39 | 
 40 | 
 41 | it(`renders a page by uri`, async () => {
 42 |   const mocks = [{
 43 |     request: {
 44 |       query: PAGE_BY_QUERY,
 45 |       variables: {
 46 |         uri: "test-page",
 47 |         pageId: null,
 48 |       },
 49 |     },
 50 |     result: {
 51 |       data: {
 52 |         pageBy: {
 53 |           id: "W0T5R0x",
 54 |           uri: "test-page",
 55 |           pageId: 125,
 56 |           title: "Sample Page",
 57 |           content: "<h1>Hello World</h1>",
 58 |           modified: "2018-09-19 00:27:35",
 59 |           date: "2018-09-15 23:19:11"
 60 |         }
 61 |       }
 62 |     }
 63 |   }];
 64 |   const { getByTestId } = render(
 65 |     <MockedProvider mocks={mocks} addTypename={false}>
 66 |       <Page uri="test-page" data-testid="test-page" />
 67 |     </MockedProvider>
 68 |   );
 69 |   
 70 |   const body = await waitForElement(() => getByTestId(/test-page/));
 71 |   expect(body).toBeTruthy();
 72 | });
 73 | 
 74 | 
 75 | it(`render a page with a custom view component`, async () => {
 76 |   const CustomPage = page.compose({
 77 |     view: ({ pageId, title, content, date, modified, ...rest }) => (
 78 |       <div id={`page-${pageId}`} data-testid="page-body" {...rest}>
 79 |         <h1 data-testid="page-title">{title}</h1>
 80 |         <div data-testid="page-content">{ReactHtmlParser(content)}</div>
 81 |         <div>
 82 |           <span data-testid="page-date">{date}</span>
 83 |           <span data-testid="page-modified">{modified}</span>
 84 |         </div>
 85 |       </div>
 86 |     )
 87 |   });
 88 | 
 89 |   const mocks = [{
 90 |     request: {
 91 |       query: PAGE_BY_QUERY,
 92 |       variables: { 
 93 |         pageId: 544,
 94 |         uri: null,
 95 |       },
 96 |     },
 97 |     result: {
 98 |       data: {
 99 |         pageBy: {
100 |           id: "W0T5R0x",
101 |           uri: "test-page",
102 |           pageId: 544,
103 |           title: "Sample Page",
104 |           content: "<h1>Hello World</h1>",
105 |           modified: "2018-09-19 00:27:35",
106 |           date: "2018-09-15 23:19:11"
107 |         }
108 |       }
109 |     }
110 |   }];
111 |   const { getByTestId } = render(
112 |     <MockedProvider mocks={mocks} addTypename={false}>
113 |       <CustomPage pageId={544} />
114 |     </MockedProvider>
115 |   );
116 |   
117 |   const body = await waitForElement(() => getByTestId(/page-body/));
118 |   expect(body).toBeTruthy();
119 | 
120 |   const title = getByTestId(/page-title/);
121 |   expect(title.innerHTML).toMatch(/Sample Page/);
122 | 
123 |   const content = getByTestId(/page-content/);
124 |   expect(content.innerHTML).toMatch(/<h1>Hello World<\/h1>/);
125 | 
126 |   const date = getByTestId(/page-date/);
127 |   expect(date.innerHTML).toMatch(/2018-09-15 23:19:11/);
128 | 
129 |   const modified = getByTestId(/page-modified/);
130 |   expect(modified.innerHTML).toMatch(/2018-09-19 00:27:35/);
131 | });
132 | 
133 | 
134 | it(`renders page not found`, async () => {
135 |   const mocks = [{
136 |     request: {
137 |       query: PAGE_QUERY,
138 |       variables: { id: "W0T5R0x" },
139 |     },
140 |     result: {
141 |       "errors": [
142 |         {
143 |           message: "The \"id\" is invalid",
144 |           category: "user",
145 |           locations: [
146 |             {
147 |               line: 2,
148 |               column: 3
149 |             }
150 |           ],
151 |           path: [
152 |             "page"
153 |           ]
154 |         }
155 |       ],
156 |       data: {
157 |         page: null
158 |       }
159 |     }
160 |   }];
161 |   const { getByTestId } = render(
162 |     <MockedProvider mocks={mocks} addTypename={false}>
163 |       <Page id="W0T5R0x" data-testid="test-page" />
164 |     </MockedProvider>
165 |   );
166 |   
167 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
168 |   expect(icon).toBeTruthy();
169 |   expect(icon.innerHTML === '').toBeFalsy();
170 |   const message = getByTestId(/error-message/);
171 |   expect(message).toBeTruthy()
172 |   expect(message.innerHTML).toMatch(
173 |     /^Sorry, we can't locate the page you're looking for. Please, try again later.$|^GraphQL error: The \"id\" is invalid$/
174 |   );
175 | });
176 | 
177 | 
178 | it(`renders a loading state`, () => {
179 |   const { getByText, getByTestId } = render(
180 |     <MockedProvider mocks={[]} addTypename={false}>
181 |       <Page uri="sample-page" />
182 |     </MockedProvider>,
183 |   );
184 | 
185 |   const icon = getByTestId(/loading-icon/);
186 |   expect(icon).toBeTruthy();
187 |   expect(icon.innerHTML === '').toBeFalsy();
188 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
189 | });
190 | 
191 | 
192 | it(`renders error state`, async () => {
193 |   const mocks = [{
194 |     request: {
195 |       query: PAGE_BY_QUERY,
196 |       variables: { uri: "sample-page" },
197 |     },
198 |     error: new Error('its broke'),
199 |   }];
200 | 
201 |   const { getByTestId } = render(
202 |     <MockedProvider mocks={mocks} addTypename={false}>
203 |       <Page uri="sample-page" />
204 |     </MockedProvider>,
205 |   );
206 | 
207 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
208 |   expect(icon).toBeTruthy();
209 |   expect(icon.innerHTML === '').toBeFalsy();
210 |   const message = getByTestId(/error-message/);
211 |   expect(message).toBeTruthy()
212 |   expect(message.innerHTML === '').toBeFalsy();
213 | });


--------------------------------------------------------------------------------
/test/__unit_tests__/post.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import _ from 'lodash';
  3 | import ReactHtmlParser from 'react-html-parser';
  4 | import { render, cleanup, waitForElement } from 'react-testing-library';
  5 | import { MockedProvider } from 'react-apollo/test-utils';
  6 | 
  7 | import { POST_QUERY, POST_BY_QUERY, Post, post } from '../../src';
  8 | 
  9 | afterEach(cleanup);
 10 | 
 11 | it(`renders a post`, async () => {
 12 |   const mocks = [{
 13 |     request: {
 14 |       query: POST_QUERY,
 15 |       variables: { id: "P0TSH0t" },
 16 |     },
 17 |     result: {
 18 |       data: {
 19 |         post: {
 20 |           id: "P0TSH0t",
 21 |           postId: 1,
 22 |           uri: "parent-post/child-post",
 23 |           slug: "test-post",
 24 |           content: "<h1>Hello World</h1>",
 25 |           date: "2018-09-12 23:02:46",
 26 |           modified: "2018-09-19 00:26:14",
 27 |           title: "Hello world!",
 28 |           permalink: "2018/09/hello-world/",
 29 |           author: {
 30 |             id: "Bugger",
 31 |             userId: 3,
 32 |             nicename: "kimboChop",
 33 |             avatar: {
 34 |               url: "http://2.gravatar.com/avatar/8cbbea0504f915ea88622f97badd1bed?s=96&d=mm&r=g",
 35 |               foundAvatar: true
 36 |             }
 37 |           },
 38 |           categories: {
 39 |             nodes: [
 40 |               {
 41 |                 id: "Y2F0ZWdvcnk6MTM=",
 42 |                 name: "testOne"
 43 |               },
 44 |               {
 45 |                 id: "Y2F0ZWdvcnk6MTQ=",
 46 |                 name: "testtwo"
 47 |               },
 48 |               {
 49 |                 id: "Y2F0ZWdvcnk6MQ==",
 50 |                 name: "Uncategorized"
 51 |               }
 52 |             ]
 53 |           },
 54 |           tags: {
 55 |             nodes: [
 56 |               {
 57 |                 id: "cG9zdF90YWc6OQ==",
 58 |                 name: "Forsha"
 59 |               },
 60 |               {
 61 |                 id: "cG9zdF90YWc6MTA=",
 62 |                 name: "GetIt"
 63 |               },
 64 |               {
 65 |                 id: "cG9zdF90YWc6MTI=",
 66 |                 name: "Jane"
 67 |               },
 68 |               {
 69 |                 id: "cG9zdF90YWc6MTE=",
 70 |                 name: "Plain"
 71 |               },
 72 |               {
 73 |                 id: "cG9zdF90YWc6OA==",
 74 |                 name: "Yep"
 75 |               }
 76 |             ]
 77 |           },
 78 |           featuredImage: null
 79 |         }
 80 |       }
 81 |     }
 82 |   }];
 83 | 
 84 |   const { getByTestId } = render(
 85 |     <MockedProvider mocks={mocks} addTypename={false}>
 86 |       <Post id="P0TSH0t" data-testid="test-post" />
 87 |     </MockedProvider>
 88 |   );
 89 |   
 90 |   const body = await waitForElement(() => getByTestId(/test-post/));
 91 |   expect(body).toBeTruthy();
 92 | });
 93 | 
 94 | 
 95 | it(`renders a post by slug`, async () => {
 96 |   const mocks = [{
 97 |     request: {
 98 |       query: POST_BY_QUERY,
 99 |       variables: { 
100 |         postId: null,
101 |         slug: "test-post",
102 |         uri: null,
103 |       },
104 |     },
105 |     result: {
106 |       data: {
107 |         postBy: {
108 |           id: "P0TSH0t",
109 |           postId: 1,
110 |           uri: "parent-post/child-post",
111 |           slug: "test-post",
112 |           content: "<h1>Hello World</h1>",
113 |           date: "2018-09-12 23:02:46",
114 |           modified: "2018-09-19 00:26:14",
115 |           title: "Hello world!",
116 |           permalink: "2018/09/hello-world/",
117 |           author: {
118 |             id: "Bugger",
119 |             userId: 3,
120 |             nicename: "kimboChop",
121 |             avatar: {
122 |               url: "http://2.gravatar.com/avatar/8cbbea0504f915ea88622f97badd1bed?s=96&d=mm&r=g",
123 |               foundAvatar: true
124 |             }
125 |           },
126 |           categories: {
127 |             nodes: [
128 |               {
129 |                 id: "Y2F0ZWdvcnk6MTM=",
130 |                 name: "testOne"
131 |               },
132 |               {
133 |                 id: "Y2F0ZWdvcnk6MTQ=",
134 |                 name: "testtwo"
135 |               },
136 |               {
137 |                 id: "Y2F0ZWdvcnk6MQ==",
138 |                 name: "Uncategorized"
139 |               }
140 |             ]
141 |           },
142 |           "tags": {
143 |             "nodes": [
144 |               {
145 |                 id: "cG9zdF90YWc6OQ==",
146 |                 name: "Forsha"
147 |               },
148 |               {
149 |                 id: "cG9zdF90YWc6MTA=",
150 |                 name: "GetIt"
151 |               },
152 |               {
153 |                 id: "cG9zdF90YWc6MTI=",
154 |                 name: "Jane"
155 |               },
156 |               {
157 |                 id: "cG9zdF90YWc6MTE=",
158 |                 name: "Plain"
159 |               },
160 |               {
161 |                 id: "cG9zdF90YWc6OA==",
162 |                 name: "Yep"
163 |               }
164 |             ]
165 |           },
166 |           featuredImage: null
167 |         }
168 |       }
169 |     }
170 |   }];
171 | 
172 |   const { getByTestId } = render(
173 |     <MockedProvider mocks={mocks} addTypename={false}>
174 |       <Post slug="test-post" data-testid="test-post" />
175 |     </MockedProvider>
176 |   );
177 |   
178 |   const body = await waitForElement(() => getByTestId(/test-post/));
179 |   expect(body).toBeTruthy();
180 | });
181 | 
182 | 
183 | it(`renders a post by uri with a custom view component`, async () => {
184 |   const customDetails = ({ date, modified, author: { userId, nicename }, tags, categories }) => {
185 |     const created = new Date(date);
186 |     const updated = (modified) ? new Date(modified) : false;
187 |     const format = { month: 'long', day: 'numeric', year: 'numeric' };
188 |     return (
189 |       <React.Fragment>
190 |         <div data-testid="post-meta">
191 |           <span>Posted on <time>{created.toLocaleDateString("en-US", format)}</time>
192 |             {updated && (<time>{updated.toLocaleDateString("en-US", format)}</time>)}
193 |           </span>
194 |           <span className="byline"> by <a href={`/author/${userId}`}>{nicename}</a></span>
195 |         </div>
196 |         <span data-testid="post-tags">
197 |           <strong>Tagged</strong>
198 |           {_.map(tags, ({ name, id }) => (<a href={`/tag/${name}`} key={id}>{name}</a>))}
199 |         </span>
200 |         <span data-testid="post-categories">
201 |           <strong>Posted in</strong>
202 |           {_.map(categories, ({ name, id }) => (<a href={`/category/${name}`} key={id}>{name}</a>))}
203 |         </span>
204 |       </React.Fragment>
205 |     );
206 |   };
207 | 
208 |   const CustomPost = post.compose({
209 |     view: ({
210 |       featured,
211 |       postId,
212 |       title,
213 |       content,
214 |       details,
215 |       attachmentView: Attachment,
216 |       detailsView: Details,
217 |       ...rest
218 |     }) => (
219 |       <article id={`post-${postId}`} {...rest}>
220 |         <Attachment mediaItemId={featured} fallback />
221 |         <div data-testid="post-content">
222 |           {ReactHtmlParser(content)}
223 |         </div>
224 |         <footer>
225 |           <Details {...details} />
226 |         </footer>
227 |       </article>
228 |     ),
229 |     detailsView: customDetails,
230 |   })
231 | 
232 |   const mocks = [{
233 |     request: {
234 |       query: POST_BY_QUERY,
235 |       variables: { 
236 |         postId: null,
237 |         slug: null,
238 |         uri: "parent-post/child-post",
239 |       },
240 |     },
241 |     result: {
242 |       data: {
243 |         postBy: {
244 |           id: "P0TSH0t",
245 |           postId: 1,
246 |           uri: "parent-post/child-post",
247 |           slug: "test-post",
248 |           content: "<h1>Hello World</h1>",
249 |           date: "2018-09-12 23:02:46",
250 |           modified: "2018-09-19 00:26:14",
251 |           title: "Hello world!",
252 |           permalink: "2018/09/hello-world/",
253 |           author: {
254 |             id: "Bugger",
255 |             userId: 3,
256 |             nicename: "kimboChop",
257 |             avatar: {
258 |               url: "http://2.gravatar.com/avatar/8cbbea0504f915ea88622f97badd1bed?s=96&d=mm&r=g",
259 |               foundAvatar: true
260 |             }
261 |           },
262 |           categories: {
263 |             nodes: [
264 |               {
265 |                 id: "Y2F0ZWdvcnk6MTM=",
266 |                 name: "testOne"
267 |               },
268 |               {
269 |                 id: "Y2F0ZWdvcnk6MTQ=",
270 |                 name: "testtwo"
271 |               },
272 |               {
273 |                 id: "Y2F0ZWdvcnk6MQ==",
274 |                 name: "Uncategorized"
275 |               }
276 |             ]
277 |           },
278 |           "tags": {
279 |             "nodes": [
280 |               {
281 |                 id: "cG9zdF90YWc6OQ==",
282 |                 name: "Forsha"
283 |               },
284 |               {
285 |                 id: "cG9zdF90YWc6MTA=",
286 |                 name: "GetIt"
287 |               },
288 |               {
289 |                 id: "cG9zdF90YWc6MTI=",
290 |                 name: "Jane"
291 |               },
292 |               {
293 |                 id: "cG9zdF90YWc6MTE=",
294 |                 name: "Plain"
295 |               },
296 |               {
297 |                 id: "cG9zdF90YWc6OA==",
298 |                 name: "Yep"
299 |               }
300 |             ]
301 |           },
302 |           featuredImage: null
303 |         }
304 |       }
305 |     }
306 |   }];
307 | 
308 |   const { getByTestId } = render(
309 |     <MockedProvider mocks={mocks} addTypename={false}>
310 |       <CustomPost uri="parent-post/child-post" data-testid="post-body" />
311 |     </MockedProvider>
312 |   );
313 | 
314 |   const body = await waitForElement(() => getByTestId(/post-body/));
315 |   expect(body).toBeTruthy();
316 | 
317 |   const content = getByTestId(/post-content/);
318 |   expect(content.innerHTML).toMatch(/<h1>Hello World<\/h1>/);
319 | 
320 |   const meta = getByTestId(/post-meta/);
321 |   expect(meta).toBeTruthy();
322 | 
323 |   const tags = getByTestId(/post-tags/);
324 |   expect(tags).toBeTruthy();
325 |   
326 |   const categories = getByTestId(/post-categories/);
327 |   expect(categories).toBeTruthy();
328 | });
329 | 
330 | 
331 | it(`renders page not found`, async () => {
332 |   const mocks = [{
333 |     request: {
334 |       query: POST_BY_QUERY,
335 |       variables: {
336 |         postId: null,
337 |         slug: "fosho",
338 |         uri: null,
339 |       },
340 |     },
341 |     result: {
342 |       "errors": [
343 |         {
344 |           message: "The \"slug\" is invalid",
345 |           category: "user",
346 |           locations: [
347 |             {
348 |               line: 2,
349 |               column: 3
350 |             }
351 |           ],
352 |           path: [
353 |             "postBy"
354 |           ]
355 |         }
356 |       ],
357 |       data: {
358 |         post: null
359 |       }
360 |     }
361 |   }];
362 |   const { getByTestId } = render(
363 |     <MockedProvider mocks={mocks} addTypename={false}>
364 |       <Post slug="fosho" data-testid="test-page" />
365 |     </MockedProvider>
366 |   );
367 |   
368 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
369 |   expect(icon).toBeTruthy();
370 |   expect(icon.innerHTML === '').toBeFalsy();
371 |   const message = getByTestId(/error-message/);
372 |   expect(message).toBeTruthy()
373 |   expect(message.innerHTML).toMatch(
374 |     /^Sorry, we can't locate the post you're looking for. Please, try again later.$|^GraphQL error: The \"slug\" is invalid$/
375 |   );
376 | });
377 | 
378 | 
379 | it(`renders a loading state`, () => {
380 |   const { getByText, getByTestId } = render(
381 |     <MockedProvider mocks={[]} addTypename={false}>
382 |       <Post slug="sample-post" />
383 |     </MockedProvider>,
384 |   );
385 | 
386 |   const icon = getByTestId(/loading-icon/);
387 |   expect(icon).toBeTruthy();
388 |   expect(icon.innerHTML === '').toBeFalsy();
389 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
390 | });
391 | 
392 | 
393 | it(`renders error state`, async () => {
394 |   const mocks = [{
395 |     request: {
396 |       query: POST_BY_QUERY,
397 |       variables: { uri: "sample-page" },
398 |     },
399 |     error: new Error('its broke'),
400 |   }];
401 | 
402 |   const { getByTestId } = render(
403 |     <MockedProvider mocks={mocks} addTypename={false}>
404 |       <Post uri="sample-post" />
405 |     </MockedProvider>,
406 |   );
407 | 
408 |   const icon = await waitForElement(() => getByTestId(/error-icon/));
409 |   expect(icon).toBeTruthy();
410 |   expect(icon.innerHTML === '').toBeFalsy();
411 |   const message = getByTestId(/error-message/);
412 |   expect(message).toBeTruthy()
413 |   expect(message.innerHTML === '').toBeFalsy();
414 | });


--------------------------------------------------------------------------------
/test/__util_tests__/error.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from 'react-testing-library';
 3 | 
 4 | import { Error, Icon } from '../../src';
 5 | 
 6 | afterEach(cleanup);
 7 | process.env.DEBUG_MODE = true;
 8 | 
 9 | it(`renders 404 error message and icon`, () => {
10 |   const { getByText, getByTestId } = render(<Error type="404" />);
11 |   const icon = getByTestId(/error-icon/);
12 |   expect(icon).toBeTruthy();
13 |   expect(icon.innerHTML === '').toBeFalsy();
14 |   expect(getByText(/Sorry, we can't locate the content you're looking for\. Please, try again later\./)).toBeTruthy();
15 | });
16 | 
17 | it(`renders 403 error message and custom icon`, () => {
18 |   const CustomIcon = () => (<Icon name="block" size="large" />);
19 |   const { baseElement } = render(<CustomIcon />);
20 |   const customIcon = baseElement.querySelector('div').innerHTML;
21 | 
22 |   const { getByText, getByTestId } = render(<Error type="403" />);
23 |   const icon = getByTestId(/error-icon/);
24 |   expect(icon).toBeTruthy();
25 |   expect(icon.innerHTML === customIcon).toBeTruthy();
26 |   expect(getByText(/Sorry, you aren't authorized to view this content\./)).toBeTruthy();
27 | });
28 | 
29 | it(`renders query error message and icon`, () => {
30 |   const CustomIcon = () => (<Icon name="error_outline" size="large" />)
31 |   const { baseElement } = render(<CustomIcon />);
32 |   const customIcon = baseElement.querySelector('div').innerHTML;
33 | 
34 |   const { getByText, getByTestId } = render(<Error type="query" />);
35 |   const icon = getByTestId(/error-icon/);
36 |   expect(icon).toBeTruthy();
37 |   expect(icon.innerHTML === customIcon).toBeTruthy();
38 |   expect(getByText(/Sorry, there was a problem loading the content you are trying to access\. Please, try again later\./)).toBeTruthy();
39 | });
40 | 
41 | it(`renders unknown error message and icon`, () => {
42 |   const CustomIcon = () => (<Icon name="sentiment_very_dissatisfied" size="large" />)
43 |   const { baseElement } = render(<CustomIcon />);
44 |   const customIcon = baseElement.querySelector('div').innerHTML;
45 | 
46 |   const { getByText, getByTestId } = render(<Error />);
47 |   const icon = getByTestId(/error-icon/);
48 |   expect(icon).toBeTruthy();
49 |   expect(icon.innerHTML === customIcon).toBeTruthy();
50 |   expect(getByText(/Wow, this is embarassing! We're not sure what happened\. Or\.\.\. a lazy dev just forgot to add a message here\. Sorry!/)).toBeTruthy();
51 | });
52 | 
53 | it(`renders custom error message and icon`, () => {
54 |   const CustomIcon = () => (<Icon name="stars" />)
55 |   const { baseElement } = render(<CustomIcon />);
56 |   const customIcon = baseElement.querySelector('div').innerHTML;
57 | 
58 |   const { getByText, getByTestId } = render(<Error message="BoomPow" icon={(<CustomIcon />)} />);
59 |   const icon = getByTestId(/error-icon/);
60 |   expect(icon).toBeTruthy();
61 |   expect(icon.innerHTML === customIcon).toBeTruthy();
62 |   expect(getByText(/BoomPow/)).toBeTruthy();
63 | });


--------------------------------------------------------------------------------
/test/__util_tests__/loading.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, cleanup } from 'react-testing-library';
 3 | 
 4 | import { Icon, Loading } from '../../src';
 5 | 
 6 | afterEach(cleanup);
 7 | 
 8 | it(`displays default loading icon, and default loading message`, async() => {
 9 |   const { getByText, getByTestId } = render(<Loading />);
10 |   const icon = getByTestId(/loading-icon/);
11 |   expect(icon).toBeTruthy();
12 |   expect(icon.innerHTML === '').toBeFalsy();
13 |   expect(getByText(/Loading\.\.\./)).toBeTruthy();
14 | });
15 | 
16 | it(`displays custom loading icon, and custom loading message`, async() => {
17 |   const CustomIcon = () => (<Icon name="autorenew" />);
18 |   const { baseElement } = render(<CustomIcon />);
19 |   const customIcon = baseElement.querySelector('div').innerHTML;
20 | 
21 |   const { getByText, getByTestId } = render(
22 |     <Loading
23 |       icon={(<CustomIcon />)}
24 |       message="Coming soon...."
25 |     />
26 |   );
27 | 
28 |   const icon = getByTestId(/loading-icon/);
29 |   expect(icon).toBeTruthy();
30 | 
31 |   expect(icon.innerHTML === customIcon).toBeTruthy();
32 |   expect(getByText(/Coming soon\.\.\./)).toBeTruthy();
33 | });


--------------------------------------------------------------------------------
/test/composers.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { get } from 'lodash';
  3 | import { render, cleanup, waitForElement, wait } from 'react-testing-library';
  4 | import { MockedProvider } from 'react-apollo/test-utils';
  5 | import { graphql } from 'react-apollo';
  6 | import gql from 'graphql-tag';
  7 | import { mapProps, compose } from 'recompose';
  8 | 
  9 | import {
 10 |   whileLoading,
 11 |   forError,
 12 |   composeQuery,
 13 |   queryComposer,
 14 |   loading,
 15 |   error,
 16 |   progressMapper,
 17 |   errorMapper
 18 | } from '../src';
 19 | 
 20 | afterEach(cleanup);
 21 | 
 22 | /**
 23 |  * Test queries
 24 |  */
 25 | const TEST_QUERY = gql`
 26 |   query TestQuery{
 27 |     test{
 28 |       testField
 29 |       testField2
 30 |     }
 31 |   }
 32 | `;
 33 | 
 34 | const QUERY_ONE = gql`
 35 | query QueryOne($id: ID!) {
 36 |   test(id: $id){
 37 |     testField
 38 |     testField2
 39 |   }
 40 | }
 41 | `;
 42 | 
 43 | const QUERY_TWO = gql`
 44 | query QueryTwo($location: String!) {
 45 |   test(location: $location){
 46 |     testField
 47 |     testField2
 48 |   }
 49 | }
 50 | `;
 51 | 
 52 | /**
 53 |  * Test responses
 54 |  */
 55 | const testMocks = [{
 56 |   request: {
 57 |     query: QUERY_ONE,
 58 |     variables: { id: "1" },
 59 |   },
 60 |   result: {
 61 |     data: {
 62 |       test: {
 63 |         testField: 100,
 64 |         testField2: 100,
 65 |       }
 66 |     }
 67 |   },
 68 |   }, {
 69 |   request: {
 70 |     query: QUERY_TWO,
 71 |     variables: { location: "primary" },
 72 |   },
 73 |   result: {
 74 |     data: {
 75 |       test: {
 76 |         testField: 400,
 77 |         testField2: 400,
 78 |       }
 79 |     }
 80 |   },
 81 | }];
 82 | 
 83 | /**
 84 |  * Test component
 85 |  */
 86 | const testComponent = ({ children, message = "TestComponent"}) => (
 87 |   <div>
 88 |     {message}
 89 |     {children}
 90 |   </div>
 91 | );
 92 | 
 93 | it(`composes and renders a loading component with progress counter using 
 94 |   utilComposer and whileLoading`, () => {
 95 |   /**
 96 |    * Composes loading component with new view layer component
 97 |    * using instance of utilComposer assigned to loading.compose
 98 |    */
 99 |   const view = loading.compose({
100 |     view: ({ icon, message, progress: { min, max, total }, ...rest }) => (
101 |       <div data-testid="loading-component" {...rest}>
102 |         <div data-testid="loading-icon">{icon}</div>
103 |         <p data-testid="loading-message">
104 |           {message}{' '}{Math.floor(total * 100 / max)}%
105 |         </p>
106 |       </div>
107 |     ),
108 |     mapper: progressMapper,
109 |   });
110 | 
111 |   /**
112 |    * Creates conditional function for loading to be called
113 |    * @param {object} props - component props
114 |    */
115 |   const cond = props => !!get(props, 'data.loading');
116 | 
117 |   /**
118 |    * Wraps test component in query layer and loading layer using whileLoading
119 |    */
120 |   const WrappedComponent = compose(
121 |     graphql(TEST_QUERY),
122 |     whileLoading({ view, cond }),
123 |   )(testComponent);
124 | 
125 |   // Renders WrappedComponent
126 |   const { getByTestId } = render(
127 |     <MockedProvider mocks={[]} addTypename={false}>
128 |       <WrappedComponent />
129 |     </MockedProvider>
130 |   )
131 | 
132 |   // Confirms container
133 |   const container = getByTestId(/loading-component/);
134 |   expect(container).toBeTruthy();
135 | 
136 |   // Confirms icon
137 |   const icon = getByTestId(/loading-icon/);
138 |   expect(icon).toBeTruthy();
139 |   
140 |   // Confirms message
141 |   const message = getByTestId(/loading-message/);
142 |   expect(message.innerHTML).toMatch(/^.+ ?\d+%$/);
143 | });
144 | 
145 | it(`composes and renders a error component when specified prop is found
146 |   using utilComposer`, async () => {
147 |   /**
148 |    * Mock error response for test query
149 |    */
150 |   const mocks = [{
151 |     request: {
152 |       query: TEST_QUERY,
153 |     },
154 |     error: new Error('its broke'),
155 |   }];
156 | 
157 |   /**
158 |    * Composes error component with new view layer component
159 |    * using instance of utilComposer assigned to error.compose
160 |    */
161 |   const view = error.compose({
162 |     view: ({ message }) => (<div data-testid="error-component">{message}</div>),
163 |     mapper: errorMapper,
164 |   });
165 |   
166 |   /**
167 |    * Wraps test component in query layer and error-handling layer using forError
168 |    */
169 |   const WrappedComponent = compose(
170 |     graphql(TEST_QUERY),
171 |     forError({ view, type: 'query', errorProp: 'data.error.message' }),
172 |   )(testComponent);
173 | 
174 |   // Renders WrappedComponent
175 |   const { getByTestId } = render(
176 |     <MockedProvider mocks={mocks} addTypename={false}>
177 |       <WrappedComponent />
178 |     </MockedProvider>
179 |   )
180 | 
181 |   // Confirms Container
182 |   const component = await waitForElement(() => getByTestId(/error-component/));
183 |   expect(component).toBeTruthy();
184 | 
185 |   // Confirms Message
186 |   expect(component.innerHTML).toMatch(/its broke/);
187 | 
188 | });
189 | 
190 | it(`composes and renders an error when view layer component throws an error`, async () => {
191 |   /**
192 |    * Composes error component with new view layer component
193 |    * using instance of utilComposer assigned to error.compose
194 |    */
195 |   const view = error.compose({
196 |     view: ({ message }) => (<div data-testid="error-component">{message}</div>),
197 |     mapper: errorMapper,
198 |   });
199 | 
200 |   /**
201 |    * Wraps test component in error-handling layer using forError
202 |    */
203 |   const WrappedComponent = forError({
204 |     view,
205 |   })(testComponent);
206 | 
207 |   /**
208 |    * Throws an error upon mounting
209 |    */
210 |   const BrokeComponent = ({message}) => {
211 |     throw new Error(message);
212 |   };
213 | 
214 |   // Renders WrappedComponent
215 |   const { getByText } = render(
216 |     <WrappedComponent>
217 |       <BrokeComponent message="It broke" />
218 |     </WrappedComponent>
219 |   );
220 | 
221 |   // Confirms error message
222 |   await wait(() => expect(getByText(/It broke/)).toBeTruthy());
223 | });
224 | 
225 | it(`composes and renders a component wrapped in multiple "graphql" HOCs when specified conditions are met`, async () => {
226 | 
227 | 
228 |   const testComponent = ({ testField, testField2 }) => (
229 |     <React.Fragment>
230 |       <span data-testid="field-1">{testField}</span>
231 |       <span data-testid="field-2">{testField2}</span>
232 |     </React.Fragment>
233 |   );
234 | 
235 |   const view = () => null;
236 | 
237 |   const QueryComponent = compose(
238 |     composeQuery([
239 |       {
240 |         cond: ({ location }) => !!location,
241 |         query: QUERY_TWO,
242 |         config: { options: ({ location }) => ({ location }) },
243 |       }, {
244 |         cond: ({ id }) => !!id,
245 |         query: QUERY_ONE,
246 |         config: { options: ({ id }) => ({ id }) },
247 |       }
248 |     ]),
249 |     whileLoading({ view }),
250 |     mapProps(({data, ...rest}) => {
251 |       const testField = get(data, 'test.testField');
252 |       const testField2 = get(data, 'test.testField2');
253 |       return { testField, testField2, ...rest}
254 |     })
255 |   )(testComponent);
256 | 
257 |   const { getByTestId, rerender } = render(
258 |     <MockedProvider mocks={testMocks} addTypename={false}>
259 |       <QueryComponent id="1" />
260 |     </MockedProvider>
261 |   );
262 | 
263 |   let fieldOne = await waitForElement(() => getByTestId(/field-1/));
264 |   expect(fieldOne).toBeTruthy();
265 |   expect(fieldOne.innerHTML).toMatch(/100/);
266 | 
267 |   let fieldTwo = await waitForElement(() => getByTestId(/field-2/));
268 |   expect(fieldTwo).toBeTruthy();
269 |   expect(fieldTwo.innerHTML).toMatch(/100/);
270 | 
271 |   rerender(
272 |     <MockedProvider mocks={testMocks} addTypename={false}>
273 |       <QueryComponent location="primary" />
274 |     </MockedProvider>
275 |   );
276 | 
277 |   fieldOne = await waitForElement(() => getByTestId(/field-1/));
278 |   expect(fieldOne).toBeTruthy();
279 |   expect(fieldOne.innerHTML).toMatch(/400/);
280 | 
281 |   fieldTwo = await waitForElement(() => getByTestId(/field-2/));
282 |   expect(fieldTwo).toBeTruthy();
283 |   expect(fieldTwo.innerHTML).toMatch(/400/);
284 | });
285 | 
286 | it(`composes, maps, and render a component wrapped in conditional graphql HOCs
287 |   using queryComposer`, async () => {
288 |   /**
289 |    * Composes loading component with new view layer component
290 |    * using instance of utilComposer assigned to loading.compose
291 |    */
292 |   const loadingView = loading.compose({
293 |     view: ({ icon, message, progress: { min, max, total }, ...rest }) => (
294 |       <div data-testid="loading-component" {...rest}>
295 |         <div data-testid="loading-icon">{icon}</div>
296 |         <p data-testid="loading-message">
297 |           {message}{' '}{Math.floor(total * 100 / max)}%
298 |         </p>
299 |       </div>
300 |     ),
301 |     mapper: progressMapper,
302 |   });
303 | 
304 |   /**
305 |    * Composes error component with new view layer component
306 |    * using instance of utilComposer assigned to error.compose
307 |    */
308 |   const errorView = error.compose({
309 |     view: ({ message }) => (<div data-testid="error-component">{message}</div>),
310 |     mapper: errorMapper,
311 |   });
312 | 
313 |   const composer = queryComposer({
314 |     queries: [
315 |       {
316 |         cond: ({ location }) => !!location,
317 |         query: QUERY_TWO,
318 |         config: { options: ({ location }) => ({ location }) },
319 |       }, {
320 |         cond: ({ id }) => !!id,
321 |         query: QUERY_ONE,
322 |         config: { options: ({ id }) => ({ id }) },
323 |       }
324 |     ],
325 |     whileLoading: { view: loadingView },
326 |     forError: { view: errorView },
327 |     sharedMapper: ({data, ...rest}) => {
328 |       const testField = get(data, 'test.testField');
329 |       const testField2 = get(data, 'test.testField2');
330 |       return { testField, testField2, ...rest}
331 |     },
332 |     view: ({ testField, testField2 }) => (
333 |       <React.Fragment>
334 |         <span data-testid="field-1">{testField}</span>
335 |         <span data-testid="field-2">{testField2}</span>
336 |       </React.Fragment>
337 |     ),
338 |   });
339 | 
340 |   const ComposedComponent = composer({});
341 | 
342 |   // Renders ComposedComponent
343 |   const { getByTestId, rerender } = render(
344 |     <MockedProvider mocks={testMocks} addTypename={false}>
345 |       <ComposedComponent id="1" />
346 |     </MockedProvider>
347 |   );
348 | 
349 |   // Confirms first field's value
350 |   let fieldOne = await waitForElement(() => getByTestId(/field-1/));
351 |   expect(fieldOne).toBeTruthy();
352 |   expect(fieldOne.innerHTML).toMatch(/100/);
353 | 
354 |   // Confirms second field's value
355 |   let fieldTwo = await waitForElement(() => getByTestId(/field-2/));
356 |   expect(fieldTwo).toBeTruthy();
357 |   expect(fieldTwo.innerHTML).toMatch(/100/);
358 | 
359 |   // Rerenders ComposedComponent
360 |   rerender(
361 |     <MockedProvider mocks={testMocks} addTypename={false}>
362 |       <ComposedComponent location="primary" />
363 |     </MockedProvider>
364 |   );
365 | 
366 |   // Confirms first field's value
367 |   fieldOne = await waitForElement(() => getByTestId(/field-1/));
368 |   expect(fieldOne).toBeTruthy();
369 |   expect(fieldOne.innerHTML).toMatch(/400/);
370 | 
371 |   // Confirms second field's value
372 |   fieldTwo = await waitForElement(() => getByTestId(/field-2/));
373 |   expect(fieldTwo).toBeTruthy();
374 |   expect(fieldTwo.innerHTML).toMatch(/400/);
375 | });


--------------------------------------------------------------------------------
/test/fragmentTypes.json:
--------------------------------------------------------------------------------
1 | {"__schema":{"types":[{"kind":"INTERFACE","name":"Node","possibleTypes":[{"name":"Page"},{"name":"Post"},{"name":"User"},{"name":"Comment"},{"name":"CommentAuthor"},{"name":"MediaItem"},{"name":"Category"},{"name":"Taxonomy"},{"name":"PostType"},{"name":"Tag"},{"name":"Plugin"},{"name":"Sidebar"},{"name":"Theme"},{"name":"PagesWidget"},{"name":"CalendarWidget"},{"name":"ArchivesWidget"},{"name":"AudioWidget"},{"name":"ImageWidget"},{"name":"GalleryWidget"},{"name":"VideoWidget"},{"name":"MetaWidget"},{"name":"SearchWidget"},{"name":"TextWidget"},{"name":"CategoriesWidget"},{"name":"RecentPostsWidget"},{"name":"RecentCommentsWidget"},{"name":"RSSWidget"},{"name":"TagCloudWidget"},{"name":"NavMenuWidget"},{"name":"CustomHTMLWidget"}]},{"kind":"UNION","name":"PostObjectUnion","possibleTypes":[{"name":"Post"},{"name":"Page"},{"name":"MediaItem"}]},{"kind":"UNION","name":"CommentAuthorUnion","possibleTypes":[{"name":"User"},{"name":"CommentAuthor"}]},{"kind":"UNION","name":"TermObjectUnion","possibleTypes":[{"name":"Category"},{"name":"Tag"}]},{"kind":"UNION","name":"MenuItemObjectUnion","possibleTypes":[{"name":"Post"},{"name":"Page"},{"name":"MediaItem"},{"name":"Category"},{"name":"Tag"},{"name":"MenuItem"}]},{"kind":"INTERFACE","name":"Widget","possibleTypes":[{"name":"PagesWidget"},{"name":"CalendarWidget"},{"name":"ArchivesWidget"},{"name":"AudioWidget"},{"name":"ImageWidget"},{"name":"GalleryWidget"},{"name":"VideoWidget"},{"name":"MetaWidget"},{"name":"SearchWidget"},{"name":"TextWidget"},{"name":"CategoriesWidget"},{"name":"RecentPostsWidget"},{"name":"RecentCommentsWidget"},{"name":"RSSWidget"},{"name":"TagCloudWidget"},{"name":"NavMenuWidget"},{"name":"CustomHTMLWidget"}]}]}}


--------------------------------------------------------------------------------