From 4c782ed1683d5ba6c44c1f3a249a0f7ffbe808f2 Mon Sep 17 00:00:00 2001
From: gregor <gregor.schulz@holi.social>
Date: Wed, 26 Feb 2025 10:42:26 +0100
Subject: [PATCH] fix space linkhub edit form handling
---
.../spaces/linkHub/EditDigitalTool.tsx | 73 ++++++++-----------
1 file changed, 32 insertions(+), 41 deletions(-)
diff --git a/core/screens/spaces/linkHub/EditDigitalTool.tsx b/core/screens/spaces/linkHub/EditDigitalTool.tsx
index 59a578123d..2bf8ce3569 100644
--- a/core/screens/spaces/linkHub/EditDigitalTool.tsx
+++ b/core/screens/spaces/linkHub/EditDigitalTool.tsx
@@ -17,9 +17,9 @@ import DigitalToolInputForm, {
COLLECTION_TYPES,
} from '@holi/core/screens/spaces/linkHub/components/DigitalToolInputForm'
import {
- updateCollaborationToolMutation,
type UpdateCollaborationToolResponse,
UpdateCollaborationToolSchema,
+ updateCollaborationToolMutation,
} from '@holi/core/screens/spaces/linkHub/mutations'
import { spaceByIdQuery } from '@holi/core/screens/spaces/queries'
import { SpaceConnectionType } from '@holi/core/screens/spaces/types'
@@ -39,14 +39,13 @@ const { useParam } = createParamHooks<EditDigitalToolParams>()
const EditDigitalTool = () => {
const [spaceIdOrName] = useParam('spaceIdOrName')
const [toolId] = useParam('toolIdOrName')
- const { navigateBack, replaceRoute } = useRouting()
+ const { navigateBack } = useRouting()
const setScreenOptions = useSetScreenOptions()
const { t } = useTranslation()
const [url, setUrl] = useState('')
const [urlError, setUrlError] = useState<string | undefined>()
const [title, setTitle] = useState('')
const [description, setDescription] = useState<string | undefined>('')
- const [saveButtonDisabled, setSaveButtonDisabled] = useState(true)
const [thumbnail, setThumbnail] = useState<HoliImageInfo | undefined>()
const [thumbnailBlurhash, setCurrentThumbnailBlurhash] = useState<string | undefined>()
const [selectedCollection, setSelectedCollection] = useState<HoliModalSelectOption | undefined>()
@@ -60,14 +59,33 @@ const EditDigitalTool = () => {
const { loading: loadingSpace, error: errorSpace, space } = useSpace(spaceIdOrName)
- const { handleGraphQLError } = useFieldErrors({
- handledFieldErrors: ['url', 'title', 'description'],
- })
+ useEffect(() => {
+ if (space) {
+ const collaborationTools = space ? space.collaborationTools : []
+ if (collaborationTools && collaborationTools.length > 0 && toolId) {
+ const digitalTool = collaborationTools.find((tool) => tool.id === toolId)
+ const collectionType = COLLECTION_TYPES.filter(
+ (collection_type) => collection_type === digitalTool?.collectionType
+ )[0]
+ const toolCollectionType = {
+ id: collectionType,
+ selected: true,
+ title: t(`spaces.toolKit.linkhub.collection.${collectionType}`),
+ }
+ setUrl(digitalTool?.url ?? '')
+ setTitle(digitalTool?.title ?? '')
+ setDescription(digitalTool?.description ?? '')
+ setSelectedCollection(toolCollectionType ?? '')
+ setCurrentThumbnail(digitalTool?.thumbnail ?? '')
+ setCurrentThumbnailBlurhash(digitalTool?.thumbnailBlurhash)
+ }
+ }
+ }, [space, toolId, t])
const [updateCollaborationTool] = useMutation<UpdateCollaborationToolResponse>(updateCollaborationToolMutation, {
onCompleted: () => {
openToast(t('spaces.digitalTool.edit.success'), HoliToastType.SUCCESS)
- navigateBack()
+ return navigateBack()
},
onError: (error) => {
if (isMaliciousUrlError(error)) {
@@ -79,6 +97,10 @@ const EditDigitalTool = () => {
refetchQueries: [{ query: spaceByIdQuery, variables: { idOrName: spaceIdOrName } }],
})
+ const { handleGraphQLError } = useFieldErrors({
+ handledFieldErrors: ['url', 'title', 'description'],
+ })
+
const onSave = () => {
return updateCollaborationTool({
variables: {
@@ -95,7 +117,7 @@ const EditDigitalTool = () => {
}
useEffect(() => {
- if (!validateUrl(url)) {
+ if (url.length > 0 && !validateUrl(url)) {
setUrlError(t('global.validation.url.invalid'))
} else {
setUrlError(undefined)
@@ -116,39 +138,6 @@ const EditDigitalTool = () => {
}
}, [t, loadingSpace, setScreenOptions, colors.background20])
- useEffect(() => {
- if (url.length > 0 && title.length > 0 && !!selectedCollection && inputValid) {
- setSaveButtonDisabled(false)
- }
- }, [url, title, selectedCollection, inputValid])
-
- useEffect(() => {
- if (space) {
- const collaborationTools = space ? space.collaborationTools : []
- if (collaborationTools && collaborationTools.length > 0 && toolId) {
- const digitalTool = collaborationTools.find((tool) => tool.id === toolId)
- if (!digitalTool) {
- replaceRoute('/404')
- return
- }
- const collectionType = COLLECTION_TYPES.filter(
- (collection_type) => collection_type === digitalTool.collectionType
- )[0]
- const toolCollectionType = {
- id: collectionType,
- selected: true,
- title: t(`spaces.toolKit.linkhub.collection.${collectionType}`),
- }
- setUrl(digitalTool.url)
- setTitle(digitalTool.title)
- setDescription(digitalTool.description)
- setSelectedCollection(toolCollectionType)
- setCurrentThumbnail(digitalTool.thumbnail)
- setCurrentThumbnailBlurhash(digitalTool.thumbnailBlurhash)
- }
- }
- }, [space, toolId, t, replaceRoute])
-
useEffect(() => {
const resultSchema = UpdateCollaborationToolSchema.safeParse({
spaceId: space?.id,
@@ -174,6 +163,8 @@ const EditDigitalTool = () => {
return <></>
}
+ const saveButtonDisabled = !(url.length > 0 && title.length > 0 && !!selectedCollection && inputValid)
+
return (
<PermissionsGuard
permissionType={PermissionsType.SPACES}
--
GitLab