Router

Router.resources(views, name, routes)

Generates the list of routers based on routes and expands by CRUD routes. Later the list would be used as props for the SwitchRoutes component

1import { Router } from '@outcast.by/js-ext'
2
3// more info about settings format see https://github.com/outcastby/awesome-crud
4const settings = { cdnServers: { list: {}, gql: { create: 'some query', update: 'some query', show: 'some query' } } }
5const components = { New, Edit, Show, List } // the map of universal CRUD components
6
7const views = {
8  custom: { cdnServers: { CustomAction } },
9  crud: { components, settings },
10}
11Router.resources(views, 'cdnServers', [{ routeAction: 'customAction' }])

<SwitchRoutes />

This is the extension for react-dom-router <Switch />, which flexible resolves role based control, inner routing and redirects

1// You have to implement the function `isPermittedRoute`
2const isPermittedRoute = (route) => {
3  if (route.skipPermissions) return true
4  ...
5}
6// For CRUD should be `Router.resources` used
7const routes = [
8  { requiredPermissions: ['cdn_servers', 'edit'], path: '/cdn_servers/new', component: SomeComponent },
9  { requiredPermissions: ['cdn_servers', 'edit'], path: '/cdn_servers/:id/edit', component: SomeComponent },
10  { redirect: true, path: '/', pathTo: '/build_info' },
11]
12
13<SwitchRoutes isPermittedRoute={isPermittedRoute} routes={routes} />

Interface Route

Name	Type	Example	Description
path	string	/cdn_servers/:id/edit	Any valid URL path (the same like in react-router)
exact	boolean	true	When true, will only match if the path matches the location.pathname exactly. (the same like in react-router)
pathTo	string	/build_info	A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties. (the same like to in react-router)
component	React.FC	() => <div />	A React component to render only when the location matches. (the same like in react-router)
isAuthorized	boolean	true	When true, the route appears only when the user is authorized
routes	Route[]		The list of inner routes
requiredPermissions	string[]	['cdn_servers', 'edit']	The list can be used inside isPermittedRoute function in order to filter not permitted routes
redirect	boolean	true	When true, <Redirect /> will be rendered. Works together with pathTo

Form

Configure

1. Fill Config

   1// jsExt.js config
   2
   3import Form from 'youselfComponents/Form'
   4...
   5
   6export default {
   7  form: {
   8    Form,
   9    InputList,
   10    InputRow,
   11    hasPermissions,
   12    inputs: {
   13      select: Select,
   14      text: Text,
   15      integer: Text,
   16      float: Text,
   17      password: Text,
   18      json: JSON,
   19      smartJSON: SmartJSON,
   20      checkbox: Checkbox,
   21      datePicker: DatePicker,
   22      file: File,
   23    },
   24  },
   25}
   26
   27// or using `@outcast.by/mui-components`
   28import { FormComponents } from '@outcast.by/mui-components'
   29
   30export default {
   31  form: FormComponents,
   32}

2. Or pass config to the prop field config

   1<Form config={FormComponents} />

hasPermission

Sometimes we have to hide some input fields based on user permissions

Form also provides this ability. We have to add yourself implementation

1export default {
2  form: { ...FormComponents, hasPermission: hasPermission },
3}

Config

Allows to create common config object

1import { Config } from '@outcast.by/js-ext'

Initialization

1. Create config file

   1// config/config.js
   2
   3import jsExt from './common/jsExt'
   4
   5export default {
   6  jsExt,
   7  cookies: {
   8    expires: 14, // days
   9    secretKey: process.env.REACT_APP_SECRET_KEY,
   10  },
   11}

2. Create initializer for config and start it with application

   1import { Config } from '@outcast.by/js-ext'
   2import config from '../config'
   3
   4export default function() {
   5  Config.set(config)
   6}

Config.get(path, defaultValue)

Get value from config

path can be string or list of strings

1Config.get(['jsExt', 'secretKey'], '')
2Config.get('secretKey')

Config.setIn(path, value)

Add new value to config after initialization

path can be string or list of strings

1Config.setIn(['jsExt', 'expires'], 10)
2Config.setIn('expires', 10)

Utils

Cookies

Encrypting cookies

Setup

Add secretKey and expires to jsExt config

Example:

1// config/common/jsExt.js
2
3export default {
4  ...
5  cookies: {
6    secretKey: 'secretKey',
7    cookiesExpires: 14, // days
8  }
9}

Functions:

1. Cookies.set(key, value) Sets encrypted value to cookies

   1Cookies.set('key', 'value')

2. Cookies.get(key) Get not decrypted value from cookies

   1Cookies.get('key')

3. Cookies.getDecrypted(key) Get decrypted value from cookies

   1Cookies.getDecrypted('key')

4. Cookies.remove(key) Remove cookie by key

   1Cookies.remove('key')

GQLFetch

Create config file for jsExt:

1export default {
2  gql: {
3    url: `${process.env.REACT_APP_SERVER_URL}/public`,
4    options: { withCredentials: true },
5  },
6}

Usage example:

1import { GQLFetch } from '@outcast.by/js-ext'
2
3GQLFetch.run(query, variables)

Redux

Api middleware

Provide gql middleware for redux store

1import { Redux } from '@outcast.by/js-ext'
2
3const interceptors = [
4  {
5    condition: (resp) => resp.data.errors && false,
6    callback: () => alert('This callback will not called'),
7  },
8  {
9    condition: (resp) => resp.data.errors && true,
10    callback: () => alert('This callback will be called'),
11  },
12]
13const invalidTokenCallback = (action, errors) => {
14  console.log('action', action)
15  console.log('errors', errors)
16}
17
18const api = Redux.apiMiddleware(invalidTokenCallback, interceptors)

invalidTokenCallback will called if errors.response?.data === 'invalid_access_token'

When response has no errors will be called first callback from callbackList where condition is true

Request for api middleware

Example of action creator:

1list = (variables) => ({
2  type: 'LIST',
3  request: {
4    query: gqlRequest,
5    variables,
6    multi: true,
7  },
8})

query - Graphql request created by graphql-tag lib

variables - variables for Graphql request

multi - if true allows to handle multi Graphql response

combineHandlers(handlers, defaultState)

Creates reducer based on handlers.

Handlers is the object where key is action type (or list of action types) and value is function which return updated state.

Example:

1const defaultState = {}
2
3const UPDATE = 'user/UPDATE'
4const SIGN_UP = 'user/SIGN_UP'
5const SIGN_IN = 'user/SIGN_IN'
6
7const HANDLERS = {
8  [UPDATE]: (state, { data }) => ({ ...state, ...data }),
9  [[SIGN_UP, SIGN_IN]]: (state, { data: { user } }) => ({ ...state, ...user }),
10}
11
12export default Redux.combineHandlers(HANDLERS, defaultState)

Modal component

This component controls modal windows

Example:

1import React from 'react'
2import { Modal } from '@outcast.by/js-ext'
3import modals from '../index'
4
5export default function BaseModal({ current }) {
6  return <Modal current={current} modals={modals} />
7}

current - list of objects. Example:

1;[
2  { name: 'Profile', params: { title: 'My Profile' } },
3  { name: 'Error', params: { title: 'Error!' } },
4]

modals - object where key is modal name, value is modal component Example:

1{
2  Profile: ProfileModal,
3  Error: ErrorModal,
4}

1// modals/index.js
2
3import AlertModal from './AlertModal'
4import ConfirmModal from './ConfirmModal'
5import ProfileModal from './ProfileModal'
6
7export default {
8  Alert: AlertModal,
9  Confirm: ConfirmModal,
10  Profile: ProfileModal,
11}