Skip to content
This repository was archived by the owner on Mar 3, 2019. It is now read-only.

Commit 3218efa

Browse files
BenMaruchuBenMaruchu
committed
Merge branch 'feature/contacts' into develop
2 parents 7ee1e2e + 83ae26d commit 3218efa

33 files changed

+654
-118
lines changed

‎config-overrides.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
const { injectBabelPlugin } = require('react-app-rewired');
1+
const { injectBabelPlugin } = require('react-app-rewired'); // eslint-disable line import/no-extraneous-dependencies
22

33
/**
44
* Override webpack configurations for the application
5+
*
56
* @param {Object} config
67
* @param {Object} env
78
*/

‎package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@
77
"prop-types": "^15.6.2",
88
"react": "^16.4.1",
99
"react-dom": "^16.4.1",
10+
"react-redux": "^5.0.7",
1011
"react-router-dom": "^4.3.1",
11-
"react-scripts": "1.1.4"
12+
"react-scripts": "1.1.4",
13+
"redux": "^4.0.0",
14+
"redux-observable": "^1.0.0",
15+
"rxjs": "^6.2.2"
1216
},
1317
"scripts": {
1418
"start": "react-app-rewired start",
@@ -24,6 +28,7 @@
2428
"eslint-plugin-import": "^2.13.0",
2529
"eslint-plugin-jsx-a11y": "^6.1.1",
2630
"eslint-plugin-react": "^7.10.0",
27-
"react-app-rewired": "^1.5.2"
31+
"react-app-rewired": "^1.5.2",
32+
"redux-devtools-extension": "^2.13.5"
2833
}
2934
}

‎public/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
-->
1212
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
1313
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
1415
<!--
1516
Notice the use of %PUBLIC_URL% in the tags above.
1617
It will be replaced with the URL of the `public` folder during the build.
@@ -20,7 +21,7 @@
2021
work correctly both with client-side routing and a non-root public URL.
2122
Learn how to configure a non-root public URL by running `npm run build`.
2223
-->
23-
<title>Emis- Dashboard</title>
24+
<title>Emis - Dashboard</title>
2425
</head>
2526

2627
<body>

‎src/App.js

+21-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,33 @@
11
import React from 'react';
2+
import { Provider } from 'react-redux';
23
import { BrowserRouter } from 'react-router-dom';
4+
import configureStore from './configureStore';
35
import Dashboard from './dashboard';
4-
// import global styles
6+
/* import global styles */
57
import './utils.css';
68

9+
/* local constants */
10+
const store = configureStore();
711

12+
13+
/**
14+
* Render the React application
15+
*
16+
* @function
17+
* @name App
18+
*
19+
* @version 0.1.0
20+
* @since 0.1.0
21+
*/
822
function App() {
923
return (
10-
<BrowserRouter>
11-
<Dashboard />
12-
</BrowserRouter>
24+
<Provider store={store}>
25+
<BrowserRouter>
26+
<Dashboard />
27+
</BrowserRouter>
28+
</Provider>
1329
);
1430
}
1531

32+
1633
export default App;

‎src/configureStore.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { applyMiddleware, createStore } from 'redux';
2+
import { composeWithDevTools } from 'redux-devtools-extension'; // eslint-disable-line import/no-extraneous-dependencies
3+
import { createEpicMiddleware } from 'redux-observable';
4+
/* local dependencies */
5+
import rootReducer from './rootReducer';
6+
7+
/* local constants */
8+
const epicMiddleware = createEpicMiddleware();
9+
10+
// fake data store
11+
const fakeStore = {
12+
filters: [
13+
{ group: 'phases', data: [{ name: 'Mitigation', count: 100, isActive: true }, { name: 'Preparedness', count: 20 }] },
14+
{ group: 'types', data: [] },
15+
{ group: 'roles', data: [] },
16+
{ group: 'functions', data: [] },
17+
],
18+
criteria: {
19+
filter: {
20+
$and: [{ phases: { $in: ['Mitigation'] } }, { types: { $in: ['Agency'] } }],
21+
},
22+
},
23+
contacts: {
24+
data: [
25+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
26+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
27+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
28+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
29+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
30+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
31+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
32+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
33+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
34+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
35+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
36+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
37+
{ name: 'Tanzania Red Cross Society', phone: '+233 54534545', email: '[email protected]' },
38+
],
39+
total: 100,
40+
},
41+
};
42+
43+
44+
/**
45+
* Configure Redux store
46+
* Enable redux dev tools
47+
* Setup redux observables as async library
48+
*
49+
* @function
50+
* @name configureStore
51+
*
52+
* @version 0.1.0
53+
* @since 0.1.0
54+
*/
55+
const configureStore = () => {
56+
const store = createStore(rootReducer, fakeStore, composeWithDevTools(
57+
applyMiddleware(epicMiddleware),
58+
));
59+
60+
// createEpicMiddleware.run(); add root epics here
61+
62+
return store;
63+
};
64+
65+
66+
export default configureStore;

‎src/dashboard/contacts/actions.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* Action creators for contacts
3+
*/

‎src/dashboard/contacts/components/Details/components/Information/Item.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@ import { Col, Row } from 'antd';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44

5+
6+
/**
7+
* Renders basic detail item
8+
*
9+
* @param {Object} props - component props
10+
* @param {string} label - label of basic detail item
11+
* @param {string} value - value of basic detail item
12+
*
13+
* @version 0.1.0
14+
* @since 0.1.0
15+
*/
516
export default function InformationItem({ label, value }) {
617
return (
718
<Row type="flex" justify="space-around" className="m-t-15">
@@ -13,7 +24,7 @@ export default function InformationItem({ label, value }) {
1324
</h3>
1425
</Col>
1526
<Col span={18}>
16-
<span className="f-15 f-600">
27+
<span className="f-15">
1728
{value}
1829
</span>
1930
</Col>

‎src/dashboard/contacts/components/Details/components/Information/index.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import { Col, Row } from 'antd';
22
import React from 'react';
3-
// import component
3+
/* import component */
44
import InformationItem from './Item';
55

6+
7+
/**
8+
* Contact information component
9+
* Render basic information about the contact
10+
*
11+
* @function
12+
* @name Information
13+
*
14+
* @version 0.1.0
15+
* @since 0.1.0
16+
*/
617
export default function Information() {
718
return (
819
<div>

‎src/dashboard/contacts/components/Details/components/Personnel/PersonnelCard.js

+17-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import {
2-
Avatar, Button, Col, Popover, Row,
3-
} from 'antd';
1+
import { Avatar, Button, Col, Popover, Row } from 'antd';
42
import classnames from 'classnames';
53
import PropTypes from 'prop-types';
64
import React from 'react';
75
/* import styles */
86
import styles from './personnel.css';
97

108
/* local constants */
9+
const cx = classnames.bind(styles);
1110
const actions = (
1211
<div>
1312
<div>
@@ -27,8 +26,20 @@ const actions = (
2726
</div>
2827
</div>
2928
);
30-
const cx = classnames.bind(styles);
3129

30+
31+
/**
32+
* Renders Key personnel contact card
33+
*
34+
* @function
35+
* @name PersonnelCard
36+
*
37+
* @param {Object} props - component props
38+
* @param {string} props.name - contact name
39+
* @param {string} props.title - contact title
40+
* @param {string} props.phone - contact phone number
41+
* @param {string} props.address - contact physical address
42+
*/
3243
export default function PersonnelCard({
3344
name, title, phone, address,
3445
}) {
@@ -68,6 +79,8 @@ export default function PersonnelCard({
6879
);
6980
}
7081

82+
83+
/* props validation */
7184
PersonnelCard.propTypes = {
7285
name: PropTypes.string.isRequired,
7386
title: PropTypes.string.isRequired,

‎src/dashboard/contacts/components/Details/components/Personnel/index.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
// import component
44
import PersonnelCard from './PersonnelCard';
55

6-
6+
// fake data
77
const personnelList = [{
88
name: 'John Done',
99
phone: '255 790 323',
@@ -36,6 +36,16 @@ const personnelList = [{
3636
address: 'This, That, There',
3737
}];
3838

39+
40+
/**
41+
* Renders a grid view list of key personnel
42+
*
43+
* @function
44+
* @name PersonnelList
45+
*
46+
* @version 0.1.0
47+
* @since 0.1.0
48+
*/
3949
export default function PersonnelList() {
4050
return (
4151
<Row type="flex" justify="space-around">

‎src/dashboard/contacts/components/Details/components/Responsibilities/Responsibility.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {
2-
Button, Col, List, Popover, Row
3-
} from 'antd';
1+
import { Button, Col, List, Popover, Row } from 'antd';
42
import PropTypes from 'prop-types';
53
import React from 'react';
64

5+
6+
// TODO refactor this to external component
77
const actions = (
88
<div>
99
<div>
@@ -19,6 +19,19 @@ const actions = (
1919
</div>
2020
);
2121

22+
23+
/**
24+
* Renders Responsibility item component for contact details view
25+
*
26+
* @function
27+
* @name Responsibility
28+
*
29+
* @param {Object} props - Component props
30+
* @param {string} props.description - Responsibility description
31+
*
32+
* @version 0.1.0
33+
* @since 0.1.0
34+
*/
2235
export default function Responsibility({ description }) {
2336
return (
2437
<List.Item className="p-l-20">
@@ -43,6 +56,7 @@ export default function Responsibility({ description }) {
4356
}
4457

4558

59+
/* props validation */
4660
Responsibility.propTypes = {
4761
description: PropTypes.string.isRequired,
4862
};

‎src/dashboard/contacts/components/Details/components/Responsibilities/index.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { List } from 'antd';
22
import React from 'react';
3-
// import component
3+
/* import component */
44
import Responsibility from './Responsibility';
55

6+
7+
// fake data
68
const fakeData = [
79
{ description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, dolore aliquid? Autem id, amet tempore vitae animi quae veniam tenetur dolorum fugiat maxime repudiandae eum saepe accusamus voluptates placeat dicta.' },
810
{ description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, dolore aliquid? Autem id, amet tempore vitae animi quae veniam tenetur dolorum fugiat maxime repudiandae eum saepe accusamus voluptates placeat dicta.' },
@@ -18,6 +20,16 @@ const fakeData = [
1820
{ description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, dolore aliquid? Autem id, amet tempore vitae animi quae veniam tenetur dolorum fugiat maxime repudiandae eum saepe accusamus voluptates placeat dicta.' },
1921
];
2022

23+
24+
/**
25+
* Render Contacts List
26+
*
27+
* @function
28+
* @name ContactList
29+
*
30+
* @version 0.1.0
31+
* @since 0.1.0
32+
*/
2133
export default function ContactsList() {
2234
return (
2335
<div>

‎src/dashboard/contacts/components/Details/components/SectionContent.js

+14
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ import { Col } from 'antd';
22
import PropTypes from 'prop-types';
33
import React from 'react';
44

5+
6+
/**
7+
* Renders contents of contact details sections
8+
*
9+
* @function
10+
* @name SectionContent
11+
*
12+
* @param {Object} children - React node for children to render
13+
*
14+
* @version 0.1.0
15+
* @since 0.1.0
16+
*/
517
export default function SectionContent({ children }) {
618
return (
719
<Col span={24} className="p-r-l-30">
@@ -10,6 +22,8 @@ export default function SectionContent({ children }) {
1022
);
1123
}
1224

25+
26+
/* props validations */
1327
SectionContent.propTypes = {
1428
children: PropTypes.element.isRequired,
1529
};

0 commit comments

Comments
 (0)