From b649aeba9eea4c51353376cbc2657c82b99cb359 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 24 Sep 2024 17:07:48 +0100 Subject: [PATCH] chore: Create model file for `FileUpload` (#3723) --- .../components/DrawBoundary/Public/index.tsx | 2 +- .../@planx/components/FileUpload/Public.tsx | 50 +------------------ .../@planx/components/FileUpload/model.tsx | 48 ++++++++++++++++++ .../components/FileUploadAndLabel/Modal.tsx | 2 +- .../components/FileUploadAndLabel/Public.tsx | 2 +- .../FileUploadAndLabel/SelectMultiple.tsx | 2 +- .../components/FileUploadAndLabel/mocks.ts | 2 +- .../FileUploadAndLabel/model.test.ts | 2 +- .../components/FileUploadAndLabel/model.ts | 2 +- .../FileUploadAndLabel/schema.test.ts | 2 +- .../components/FileUploadAndLabel/schema.ts | 2 +- .../shared/PrivateFileUpload/Dropzone.tsx | 2 +- .../PrivateFileUpload/PrivateFileUpload.tsx | 2 +- .../PrivateFileUpload/UploadedFileCard.tsx | 2 +- 14 files changed, 62 insertions(+), 60 deletions(-) create mode 100644 editor.planx.uk/src/@planx/components/FileUpload/model.tsx diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx index 7c944f0fc8..1fb4858bc9 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx @@ -2,7 +2,7 @@ import Box from "@mui/material/Box"; import Link from "@mui/material/Link"; import Typography from "@mui/material/Typography"; import { visuallyHidden } from "@mui/utils"; -import { FileUploadSlot } from "@planx/components/FileUpload/Public"; +import { FileUploadSlot } from "@planx/components/FileUpload/model"; import { PASSPORT_REQUESTED_FILES_KEY } from "@planx/components/FileUploadAndLabel/model"; import Card from "@planx/components/shared/Preview/Card"; import CardHeader from "@planx/components/shared/Preview/CardHeader"; diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx index c99eee5035..f1c089b854 100644 --- a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx +++ b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx @@ -1,59 +1,13 @@ -import { MoreInformation } from "@planx/components/shared"; import Card from "@planx/components/shared/Preview/Card"; import CardHeader from "@planx/components/shared/Preview/CardHeader"; -import { Store, useStore } from "pages/FlowEditor/lib/store"; -import type { HandleSubmit } from "pages/Preview/Node"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { useEffect, useRef, useState } from "react"; -import { FileWithPath } from "react-dropzone"; import ErrorWrapper from "ui/shared/ErrorWrapper"; -import { array } from "yup"; import { PASSPORT_REQUESTED_FILES_KEY } from "../FileUploadAndLabel/model"; import { PrivateFileUpload } from "../shared/PrivateFileUpload/PrivateFileUpload"; import { getPreviouslySubmittedData, makeData } from "../shared/utils"; - -interface Props extends MoreInformation { - id?: string; - title?: string; - fn: string; - description?: string; - handleSubmit: HandleSubmit; - previouslySubmittedData?: Store.UserData; -} - -export interface FileUploadSlot { - file: FileWithPath; - status: "success" | "error" | "uploading"; - progress: number; - id: string; - url?: string; - cachedSlot?: Omit; -} - -const slotsSchema = array() - .required() - .test({ - name: "nonUploading", - message: "Upload at least one file", - test: (slots?: Array) => { - return Boolean( - slots && - slots.length > 0 && - !slots.some((slot) => slot.status === "uploading"), - ); - }, - }) - .test({ - name: "errorStatus", - message: "Remove files which failed to upload", - test: (slots?: Array) => { - return Boolean( - slots && - slots.length > 0 && - !slots.some((slot) => slot.status === "error"), - ); - }, - }); +import { FileUploadSlot, Props, slotsSchema } from "./model"; const FileUpload: React.FC = (props) => { const recoveredSlots = getPreviouslySubmittedData(props)?.map( diff --git a/editor.planx.uk/src/@planx/components/FileUpload/model.tsx b/editor.planx.uk/src/@planx/components/FileUpload/model.tsx new file mode 100644 index 0000000000..72042e5a78 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/FileUpload/model.tsx @@ -0,0 +1,48 @@ +import { MoreInformation } from "@planx/components/shared"; +import { Store } from "pages/FlowEditor/lib/store"; +import type { HandleSubmit } from "pages/Preview/Node"; +import { FileWithPath } from "react-dropzone"; +import { array } from "yup"; + +export interface Props extends MoreInformation { + id?: string; + title?: string; + fn: string; + description?: string; + handleSubmit: HandleSubmit; + previouslySubmittedData?: Store.UserData; +} + +export interface FileUploadSlot { + file: FileWithPath; + status: "success" | "error" | "uploading"; + progress: number; + id: string; + url?: string; + cachedSlot?: Omit; +} + +export const slotsSchema = array() + .required() + .test({ + name: "nonUploading", + message: "Upload at least one file", + test: (slots?: Array) => { + return Boolean( + slots && + slots.length > 0 && + !slots.some((slot) => slot.status === "uploading"), + ); + }, + }) + .test({ + name: "errorStatus", + message: "Remove files which failed to upload", + test: (slots?: Array) => { + return Boolean( + slots && + slots.length > 0 && + !slots.some((slot) => slot.status === "error"), + ); + }, + }); diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx index 225440f7cf..1b91833b3e 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx @@ -8,7 +8,7 @@ import React, { useState } from "react"; import ErrorWrapper from "ui/shared/ErrorWrapper"; import { ValidationError } from "yup"; -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { UploadedFileCard } from "../shared/PrivateFileUpload/UploadedFileCard"; import { FileList } from "./model"; import { fileLabelSchema, formatFileLabelSchemaErrors } from "./schema"; diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx index 6efbb1e2e0..f7febf4f34 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx @@ -18,7 +18,7 @@ import FullWidthWrapper from "ui/public/FullWidthWrapper"; import ErrorWrapper from "ui/shared/ErrorWrapper"; import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml"; -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { MoreInformation } from "../shared"; import Card from "../shared/Preview/Card"; import CardHeader, { Image } from "../shared/Preview/CardHeader"; diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx index e8759d1c79..baf414b6da 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx @@ -18,7 +18,7 @@ import capitalize from "lodash/capitalize"; import React, { forwardRef, PropsWithChildren, useMemo } from "react"; import { borderedFocusStyle } from "theme"; -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { addOrAppendSlots, FileList, diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/mocks.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/mocks.ts index 9a6cc21a12..e09a5a179c 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/mocks.ts +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/mocks.ts @@ -1,4 +1,4 @@ -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { Condition, FileList, FileType, Operator, Rule } from "./model"; const mockAlwaysRequiredRule: Rule = { diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.test.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.test.ts index 4a1dca7ce1..cadc588a9a 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.test.ts +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.test.ts @@ -1,7 +1,7 @@ import { Store } from "pages/FlowEditor/lib/store"; import { FileWithPath } from "react-dropzone"; -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { mockFileList, mockFileListManyTagsOneSlot, diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts index 1cd082dd8f..a5bd2b14b4 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts @@ -4,7 +4,7 @@ import uniqBy from "lodash/uniqBy"; import { Store, useStore } from "pages/FlowEditor/lib/store"; import { FileWithPath } from "react-dropzone"; -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { MoreInformation, parseMoreInformation } from "../shared"; export const PASSPORT_REQUESTED_FILES_KEY = "_requestedFiles" as const; diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.test.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.test.ts index 990c93788f..39cbdf5370 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.test.ts +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.test.ts @@ -1,4 +1,4 @@ -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { mockFileList, mockFileTypes, mockRules } from "./mocks"; import { Condition, FileType, Operator } from "./model"; import { diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.ts index 1b6df3530b..05c14af45d 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.ts +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.ts @@ -9,7 +9,7 @@ import { ValidationError, } from "yup"; -import { FileUploadSlot } from "../FileUpload/Public"; +import { FileUploadSlot } from "../FileUpload/model"; import { MoreInformation } from "../shared"; import { checkIfConditionalRule, diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx index 2bfbddf7ca..f3ca6b239d 100644 --- a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx +++ b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx @@ -3,7 +3,7 @@ import Box from "@mui/material/Box"; import ButtonBase, { ButtonBaseProps } from "@mui/material/ButtonBase"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; -import { FileUploadSlot } from "@planx/components/FileUpload/Public"; +import { FileUploadSlot } from "@planx/components/FileUpload/model"; import handleRejectedUpload from "@planx/components/shared/handleRejectedUpload"; import { uploadPrivateFile } from "api/upload"; import { nanoid } from "nanoid"; diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/PrivateFileUpload.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/PrivateFileUpload.tsx index 74b9ac1fcc..011b3f07c7 100644 --- a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/PrivateFileUpload.tsx +++ b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/PrivateFileUpload.tsx @@ -1,4 +1,4 @@ -import { FileUploadSlot } from "@planx/components/FileUpload/Public"; +import { FileUploadSlot } from "@planx/components/FileUpload/model"; import { Dropzone } from "@planx/components/shared/PrivateFileUpload/Dropzone"; import { UploadedFileCard } from "@planx/components/shared/PrivateFileUpload/UploadedFileCard"; import React, { useState } from "react"; diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx index f0ad4ba588..d5d4cdb0ac 100644 --- a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx +++ b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/UploadedFileCard.tsx @@ -8,7 +8,7 @@ import ListItem from "@mui/material/ListItem"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { visuallyHidden } from "@mui/utils"; -import { FileUploadSlot } from "@planx/components/FileUpload/Public"; +import { FileUploadSlot } from "@planx/components/FileUpload/model"; import ImagePreview from "components/ImagePreview"; import React from "react"; import ErrorWrapper from "ui/shared/ErrorWrapper";