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>
+);