refactor: restructure and use useQuery

- As per: #2885 (comment)
- Separating concerns for readability / ease fo testing

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/SubmissionsView.tsx

@@ -0,0 +1,38 @@
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Typography from "@mui/material/Typography";
+import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
+import ErrorFallback from "components/ErrorFallback";
+import React from "react";
+
+import { SubmissionData } from "./submissionData";
+
+interface SubmissionsViewProps {
+  applications: SubmissionData[];
+  loading: boolean;
+  error: Error | undefined;
+}
+
+const SubmissionsView: React.FC<SubmissionsViewProps> = ({
+  applications,
+  loading,
+  error,
+}) => {
+  if (loading) return <DelayedLoadingIndicator msDelayBeforeVisible={500} />;
+  if (error) return <ErrorFallback error={error} />;
+  if (applications.length === 0)
+    return (
+      <Typography variant="body1">
+        No submitted applications found for this service.
+      </Typography>
+    );
+  return (
+    <List>
+      {applications.map((application, index) => (
+        <ListItem key={index}>{application.sessionId}</ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default SubmissionsView;

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx

@@ -1,36 +1,20 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import React, { useEffect, useState } from "react";
-import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+import React from "react";
 
 import { useStore } from "../../../lib/store";
-import {
-  fetchSubmittedApplications,
-  SubmissionData,
-} from "./submissionDataTypesAndQueries";
+import { useSubmittedApplications } from "./submissionData";
+import SubmissionsView from "./SubmissionsView";
 
 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]);
-
-  useEffect(() => {
-    console.log(applications);
-    console.log(error);
-  }, [applications, error]);
+  const { applications, loading, error } = useSubmittedApplications({
+    flowSlug,
+    teamSlug,
+  });
 
   return (
     <Box>
@@ -41,7 +25,11 @@ const Submissions: React.FC = () => {
         View data on the user submitted applications for this service.
       </Typography>
       <Box py={5}>
-        <FeaturePlaceholder title="Feature in development" />
+        <SubmissionsView
+          applications={applications}
+          loading={loading}
+          error={error}
+        />
       </Box>
     </Box>
   );

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/submissionData.ts

@@ -0,0 +1,93 @@
+import { useQuery } from "@apollo/client";
+import gql from "graphql-tag";
+import { useMemo } from "react";
+
+type PaymentRequest = {
+  id: string;
+  createdAt: string;
+  paidAt: string;
+  govPaymentId: string;
+};
+
+type PaymentStatus = {
+  govPaymentId: string;
+  createdAt: string;
+  status: string;
+};
+
+type BopsApplication = {
+  id: string;
+  submittedAt: string;
+  destinationUrl: string;
+};
+
+type EmailApplication = {
+  id: string;
+  recipient: string;
+  submittedAt: string;
+};
+
+type UniformApplication = {
+  id: string;
+  submittedAt: string;
+};
+
+export type SubmissionData = {
+  sessionId: string;
+  submittedAt: Date | string;
+  paymentRequests: PaymentRequest[] | null;
+  paymentStatus: PaymentStatus[] | null;
+  bopsApplications: BopsApplication[] | null;
+  uniformApplications: UniformApplication[] | null;
+  emailApplications: EmailApplication[] | null;
+};
+
+export type SubmittedApplicationsQueryResult = {
+  submissionServicesSummary: SubmissionData[];
+};
+
+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 }
+      }
+      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
+    }
+  }
+`;
+
+type UseSubmittedApplicationsParams = {
+  flowSlug?: string;
+  teamSlug?: string;
+};
+
+export const useSubmittedApplications = ({
+  flowSlug,
+  teamSlug,
+}: UseSubmittedApplicationsParams) => {
+  const { data, loading, error } = useQuery<SubmittedApplicationsQueryResult>(
+    SUBMITTED_APPLICATIONS_QUERY,
+    {
+      variables: { service_slug: flowSlug, team_slug: teamSlug },
+      skip: !flowSlug || !teamSlug,
+    },
+  );
+
+  const applications = useMemo(
+    () => data?.submissionServicesSummary || [],
+    [data],
+  );
+
+  return { applications, loading, error };
+};