diff --git a/package-lock.json b/package-lock.json index cfa255b9..b4f00968 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 4367cc72..ecc44cb4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/rollup.config.js b/rollup.config.js index 0cb27150..27680e8c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -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'], diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx index 077741df..a898f06e 100644 --- a/src/Components/Profile/ProfileForm.tsx +++ b/src/Components/Profile/ProfileForm.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(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() {
diff --git a/src/Components/Profile/Subcomponents/GalleryForm.tsx b/src/Components/Profile/Subcomponents/GalleryForm.tsx index db2b4151..fbb67450 100644 --- a/src/Components/Profile/Subcomponents/GalleryForm.tsx +++ b/src/Components/Profile/Subcomponents/GalleryForm.tsx @@ -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 + }) } } diff --git a/src/types/FormState.d.ts b/src/types/FormState.d.ts index c3766bc6..f69b19ef 100644 --- a/src/types/FormState.d.ts +++ b/src/types/FormState.d.ts @@ -22,4 +22,5 @@ export interface FormState { end: string openCollectiveSlug: string gallery: GalleryItem[] + isUpdatingGallery: boolean }