A paginated response has a different structure than a response with all elements included. The reducer should be able to detect the type of response and insert into reducer correctly.

For example:
A response with all elements is an array of objects.

[
  {
    "id": 1,
  },
  {
    "id": 2,
  },
]

A paginated response is an abject with array of objects nested inside

{
  "count": 120,
  "page_size": 20,
  "previous": null,
  "page": 1,
  "next": 2,
  "results": [
    {
      "id": 1,
    },
    {
      "id": 2,
    },
  ],
}

Use Yup for validation. This wil result in libraries using our forms not having to install Yup package as well.

Example

[
  [
    {
      "name": "firstName",
      "type": "text",
      "label": "First Name",
      "validation" : { // New field
        "required": true,
        "min": 2,
        "max": 50
      },
      "required": true // Remove this, it is in validation field
    },
]

Display a neat centered empty list message for tables and lists that are empty.
Optional icon with message would be a nice feature.

An email input field renders two email inputs and ensures they are equal.

We should not export functions that are private to avoid these functions accidentally being used outside this package.

Resources

• https://stackoverflow.com/questions/14874208/how-to-access-and-test-an-internal-non-exports-function-in-a-node-js-module
• Use rewire -> https://github.com/jhnns/rewire

Render a reusable Bootstrap Pagination component.

Configure webpack with externals to exclude certain dependencies from the output bundles. This will make the library lighter. This also means that these ibraries have to be included in the apps using this library.
See -> https://webpack.js.org/configuration/externals/

We will exclude:

• react
• react-dom
• isomorphic-fetch
• moment
• prop-types

datetime
13 Nov 2018 15:30 instead of default November 13, 2018 5:30 PM

date
13 Nov 2018 instead of default 11/13/2018

Can't expect users to provide all country options for this special field.

Similar to "datetime" form field just without time.

// fa-cogs
import { faCogs as faCogsLight } from '@fortawesome/pro-light-svg-icons/faCogs';
import { faCogs } from '@fortawesome/pro-regular-svg-icons/faCogs';
import { faCogs as faCogsSolid } from '@fortawesome/pro-solid-svg-icons/faCogs';
library.add(faCogsLight, faCogs, faCogsSolid);

rewrite as

// cogs
import { faCogs as falCogs } from '@fortawesome/pro-light-svg-icons/faCogs';
import { faCogs as farCogs } from '@fortawesome/pro-regular-svg-icons/faCogs';
import { faCogs as fasCogs } from '@fortawesome/pro-solid-svg-icons/faCogs';
library.add(falCogs, farCogs, fasCogs);

e.g. If the nameSpace = subscriptionTerms then the API URL's should be

api/v1/subscriptionterms/
NOT
/api/v1/subscriptionTerms/

Allow the form submit button text to be specified optionally.

This selector will return the objects from state that have filterValue in their filterString fields.

The state field can be hooked into filter forms with setFilterValue action to easily setup filter capabilities for lists of elements.

Useful links
https://stackoverflow.com/questions/643782/how-to-check-whether-an-object-is-a-date
https://stackoverflow.com/questions/1353684/detecting-an-invalid-date-date-instance-in-javascript?rq=1

draft-rte does exactly what I need, but it doesn't seem to be actively maintained.
https://react-rte.org/demo

Draft.js is open source, widely used and actively maintained by FB.
https://draftjs.org/

Let's see if we can build our own RTE starting with Draft example and draft-js-utils
https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/rich
https://github.com/sstur/draft-js-utils (By author of draft-rte to translate between draft editorState and HTML and vice versa)

Research findings:
Standalone Editors Built on Draft.js -> https://github.com/nikgraf/awesome-draft-js
Froala is a slick but expensice paid for version
Quill has no HTML preview

This reusable form can be hoked up to any state object with a list of elements that need to be filtered by providing the value and setFilterValue function as props.

Only do client side form validation once form submit button is clicked.

Forkmik validation docs -> https://jaredpalmer.com/formik/docs/guides/validation

Resources:

• Optimizing JavaScript packages for tree shaking
• Publishing tree shaking friendly npm packages

I looked a bit at lodash and reactstrap to see if I can get tips on how these packages are "set up" to allow only importing of relevant modules when using them in projects.

• lodash
• reactstrap

react-popper dependency conflict

react-datepicker upgraded the react-popper dependency in the 1.6.0 -> 1.7.0 release. This caused our code to break. The reason has to do with reactstrap depending on react-popper 0.10.4 and react-datepicker now depending on a new react-popper major release 1.x.x.

Why would their differing dependencies cause a crash? isn't NPM supposed to manage conflicts like this? Yes, but the issue is inour webpack config.

Our config:

modules: [
  path.join(__dirname, '../node_modules')
]

This forces all modules to resolve from the root node_modules, causing reactstrap to reslover the wrong react-popper.

Change webpack config to:

modules: [
  'node_modules'
]

This resolves node_modules hierarchically.

Hoorah! Changing this fixed the problem!

Moment.js

react-datepicker 2.0.0 drops dependency on moment.js. We should adapt our code to now work without moment.js.

This initial value can be overridden to specify which fields of the state objects to filter on when filtering is implemented.

With FontAwesome

Without FontAwesome

Cool source website for HTML Entity codes
https://www.toptal.com/designers/htmlarrows/arrows/