From 0a1cbc68da8a5f3867b41756083aecd2dda7bd31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 1 Oct 2024 15:34:14 +0100 Subject: [PATCH] refactor: Follow up type fixes --- .../@planx/components/FileUpload/Public.tsx | 6 +++--- .../src/@planx/components/FileUpload/model.tsx | 2 +- .../src/@planx/components/Pay/Public/Pay.tsx | 13 ++++++------- .../src/@planx/components/Question/model.ts | 2 +- .../components/Result/Public/ResultReason.tsx | 18 +++++++++--------- .../src/@planx/components/TaskList/model.ts | 8 +++++++- .../components/shared/Preview/SummaryList.tsx | 8 ++++---- .../components/shared/Radio/BasicRadio.tsx | 2 +- .../components/shared/Radio/ImageRadio.tsx | 2 +- .../components/Flow/components/Node.tsx | 2 +- .../Search/SearchResultCard/DataDisplayMap.tsx | 2 +- .../Sidebar/Search/SearchResultCard/index.tsx | 2 +- .../pages/FlowEditor/lib/analytics/utils.ts | 2 +- .../src/pages/FlowEditor/lib/store/preview.ts | 11 +++++++---- 14 files changed, 44 insertions(+), 36 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx index f1c089b854..f43b65fba7 100644 --- a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx +++ b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx @@ -7,9 +7,9 @@ import ErrorWrapper from "ui/shared/ErrorWrapper"; import { PASSPORT_REQUESTED_FILES_KEY } from "../FileUploadAndLabel/model"; import { PrivateFileUpload } from "../shared/PrivateFileUpload/PrivateFileUpload"; import { getPreviouslySubmittedData, makeData } from "../shared/utils"; -import { FileUploadSlot, Props, slotsSchema } from "./model"; +import { FileUpload, FileUploadSlot, slotsSchema } from "./model"; -const FileUpload: React.FC = (props) => { +const FileUploadComponent: React.FC = (props) => { const recoveredSlots = getPreviouslySubmittedData(props)?.map( (slot: FileUploadSlot) => slot.cachedSlot, ); @@ -96,4 +96,4 @@ const FileUpload: React.FC = (props) => { ); }; -export default FileUpload; +export default FileUploadComponent; diff --git a/editor.planx.uk/src/@planx/components/FileUpload/model.tsx b/editor.planx.uk/src/@planx/components/FileUpload/model.tsx index 72042e5a78..09f5df769f 100644 --- a/editor.planx.uk/src/@planx/components/FileUpload/model.tsx +++ b/editor.planx.uk/src/@planx/components/FileUpload/model.tsx @@ -4,7 +4,7 @@ import type { HandleSubmit } from "pages/Preview/Node"; import { FileWithPath } from "react-dropzone"; import { array } from "yup"; -export interface Props extends MoreInformation { +export interface FileUpload extends MoreInformation { id?: string; title?: string; fn: string; diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx index 629782b3ed..52565741e0 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx @@ -3,12 +3,12 @@ import { GovUKPayment, PaymentStatus, } from "@opensystemslab/planx-core/types"; +import { PublicProps } from "@planx/components/ui"; import { logger } from "airbrake"; import axios from "axios"; import DelayedLoadingIndicator from "components/DelayedLoadingIndicator"; import { setLocalFlow } from "lib/local.new"; import { useStore } from "pages/FlowEditor/lib/store"; -import { HandleSubmit } from "pages/Preview/Node"; import React, { useEffect, useReducer } from "react"; import { useErrorHandler } from "react-error-boundary"; import type { Session } from "types"; @@ -18,9 +18,7 @@ import { createPayload, GOV_UK_PAY_URL, Pay, toDecimal } from "../model"; import Confirm from "./Confirm"; export default Component; -interface Props extends Pay { - handleSubmit: HandleSubmit; -} +export type Props = PublicProps; type ComponentState = | { status: "indeterminate"; displayText?: string } @@ -119,7 +117,7 @@ function Component(props: Props) { useEffect(() => { // Auto-skip component when fee=0 if (fee <= 0) { - return props.handleSubmit({ auto: true }); + return props.handleSubmit && props.handleSubmit({ auto: true }); } // If props.fn is undefined, display & log an error @@ -144,7 +142,8 @@ function Component(props: Props) { const handleSuccess = () => { dispatch(Action.Success); - props.handleSubmit(makeData(props, govUkPayment, GOV_PAY_PASSPORT_KEY)); + props.handleSubmit && + props.handleSubmit(makeData(props, govUkPayment, GOV_PAY_PASSPORT_KEY)); }; const normalizePaymentResponse = (responseData: any): GovUKPayment => { @@ -282,7 +281,7 @@ function Component(props: Props) { onConfirm={() => { if (props.hidePay || state.status === "unsupported_team") { // Show "Continue" button to proceed - props.handleSubmit({ auto: false }); + props.handleSubmit && props.handleSubmit({ auto: false }); } else if (state.status === "init") { startNewPayment(); } else if (state.status === "retry") { diff --git a/editor.planx.uk/src/@planx/components/Question/model.ts b/editor.planx.uk/src/@planx/components/Question/model.ts index 4ddbec9e58..52c70525a3 100644 --- a/editor.planx.uk/src/@planx/components/Question/model.ts +++ b/editor.planx.uk/src/@planx/components/Question/model.ts @@ -11,7 +11,7 @@ export interface Question { definitionImg?: string; img?: string; responses: { - id: string; + id?: string; responseKey: string | number; title: string; description?: string; diff --git a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx index 227ec3318d..17d342e36a 100644 --- a/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx +++ b/editor.planx.uk/src/@planx/components/Result/Public/ResultReason.tsx @@ -149,9 +149,9 @@ const ResultReason: React.FC = ({ } }, [summaryRef]); - const hasMoreInfo = question.data.info ?? question.data.policyRef; + const hasMoreInfo = question.data?.info ?? question.data?.policyRef; - const ariaLabel = `${question.data.text}: Your answer was: ${response}. ${ + const ariaLabel = `${question.data?.text}: Your answer was: ${response}. ${ hasMoreInfo ? "Click to expand for more information about this question." : "" @@ -194,22 +194,22 @@ const ResultReason: React.FC = ({ color="textPrimary" id={`questionText-${id}`} > - {question.data.text}
+ {question.data?.text}
{response} - {question.data.info && ( + {question.data?.info && ( )} - {question.data.policyRef && ( + {question.data?.policyRef && ( )} @@ -223,7 +223,7 @@ const ResultReason: React.FC = ({ color="textPrimary" id={`questionText-${id}`} > - {question.data.text}
+ {question.data?.text}
{response} @@ -239,7 +239,7 @@ const ResultReason: React.FC = ({ > Change - your response to {question.data.text || "this question"} + your response to {question.data?.text || "this question"} )} diff --git a/editor.planx.uk/src/@planx/components/TaskList/model.ts b/editor.planx.uk/src/@planx/components/TaskList/model.ts index 8cff989253..be5e80c910 100644 --- a/editor.planx.uk/src/@planx/components/TaskList/model.ts +++ b/editor.planx.uk/src/@planx/components/TaskList/model.ts @@ -5,6 +5,12 @@ export interface TaskList extends MoreInformation { title: string; description?: string; tasks: Array; + /** + * @deprecated Remove once migrated + */ + taskList?: { + tasks: Array; + }; } export interface Task { @@ -15,7 +21,7 @@ export interface Task { export const parseTaskList = ( data: Record | undefined, ): TaskList => ({ - tasks: /* remove once migrated */ data?.taskList?.tasks || data?.tasks || [], + tasks: data?.taskList?.tasks || data?.tasks || [], title: data?.title || "", description: data?.description || "", ...parseMoreInformation(data), diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx index 51679b5ff8..80dd168ce2 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx @@ -385,7 +385,7 @@ function Question(props: ComponentProps) { function getNodeText() { try { const answerId = getAnswers(props)[0]; - return props.flow[answerId].data.text; + return props.flow[answerId].data?.text; } catch (err) { return ""; } @@ -393,11 +393,11 @@ function Question(props: ComponentProps) { } function FindProperty(props: ComponentProps) { - const { source } = props.passport.data?._address; + const { source } = props.passport.data?._address || {}; if (source === "os") { const { postcode, single_line_address, town } = - props.passport.data?._address; + props.passport.data?._address || {}; return ( <> {FIND_PROPERTY_DT} @@ -432,7 +432,7 @@ function Checklist(props: ComponentProps) {
    {getAnswers(props).map((nodeId, i: number) => ( -
  • {props.flow[nodeId].data.text}
    • +
  • {props.flow[nodeId].data?.text}
    • ))}
diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx index 42271ca227..1a5a091022 100644 --- a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx @@ -6,7 +6,7 @@ import Radio from "@mui/material/Radio"; import React from "react"; export interface Props { - id: string; + id?: string; title: string; onChange: FormControlLabelProps["onChange"]; variant?: "default" | "compact"; diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/ImageRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/ImageRadio.tsx index 13d5a396cd..32826a36d7 100644 --- a/editor.planx.uk/src/@planx/components/shared/Radio/ImageRadio.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Radio/ImageRadio.tsx @@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography"; import React, { useLayoutEffect, useRef, useState } from "react"; export interface Props { - id: string; + id?: string; title: string; description?: string; responseKey?: string | number; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx index b6624f8550..bf35c17078 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx @@ -149,7 +149,7 @@ const Node: React.FC = (props) => { } }; -const getSetValueText = ({ operation, fn, val }: Store.Node["data"]) => { +const getSetValueText = ({ operation, fn, val }: Store.Node["data"] = {}) => { switch (operation) { case "append": return `Append ${val} to ${fn}`; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx index ea0b2b4953..48f55e20ff 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx @@ -37,7 +37,7 @@ const DISPLAY_DATA: Partial = { displayKey: "Option (data)", getTitle: ({ item }) => { const parentNode = useStore.getState().flow[item.parentId]; - return parentNode.data.text; + return parentNode.data?.text; }, getHeadline: ({ item, key }) => get(item, key)?.toString(), }, diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx index f257f9d64f..6f5eb717e7 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx @@ -34,7 +34,7 @@ const HeaderRoot = styled(Box)(({ theme }) => ({ })); const InternalPortalHeader: React.FC<{ portalId: string }> = ({ portalId }) => { - const portalName = useStore((state) => state.flow)[portalId].data.text; + const portalName = useStore((state) => state.flow)[portalId].data?.text; const Icon = ICONS[ComponentType.InternalPortal]; return ( diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/analytics/utils.ts b/editor.planx.uk/src/pages/FlowEditor/lib/analytics/utils.ts index 483f6c08cb..6de9c7491b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/analytics/utils.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/analytics/utils.ts @@ -14,7 +14,7 @@ import { * Generate meaningful title for content analytic log */ export function getContentTitle(node: Store.Node): string { - const dom = new DOMParser().parseFromString(node.data.content, "text/html"); + const dom = new DOMParser().parseFromString(node.data?.content, "text/html"); const h1 = dom.body.getElementsByTagName("h1")[0]?.textContent; const text = h1 || dom.body.textContent; if (!text) return `Content: ${node.id}`; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts index 6bdff0f25a..daf1a15a02 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/preview.ts @@ -468,13 +468,15 @@ export const previewStore: StateCreator< passportValues = [passportValues]; passportValues = (passportValues || []).filter((pv: any) => - sortedResponses.some((r) => pv.startsWith(r.data.val)), + sortedResponses.some((r) => pv.startsWith(r.data?.val)), ); if (passportValues.length > 0) { responsesThatCanBeAutoAnswered = (sortedResponses || []).filter( (r) => { - const responseValues = String(r.data.val).split(",").sort(); + const responseValues = String(r.data?.val) + .split(",") + .sort(); return String(responseValues) === String(passportValues); }, ); @@ -483,7 +485,9 @@ export const previewStore: StateCreator< responsesThatCanBeAutoAnswered = ( sortedResponses || [] ).filter((r) => { - const responseValues = String(r.data.val).split(",").sort(); + const responseValues = String(r.data?.val) + .split(",") + .sort(); for (const responseValue of responseValues) { return passportValues.some((passportValue: any) => @@ -594,7 +598,6 @@ export const previewStore: StateCreator< // Temporarily always returns false until upcomingCardIds is optimised // OSL Slack explanation: https://bit.ly/3x38IRY return false; - }, restore: false,