From a53711e475c2aac7d10b9ecc10f0a79c727f62ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 17 Sep 2024 10:37:00 +0100
Subject: [PATCH] fix: Move 'invalid graph' warning to `MapFieldInput`

---
 .../@planx/components/List/Public/index.tsx   | 44 ++-----------------
 .../Schema/InputFields/MapFieldInput.tsx      | 14 ++++++
 .../src/components/ErrorFallback.tsx          |  2 +-
 3 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
index aef0b30a2c..6b7f1f6888 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -8,11 +8,8 @@ import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
-import { SiteAddress } from "@planx/components/FindProperty/model";
-import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { PublicProps } from "@planx/components/ui";
-import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useRef } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
@@ -56,14 +53,8 @@ const InactiveListCardLayout = styled(Box)(({ theme }) => ({
 const ActiveListCard: React.FC<{
   index: number;
 }> = ({ index: i }) => {
-  const {
-    schema,
-    saveItem,
-    cancelEditItem,
-    errors,
-    formik,
-    activeIndex,
-  } = useListContext();
+  const { schema, saveItem, cancelEditItem, errors, formik, activeIndex } =
+    useListContext();
 
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -119,8 +110,7 @@ const ActiveListCard: React.FC<{
 const InactiveListCard: React.FC<{
   index: number;
 }> = ({ index: i }) => {
-  const { schema, formik, removeItem, editItem } =
-    useListContext();
+  const { schema, formik, removeItem, editItem } = useListContext();
 
   const mapPreview = schema.fields.find((field) => field.type === "map");
 
@@ -189,8 +179,7 @@ const Root = () => {
     listProps,
   } = useListContext();
 
-  const { title, description, info, policyRef, howMeasured, handleSubmit } =
-    listProps;
+  const { title, description, info, policyRef, howMeasured } = listProps;
 
   const rootError: string =
     (errors.min && `You must provide at least ${schema.min} response(s)`) ||
@@ -201,32 +190,7 @@ const Root = () => {
   const shouldShowAddAnotherButton =
     schema.max !== 1 || formik.values.schemaData.length < 1;
 
-  // If the selected schema has a "map" field, ensure there's a FindProperty component preceding it (eg address data in state to position map view)
   const hasMapField = schema.fields.some((field) => field.type === "map");
-  const { longitude, latitude } = useStore(
-    (state) =>
-      (state.computePassport()?.data?.["_address"] as SiteAddress) || {},
-  );
-
-  if (hasMapField && (!longitude || !latitude)) {
-    return (
-      <Card handleSubmit={handleSubmit} isValid>
-        <CardHeader title={title} description={description} />
-        <ErrorSummaryContainer
-          role="status"
-          data-testid="error-summary-invalid-graph"
-        >
-          <Typography variant="h4" component="h2" gutterBottom>
-            Invalid graph
-          </Typography>
-          <Typography variant="body2">
-            Edit this flow so that "List" is positioned after "FindProperty"; an
-            address is required for schemas that include a "map" field.
-          </Typography>
-        </ErrorSummaryContainer>
-      </Card>
-    );
-  }
 
   const listContent = (
     <ErrorWrapper error={rootError}>
diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx
index 765ef75489..7b55fa14b2 100644
--- a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx
@@ -1,4 +1,5 @@
 import Box from "@mui/material/Box";
+import { SiteAddress } from "@opensystemslab/planx-core/types";
 import { MapContainer } from "@planx/components/shared/Preview/MapContainer";
 import type { MapField } from "@planx/components/shared/Schema/model";
 import { Feature } from "geojson";
@@ -11,6 +12,19 @@ import { getFieldProps, Props } from ".";
 import { FieldInputDescription } from "./shared";
 
 export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
+  // Ensure there's a FindProperty component preceding this field (eg address data in state to position map view)
+  const { longitude, latitude } = useStore(
+    (state) =>
+      (state.computePassport()?.data?.["_address"] as SiteAddress) || {},
+  );
+
+  if (!longitude || !latitude) {
+    throw Error(
+      'Edit this flow so that this component is positioned after "FindProperty"; an address is required for schemas that include a "map" field.',
+      { cause: "Invalid graph" },
+    );
+  }
+
   const {
     formik,
     data: { title, description, mapOptions },
diff --git a/editor.planx.uk/src/components/ErrorFallback.tsx b/editor.planx.uk/src/components/ErrorFallback.tsx
index 68a85ff170..a2e2e1773d 100644
--- a/editor.planx.uk/src/components/ErrorFallback.tsx
+++ b/editor.planx.uk/src/components/ErrorFallback.tsx
@@ -12,7 +12,7 @@ function ErrorFallback(props: { error: Error }) {
     <Card>
       <ErrorSummaryContainer role="alert">
         <Typography variant="h4" component="h1" gutterBottom>
-          Something went wrong
+          {(props.error.cause as string) || "Something went wrong"}
         </Typography>
         <Typography>
           {props.error?.message && (