Add graphql mutation for patch region in project

the-deep · Jul 16, 2024 · 9106c9f · 9106c9f
1 parent dd2dc4a
commit 9106c9f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 40 deletions.
diff --git a/app/components/GalleryFileUpload/index.tsx b/app/components/GalleryFileUpload/index.tsx
@@ -53,7 +53,6 @@ function FileUpload(props: Props) {
         disabled,
         projectIds,
         buttonOnly,
-        // value: valueFromProps,
         option,
         setOption,
         status = false,
@@ -134,7 +133,7 @@ function FileUpload(props: Props) {
 
     const currentStatus = useMemo(() => {
         if (isNotDefined(status)) {
-            return '';
+            return undefined;
         }
         if (loading) {
             return 'Uploading file';
@@ -156,7 +155,7 @@ function FileUpload(props: Props) {
             name={undefined}
             value={undefined}
             onChange={handleFileInputChange}
-            status={status ? currentStatus : ''}
+            status={currentStatus}
             overrideStatus
             title={buttonOnly ? undefined : title}
             label={buttonOnly ? undefined : title}

diff --git a/app/components/selections/RegionSelectInput/index.tsx b/app/components/selections/RegionSelectInput/index.tsx
@@ -19,12 +19,14 @@ const REGION_LIST = gql`
         $search: String,
         $pageSize: Int,
         $page: Int,
+        $public: Boolean,
     ) {
         regions(
             excludeProject: $excludeProject,
             search: $search,
             pageSize: $pageSize,
             page: $page,
+            public: $public,
         ) {
             page
             results {
@@ -51,14 +53,15 @@ type RegionSelectInputProps<K extends string, GK extends string> = SearchSelectI
     Region,
     Def,
     'onSearchValueChange' | 'searchOptions' | 'optionsPending' | 'keySelector' | 'labelSelector' | 'totalOptionsCount' | 'onShowDropdownChange'
-> & { projectId: string};
+    > & { projectId: string, pending?: boolean};
 
 function RegionSelectInput<K extends string, GK extends string>(
     props: RegionSelectInputProps<K, GK>,
 ) {
     const {
         className,
         projectId,
+        pending,
         ...otherProps
     } = props;
 
@@ -69,6 +72,7 @@ function RegionSelectInput<K extends string, GK extends string>(
     const variables = useMemo(() => ({
         excludeProject: [projectId],
         search: debouncedSearchText,
+        public: true,
         page: 1,
         pageSize: 10,
     }), [
@@ -132,7 +136,7 @@ function RegionSelectInput<K extends string, GK extends string>(
             labelSelector={labelSelector}
             onSearchValueChange={setSearchText}
             searchOptions={data?.regions?.results}
-            optionsPending={loading}
+            optionsPending={loading || pending}
             totalOptionsCount={data?.regions?.totalCount ?? 0}
             onShowDropdownChange={setOpened}
             handleShowMoreClick={handleShowMoreClick}

diff --git a/app/views/ProjectEdit/GeoAreas/RegionsMap/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionsMap/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { _cs } from '@togglecorp/fujs';
 import { IoMapOutline } from 'react-icons/io5';
+import { gql, useMutation } from '@apollo/client';
+import { _cs, isDefined } from '@togglecorp/fujs';
 import {
     Tabs,
     Tab,
@@ -13,19 +14,29 @@ import {
     Kraken,
 } from '@the-deep/deep-ui';
 
-import {
-    ProjectDetails,
-} from '#types';
 import _ts from '#ts';
 import RegionSelectInput, { Region } from '#components/selections/RegionSelectInput';
-import { useLazyRequest } from '#base/utils/restRequest';
+import { PatchRegionMutation, PatchRegionMutationVariables } from '#generated/types';
 
 import RegionTabPanel from './RegionTabPanel';
 
 import styles from './styles.css';
 
 const regionKeySelector = (d: Region) => d.id;
 
+const PATCH_REGION = gql`
+    mutation PatchRegion($projectId: ID!, $regionId: [ID!]) {
+        project(id: $projectId) {
+            projectRegionBulk(regionsToAdd: $regionId) {
+                errors
+                result {
+                    id
+                }
+            }
+        }
+    }
+`;
+
 interface Props {
     className?: string;
     projectId: string;
@@ -63,44 +74,62 @@ function RegionsMap(props: Props) {
     const [regionOptions, setRegionOptions] = useState<Region[] | null | undefined>(undefined);
     const alert = useAlert();
 
-    interface RegionPatchCtx {
-        newRegion: number,
-        body: {
-            regions: { id: number | string }[],
+    const [
+        patchRegion,
+        {
+            loading: pendingPatchRegion,
         },
-    }
-
-    const {
-        trigger: regionPatchTrigger,
-    } = useLazyRequest<ProjectDetails, RegionPatchCtx>({
-        url: `server://projects/${projectId}/`,
-        method: 'PATCH',
-        body: (ctx) => ctx.body,
-        onSuccess: (_, ctx) => {
-            alert.show(
-                'Successfully added geo area to the project.',
-                { variant: 'success' },
-            );
-            onActiveRegionChange(ctx.newRegion.toString());
-            onRegionAdd();
+    ] = useMutation<PatchRegionMutation, PatchRegionMutationVariables>(
+        PATCH_REGION,
+        {
+            onCompleted: (response) => {
+                if (!response.project?.projectRegionBulk) {
+                    return;
+                }
+
+                const {
+                    result,
+                    errors,
+                } = response.project.projectRegionBulk;
+
+                if (errors) {
+                    alert.show(
+                        'Failed to publish selected region.',
+                        { variant: 'error' },
+                    );
+                }
+
+                const ok = isDefined(result) && result?.length > 0;
+
+                if (ok) {
+                    alert.show(
+                        'Region is successfully added!',
+                        { variant: 'success' },
+                    );
+                    onRegionAdd();
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to add selected region.',
+                    { variant: 'error' },
+                );
+            },
         },
-    });
+    );
 
     const handleAddRegionConfirm = useCallback(
         (value: number | undefined) => {
-            if (regions && value) {
-                regionPatchTrigger({
-                    newRegion: value,
-                    body: {
-                        regions: [
-                            ...regions.map((d) => ({ id: d.id })),
-                            { id: value },
-                        ],
+            if (value) {
+                patchRegion({
+                    variables: {
+                        projectId,
+                        regionId: [String(value)],
                     },
                 });
             }
         },
-        [regionPatchTrigger, regions],
+        [patchRegion, projectId],
     );
 
     const [
@@ -160,14 +189,14 @@ function RegionsMap(props: Props) {
                         </TabList>
                     )}
                 >
-                    {/* FIXME: show pending message */}
                     <RegionSelectInput
                         className={styles.region}
                         name="regions"
                         projectId={projectId}
                         value={undefined}
                         onChange={onRegionSelect}
                         options={regionOptions}
+                        pending={pendingPatchRegion}
                         onOptionsChange={setRegionOptions}
                         placeholder="Add Geo area"
                         variant="general"