Ntd/add students page and reducer

.env.sample

@@ -12,6 +12,7 @@ REACT_APP_ENABLE_USERS=true
 REACT_APP_ENABLE_ASSIGN=true
 REACT_APP_ENABLE_ABOUT=true
 REACT_APP_ENABLE_TEAMS=true
+REACT_APP_ENABLE_MDA_POINT=true
 REACT_APP_ENABLE_PRACTITIONERS=true
 REACT_APP_DISABLE_LOGIN_PROTECTION=false
 REACT_APP_SUPERSET_API_BASE=https://superset.reveal-stage.smartregister.org/ # notice the ending /

package.json

@@ -17,7 +17,7 @@
     "@onaio/formik-effect": "^0.0.1",
     "@onaio/gatekeeper": "^0.0.18",
     "@onaio/google-analytics": "^0.0.2",
-    "@onaio/list-view": "^0.0.1",
+    "@onaio/list-view": "^0.0.3",
     "@onaio/redux-reducer-registry": "^0.0.9",
     "@onaio/session-reducer": "^0.0.10",
     "@onaio/superset-connector": "^0.0.13",

src/App/App.tsx

@@ -40,6 +40,7 @@ import {
   BACKEND_CALLBACK_PATH,
   BACKEND_CALLBACK_URL,
   BACKEND_LOGIN_URL,
+  CLIENTS_LIST_URL,
   CREATE_ORGANIZATION_URL,
   CREATE_PRACTITIONER_URL,
   DRAFT_IRS_PLAN_URL,
@@ -82,6 +83,7 @@ import ConnectedIRSAssignmentPlansList from '../containers/pages/IRS/assignments
 import ConnectedJurisdictionReport from '../containers/pages/IRS/JurisdictionsReport';
 import ConnectedIRSReportingMap from '../containers/pages/IRS/Map';
 import ConnectedIRSPlansList from '../containers/pages/IRS/plans';
+import ConnectedClientListView from '../containers/pages/MDAPoint/ClientListView';
 import ConnectedAssignPractitioner from '../containers/pages/OrganizationViews/AssignPractitioners';
 import ConnectedCreateEditOrgView from '../containers/pages/OrganizationViews/CreateEditOrgView';
 import ConnectedOrgsListView from '../containers/pages/OrganizationViews/OrganizationListView';
@@ -340,6 +342,14 @@ const App = (props: AppProps) => {
                 path={`${SINGLE_ORGANIZATION_URL}/:id`}
                 component={ConnectedSingleOrgView}
               />
+              {/* Student listing page */}
+              <ConnectedPrivateRoute
+                redirectPath={APP_CALLBACK_URL}
+                disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                exact={false}
+                path={CLIENTS_LIST_URL}
+                component={ConnectedClientListView}
+              />
               {/* Practitioner listing page */}
               <ConnectedPrivateRoute
                 redirectPath={APP_CALLBACK_URL}

src/components/forms/ExportForm/index.tsx

@@ -0,0 +1,130 @@
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import React from 'react';
+import { Alert, Button, Col, FormGroup, Label, Row } from 'reactstrap';
+import * as Yup from 'yup';
+import { ENABLE_MDA_POINT } from '../../../configs/env';
+import {
+  DOWNLOAD,
+  EXPORT_BASED_ON_GEOGRAPHICAL_REGION,
+  EXPORT_CLIENT_LIST,
+  EXPORT_STUDENT_LIST,
+  LOCATION_ERROR_MESSAGE,
+  REQUIRED,
+} from '../../../configs/lang';
+import {
+  OPENSRP_EVENT_PARAM_VALUE,
+  OPENSRP_TEMPLATE_ENDPOINT,
+  OPENSRP_UPLOAD_ENDPOINT,
+} from '../../../constants';
+import { handleDownload } from '../../../containers/pages/MDAPoint/ClientListView/helpers/serviceHooks';
+import LocationSelect from '../LocationSelect';
+/** Yup validation schema for ExportForm */
+export const JurisdictionSchema = Yup.object().shape({
+  jurisdictions: Yup.object().shape({
+    id: Yup.string().required(REQUIRED),
+    name: Yup.string(),
+  }),
+});
+/** Jurisdiction form field Option interface */
+export interface JurisdictionFieldOptions {
+  id: string;
+  name: string;
+}
+/** Jurisdiction form field interface */
+export interface JurisdictionFormField {
+  jurisdictions: JurisdictionFieldOptions;
+}
+/** initial values for exportform */
+const defaultInitialValues: JurisdictionFormField = {
+  jurisdictions: {
+    id: '',
+    name: '',
+  },
+};
+/** Interface for ExportForm Props */
+export interface ExportFormProps {
+  initialValues: JurisdictionFormField;
+  downloadFile: typeof handleDownload;
+  eventValue: string;
+}
+export const ExportForm = (props: ExportFormProps) => {
+  const { initialValues, downloadFile, eventValue } = props;
+  return (
+    <div>
+      <Row id="export-row">
+        <Col>
+          <h3 className="mb-3 mt-5 page-title">
+            {ENABLE_MDA_POINT ? EXPORT_STUDENT_LIST : EXPORT_CLIENT_LIST}
+          </h3>
+          {/* Download Form goes here */}
+          <Alert color="light">{EXPORT_BASED_ON_GEOGRAPHICAL_REGION}</Alert>
+          <Formik
+            initialValues={initialValues}
+            /* tslint:disable-next-line jsx-no-lambda */
+            onSubmit={values => {
+              // tslint:disable-next-line: no-floating-promises
+              downloadFile(
+                OPENSRP_TEMPLATE_ENDPOINT,
+                `${values.jurisdictions.name}.csv`,
+                OPENSRP_UPLOAD_ENDPOINT,
+                {
+                  event_name: eventValue,
+                  location_id: values.jurisdictions.id,
+                }
+              );
+            }}
+            validationSchema={JurisdictionSchema}
+          >
+            {({ errors }) => (
+              <Form className="mb-5">
+                <FormGroup className={'async-select-container'}>
+                  <Label for={`jurisdictions-${1}-id`}>{'Geographical level to include'}</Label>
+                  &nbsp;
+                  <div style={{ display: 'inline-block', width: '24rem' }}>
+                    <Field
+                      required={true}
+                      component={LocationSelect}
+                      cascadingSelect={true}
+                      name={`jurisdictions.id`}
+                      id={`jurisdictions-id`}
+                      className={'async-select'}
+                      labelFieldName={`jurisdictions.name`}
+                    />
+                  </div>
+                  <Field type="hidden" name={`jurisdictions.name`} id={`jurisdictions-name`} />
+                  {errors.jurisdictions && (
+                    <small className="form-text text-danger jurisdictions-error">
+                      {LOCATION_ERROR_MESSAGE}
+                    </small>
+                  )}
+                  {
+                    <ErrorMessage
+                      name={`jurisdictions.id`}
+                      component="small"
+                      className="form-text text-danger"
+                    />
+                  }
+                </FormGroup>
+                <Button
+                  type="submit"
+                  id="studentexportform-submit-button"
+                  className="btn btn-md btn btn-primary"
+                  color="primary"
+                >
+                  {DOWNLOAD}
+                </Button>
+              </Form>
+            )}
+          </Formik>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+const defaultProps: ExportFormProps = {
+  downloadFile: handleDownload,
+  eventValue: OPENSRP_EVENT_PARAM_VALUE,
+  initialValues: defaultInitialValues,
+};
+ExportForm.defaultProps = defaultProps;
+export default ExportForm;

src/components/forms/ExportForm/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/forms/ExportForm renders correctly: jurisdiction-select form label 1`] = `
+<Label
+  for="jurisdictions-1-id"
+  tag="label"
+  widths={
+    Array [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+    ]
+  }
+>
+  <label
+    className=""
+    htmlFor="jurisdictions-1-id"
+  >
+    Geographical level to include
+  </label>
+</Label>
+`;
+
+exports[`components/forms/ExportForm renders correctly: submit button 1`] = `null`;
+
+exports[`components/forms/ExportForm renders jurisdictions fields correctly: jurisdictions.id field 1`] = `null`;
+
+exports[`components/forms/ExportForm renders jurisdictions fields correctly: jurisdictions.id label 1`] = `
+<Label
+  for="jurisdictions-1-id"
+  tag="label"
+  widths={
+    Array [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+    ]
+  }
+>
+  <label
+    className=""
+    htmlFor="jurisdictions-1-id"
+  >
+    Geographical level to include
+  </label>
+</Label>
+`;
+
+exports[`components/forms/ExportForm renders jurisdictions fields correctly: jurisdictions.name field 1`] = `
+<input
+  id="jurisdictions-name"
+  name="jurisdictions.name"
+  onBlur={[Function]}
+  onChange={[Function]}
+  type="hidden"
+  value=""
+/>
+`;

src/components/forms/ExportForm/tests/index.test.tsx

@@ -0,0 +1,120 @@
+import { getOpenSRPUserInfo } from '@onaio/gatekeeper';
+import { authenticateUser } from '@onaio/session-reducer';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import ExportForm from '..';
+import { OpenSRPAPIResponse } from '../../../../services/opensrp/tests/fixtures/session';
+import store from '../../../../store';
+import * as fixtures from '../../PlanForm/tests/fixtures';
+
+/* tslint:disable-next-line no-var-requires */
+const fetch = require('jest-fetch-mock');
+
+jest.mock('../../../../configs/env');
+
+describe('components/forms/ExportForm', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    shallow(<ExportForm />);
+  });
+
+  it('renders correctly', () => {
+    fetch.mockResponseOnce(fixtures.jurisdictionLevel0JSON);
+    const wrapper = mount(<ExportForm />);
+
+    expect(toJson(wrapper.find('Label'))).toMatchSnapshot('jurisdiction-select form label');
+    expect(toJson(wrapper.find('#ExportForm-submit-button button'))).toMatchSnapshot(
+      'submit button'
+    );
+    expect(wrapper.find('#jurisdictions-select-container')).toEqual({});
+    expect(wrapper.find('#jurisdictions-display-container').length).toEqual(0);
+    wrapper.unmount();
+  });
+  it('renders jurisdictions fields correctly', () => {
+    fetch.mockResponseOnce(fixtures.jurisdictionLevel0JSON);
+    const wrapper = mount(<ExportForm />);
+
+    expect(toJson(wrapper.find({ for: `jurisdictions-1-id` }))).toMatchSnapshot(
+      `jurisdictions.id label`
+    );
+    expect(toJson(wrapper.find(`#jurisdictions-1-id input`))).toMatchSnapshot(
+      `jurisdictions.id field`
+    );
+    expect(wrapper.find({ for: `jurisdictions-1-name` }).length).toEqual(0);
+    expect(toJson(wrapper.find(`#jurisdictions-name input`))).toMatchSnapshot(
+      `jurisdictions.name field`
+    );
+    // ensure there is only one options so far
+    expect(wrapper.find(`#jurisdictions-1-id input`).length).toEqual(0);
+    // there is no button to remove jurisdictions
+    expect(wrapper.find(`.removeJurisdiction`).length).toEqual(0);
+    // there is no button to add more jurisdictions
+    expect(wrapper.find(`.addJurisdiction`).length).toEqual(0);
+    wrapper.unmount();
+  });
+  it('Form validation works', async () => {
+    const wrapper = mount(<ExportForm />);
+
+    // no errors are initially shown
+    expect(
+      (wrapper
+        .find('FieldInner')
+        .first()
+        .props() as any).formik.errors
+    ).toEqual({});
+
+    wrapper.find('form').simulate('submit');
+
+    await new Promise<any>(resolve => setImmediate(resolve));
+    wrapper.update();
+
+    // we now have some errors
+    expect(
+      (wrapper
+        .find('FieldInner')
+        .first()
+        .props() as any).formik.errors
+    ).toEqual({
+      jurisdictions: {
+        id: 'Required',
+      },
+    });
+    expect(wrapper.find('small.jurisdictions-error').text()).toEqual('Please select location');
+  });
+  it('Export Form submission works', async () => {
+    // ensure that we are logged in so that we can get the OpenSRP token from Redux
+    const { authenticated, user, extraData } = getOpenSRPUserInfo(OpenSRPAPIResponse);
+    store.dispatch(authenticateUser(authenticated, user, extraData));
+
+    fetch.mockResponseOnce(JSON.stringify({}), { status: 201 });
+
+    const wrapper = mount(<ExportForm />);
+
+    // set jurisdiction id
+    (wrapper
+      .find('FieldInner')
+      .first()
+      .props() as any).formik.setFieldValue('jurisdictions.id', '1337');
+    // set jurisdiction name
+    wrapper
+      .find('input[name="jurisdictions.name"]')
+      .simulate('change', { target: { name: 'jurisdictions.name', value: 'Onyx' } });
+
+    wrapper.find('form').simulate('submit');
+    await new Promise<any>(resolve => setImmediate(resolve));
+    wrapper.update();
+
+    // no errors are initially shown
+    expect(
+      (wrapper
+        .find('FieldInner')
+        .first()
+        .props() as any).formik.errors
+    ).toEqual({});
+    // Todo test the api get once form is submitted
+  });
+});