diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx index e8ac000cdd..eddd97650d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx @@ -3,7 +3,7 @@ import MoreVert from "@mui/icons-material/MoreVert"; import classNames from "classnames"; import gql from "graphql-tag"; import { useStore } from "pages/FlowEditor/lib/store"; -import React from "react"; +import React, { useState } from "react"; import { useDrag } from "react-dnd"; import { Link } from "react-navi"; @@ -12,84 +12,85 @@ import { getParentId } from "../lib/utils"; import Hanger from "./Hanger"; import Question from "./Question"; -const ExternalPortal: React.FC = React.memo( - (props) => { - const copyNode = useStore((state) => state.copyNode); - - const { data } = useQuery( - gql` - query GetFlow($id: uuid!) { - flows_by_pk(id: $id) { +const ExternalPortal: React.FC = (props) => { + const copyNode = useStore((state) => state.copyNode); + const [href, setHref] = useState("Loading..."); + + const { data, loading } = useQuery( + gql` + query GetExternalPortal($id: uuid!) { + flows_by_pk(id: $id) { + id + slug + team { slug - team { - slug - } } } - `, - { variables: { id: props.data.flowId } }, - ); + } + `, + { + variables: { id: props.data.flowId }, + onCompleted: (data) => + setHref([data.flows_by_pk.team.slug, data.flows_by_pk.slug].join("/")), + }, + ); - const parent = getParentId(props.parent); - - const [{ isDragging }, drag] = useDrag({ - item: { - id: props.id, - parent, - text: props.data.text, - }, - type: "PORTAL", - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - - // If the flow referenced by an external portal has been deleted (eg !data), - // still show a "Corrupted" node so that editors have a visual cue to "delete". - // Until deleted, the flow schema will still contain a node reference to this portal causing dataMerged to fail - if (!data?.flows_by_pk) { - return ( - - ); - } - - const handleContext = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - copyNode(props.id); - }; - - const href = [data.flows_by_pk.team.slug, data.flows_by_pk.slug].join("/"); - - let editHref = `${window.location.pathname}/nodes/${props.id}/edit`; - if (parent) { - editHref = `${window.location.pathname}/nodes/${parent}/nodes/${props.id}/edit`; - } + const parent = getParentId(props.parent); + + const [{ isDragging }, drag] = useDrag({ + item: { + id: props.id, + parent, + text: props.data.text, + }, + type: "PORTAL", + collect: (monitor) => ({ + isDragging: monitor.isDragging(), + }), + }); + // If the flow referenced by an external portal has been deleted (eg !data), + // still show a "Corrupted" node so that editors have a visual cue to "delete". + // Until deleted, the flow schema will still contain a node reference to this portal causing dataMerged to fail + if (!loading && !data?.flows_by_pk) { return ( - <> -