mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-03-01 12:44:17 +00:00
Disable saving while uploading files
This commit is contained in:
Maximilian Harz
parent
5c413d466b
commit
0aa64a1a9c
52
package-lock.json
generated
52
package-lock.json
generated
@ -13,6 +13,7 @@
|
||||
"@tanstack/react-query": "^5.17.8",
|
||||
"axios": "^1.6.5",
|
||||
"browser-image-compression": "^2.0.2",
|
||||
"classnames": "^2.5.1",
|
||||
"date-fns": "^3.3.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.locatecontrol": "^0.79.0",
|
||||
@ -33,6 +34,7 @@
|
||||
"devDependencies": {
|
||||
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
|
||||
"@rollup/plugin-alias": "^5.1.1",
|
||||
"@rollup/plugin-commonjs": "^28.0.3",
|
||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||
"@rollup/plugin-typescript": "^12.1.2",
|
||||
"@tailwindcss/postcss": "^4.0.14",
|
||||
@ -1326,6 +1328,33 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "28.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.3.tgz",
|
||||
"integrity": "sha512-pyltgilam1QPdn+Zd9gaCfOLcnjMEJ9gV+bTw6/r73INdvzf1ah9zLIJBm+kW7R6IUFIQ1YO+VqZtYxZNWFPEQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"commondir": "^1.0.1",
|
||||
"estree-walker": "^2.0.2",
|
||||
"fdir": "^6.2.0",
|
||||
"is-reference": "1.2.1",
|
||||
"magic-string": "^0.30.3",
|
||||
"picomatch": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0 || 14 >= 14.17"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^2.68.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.0.tgz",
|
||||
@ -3814,6 +3843,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clean-stack": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
|
||||
@ -3955,6 +3990,13 @@
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/commondir": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -7105,6 +7147,16 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/is-regex": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
"devDependencies": {
|
||||
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
|
||||
"@rollup/plugin-alias": "^5.1.1",
|
||||
"@rollup/plugin-commonjs": "^28.0.3",
|
||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||
"@rollup/plugin-typescript": "^12.1.2",
|
||||
"@tailwindcss/postcss": "^4.0.14",
|
||||
@ -100,6 +101,7 @@
|
||||
"@tanstack/react-query": "^5.17.8",
|
||||
"axios": "^1.6.5",
|
||||
"browser-image-compression": "^2.0.2",
|
||||
"classnames": "^2.5.1",
|
||||
"date-fns": "^3.3.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.locatecontrol": "^0.79.0",
|
||||
|
||||
@ -2,6 +2,7 @@ import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
import alias from '@rollup/plugin-alias'
|
||||
import commonjs from '@rollup/plugin-commonjs'
|
||||
import resolve from '@rollup/plugin-node-resolve'
|
||||
import typescript from '@rollup/plugin-typescript'
|
||||
import { dts } from 'rollup-plugin-dts'
|
||||
@ -43,6 +44,7 @@ export default [
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
commonjs(),
|
||||
aliasConfig,
|
||||
resolve({
|
||||
extensions: ['.ts', '.tsx'],
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
||||
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
|
||||
import classNames from 'classnames'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
@ -47,6 +48,7 @@ export function ProfileForm() {
|
||||
end: '',
|
||||
openCollectiveSlug: '',
|
||||
gallery: [],
|
||||
isUpdatingGallery: false,
|
||||
})
|
||||
|
||||
const [updatePermission, setUpdatePermission] = useState<boolean>(false)
|
||||
@ -141,6 +143,7 @@ export function ProfileForm() {
|
||||
end: item.end ?? '',
|
||||
openCollectiveSlug: item.openCollectiveSlug ?? '',
|
||||
gallery: item.gallery ?? [],
|
||||
isUpdatingGallery: false,
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [item, tags, items])
|
||||
@ -207,13 +210,19 @@ export function ProfileForm() {
|
||||
|
||||
<div className='tw:mt-4 tw:flex-none'>
|
||||
<button
|
||||
className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
|
||||
className={classNames(
|
||||
'tw:btn',
|
||||
'tw:float-right',
|
||||
{ 'tw:loading': loading },
|
||||
{ 'tw:cursor-not-allowed tw:opacity-50': loading || state.isUpdatingGallery },
|
||||
)}
|
||||
type='submit'
|
||||
style={{
|
||||
// We could refactor this, it is used several times at different locations
|
||||
backgroundColor: `${item.color ?? (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor)}`,
|
||||
color: '#fff',
|
||||
}}
|
||||
disabled={loading || state.isUpdatingGallery}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
|
||||
@ -31,6 +31,10 @@ export const GalleryForm = ({ state, setState }: Props) => {
|
||||
|
||||
const upload = async (acceptedFiles: File[]) => {
|
||||
setUploadingImages((files) => [...files, ...acceptedFiles])
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
isUpdatingGallery: true,
|
||||
}))
|
||||
|
||||
const uploads = acceptedFiles.map(async (file) => {
|
||||
const compressedFile = await imageCompression(file, compressionOptions)
|
||||
@ -55,7 +59,18 @@ export const GalleryForm = ({ state, setState }: Props) => {
|
||||
],
|
||||
}))
|
||||
|
||||
setUploadingImages((files) => files.filter((f) => f.name !== upload.name))
|
||||
setUploadingImages((files) => {
|
||||
const newFiles = files.filter((f) => f.name !== upload.name)
|
||||
|
||||
if (newFiles.length === 0) {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
isUpdatingGallery: false,
|
||||
}))
|
||||
}
|
||||
|
||||
return newFiles
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1
src/types/FormState.d.ts
vendored
1
src/types/FormState.d.ts
vendored
@ -22,4 +22,5 @@ export interface FormState {
|
||||
end: string
|
||||
openCollectiveSlug: string
|
||||
gallery: GalleryItem[]
|
||||
isUpdatingGallery: boolean
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user