From c6ff02ac1d7201b35489b73eba4b94cecd3e4f7a Mon Sep 17 00:00:00 2001 From: Arnaud Date: Wed, 25 Sep 2024 13:14:23 +0200 Subject: [PATCH] Update stepper api --- package-lock.json | 32 +++---------------- package.json | 3 +- .../Availability/AvailabilityConfirmation.tsx | 6 +--- .../Availability/AvailabilityCreate.css | 5 +++ .../Availability/AvailabilityCreate.tsx | 2 ++ .../Availability/AvailabilityError.tsx | 6 +--- .../Availability/AvailabilityForm.tsx | 16 ++++------ .../Availability/AvailabilitySuccess.tsx | 6 +--- .../StorageRequestDone.tsx | 6 +--- .../StorageRequestError.tsx | 6 +--- .../StorageRequestFileChooser.tsx | 6 +--- .../StorageRequestReview.tsx | 6 +--- 12 files changed, 25 insertions(+), 75 deletions(-) create mode 100644 src/components/Availability/AvailabilityCreate.css diff --git a/package-lock.json b/package-lock.json index 556e3dc..219acc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,14 +9,13 @@ "version": "0.0.1", "license": "MIT", "dependencies": { - "@codex-storage/marketplace-ui-components": "0.0.5", + "@codex-storage/marketplace-ui-components": "0.0.7", "@codex-storage/sdk-js": "0.0.4", "@sentry/react": "^8.31.0", "@tanstack/react-query": "^5.51.15", "@tanstack/react-router": "^1.58.7", "idb-keyval": "^6.2.1", "lucide-react": "^0.445.0", - "pretty-ms": "^9.1.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -342,9 +341,9 @@ } }, "node_modules/@codex-storage/marketplace-ui-components": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.5.tgz", - "integrity": "sha512-YrT8glXA6Dt/gsgyALzhHYBVdCFlVFRaahkBAwvVV7rpnvh7eeIdObSq6+m4kyEGALLIh/wVZ4OIfD1bG0dXOQ==", + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.7.tgz", + "integrity": "sha512-wN9b95uZ2W/24zYyrBY8xhN8KzEv9eSNanFdoaB6tRT9D4cG4bPwWbvH6x45Y7EBqZhK11uF6bEzM88do/kd1g==", "dependencies": { "lucide-react": "^0.441.0" }, @@ -3010,16 +3009,6 @@ "node": ">=6" } }, - "node_modules/parse-ms": { - "version": "4.0.0", - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/path-exists": { "version": "4.0.0", "dev": true, @@ -3109,19 +3098,6 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, - "node_modules/pretty-ms": { - "version": "9.1.0", - "license": "MIT", - "dependencies": { - "parse-ms": "^4.0.0" - }, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/punycode": { "version": "2.3.1", "dev": true, diff --git a/package.json b/package.json index 10bfee5..57b5082 100644 --- a/package.json +++ b/package.json @@ -23,14 +23,13 @@ "React" ], "dependencies": { - "@codex-storage/marketplace-ui-components": "0.0.5", + "@codex-storage/marketplace-ui-components": "0.0.7", "@codex-storage/sdk-js": "0.0.4", "@sentry/react": "^8.31.0", "@tanstack/react-query": "^5.51.15", "@tanstack/react-router": "^1.58.7", "idb-keyval": "^6.2.1", "lucide-react": "^0.445.0", - "pretty-ms": "^9.1.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/src/components/Availability/AvailabilityConfirmation.tsx b/src/components/Availability/AvailabilityConfirmation.tsx index 1b5ed4b..f100c17 100644 --- a/src/components/Availability/AvailabilityConfirmation.tsx +++ b/src/components/Availability/AvailabilityConfirmation.tsx @@ -12,12 +12,8 @@ export function AvailabilityConfirm({ }: AvailabilityComponentProps) { useEffect(() => { dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: true, - }); - - dispatch({ - type: "toggle-back", isBackEnable: true, }); }, [dispatch]); diff --git a/src/components/Availability/AvailabilityCreate.css b/src/components/Availability/AvailabilityCreate.css new file mode 100644 index 0000000..6cb96ca --- /dev/null +++ b/src/components/Availability/AvailabilityCreate.css @@ -0,0 +1,5 @@ +@media (min-width: 801px) { + .availabilityCreate .stepper-body { + width: 600px; + } +} diff --git a/src/components/Availability/AvailabilityCreate.tsx b/src/components/Availability/AvailabilityCreate.tsx index baaae45..5bb9d8a 100644 --- a/src/components/Availability/AvailabilityCreate.tsx +++ b/src/components/Availability/AvailabilityCreate.tsx @@ -15,6 +15,7 @@ import { STEPPER_DURATION } from "../../utils/constants"; import { useAvailabilityMutation } from "./useAvailabilityMutation"; import { AvailabilitySuccess } from "./AvailabilitySuccess"; import { AvailabilityError } from "./AvailabilityError"; +import "./AvailabilityCreate.css"; type Props = { space: CodexNodeSpace; @@ -121,6 +122,7 @@ export function AvailabilityCreate({ space }: Props) { { dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: false, - }); - - dispatch({ - type: "toggle-back", isBackEnable: true, }); }, [dispatch]); diff --git a/src/components/Availability/AvailabilityForm.tsx b/src/components/Availability/AvailabilityForm.tsx index c7c09dc..42b5a35 100644 --- a/src/components/Availability/AvailabilityForm.tsx +++ b/src/components/Availability/AvailabilityForm.tsx @@ -13,16 +13,12 @@ export function AvailabilityForm({ space, }: AvailabilityComponentProps) { useEffect(() => { - const max = availabilityMax(space, availability.totalSizeUnit); - const isValid = isAvailabilityValid(availability.totalSize, max); + const max = availabilityMax(space); + const isValid = isAvailabilityValid(availability, max); dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: isValid, - }); - - dispatch({ - type: "toggle-back", isBackEnable: true, }); }, [space, availability]); @@ -48,7 +44,6 @@ export function AvailabilityForm({ const onAvailablityChange = async (e: ChangeEvent) => { const element = e.currentTarget; const v = element.value; - const valid = element.checkValidity(); onAvailabilityChange({ [element.name]: v, @@ -63,8 +58,9 @@ export function AvailabilityForm({ }); }; - const max = availabilityMax(space, availability.totalSizeUnit); - const isValid = isAvailabilityValid(availability.totalSize, max); + const max = availabilityMax(space); + const isValid = isAvailabilityValid(availability, max); + console.info(isValid, max); const helper = isValid ? "Total size of availability's storage in bytes" : "The total size cannot exceed the space available."; diff --git a/src/components/Availability/AvailabilitySuccess.tsx b/src/components/Availability/AvailabilitySuccess.tsx index 5ce0d1c..fe4b783 100644 --- a/src/components/Availability/AvailabilitySuccess.tsx +++ b/src/components/Availability/AvailabilitySuccess.tsx @@ -6,12 +6,8 @@ import { useEffect } from "react"; export function AvailabilitySuccess({ dispatch }: AvailabilityComponentProps) { useEffect(() => { dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: true, - }); - - dispatch({ - type: "toggle-back", isBackEnable: false, }); }, [dispatch]); diff --git a/src/components/StorageRequestSetup/StorageRequestDone.tsx b/src/components/StorageRequestSetup/StorageRequestDone.tsx index caa028d..e0d2ea6 100644 --- a/src/components/StorageRequestSetup/StorageRequestDone.tsx +++ b/src/components/StorageRequestSetup/StorageRequestDone.tsx @@ -8,12 +8,8 @@ import { useEffect } from "react"; export function StorageRequestDone({ dispatch }: StorageRequestComponentProps) { useEffect(() => { dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: true, - }); - - dispatch({ - type: "toggle-back", isBackEnable: false, }); }, [dispatch]); diff --git a/src/components/StorageRequestSetup/StorageRequestError.tsx b/src/components/StorageRequestSetup/StorageRequestError.tsx index fa3e389..c46b3c9 100644 --- a/src/components/StorageRequestSetup/StorageRequestError.tsx +++ b/src/components/StorageRequestSetup/StorageRequestError.tsx @@ -8,12 +8,8 @@ export function StorageRequestError({ }: StorageRequestComponentProps) { useEffect(() => { dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: false, - }); - - dispatch({ - type: "toggle-back", isBackEnable: true, }); }, [dispatch]); diff --git a/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx b/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx index a0b5470..8a926f4 100644 --- a/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx +++ b/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx @@ -21,12 +21,8 @@ export function StorageRequestFileChooser({ useEffect(() => { dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: !!storageRequest.cid, - }); - - dispatch({ - type: "toggle-back", isBackEnable: true, }); }, [dispatch, storageRequest]); diff --git a/src/components/StorageRequestSetup/StorageRequestReview.tsx b/src/components/StorageRequestSetup/StorageRequestReview.tsx index 0387a79..9360e22 100644 --- a/src/components/StorageRequestSetup/StorageRequestReview.tsx +++ b/src/components/StorageRequestSetup/StorageRequestReview.tsx @@ -58,12 +58,8 @@ export function StorageRequestReview({ ); dispatch({ - type: "toggle-next", + type: "toggle-buttons", isNextEnable: !invalid, - }); - - dispatch({ - type: "toggle-back", isBackEnable: true, }); }, [dispatch, storageRequest]);