Admin Requests: UI with ApiCall and updated state management

src/requests/reducers/admin.ts

@@ -24,53 +24,54 @@ const INITIAL_STATE: {
 
 function adminRequests(state = INITIAL_STATE, action: IReducerAction) {
 
-    switch (action.type) {
+  switch (action.type) {
 
-        case ADMIN_RECEIVE_MATERIAL_REQUEST: {
-            const { apiCall } = action.payload;
-            const receivedIndex = state.paged && state.paged.data && apiCall.data ? state.paged.data.content.findIndex((item) => item.uuid === apiCall.data.uuid) : -1;
+    case ADMIN_RECEIVE_MATERIAL_REQUEST: {
+      const { apiCall } = action.payload;
 
-            if (receivedIndex !== -1) {
-                return update(state, {
-                    request: { $set: apiCall },
-                    accessions: {$set: null},
-                    paged: {
-                        content: {
-                          [receivedIndex]: {$set: apiCall.data },
-                        },
-                    },
-                });
-            } else {
-                return update(state, {
-                    request: { $set: apiCall},
-                    accessions: {$set: null},
-                });
-            }
-        }
+      const updates: any = {
+        request: { $set: apiCall },
+        accessions: { $set: null },
+      };
 
-        case ADMIN_RECEIVE_MATERIAL_REQUEST_ACCESSIONS: {
-            const {apiCall} = action.payload;
-            return update(state, {
-              accessions: {$set: apiCall},
-            });
+      if (apiCall.data && state.paged && state.paged.data) {
+        const receivedIndex = state.paged && state.paged.data && apiCall.data ? state.paged.data.content.findIndex((item) => item.uuid === apiCall.data.uuid) : -1;
+        if (receivedIndex !== -1) {
+          updates.paged = {
+            data: {
+              content: { [receivedIndex]: { $set: apiCall.data } },
+            },
+          };
         }
+      }
 
-      case ADMIN_APPEND_MATERIAL_REQUESTS: {
-        const {apiCall: {loading, error, timestamp, data}} = action.payload;
-        return update(state, {
-          paged: {
-            $set: {
-              loading,
-              error,
-              timestamp,
-              data: FilteredPage.merge(state.paged && state.paged.data, data),
-            },
+      return update(state, updates);
+    }
+
+    case ADMIN_RECEIVE_MATERIAL_REQUEST_ACCESSIONS: {
+      const { apiCall } = action.payload;
+      return update(state, {
+        accessions: { $set: apiCall },
+      });
+    }
+
+    case ADMIN_APPEND_MATERIAL_REQUESTS: {
+      const { apiCall: { loading, error, timestamp, data } } = action.payload;
+      return update(state, {
+        paged: {
+          $set: {
+            loading,
+            error,
+            timestamp,
+            data: FilteredPage.merge(state.paged && state.paged.data, data),
           },
-        });
-      }
-        default:
-            return state;
+        },
+      });
     }
+
+    default:
+      return state;
+  }
 }
 
 export default adminRequests;

src/requests/ui/admin/DisplayPage.tsx

@@ -21,17 +21,18 @@ import BackButton from 'ui/common/buttons/BackButton';
 import Markdown from 'ui/common/markdown';
 import PageTitle from 'ui/common/PageTitle';
 import AccessionCard from 'accessions/ui/c/AccessionCard';
+import ApiCall from 'model/ApiCall';
 
 interface IDisplayPageProps extends React.ClassAttributes<any> {
   t: any;
   requestId: string;
-  request: MaterialRequest;
+  requestCall: ApiCall<MaterialRequest>;
+  requestAccessionsCall: ApiCall<Accession[]>;
   error: any;
   loadMaterialRequest: any;
   recheckPid: any;
   validateRequest: any;
   sendValidationEmail: any;
-  requestAccessions: Accession[];
 }
 
 class DisplayPage extends React.Component<IDisplayPageProps, any> {
@@ -45,27 +46,53 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
   }
 
   public componentWillMount() {
-    const {requestId, request, loadMaterialRequest} = this.props;
-    if (requestId && (!request || requestId !== request.uuid)) {
+    const {requestId, requestCall, loadMaterialRequest} = this.props;
+    if (!requestCall || (!requestCall.loading && (requestCall.data && requestId !== requestCall.data.uuid))) {
       loadMaterialRequest(requestId);
     }
   }
 
+  private sendValidationEmail = () => {
+    const { requestCall, sendValidationEmail } = this.props;
+    sendValidationEmail(requestCall.data.uuid).catch((error) => {
+      console.log(`Error sending validation email`, error);
+    });
+  }
+
+  private validateRequest = () => {
+    const { requestCall, validateRequest } = this.props;
+    validateRequest(requestCall.data.uuid).catch((error) => {
+      console.log(`Error validating request`, error);
+    });
+  }
+
+  private recheckPid = () => {
+    const { requestCall, recheckPid } = this.props;
+    recheckPid(requestCall.data.uuid).catch((error) => {
+      console.log(`Error checking for PID`, error);
+    });
+  }
+
   public render() {
 
-    const {request, t, recheckPid, sendValidationEmail, validateRequest, requestAccessions} = this.props;
+    const {requestCall, t, requestAccessionsCall} = this.props;
+
+    if (! requestCall || requestCall.loading) {
+      return <Loading />;
+    }
 
+    const request = requestCall.data;
 
-    return request === null ? (<Loading/>) : (
+    return (
       <div>
         <PageTitle  title={ t('requests.admin.p.display.title', {email: request.email}) }/>
         <ContentHeaderWithButton
           title={ t('requests.admin.p.display.title', {email: request.email}) }
           buttons={
             <div>
-              <ActionButton title={ t('requests.admin.p.display.sendValidationEmail') } action={ () => sendValidationEmail(request.uuid) }/>
-              <ActionButton title={ t('requests.admin.p.display.validateRequest') } action={ () => validateRequest(request.uuid) }/>
-              <ActionButton title={ t('requests.admin.p.display.recheckPID') } action={ () => recheckPid(request.uuid) }/>
+              <ActionButton title={ t('requests.admin.p.display.sendValidationEmail') } action={ this.sendValidationEmail }/>
+              <ActionButton title={ t('requests.admin.p.display.validateRequest') } action={ this.validateRequest }/>
+              <ActionButton title={ t('requests.admin.p.display.recheckPID') } action={ this.recheckPid }/>
               <BackButton defaultTarget="/admin/requests"/>
             </div>
           }
@@ -128,11 +155,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
               </PageSection>
             }
 
-            { requestAccessions && requestAccessions.length > 0 &&
+            { requestAccessionsCall && requestAccessionsCall.data && requestAccessionsCall.data.length > 0 &&
               <div>
                 <h3 style={ { marginTop: '1em' } }>{ t('requests.admin.p.display.requestedAccessions') }</h3>
                 <div className="container-spacing-horizontal mb-15">
-                  { requestAccessions.map((accession, index) => <AccessionCard key={ accession.uuid } index={ index } accession={ accession } />) }
+                  { requestAccessionsCall.data.map((accession, index) => <AccessionCard key={ accession.uuid } index={ index } accession={ accession } />) }
                 </div>
               </div>
             }
@@ -144,8 +171,8 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  request: state.requests.admin.request ? state.requests.admin.request.data : undefined,
-  requestAccessions: state.requests.admin.accessions ? state.requests.admin.accessions.data : undefined,
+  requestCall: state.requests.admin.request,
+  requestAccessionsCall: state.requests.admin.accessions,
   requestId: ownProps.match.params.uuid,
 });