Update display of ETASU responses in REMS Admin page such that only t…

…he Patient Status Update forms are sorted by timestamp

src/views/Questionnaire/components/RemsInterface/RemsInterface.tsx

@@ -14,17 +14,19 @@ interface RemsInterfaceProps {
 interface RemsAdminResponse {
   data: JsonData;
 }
+
+type MetRequirements = {
+  completed: boolean;
+  requirementName: string;
+  requirementDescription: string;
+};
+
 interface JsonData {
   case_number: string;
   status: string;
-  metRequirements: [
-    {
-      requirementName: string;
-      completed: boolean;
-      requirementDescription: string;
-    }
-  ];
+  metRequirements: MetRequirements[];
 }
+
 export default function RemsInterface(props: RemsInterfaceProps) {
   const [remsAdminResponse, setRemsAdminResponse] = useState<RemsAdminResponse | null>(null);
   const [response, setResponse] = useState<AxiosResponse | null>(null);
@@ -48,18 +50,27 @@ export default function RemsInterface(props: RemsInterfaceProps) {
   };
 
   const unfurlJson = (jsonData: JsonData) => {
-    return jsonData.metRequirements.map(metReq => {
-      console.log(metReq);
-      return (
-        <div>
-          <div className={'resource-entry etasu-container'}>
-            <div className={'resource-entry-text'}>{metReq.requirementName}</div>
-            <div className={'resource-entry-icon'}>{metReq.completed ? '✅' : '❌'}</div>
-            <div className={'resource-entry-hover'}>{metReq.requirementDescription}</div>
+    return jsonData.metRequirements
+      .sort((first: MetRequirements, second: MetRequirements) => {
+        // Keep the other forms unsorted.
+        if (second.requirementName.includes('Patient Status Update')) {
+          // Sort the Patient Status Update forms in descending order of timestamp.
+          return second.requirementName.localeCompare(first.requirementName);
+        }
+        return 0;
+      })
+      .map(metReq => {
+        console.log(metReq);
+        return (
+          <div>
+            <div className={'resource-entry etasu-container'}>
+              <div className={'resource-entry-text'}>{metReq.requirementName}</div>
+              <div className={'resource-entry-icon'}>{metReq.completed ? '✅' : '❌'}</div>
+              <div className={'resource-entry-hover'}>{metReq.requirementDescription}</div>
+            </div>
           </div>
-        </div>
-      );
-    });
+        );
+      });
   };
 
   const getResource = (bundle: Bundle, resourceReference: string) => {