Add graphql mutation for delete admin level

the-deep · Jul 30, 2024 · 2bada9c · 2bada9c
1 parent 03e0961
commit 2bada9c
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 104 deletions.
diff --git a/app/views/ProjectEdit/GeoAreas/CustomGeoAddModal/index.tsx b/app/views/ProjectEdit/GeoAreas/CustomGeoAddModal/index.tsx
@@ -28,17 +28,16 @@ import styles from './styles.css';
 type NewRegion = NonNullable<NonNullable<CreateRegionMutation['createRegion']>['result']>;
 
 const CREATE_REGION = gql`
-mutation CreateRegion($data: RegionInputType!) {
-        createRegion(
-            data: $data
-        ) {
+    mutation CreateRegion(
+        $data: RegionInputType!,
+    ) {
+        createRegion(data: $data) {
             ok
             errors
             result {
                 id
                 isPublished
             }
-
         }
     }
 `;

diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { isDefined } from '@togglecorp/fujs';
+import { isDefined, isFalsyString, isNotDefined } from '@togglecorp/fujs';
 import {
     Button,
     NumberInput,
@@ -18,6 +18,7 @@ import {
     useForm,
     getErrorObject,
     createSubmitHandler,
+    removeNull,
 } from '@togglecorp/toggle-form';
 import { gql, useMutation } from '@apollo/client';
 import {
@@ -29,44 +30,47 @@ import {
     GalleryFileType,
     AdminLevelType,
 } from '#generated/types';
+import {
+    ObjectError,
+    transformToFormError,
+} from '#base/utils/errorTransform';
 import NonFieldError from '#components/NonFieldError';
 import GalleryFileUpload from '#components/GalleryFileUpload';
 
 import styles from './styles.css';
 
+type PartialAdminLevel = PartialForm<AdminLevelType>;
 type AdminLevelInputTypeSafe = AdminLevelInputType & { id: string };
 type PartialAdminLevelInput = PartialForm<AdminLevelInputTypeSafe>;
 
 const CREATE_ADMIN_LEVEL = gql`
     mutation CreateAdminLevel(
-        $data: AdminLevelInputType!
+        $data: AdminLevelInputType!,
     ) {
-        createAdminLevel(
-            data: $data
-        ) {
-                ok
-                errors
-                result {
-                    tolerance
-                    title
-                    staleGeoAreas
-                    parentNameProp
-                    parentCodeProp
-                    codeProp
-                    nameProp
-                    geoShapeFile {
-                        file {
-                            url
-                        }
-                        id
-                        title
-                        mimeType
+        createAdminLevel(data: $data) {
+            ok
+            errors
+            result {
+                tolerance
+                title
+                staleGeoAreas
+                parentNameProp
+                parentCodeProp
+                codeProp
+                nameProp
+                geoShapeFile {
+                    file {
+                        url
                     }
-                    level
                     id
+                    title
+                    mimeType
                 }
+                level
+                id
             }
         }
+    }
 `;
 
 const UPDATE_ADMIN_LEVEL = gql`
@@ -123,11 +127,25 @@ const schema: FormSchema = {
 const adminLevelKeySelector = (d: AdminLevelType) => d.id;
 const adminLevelLabelSelector = (d: AdminLevelType) => d.title;
 
+function isGalleryFileValid(
+    galleryFile: Partial<GalleryFileType> | undefined | null,
+): galleryFile is GalleryFileType {
+    if (isNotDefined(galleryFile)) {
+        return false;
+    }
+
+    if (isNotDefined(galleryFile.id) || isFalsyString(galleryFile.title)) {
+        return false;
+    }
+
+    return true;
+}
+
 interface Props {
     regionId: string;
     onSave: (adminLevel: AdminLevelType) => void;
     onDelete: (id: string | undefined) => void;
-    value: AdminLevelType;
+    value: PartialAdminLevel;
     isPublished?: boolean;
     adminLevelOptions?: AdminLevelType[];
 }
@@ -153,11 +171,13 @@ function AddAdminLevelForm(props: Props) {
         ...remainingValues
     } = valueFromProps;
 
-    const initialFormValue: PartialAdminLevelInput = {
-        ...remainingValues,
-        geoShapeFile: geoShapeFile?.id,
-        region: regionId,
-    };
+    const initialFormValue: PartialAdminLevelInput = useMemo(() => (
+        {
+            ...remainingValues,
+            geoShapeFile: geoShapeFile?.id,
+            region: regionId,
+        }
+    ), [geoShapeFile?.id, regionId, remainingValues]);
 
     const {
         pristine,
@@ -169,7 +189,11 @@ function AddAdminLevelForm(props: Props) {
         setError,
     } = useForm(schema, initialFormValue);
 
-    const [option, setOption] = useState<GalleryFileType | undefined>(geoShapeFile ?? undefined);
+    const [option, setOption] = useState<GalleryFileType | undefined>(
+        isGalleryFileValid(geoShapeFile)
+            ? geoShapeFile
+            : undefined,
+    );
 
     const error = getErrorObject(riskyError);
     const alert = useAlert();
@@ -183,7 +207,7 @@ function AddAdminLevelForm(props: Props) {
         CREATE_ADMIN_LEVEL,
         {
             onCompleted: (response) => {
-                if (!response || !response.createAdminLevel || !response.createAdminLevel.result) {
+                if (!response || !response.createAdminLevel) {
                     return;
                 }
 
@@ -194,13 +218,11 @@ function AddAdminLevelForm(props: Props) {
                 } = response.createAdminLevel;
 
                 if (errors) {
-                    alert.show(
-                        'Failed to create admin level.',
-                        { variant: 'error' },
-                    );
+                    const formError = transformToFormError(removeNull(errors) as ObjectError[]);
+                    setError(formError);
                 }
 
-                if (ok) {
+                if (isDefined(result) && ok) {
                     alert.show(
                         'Admin level is successfully created!',
                         { variant: 'success' },
@@ -227,7 +249,7 @@ function AddAdminLevelForm(props: Props) {
         UPDATE_ADMIN_LEVEL,
         {
             onCompleted: (response) => {
-                if (!response || !response.updateAdminLevel || !response.updateAdminLevel.result) {
+                if (!response || !response.updateAdminLevel) {
                     return;
                 }
 
@@ -238,13 +260,11 @@ function AddAdminLevelForm(props: Props) {
                 } = response.updateAdminLevel;
 
                 if (errors) {
-                    alert.show(
-                        'Failed to update admin level.',
-                        { variant: 'error' },
-                    );
+                    const formError = transformToFormError(removeNull(errors) as ObjectError[]);
+                    setError(formError);
                 }
 
-                if (ok) {
+                if (isDefined(result) && ok) {
                     alert.show(
                         'Admin level is successfully update!',
                         { variant: 'success' },
@@ -271,13 +291,23 @@ function AddAdminLevelForm(props: Props) {
                     updateAdminLevel({
                         variables: {
                             id: valueFromProps.id,
-                            data: val as AdminLevelInputType,
+                            data: {
+                                ...val,
+                                parentCodeProp: val.parentCodeProp ?? '',
+                                parentNameProp: val.parentNameProp ?? '',
+
+                            } as AdminLevelInputType,
                         },
                     });
                 } else {
                     createAdminLevel({
                         variables: {
-                            data: val as AdminLevelInputType,
+                            data: {
+                                ...val,
+                                parentCodeProp: val.parentCodeProp ?? '',
+                                parentNameProp: val.parentNameProp ?? '',
+
+                            } as AdminLevelInputType,
                         },
                     });
                 }

diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx
@@ -2,14 +2,17 @@ import React from 'react';
 import {
     TabPanel,
 } from '@the-deep/deep-ui';
+import { PartialForm } from '@togglecorp/toggle-form';
 import { AdminLevelType } from '#generated/types';
 
 import AddAdminLevelForm from './AddAdminLevelForm';
 
+type PartialAdminLevel = PartialForm<AdminLevelType>;
+
 interface Props {
     onSave: (adminLevel: AdminLevelType) => void;
     onDelete: (id: string | undefined) => void;
-    value: AdminLevelType;
+    value: PartialAdminLevel;
     isPublished?: boolean;
     adminLevelOptions?: AdminLevelType[];
     name: string;