brookies-module v1.0.0

Brookies

Cookies managment module for back-iko.

1. INSTALLATION
2. DATABASE / API
3. MOBILE SDK's
4. SUMMARY

Peer Dependencies

This module requires several dependencies which must be installed in your React.js Back-Iko project :

• axios
• formik
• node-sass
• react-color
• react-redux
• universal-cookie
• yup

And implicitely by the way :

• react
• react-dom

You can install them in your main project by using npm command line:

npm install --save axios formik node-sass react react-color react-dom react-redux universal-cookie yup

1. Installation :

Add brookies to your main project :

npm install --save brookies-module

Back office, React.js project ( BACK-IKO )

Simply import BrookiesManager component and add it to your project to get complete administration form set up and almost ready to go.

import React from "react"
import {useSelector} from "react-redux";
import {BrookiesManager} from "brookies-module";
import {useTranslation} from "react-i18next";

import {defaultLang} from "../../utils/languages";
import SearchBar from "../../components/SearchBar";

export default function Brookies() {
    const {t} = useTranslation()
    const state = useSelector(state => state)

    return <BrookiesManager t={t} state={state} defaultLang={defaultLang} searchBarComponent={<SearchBar />}/>
}

Dont forget to provide .env vars to you project, in order to make BrookiesManager operational. They must be named EXACTLY like these :

#BROOKIES
REACT_APP_BROOKIES_API_URL=<your-api-route>
REACT_APP_BROOKIES_API_KEY=<your-api-key> 
REACT_APP_BROOKIES_API_SECRET_KEY=<your-api-secret>

These two parameters : REACT_APP_BROOKIES_API_KEY REACT_APP_BROOKIES_API_SECRET_KEY Are passed as HTTP headers each time the module will request your API.

2. Database and API

API Migration/Model/Seeder

You will need these .env vars inside your API as well. They must be named EXACTLY like these :

#BROOKIES
BROOKIES_API_KEY=<your-api-key>
BROOKIES_API_SECRET_KEY=<your-api-secret>

If you are using sequelize you can use the following migration/model/seeder

Migration

'use strict';

module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('brookies', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER,
      },
      apiKey: {
        allowNull: false,
        type: Sequelize.STRING(255),
      },
      apiSecret: {
        allowNull: false,
        type: Sequelize.STRING(255),
      },
      jsonData: {
        allowNull: false,
        type: Sequelize.TEXT('long'),
      },
      isActive: {
        type: Sequelize.BOOLEAN,
        defaultValue: true
      },
      createdAt: {
        type: Sequelize.DATE,
      },
      updatedAt: {
        type: Sequelize.DATE,
      },
      deletedAt: {
        type: Sequelize.DATE,
      }
    });
  },

  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('brookies');
  }
};

Model

const Sequelize = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  return Brookies.init(sequelize, DataTypes);
}

class Brookies extends Sequelize.Model {
  static init(sequelize, DataTypes) {
  super.init({
    id: {
      autoIncrement: true,
      type: DataTypes.INTEGER,
      allowNull: false,
      primaryKey: true
    },
    apiKey: {
      type: DataTypes.STRING(255),
      allowNull: false
    },
    apiSecret: {
      type: DataTypes.STRING(255),
      allowNull: false
    },
    jsonData: {
      type: DataTypes.TEXT('long'),
      allowNull: false
    },
    isActive: {
      type: DataTypes.BOOLEAN,
      defaultValue: true
    },
  }, {
    sequelize,
    tableName: 'brookies',
    timestamps: true,
    paranoid: true,
    indexes: [
      {
        name: "PRIMARY",
        unique: true,
        using: "BTREE",
        fields: [
          { name: "id" },
        ]
      },
    ]
  });
  return Brookies;
  }
}

Seeder File

'use strict';

const {Brookies} = require('........../models'); // Specify your model path
const {brookiesSeeder} = require('........../brookiesSeeder'); // Specify your seeder data path ( file described just after )

module.exports = {
  up: async (queryInterface, Sequelize) => {
    return Brookies.bulkCreate(brookiesSeeder, {
      validate: true,
      individualHooks: true,
    });
  },

  down: async (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete('brookies', null, {});
  }
};

brookiesSeeder

const brookiesEmptyData = require("./brookiesEmptyData.json");
const stringifiedBrookiesEmptyData = JSON.stringify(brookiesEmptyData)
const {languages} = require("./langSeeder")

const brookiesSeeder = languages.map(item => (
    {
        apiKey: process.env.BROOKIES_API_KEY,
        apiSecret: process.env.BROOKIES_API_SECRET_KEY,
        jsonData: stringifiedBrookiesEmptyData,
        isActive: true,
        languageId: item.id
    }
))

module.exports = {
    brookiesSeeder
}

brookiesEmptyData ( JSON File )

{
  "application": "",
  "validity": 0,
  "titleShort": "",
  "accessibility": "",
  "preferencesContent": "",
  "links": [],
  "buttons": [
    {
      "title": "",
      "type": "allow",
      "accessibility": ""
    },
    {
      "title": "",
      "type": "deny",
      "accessibility": ""
    },
    {
      "title": "",
      "type": "details",
      "accessibility": ""
    }
  ],
  "categories": [],
  "style": {
    "main": {
      "textColor": "#000000",
      "textColorDark": "#ffffff",
      "textPreferencesColor": "#000000",
      "textPreferencesColorDark": "#ffffff",
      "backgroundColor": "#ffffff",
      "backgroundColorDark": "#000000",
      "backgroundPreferencesColor": "#ffffff",
      "backgroundPreferencesColorDark": "#000000",
      "separatorColor":"#ffffff",
      "separatorColorDark":"#000000"
    },
    "statusBar": {
      "backgroundColor": "#ffffff",
      "backgroundColorDark": "#000000"
    },
    "topBar": {
      "backgroundColor": "#ffffff",
      "backgroundColorDark": "#000000"
    },
    "header": {
      "backgroundColor": "#ffffff",
      "backgroundColorDark": "#000000"
    },
    "buttons": {
      "textColor": "#ffffff",
      "textColorDark": "#000000",
      "backgroundColor": "#000000",
      "backgroundColorDark": "#ffffff"
    },
    "links": {
      "textColor": "#000000",
      "textColorDark": "#ffffff"
    }
  }
}

Database

Brookies have to be set inside your database. If you don't use sequelize within your API, here is the table schema. A table named:

brookies

Which contains at least the following columns :

id ( PRIMARY_KEY )
apiKey ( STRING )
apiSecret ( STRING )
jsonData ( LONG_TEXT )
isActive ( BOOLEAN )
languageId ( INTEGER )

3. Connections to mobile SDK

Based on .env vars for web admin pannel, which are :

#BROOKIES
REACT_APP_BROOKIES_API_URL=<your-api-route>
REACT_APP_BROOKIES_API_KEY=<your-api-key> 
REACT_APP_BROOKIES_API_SECRET_KEY=<your-api-secret>

Mobile SDK's which are oriented to consume the API must pass :

apikey: <your-api-key>
apisecret: <your-api-secret>

As headers inside the GET request to <your-api-route>

Also :

• <your-api-route>?lang=<fr/en/..> will return the specific brookies instance you want.
• <your-api-route>?validityType=sec will return the config values with validity formated as seconds.

Example : <your-api-route>?lang=fr&validityType=sec will return the config for the French brookies instance, with validity formated as seconds.

Handling response

You will need to send a GET request to <your-api-route>

SUCCESS

If your response is a success, API will return a JSON body with all the config data for your BROOKIES instance.

ERRORS

If your response is an error, API will return a JSON body formatted like this :

{
    "status": <INTEGER>,
    "error": <STRING>,
    "codeError": <STRING>
}

You must focus on the "codeError" key to handle your errors. In most cases, it will return "codeError": "SERVER_ERROR" for 400/404/500 status codes and "codeError": "BROOKIES_DESACTIVATED" for 403 status code.

400 - Bad request

If the body looks like this :

{
    "status": 400,
    "error": "MISSING_WRONG_VALUES",
    "codeError": "SERVER_ERROR"
}

It means that an error has been set when requesting the api route. Mostly, it can be related to the credentials you gave to your request headers.

403 - Desactivated

If the body looks like this :

{
    "status": 403,
    "error": "BROOKIES_DESACTIVATED",
    "codeError": "BROOKIES_DESACTIVATED"
}

It means that brookies is desactivated and the config data won't be available anymore. Handle it the way you want.

404 - Not found

If the body looks like this :

{
    "status": 404,
    "error": "RECORD_NOT_FOUND",
    "codeError": "SERVER_ERROR"
}

It means that the brookies instance you are requesting for is missing in the database.

500 - Internal server error

If the body looks like this :

{
    "status": 500,
    "error": "...description of the error...",
    "codeError": "SERVER_ERROR"
}

It means that the server seems to be facing an internal problem, and the "error" key can help you to know the possible causes of that problem.

4. Summary

WEB

1. Add component to your React project
2. Specify .env vars
3. Integrate brookies to your DB schema ( migration/model/seeder )
4. Specify .env vars for your API
5. Make your route get/put inside your API
6. Make your controllers for each routes
7. Have fun !

MOBILE

1. Pass apikey: <your-api-key> and apisecret: <your-api-secret> to your GET request headers to <your-api-route>. You will also need to pass parameter ?lang=<fr/en/...> for your specofoc brookies instance, and ?validityType=sec to get your validity value formatted as seconds.
2. If success, consume the JSON config data for your app
3. If errors, handle "codeError: "SERVER_ERROR" and "codeError": "BROOKIES_DESACTIVATED" the way you want
4. Have fun !