--wip-- [skip ci]

theopensystemslab · Mar 14, 2024 · c47332f · c47332f
1 parent cc2eb17
commit c47332f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 51 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx
@@ -1,36 +1,50 @@
+import { useQuery } from "@apollo/client";
 import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
 import Typography from "@mui/material/Typography";
-import React, { useEffect, useState } from "react";
+import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
+import ErrorFallback from "components/ErrorFallback";
+import React from "react";
 import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 
 import { useStore } from "../../../lib/store";
 import {
-  fetchSubmittedApplications,
   SubmissionData,
+  SUBMITTED_APPLICATIONS_QUERY,
 } from "./submissionDataTypesAndQueries";
 
 const Submissions: React.FC = () => {
   const [flowSlug, teamSlug] = useStore((state) => [
     state.flowSlug,
     state.teamSlug,
   ]);
-  const [applications, setApplications] = useState<SubmissionData[]>();
-  const [error, setError] = useState(null);
 
-  useEffect(() => {
-    if (flowSlug && teamSlug) {
-      fetchSubmittedApplications(flowSlug, teamSlug)
-        .then((result) => setApplications(result))
-        .catch((error) => {
-          setError(error);
-        });
-    }
-  }, [flowSlug, teamSlug]);
+  const { data , loading, error } = useQuery(SUBMITTED_APPLICATIONS_QUERY, {
+    variables: { service_slug: flowSlug, team_slug: teamSlug },
+    skip: !flowSlug || !teamSlug,
+  });
+
+  const applications: SubmissionData[] = data?.submissionServicesSummary;
 
-  useEffect(() => {
-    console.log(applications);
-    console.log(error);
-  }, [applications, error]);
+  function SubmissionView(): FCReturn {
+    if (loading) {
+      return <DelayedLoadingIndicator msDelayBeforeVisible={500} />;
+    }
+    if (error) {
+      return <ErrorFallback error={error} />;
+    }
+    if (applications && applications.length > 0) {
+      return (
+        <List>
+          {applications.map((application) => {
+            return <ListItem>{application.sessionId}</ListItem>;
+          })}
+        </List>
+      );
+    }
+    return <FeaturePlaceholder title="Feature in development" />;
+  }
 
   return (
     <Box>
@@ -40,9 +54,7 @@ const Submissions: React.FC = () => {
       <Typography variant="body1">
         View data on the user submitted applications for this service.
       </Typography>
-      <Box py={5}>
-        <FeaturePlaceholder title="Feature in development" />
-      </Box>
+      <Box py={5}>{SubmissionView()}</Box>
     </Box>
   );
 };

diff --git a/....uk/src/pages/FlowEditor/components/Settings/Submissions/submissionDataTypesAndQueries.ts b/....uk/src/pages/FlowEditor/components/Settings/Submissions/submissionDataTypesAndQueries.ts
@@ -41,35 +41,23 @@ export type SubmissionData = {
   emailApplications: EmailApplication[] | null;
 };
 
-export async function fetchSubmittedApplications(
-  flowSlug: string,
-  teamSlug: string,
-): Promise<SubmissionData[]> {
-  const { data } = await client.query({
-    query: gql`
-      query SubmittedApplications($service_slug: String!, $team_slug: String!) {
-        submissionServicesSummary: submission_services_summary(
-          where: {
-            service_slug: { _eq: $service_slug }
-            team_slug: { _eq: $team_slug }
-            submitted_at: { _is_null: false }
-          }
-          order_by: { submitted_at: desc }
-        ) {
-          sessionId: session_id
-          submittedAt: submitted_at
-          paymentRequests: payment_requests
-          paymentStatus: payment_status
-          bopsApplications: bops_applications
-          uniformApplications: uniform_applications
-          emailApplications: email_applications
-        }
+export const SUBMITTED_APPLICATIONS_QUERY = gql`
+  query SubmittedApplications($service_slug: String!, $team_slug: String!) {
+    submissionServicesSummary: submission_services_summary(
+      where: {
+        service_slug: { _eq: $service_slug }
+        team_slug: { _eq: $team_slug }
+        submitted_at: { _is_null: false }
       }
-    `,
-    variables: {
-      service_slug: flowSlug,
-      team_slug: teamSlug,
-    },
-  });
-  return data.submissionServicesSummary;
-}
+      order_by: { submitted_at: desc }
+    ) {
+      sessionId: session_id
+      submittedAt: submitted_at
+      paymentRequests: payment_requests
+      paymentStatus: payment_status
+      bopsApplications: bops_applications
+      uniformApplications: uniform_applications
+      emailApplications: email_applications
+    }
+  }
+`;