Bureau landing page and Menu TM-1855

package.json

@@ -78,6 +78,7 @@
     "react-switch": "^5.0.1",
     "react-tippy": "^1.4.0",
     "react-toastify": "^6.0.8",
+    "recharts": "^1.8.5",
     "redux": "^4.0.5",
     "redux-persist": "^5.10.0",
     "redux-saga": "^0.16.2",

src/Components/BureauPage/BureauPage.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Route, Switch } from 'react-router-dom';
+import Dashboard from './Dashboard';
+import Stats from './Stats';
+import PositionLists from './PositionLists';
+import PositionManager from './PositionManager';
+
+const BureauPage = (props) => {
+  const {
+    // eslint-disable-next-line no-unused-vars
+    isLoading,
+  } = props;
+
+  const dashboardProps = {
+    placeholderText: 'I am the Bureau Dashboard',
+  };
+
+  const statsProps = {
+    placeholderText: 'I am the Bureau Stats',
+  };
+
+  const posListsProps = {
+    placeholderText: 'I am the Bureau Position Lists',
+  };
+
+  const posManagerProps = {
+    placeholderText: 'I am the Bureau Position Manager',
+  };
+
+  return (
+    <div className="usa-grid-full profile-content-container">
+      <Switch>
+        <Route path="/profile/bureau/dashboard" render={() => <Dashboard {...dashboardProps} />} />
+        <Route path="/profile/bureau/stats" render={() => <Stats {...statsProps} />} />
+        <Route path="/profile/bureau/positionlists" render={() => <PositionLists {...posListsProps} />} />
+        <Route path="/profile/bureau/positionmanager" render={() => <PositionManager {...posManagerProps} />} />
+      </Switch>
+    </div>
+  );
+};
+
+BureauPage.propTypes = {
+  isLoading: PropTypes.bool,
+};
+
+BureauPage.defaultProps = {
+  isLoading: false,
+};
+
+export default BureauPage;

src/Components/BureauPage/BureauPage.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TestUtils from 'react-dom/test-utils';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import BureauPage from './BureauPage';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('BureauPage', () => {
+  it('mounts', () => {
+    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
+      <BureauPage />
+    </MemoryRouter></Provider>);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('is defined', () => {
+    const wrapper = shallow(<BureauPage />);
+    expect(wrapper).toBeDefined();
+  });
+});

src/Components/BureauPage/BureauPageLoadable.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import createLoader from '../Loadable';
+
+export const path = () => import('./BureauPage');
+
+const BureauPage = createLoader({ path, shouldPreload: false });
+
+const BureauPageLoadable = ({ ...rest }) => (
+  <BureauPage {...rest} />
+);
+
+export default BureauPageLoadable;

src/Components/BureauPage/Dashboard/Dashboard.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FA from 'react-fontawesome';
+import { includes } from 'lodash';
+import { PieChart, Pie, Cell } from 'recharts';
+import ProfileSectionTitle from '../../ProfileSectionTitle';
+import Spinner from '../../Spinner';
+import SelectForm from '../../SelectForm';
+import { Row, Column } from '../../Layout';
+
+
+const BureauPage = (props) => {
+  const {
+    placeholderText,
+  } = props;
+  const data = [
+    { name: 'Group A', value: 400 },
+    { name: 'Group B', value: 300 },
+    { name: 'Group C', value: 300 },
+    { name: 'Group D', value: 200 },
+  ];
+
+  const COLORS = ['#102f51', '#cc3334', '#c49208', '#2970bc'];
+
+  const RADIAN = Math.PI / 180;
+  const renderCustomizedLabel = ({
+    // eslint-disable-next-line react/prop-types
+    cx, cy, midAngle, innerRadius, outerRadius, percent,
+  }) => {
+    const radius = (innerRadius + (outerRadius - innerRadius)) * 0.5;
+    const x = cx + (radius * Math.cos(-midAngle * RADIAN));
+    const y = cy + (radius * Math.sin(-midAngle * RADIAN));
+
+    return (
+      <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+        {`${(percent * 100).toFixed(0)}%`}
+      </text>
+    );
+  };
+
+  const bidCycles = [
+    { value: null, text: 'Select Cycle' },
+    { value: 'Fall 2020', text: 'Fall 2020' },
+    { value: 'Winter 2020', text: 'Winter 2020' },
+    { value: 'Spring 2021', text: 'Spring 2021' },
+    { value: 'Summer 2021', text: 'Summer 2021' },
+    { value: 'Fall 2021', text: 'Fall 2021' },
+    { value: 'Winter 2021', text: 'Winter 2021' },
+  ];
+
+  const countries = [
+    'Bahamas', 'Andorra', 'Vanuatu', 'Malawi', 'Equatorial Guinea', 'Sierra Leone', 'Mozambique',
+    'France', 'Sudan', 'Iran', 'Malta', 'Papua New Guinea', 'Congo', 'Nauru', 'Guatemala',
+    'Wallis and Futuna', 'Madagascar', 'Virgin Islands', 'Saint Pierre and Miquelon', 'Tajikistan',
+    'Trinidad and Tobago', 'Iceland', 'Italy', 'Panama', 'Lithuania'];
+
+  return (
+    <div
+      className={'usa-grid-full profile-content-inner-container bureau-page'}
+    >
+      {
+        !placeholderText &&
+          <Spinner type="homepage-position-results" size="big" />
+      }
+      <div className="usa-grid-full">
+        <ProfileSectionTitle title="Bureau Dashboard" icon="tachometer" />
+      </div>
+      <div className="usa-grid-full">
+        <Row className="usa-grid-full">
+          <div className="usa-width-one-whole section">
+            <h3>Positions Filled</h3>
+            {placeholderText}
+            <div className="all-inline">
+              <SelectForm
+                id="bid-cycle"
+                options={bidCycles}
+                label="Bid Cycle"
+              // onSelectOption={myFunction}
+              />
+            </div>
+            <div className="usa-width-one-whole">
+              <div className="usa-width-one-fourth align-middle">
+                <PieChart width={400} height={400}>
+                  <Pie
+                    data={data}
+                    cx={200}
+                    cy={200}
+                    labelLine={false}
+                    label={renderCustomizedLabel}
+                    outerRadius={180}
+                    fill="#8884d8"
+                    dataKey="value"
+                  >
+                    {
+                      // eslint-disable-next-line react/no-array-index-key
+                      data.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)
+                    }
+                  </Pie>
+                </PieChart>
+                <div>All: 130/150</div>
+              </div>
+              <div className="usa-width-three-fourths">
+                <div className="mainSelector">
+                  <FA name={'dot-circle-o'} />
+                  <span>WHA (All positions)</span>
+                </div>
+                {countries.map((m) => {
+                  const isSelected = includes(['Nauru', 'Malawi', 'Sudan', 'Guatemala', 'Italy'], m);
+                  return (
+                    <Column columns={2}>
+                      <FA name={isSelected ? 'dot-circle-o' : 'circle-o'} />
+                      <span>{m}</span>
+                    </Column>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+          <div className="usa-width-one-whole section">
+            <h3>Notifications</h3>
+          </div>
+        </Row>
+      </div>
+    </div>
+  );
+};
+
+BureauPage.propTypes = {
+  placeholderText: PropTypes.string,
+};
+
+BureauPage.defaultProps = {
+  placeholderText: '',
+};
+
+export default BureauPage;

src/Components/BureauPage/Dashboard/Dashboard.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TestUtils from 'react-dom/test-utils';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import BureauPage from './Dashboard';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('BureauPage', () => {
+  const props = {
+    placeholderText: '',
+  };
+
+  it('mounts', () => {
+    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
+      <BureauPage />
+    </MemoryRouter></Provider>);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('is defined', () => {
+    const wrapper = shallow(<BureauPage {...props} />);
+    expect(wrapper).toBeDefined();
+  });
+});

src/Components/BureauPage/Dashboard/index.js

@@ -0,0 +1 @@
+export { default } from './Dashboard';

src/Components/BureauPage/PositionLists/PositionLists.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProfileSectionTitle from '../../ProfileSectionTitle';
+import Spinner from '../../Spinner';
+
+const PositionsList = (props) => {
+  const {
+    placeholderText,
+  } = props;
+
+  return (
+    <div
+      className={'usa-grid-full profile-content-inner-container bureau-page'}
+    >
+      {
+        !placeholderText &&
+          <Spinner type="homepage-position-results" size="big" />
+      }
+      <div className="usa-grid-full">
+        <ProfileSectionTitle title="Positions Lists" icon="list-ol" />
+      </div>
+      <div className="usa-grid-full bureau-page">
+        {placeholderText}
+      </div>
+    </div>
+  );
+};
+
+PositionsList.propTypes = {
+  placeholderText: PropTypes.string,
+};
+
+PositionsList.defaultProps = {
+  placeholderText: '',
+};
+
+export default PositionsList;

src/Components/BureauPage/PositionLists/PositionLists.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TestUtils from 'react-dom/test-utils';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import PositionLists from './PositionLists';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('BureauPage', () => {
+  it('mounts', () => {
+    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
+      <PositionLists />
+    </MemoryRouter></Provider>);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('is defined', () => {
+    const wrapper = shallow(<PositionLists />);
+    expect(wrapper).toBeDefined();
+  });
+});

src/Components/BureauPage/PositionLists/index.js

@@ -0,0 +1 @@
+export { default } from './PositionLists';

src/Components/BureauPage/PositionManager/PositionManager.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProfileSectionTitle from '../../ProfileSectionTitle';
+import Spinner from '../../Spinner';
+
+const PositionManager = (props) => {
+  const {
+    placeholderText,
+  } = props;
+
+  return (
+    <div
+      className={'usa-grid-full profile-content-inner-container bureau-page'}
+    >
+      {
+        !placeholderText &&
+          <Spinner type="homepage-position-results" size="big" />
+      }
+      <div className="usa-grid-full">
+        <ProfileSectionTitle title="Positions Manager" icon="map" />
+      </div>
+      <div className="usa-grid-full bureau-page">
+        {placeholderText}
+      </div>
+    </div>
+  );
+};
+
+PositionManager.propTypes = {
+  placeholderText: PropTypes.string,
+};
+
+PositionManager.defaultProps = {
+  placeholderText: '',
+};
+
+export default PositionManager;

src/Components/BureauPage/PositionManager/PositionManager.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TestUtils from 'react-dom/test-utils';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import PositionManager from './PositionManager';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('BureauPage', () => {
+  it('mounts', () => {
+    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
+      <PositionManager />
+    </MemoryRouter></Provider>);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('is defined', () => {
+    const wrapper = shallow(<PositionManager />);
+    expect(wrapper).toBeDefined();
+  });
+});

src/Components/BureauPage/PositionManager/index.js

@@ -0,0 +1 @@
+export { default } from './PositionManager';