Merge branch 'feature/new_stakeholder' into develop

Author: kasongoyo

config-overrides.js

@@ -1,15 +1,36 @@
-const { injectBabelPlugin } = require('react-app-rewired'); // eslint-disable line import/no-extraneous-dependencies
+const path = require('path');
+const { injectBabelPlugin, compose } = require('react-app-rewired'); // eslint-disable line import/no-extraneous-dependencies
 
 /**
  * Override webpack configurations for the application
  *
  * @param {Object} config
  * @param {Object} env
  */
-module.exports = function override(config, env) {
-  const newConfig = injectBabelPlugin(['import',
-    { libraryName: 'antd', libraryDirectory: 'es', style: 'css' },
-  ], config);
+module.exports = {
+  webpack: function (config, env) {
+    const newConfig = injectBabelPlugin(['import',
+      { libraryName: 'antd', libraryDirectory: 'es', style: 'css' },
+    ], config);
 
-  return newConfig;
+    const rewires = compose(
+      // Add CSS modules 
+      require('react-app-rewire-css-modules-extensionless')({
+        include: /.*\.module\.css$/ // add css modules only to css files with keword module
+      })
+    );
+
+    // Add src shared components to the webpack modules to make
+    // import from these folder possible without writing relative path
+    const modules = [
+      __dirname,
+      path.resolve(__dirname, 'src', 'common'),
+      path.resolve(__dirname, 'src', 'common', 'components'),
+      ...newConfig.resolve.modules
+    ];
+    newConfig.resolve.modules = modules;
+
+
+    return rewires(newConfig, env);
+  }
 };

package.json

@@ -28,6 +28,7 @@
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
+    "react-app-rewire-css-modules-extensionless": "^1.2.0",
     "react-app-rewired": "^1.5.2",
     "redux-devtools-extension": "^2.13.5"
   }

public/test-resources/search-stakeholders.json

@@ -0,0 +1,8 @@
+
+{
+  "data": [
+    { "name": "Dar es Salaam Region Authority", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Tanzania Fire and Rescue Force", "phone": "+233 54534545", "email": "[email protected]" }
+ 
+  ]
+}

public/test-resources/stakeholders.json

@@ -0,0 +1,14 @@
+
+{
+  "data": [
+    { "name": "Tanzania Red Cross Society", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Dar es Salaam Region Authority", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Tanzania Police Force", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Ambulance Services", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Supportive Personnel", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Prime Minister’s Office –Disaster Management Department", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Hospitals", "phone": "+233 54534545", "email": "[email protected]" },
+    { "name": "Tanzania Fire and Rescue Force", "phone": "+233 54534545", "email": "[email protected]" }
+ 
+  ]
+}

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import configureStore from './configureStore';
+import configureStore from 'redux/configureStore';
 import Dashboard from './dashboard';
 /* import global styles */
 import './utils.css';

src/dashboard/contacts/components/.gitkeep renamed to src/common/.gitkeep

@@ -0,0 +1,34 @@
+const API_END_POINT = 'https://emis-asat.herokuapp.com/v1';
+const API = {
+  findStakeholders: () => {
+    return fetch(`${API_END_POINT}/parties`).then(res => res.json());
+  },
+  searchStakeholder: searchText => {
+    return fetch(`${API_END_POINT}/parties?q=${searchText}`)
+      .then(res => res.json())
+  },
+  createStakeholder: data => {
+    const url = `${API_END_POINT}/parties`;
+    const config = {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: {
+        'content-type': 'application/json'
+      }
+    };
+    return fetch(url, config).then(res => res.json());
+  },
+  updateStakeholder: (stakeholderId, updates) => {
+    const url = `${API_END_POINT}/parties/${stakeholderId}`;
+    const config = {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+      headers: {
+        'content-type': 'application/json'
+      }
+    };
+    return fetch(url, config).then(res => res.json());
+  }
+};
+
+export default API;

src/common/API/index.js

@@ -1,12 +1,12 @@
-import classnames from 'classnames';
+import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 import React from 'react';
 /* import styles */
-import styles from './index.css';
+import styles from './index.module.css';
 
 
 /* local constants */
-const cx = classnames.bind(styles);
+const cx = classNames.bind(styles);
 
 
 /**
@@ -22,7 +22,7 @@ const cx = classnames.bind(styles);
  */
 export default function Header({ children }) {
   return (
-    <div className={cx('header b-b')}>
+    <div className={cx('container')}>
       {React.isValidElement(children)
         ? (
           <div className={cx('component')}>

src/dashboard/contacts/components/Header/index.js renamed to src/common/components/ColHeader/index.js

@@ -1,5 +1,11 @@
 /* contacts header styles */
 
+.container {
+  flex: 0 0 50px;
+  border-bottom: 1px solid #E0E0E0;
+  padding-left: 15px;
+}
+
 .title {
   font-size: 14px;
   padding-top: 15px;
@@ -10,4 +16,4 @@
   width: 95%;
   margin: 0 auto;
   padding-top: 10px;
-}
+}

src/dashboard/contacts/components/Header/index.css renamed to src/common/components/ColHeader/index.module.css

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import styles from './index.module.css';
+
+
+/* local constants */
+const cx = classNames.bind(styles);
+
+export default ({ title }) => (
+  <div className={cx('container')}>
+    <span className={cx('title')}>{title}</span>
+  </div>
+);

src/common/components/Header/index.js

@@ -0,0 +1,13 @@
+.container {
+  background: #fafafa;
+  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  padding-left: 30px;
+}
+
+.title {
+  display: block;
+  font-size: 20px;
+  margin-bottom: 5px;
+}

src/common/components/Header/index.module.css

@@ -0,0 +1,51 @@
+import { applyMiddleware, createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension'; // eslint-disable-line import/no-extraneous-dependencies
+import { createEpicMiddleware } from 'redux-observable';
+/* local dependencies */
+import rootReducer from './rootReducer';
+import rootEpic from './rootEpic';
+
+
+/* local constants */
+const epicMiddleware = createEpicMiddleware();
+
+// fake data store
+const fakeStore = {
+  filters: [
+    { group: 'phases', data: [{ name: 'Mitigation', count: 100, isActive: true }, { name: 'Preparedness', count: 20 }] },
+    { group: 'types', data: [] },
+    { group: 'roles', data: [] },
+    { group: 'functions', data: [] },
+  ],
+  criteria: {
+    filter: {
+      $and: [{ phases: { $in: ['Mitigation'] } }, { types: { $in: ['Agency'] } }],
+    },
+  },
+};
+
+
+/**
+ * Configure Redux store
+ * Enable redux dev tools
+ * Setup redux observables as async library
+ *
+ * @function
+ * @name configureStore
+ *
+ * @version 0.1.0
+ * @since 0.1.0
+ */
+const configureStore = () => {
+  const store = createStore(rootReducer, fakeStore, composeWithDevTools(
+    applyMiddleware(epicMiddleware),
+  ));
+
+  // epicMiddleware.run(); add root epics here
+  epicMiddleware.run(rootEpic);
+
+  return store;
+};
+
+
+export default configureStore;

src/common/redux/configureStore.js

@@ -0,0 +1,13 @@
+/**
+ * Root epics for react observables
+ */
+import { combineEpics } from 'redux-observable';
+import {
+  fetchStakeholdersEpic,
+  searchStakeholdersEpic
+} from '../../dashboard/Stakeholders/epics';
+
+export default combineEpics(
+  fetchStakeholdersEpic,
+  searchStakeholdersEpic
+);

src/common/redux/rootEpic.js

@@ -0,0 +1,7 @@
+/**
+ * Root Reducer for the application
+ */
+import { combineReducers } from 'redux';
+import { stakeholders } from '../../dashboard/Stakeholders/reducer';
+
+export default combineReducers({ stakeholders });

src/common/redux/rootReducer.js

@@ -0,0 +1,37 @@
+/**
+ * Action creators for contacts
+ */
+export const FETCH_STAKEHOLDERS = 'FETCH_STAKEHOLDERS';
+export const FETCH_STAKEHOLDERS_SUCCESS = 'FETCH_STAKEHOLDERS_SUCCESS';
+export const FETCH_STAKEHOLDERS_FAILURE = 'FETCH_STAKEHOLDERS_FAILURE';
+export const SEARCH_STAKEHOLDERS = 'SEARCH_STAKEHOLDERS';
+export const SELECT_STAKEHOLDER = 'SELECT_STAKEHOLDER';
+export const ADD_NEW_STAKEHOLDER_SUCCESS = 'ADD_NEW_STAKEHOLDER_SUCCESS';
+export const UPDATE_STAKEHOLDER_SUCCESS = 'UPDATE_STAKEHOLDER_SUCCESS';
+
+
+export const fetchStakeholders = () => ({ type: FETCH_STAKEHOLDERS });
+
+export const fetchStakeholdersSuccess = (stakeholders) => ({
+  type: FETCH_STAKEHOLDERS_SUCCESS,
+  payload: stakeholders
+});
+
+export const fetchStakeholdersFailure = (message) => ({
+  type: FETCH_STAKEHOLDERS_FAILURE,
+  payload: message
+});
+
+// action fired when stakeholder is selected 
+export const selectStakeholder = stakeholder => ({ type: SELECT_STAKEHOLDER, stakeholder });
+
+// action fired when search for stakeholder using search box
+export const searchStakeholders = searchText => ({ type: SEARCH_STAKEHOLDERS, searchText });
+
+// action fired on add new stakeholder success
+export const addNewStakeholderSuccess =
+  stakeholder => ({ type: ADD_NEW_STAKEHOLDER_SUCCESS, stakeholder });
+
+// action fired on update stakeholder successfully
+export const updateStakeholderSuccess =
+  stakeholder => ({ type: UPDATE_STAKEHOLDER_SUCCESS, stakeholder });