logos-storage/logos-storage-marketplace-ui
1
0
Fork 0
mirror of https://github.com/logos-storage/logos-storage-marketplace-ui.git synced 2026-01-03 22:13:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update stepper api

Browse Source
This commit is contained in:
Arnaud 2024-09-25 13:14:23 +02:00
parent 932ca9d4e3
commit c6ff02ac1d
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
12 changed files with 25 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@ -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,

3
package.json
View File

@ -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"
},

6
src/components/Availability/AvailabilityConfirmation.tsx
View File

@ -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]);

5
src/components/Availability/AvailabilityCreate.css Normal file
View File

@ -0,0 +1,5 @@
@media (min-width: 801px) {
.availabilityCreate .stepper-body {
width: 600px;
}
}

2
src/components/Availability/AvailabilityCreate.tsx
View File

@ -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) {
<Modal open={state.open} onClose={onClose} displayCloseButton={false}>
<Stepper
className="availabilityCreate"
titles={steps.current}
state={state}
dispatch={dispatch}

6
src/components/Availability/AvailabilityError.tsx
View File

@ -8,12 +8,8 @@ export function AvailabilityError({
}: AvailabilityComponentProps) {
useEffect(() => {
dispatch({
type: "toggle-next",
type: "toggle-buttons",
isNextEnable: false,
});
dispatch({
type: "toggle-back",
isBackEnable: true,
});
}, [dispatch]);

16
src/components/Availability/AvailabilityForm.tsx
View File

@ -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<HTMLInputElement>) => {
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.";

6
src/components/Availability/AvailabilitySuccess.tsx
View File

@ -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]);

6
src/components/StorageRequestSetup/StorageRequestDone.tsx
View File

@ -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]);

6
src/components/StorageRequestSetup/StorageRequestError.tsx
View File

@ -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]);

6
src/components/StorageRequestSetup/StorageRequestFileChooser.tsx
View File

@ -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]);

6
src/components/StorageRequestSetup/StorageRequestReview.tsx
View File

@ -58,12 +58,8 @@ export function StorageRequestReview({
);
dispatch({
type: "toggle-next",
type: "toggle-buttons",
isNextEnable: !invalid,
});
dispatch({
type: "toggle-back",
isBackEnable: true,
});
}, [dispatch, storageRequest]);