CM-454: connect with the backend

src/actions.js

@@ -0,0 +1,15 @@
+import {
+  graphql,
+  formatQuery,
+} from '@openimis/fe-core';
+import { ACTION_TYPE } from './reducer';
+
+const DEDUPLICATION_SUMMARY_FULL_PROJECTION = () => [
+  'rows {count, columnValues}',
+];
+
+// eslint-disable-next-line import/prefer-default-export
+export function fetchDeduplicationSummary(params) {
+  const payload = formatQuery('beneficiaryDeduplicationSummary', params, DEDUPLICATION_SUMMARY_FULL_PROJECTION());
+  return graphql(payload, ACTION_TYPE.GET_DEDUPLICATION_SUMMARY);
+}

src/components/dialogs/DeduplicationFieldSelectionDialog.js

@@ -36,16 +36,15 @@ function DeduplicationFieldSelectionDialog({
 
   const handleClose = () => {
     setIsOpen(false);
-    setSelectedValues([]);
   };
 
   const handlePickerChange = (selectedOptions) => {
     setSelectedValues(selectedOptions);
   };
 
   const handleOpenNextDialog = () => {
-    handleClose();
     setShowSummaryDialog(true);
+    handleClose();
   };
 
   const handleSummaryDialogClose = () => {
@@ -136,6 +135,7 @@ function DeduplicationFieldSelectionDialog({
           benefitPlan={benefitPlan}
           handleClose={handleSummaryDialogClose}
           showSummaryDialog={showSummaryDialog}
+          selectedValues={selectedValues}
         />
       )}
     </>

src/components/dialogs/DeduplicationSummaryDialog.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { injectIntl } from 'react-intl';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
@@ -10,6 +10,7 @@ import { withTheme, withStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import DeduplicationSummaryTable from '../tables/DeduplicationSummaryTable';
+import { fetchDeduplicationSummary } from '../../actions';
 
 const styles = (theme) => ({
   item: theme.paper.item,
@@ -20,9 +21,14 @@ function DeduplicationSummaryDialog({
   benefitPlan,
   handleClose,
   showSummaryDialog,
+  selectedValues,
 }) {
   if (!benefitPlan) return null;
 
+  // Extract the 'id' values from each object in the array
+  const columns = selectedValues.map((value) => value.id);
+  const columnParam = `columns: ${JSON.stringify(columns)}`;
+
   return (
     <Dialog
       open={showSummaryDialog}
@@ -42,7 +48,11 @@ function DeduplicationSummaryDialog({
         {formatMessage(intl, 'deduplication', 'deduplicate.summary.title')}
       </DialogTitle>
       <DialogContent>
-        <DeduplicationSummaryTable />
+        <DeduplicationSummaryTable
+          columnParam={columnParam}
+          benefitPlan={benefitPlan}
+          fetchDeduplicationSummary={fetchDeduplicationSummary}
+        />
       </DialogContent>
       <DialogActions
         style={{

src/components/tables/DeduplicationSummaryTable.js

@@ -23,30 +23,24 @@ const useStyles = makeStyles((theme) => ({
 
 const DEDUPLICATION_SUMMARY_HEADERS = [
   'deduplication.deduplicationSummaryTable.group',
-  'deduplication.deduplicationSummaryTable.duplicates'
+  'deduplication.deduplicationSummaryTable.duplicates',
 ];
 
-function DeduplicationSummaryTable() {
-  //const dispatch = useDispatch();
+function DeduplicationSummaryTable({
+  columnParam, benefitPlan, fetchDeduplicationSummary,
+}) {
+  const dispatch = useDispatch();
   const modulesManager = useModulesManager();
   const classes = useStyles();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
-  //const {
-  //  fetchingFamilyMembers, familyMembers, errorFamilyMembers
-  //} = useSelector((store) => store.insuree);
+  const {
+    fetchingSummary, summary, errorSummary,
+  } = useSelector((store) => store.deduplication);
 
-  const results = [
-    {group: "Firstname: John, Surname: Doe, DOB: 1995-01-2020", duplicates: 2},
-    {group: "Firstname: John, Surname: Test, DOB: 1995-01-2020", duplicates: 4},
-    {group: "Firstname: Michael, Surname: Doe, DOB: 1995-01-2020", duplicates: 10},
-    {group: "Firstname :Dennis, Surname: Jin, DOB: 1994-01-2020", duplicates: 20},
-  ];
-
-  //useEffect(() => {
-    //if (!insuree) return;
-
-    //dispatch(fetchFamilyMembers(modulesManager, [`familyUuid: "${insuree.family.uuid}"`]));
-  //}, [insuree]);
+  useEffect(() => {
+    const params = [columnParam, `benefitPlanId: "${benefitPlan.id}"`];
+    dispatch(fetchDeduplicationSummary(params));
+  }, []);
 
   return (
     <TableContainer component={Paper}>
@@ -63,16 +57,17 @@ function DeduplicationSummaryTable() {
           </TableRow>
         </TableHead>
         <TableBody>
-          {results?.map((result) => (
+          <ProgressOrError progress={fetchingSummary} error={errorSummary} />
+          {summary?.map((result) => (
             <TableRow key={result?.uuid}>
               <TableCell>
                 {' '}
-                {result.group}
+                {result.columnValues}
                 {' '}
               </TableCell>
               <TableCell>
                 {' '}
-                {result.duplicates}
+                {result.count}
                 {' '}
               </TableCell>
             </TableRow>

src/index.js

@@ -1,8 +1,10 @@
 import messagesEn from './translations/en.json';
 import DeduplicationFieldSelectionDialog from './components/dialogs/DeduplicationFieldSelectionDialog';
+import reducer from './reducer';
 
 const DEFAULT_CONFIG = {
   translations: [{ key: 'en', messages: messagesEn }],
+  reducers: [{ key: 'deduplication', reducer }],
   'deduplication.deduplicationFieldSelectionDialog': [
     DeduplicationFieldSelectionDialog,
   ],

src/reducer.js

@@ -0,0 +1,56 @@
+// Disabled due to consistency with other modules
+/* eslint-disable default-param-last */
+
+import {
+  parseData,
+  formatServerError,
+} from '@openimis/fe-core';
+import {
+  ERROR, REQUEST, SUCCESS,
+} from './util/action-type';
+
+export const ACTION_TYPE = {
+  GET_DEDUPLICATION_SUMMARY: 'DEDUPLICATION_GET_DEDUPLICATION_SUMMARY',
+};
+
+function reducer(
+  state = {
+    submittingMutation: false,
+    mutation: {},
+    fetchingSummary: false,
+    errorSummary: null,
+    fetchedSummary: false,
+    summary: [],
+  },
+  action,
+) {
+  switch (action.type) {
+    case REQUEST(ACTION_TYPE.GET_DEDUPLICATION_SUMMARY):
+      return {
+        ...state,
+        fetchingSummary: true,
+        fetchedSummary: false,
+        summary: null,
+      };
+    case SUCCESS(ACTION_TYPE.GET_DEDUPLICATION_SUMMARY):
+      return {
+        ...state,
+        fetchingSummary: false,
+        fetchedSummary: true,
+        summary: action.payload.data.beneficiaryDeduplicationSummary.rows?.map((row) => ({
+          ...row,
+        })),
+        errorSummary: null,
+      };
+    case ERROR(ACTION_TYPE.GET_DEDUPLICATION_SUMMARY):
+      return {
+        ...state,
+        fetchingSummary: false,
+        errorSummary: formatServerError(action.payload),
+      };
+    default:
+      return state;
+  }
+}
+
+export default reducer;

src/util/action-type.js

@@ -0,0 +1,5 @@
+export const REQUEST = (actionTypeName) => `${actionTypeName}_REQ`;
+export const SUCCESS = (actionTypeName) => `${actionTypeName}_RESP`;
+export const ERROR = (actionTypeName) => `${actionTypeName}_ERR`;
+export const CLEAR = (actionTypeName) => `${actionTypeName}_CLEAR`;
+export const VALID = (actionTypeName) => `${actionTypeName}_VALID`;

src/util/styles.js

@@ -0,0 +1,24 @@
+export const defaultPageStyles = (theme) => ({
+  page: theme.page,
+});
+
+export const defaultFilterStyles = (theme) => ({
+  form: {
+    padding: 0,
+  },
+  item: {
+    padding: theme.spacing(1),
+  },
+});
+
+export const defaultHeadPanelStyles = (theme) => ({
+  tableTitle: theme.table.title,
+  item: theme.paper.item,
+  fullHeight: {
+    height: '100%',
+  },
+});
+
+export const defaultDialogStyles = (theme) => ({
+  item: theme.paper.item,
+});