Merge pull request #31 from varun2948/feat-osm-download

Feat osm download
naxa-developers · Dec 22, 2023 · 7972898 · 7972898
2 parents cde4e94 + 6d812ed
commit 7972898
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 38 deletions.
diff --git a/frontend/.env.expand b/frontend/.env.expand
@@ -44,3 +44,4 @@ REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT
 REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
 REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
 REACT_APP_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL
+REACT_APP_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL
diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js
@@ -3,6 +3,8 @@ import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, AsteriskIcon } from '../svgIco
 import FileFormatCard from './fileFormatCard';
 import Popup from 'reactjs-popup';
 import { EXPORT_TOOL_S3_URL } from '../../config';
+import messages from './messages';
+import { FormattedMessage } from 'react-intl';
 
 export const TITLED_ICONS = [
   { Icon: RoadIcon, title: 'roads', value: 'ROADS' },
@@ -47,9 +49,6 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
 
       // Check if the request was successful
       if (response.ok) {
-        // Set the state to indicate that the file download is complete
-        setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: false });
-
         // Get the file data as a blob
         const blob = await response.blob();
 
@@ -66,6 +65,8 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
+        // Set the state to indicate that the file download is complete
+        setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: false });
       } else {
         // Show a popup and throw an error if the request was not successful
         setShowPopup(true);
@@ -87,7 +88,12 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
       <Popup modal open={showPopup} closeOnDocumentClick nested onClose={() => setShowPopup(false)}>
         {(close) => (
           <div class="blue-dark bg-white pv2 pv4-ns ph2 ph4-ns">
-            <h3 class="barlow-condensed f3 fw6 mv0">Data Not Available.</h3>
+            <h3 class="barlow-condensed f3 fw6 mv0">
+              <FormattedMessage {...messages.errorDownloadOsmData} />
+            </h3>
+            <p class="mt4">
+              <FormattedMessage {...messages.errorDownloadOsmDataDescription} />
+            </p>
             <div class="w-100 pt3 flex justify-end">
               <button
                 aria-pressed="false"

diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js
@@ -12,27 +12,34 @@ import { AnimatedLoadingIcon } from '../button';
 function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState }) {
   return (
     <>
-      {fileFormats.map((fileFormat, index) => (
-        <React.Fragment key={index}>
-          <div
-            tabIndex={0}
-            style={{ cursor: 'pointer' }}
-            role="button"
-            onClick={() => downloadS3Data(title, fileFormat.format)}
-            className="link hover-red color-inherit"
-          >
-            <p className="underline fw5" style={{ textUnderlineOffset: '5px' }}>
-              {fileFormat.format}
-              {isDownloadingState?.isDownloading &&
-              isDownloadingState?.title === title &&
-              isDownloadingState?.fileFormat === fileFormat?.format ? (
-                <AnimatedLoadingIcon />
-              ) : null}
-            </p>
-          </div>
-          {index !== fileFormats.length - 1 && <hr className="file-list-separator" />}
-        </React.Fragment>
-      ))}
+      {fileFormats.map((fileFormat, index) => {
+        const loadingState =
+          isDownloadingState?.isDownloading &&
+          isDownloadingState?.title === title &&
+          isDownloadingState?.fileFormat === fileFormat?.format;
+
+        return (
+          <React.Fragment key={index}>
+            <div
+              tabIndex={0}
+              style={
+                loadingState
+                  ? { cursor: 'not-allowed', pointerEvents: 'none' }
+                  : { cursor: 'pointer' }
+              }
+              role="button"
+              onClick={() => downloadS3Data(title, fileFormat.format)}
+              className="link hover-red color-inherit"
+            >
+              <p className="underline fw5" style={{ textUnderlineOffset: '5px' }}>
+                {fileFormat.format}
+                {loadingState ? <AnimatedLoadingIcon /> : null}
+              </p>
+            </div>
+            {index !== fileFormats.length - 1 && <hr className="file-list-separator" />}
+          </React.Fragment>
+        );
+      })}
     </>
   );
 }

diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js
@@ -28,6 +28,7 @@ import { Alert } from '../alert';
 import './styles.scss';
 import { useWindowSize } from '../../hooks/UseWindowSize';
 import { DownloadOsmData } from './downloadOsmData.js';
+import { ENABLE_EXPORT_TOOL } from '../../config/index.js';
 
 /* lazy imports must be last import */
 const ProjectTimeline = React.lazy(() => import('./timeline' /* webpackChunkName: "timeline" */));
@@ -289,19 +290,21 @@ export const ProjectDetail = (props) => {
       </div>
 
       {/* Download OSM Data section Start */}
-
-      <div className="bg-tan-dim">
-        <a href="#downloadOsmData" name="downloadOsmData" style={{ visibility: 'hidden' }}>
-          <FormattedMessage {...messages.downloadOsmData} />
-        </a>
-        <h3 className={`${h2Classes}`}>
-          <FormattedMessage {...messages.downloadOsmData} />
-        </h3>
-        <DownloadOsmData
-          projectMappingTypes={props?.project?.mappingTypes}
-          project={props.project}
-        />
-      </div>
+      {/* Converted String to Integer */}
+      {+ENABLE_EXPORT_TOOL === 1 && (
+        <div className="bg-tan-dim">
+          <a href="#downloadOsmData" name="downloadOsmData" style={{ visibility: 'hidden' }}>
+            <FormattedMessage {...messages.downloadOsmData} />
+          </a>
+          <h3 className={`${h2Classes}`}>
+            <FormattedMessage {...messages.downloadOsmData} />
+          </h3>
+          <DownloadOsmData
+            projectMappingTypes={props?.project?.mappingTypes}
+            project={props.project}
+          />
+        </div>
+      )}
 
       {/* Download OSM Data section End */}
 

diff --git a/frontend/src/components/projectDetail/messages.js b/frontend/src/components/projectDetail/messages.js
@@ -227,6 +227,15 @@ export default defineMessages({
     id: 'project.detail.sections.downloadOsmData',
     defaultMessage: 'Download OSM Data',
   },
+  errorDownloadOsmData: {
+    id: 'project.detail.sections.errorDownloadOsmData',
+    defaultMessage: 'Data Extraction Unavailable',
+  },
+  errorDownloadOsmDataDescription: {
+    id: 'project.detail.sections.errorDownloadOsmDataDescription',
+    defaultMessage:
+      'The data extract you are attempting to download is currently inactive or unavailable. Please ensure that the extract is active and try again later.',
+  },
   viewInOsmcha: {
     id: 'project.detail.sections.contributions.osmcha',
     defaultMessage: 'Changesets in OSMCha',

diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js
@@ -60,6 +60,7 @@ export const POTLATCH2_EDITOR_URL =
 export const RAPID_EDITOR_URL =
   process.env.REACT_APP_RAPID_EDITOR_URL || 'https://mapwith.ai/rapid';
 export const EXPORT_TOOL_S3_URL = process.env.REACT_APP_EXPORT_TOOL_S3_URL || '';
+export const ENABLE_EXPORT_TOOL = process.env.REACT_APP_ENABLE_EXPORT_TOOL || '';
 
 export const TASK_COLOURS = {
   READY: '#fff',