task/WG-401-Add-Asset-to-Feature-Hook

react/src/components/AssetDetail/AssetButton.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import DOMPurify from 'dompurify';
 import { Button } from '@tacc/core-components';
 import { Feature, FeatureType } from '@hazmapper/types';
-import { getFeatureType } from '@hazmapper/types';
+import { getFeatureType, IFileImportRequest } from '@hazmapper/types';
+import { useImportFeatureAsset } from '@hazmapper/hooks';
 
 type AssetButtonProps = {
   selectedFeature: Feature;
@@ -20,6 +21,26 @@ const AssetButton: React.FC<AssetButtonProps> = ({
   const pointCloudURL = DOMPurify.sanitize(featureSource + '/index.html');
 
   const featureType = getFeatureType(selectedFeature);
+  const projectId = selectedFeature.project_id;
+  const featureId = selectedFeature.id;
+  const {
+    mutate: importFeatureAsset,
+    isPending: isImporting,
+    isSuccess: isImportingSuccess,
+  } = useImportFeatureAsset(projectId, featureId);
+
+  const handleImportFeatureAsset = (importData: IFileImportRequest) => {
+    importFeatureAsset(importData);
+  };
+  const handleSubmit = () => {
+    const importData: IFileImportRequest = {
+      /*TODO Replace with passed in values from
+      FileBrowserModal. These are hardcoded to test.*/
+      system_id: 'project-4072868216578445806-242ac117-0001-012',
+      path: 'images_good/image.jpg',
+    };
+    handleImportFeatureAsset(importData);
+  };
 
   return (
     <>
@@ -36,9 +57,16 @@ const AssetButton: React.FC<AssetButtonProps> = ({
           View
         </Button>
       )}
-      {featureType.includes(selectedFeature.geometry.type) && isPublicView && (
+      {featureType.includes(selectedFeature.geometry.type) && !isPublicView && (
         //TODO
-        <Button type="primary">Add Asset from DesignSafe</Button>
+        <Button
+          type="primary"
+          onClick={handleSubmit}
+          isLoading={isImporting}
+          disabled={isImportingSuccess}
+        >
+          Add Asset from DesignSafe
+        </Button>
       )}
     </>
   );

react/src/hooks/features/index.ts

@@ -1,4 +1,5 @@
 export { useDeleteFeature } from './useDeleteFeature';
+export { useImportFeatureAsset } from './useImportFeatureAsset';
 export {
   useFeatures,
   useCurrentFeatures,

react/src/hooks/features/useImportFeatureAsset.ts

@@ -0,0 +1,12 @@
+import { usePost } from '../../requests';
+import { ApiService, Feature, IFileImportRequest } from '@hazmapper/types';
+
+export const useImportFeatureAsset = (projectId: number, featureId: number) => {
+  const endpoint = `/projects/${projectId}/features/${featureId}/assets/`;
+  return usePost<IFileImportRequest, Feature>({
+    endpoint,
+    apiService: ApiService.Geoapi,
+  });
+};
+
+export default useImportFeatureAsset;

react/src/types/feature.ts

@@ -147,3 +147,7 @@ export interface QuestionnaireAsset {
   path: string;
   previewPath: string;
 }
+export interface IFileImportRequest {
+  system_id: string;
+  path: string;
+}