Update/aoi uptime fix

public/locales/cs/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "E-mail",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Soukromí",
   "mapswipe-logo": "Mapswipe Logo",
   "didnot-find-language": "Přidat chybějící jazyk",

public/locales/de/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "Email",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Datenschutz",
   "mapswipe-logo": "Mapswipe Logo",
   "didnot-find-language": "Fehlende Sprache hinzufügen",

public/locales/en/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "Email",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "System status monitored by",
   "privacy": "Privacy",
   "mapswipe-logo": "Mapswipe Logo",
   "didnot-find-language": "Add missing language",

public/locales/hu/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "E-mail",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Adatvédelem",
   "mapswipe-logo": "Mapswipe logo",
   "didnot-find-language": "Hiányzó nyelv hozzáadása",

public/locales/ne/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "इमेल",
   "copyright": "प्रतिलिपि अधिकार © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "गोपनीयता",
   "mapswipe-logo": "Mapswipe लोगो",
   "didnot-find-language": "छुटेको भाषा थप्नुहोस्",

public/locales/pt/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "Wiki OSM",
   "email": "Email",
   "copyright": "Direitos de autor © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Privacidade",
   "mapswipe-logo": "Logótipo Mapswipe",
   "didnot-find-language": "Adicionar idioma em falta",

src/components/Footer/index.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-icons/io5';
 
 import Heading from 'components/Heading';
+import ImageWrapper from 'components/ImageWrapper';
 
 import styles from './styles.module.css';
 
@@ -143,6 +144,19 @@ function Footer(props: Props) {
                     <div className={styles.leftContainer}>
                         {t('copyright', { year: currentYear })}
                     </div>
+                    <div className={styles.midContainer}>
+                        {t('uptime-pretext')}
+                        <Link
+                            href="https://uptimerobot.com/"
+                            target="_blank"
+                        >
+                            <ImageWrapper
+                                className={styles.partnerLogo}
+                                src="/img/uptime.png"
+                                alt="Uptime Robot"
+                            />
+                        </Link>
+                    </div>
                     <div className={styles.rightContainer}>
                         <Link
                             href="/[locale]/privacy"

src/components/Footer/styles.module.css

@@ -60,6 +60,19 @@
                 padding: var(--spacing-medium) 0;
             }
 
+            .midContainer {
+                display: flex;
+                align-items: flex-end;
+
+                .partnerLogo {
+                    /* NOTE: Margin bottom because logo is text and line height is not
+                    * consistent */
+                    margin-bottom: 2px;
+                    width: 7rem;
+                    height: 1rem;
+                }
+            }
+
             .rightContainer {
                 display: flex;
                 padding: var(--spacing-medium) 0;

src/pages/[locale]/index.tsx

@@ -72,11 +72,6 @@ const partners = [
         imageSrc: '/img/tc.png',
         link: 'https://togglecorp.com',
     },
-    {
-        altText: 'Uptime Robot',
-        imageSrc: '/img/uptime.png',
-        link: 'https://uptimerobot.com/',
-    },
 ];
 
 interface Props extends SSRConfig {

src/pages/[locale]/projects/[id].tsx

@@ -1,4 +1,9 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, {
+    useCallback,
+    useEffect,
+    useState,
+    useMemo,
+} from 'react';
 import dynamic from 'next/dynamic';
 import { GetStaticProps, GetStaticPaths } from 'next';
 import { useTranslation } from 'next-i18next';
@@ -22,6 +27,7 @@ import OgMeta from 'components/OgMeta';
 import Page from 'components/Page';
 import ProjectTypeIcon from 'components/ProjectTypeIcon';
 import ImageWrapper from 'components/ImageWrapper';
+import Button from 'components/Button';
 import Hero from 'components/Hero';
 import Tag from 'components/Tag';
 import Card from 'components/Card';
@@ -57,6 +63,25 @@ async function getAllProjects() {
     return (data as AllDataQuery)?.publicProjects?.results as unknown as PublicProjects;
 }
 
+function transformAoiToGeoJson(
+    aoi: PublicProjects[number]['aoiGeometry'],
+): GeoJSON.FeatureCollection<GeoJSON.Polygon> | undefined {
+    if (!aoi) {
+        return undefined;
+    }
+    return ({
+        type: 'FeatureCollection',
+        features: [{
+            geometry: {
+                type: 'Polygon',
+                coordinates: aoi.bbox,
+            },
+            type: 'Feature',
+            properties: {},
+        }],
+    });
+}
+
 async function getProjectData(id: string) {
     const projects = (
         data as AllDataQuery
@@ -125,24 +150,19 @@ function Project(props: Props) {
         exportModerateToHighAgreementYesMaybeGeometries,
         numberOfContributorUsers,
         aoiGeometry,
+        firebaseId,
         id: projectId,
     } = props;
 
     const svgContainerRef = React.useRef<HTMLDivElement>(null);
     const svgBounds = useSizeTracking(svgContainerRef);
-    const [projectGeoJSON, setProjectGeoJSON] = useState(null);
     const [projectHistory, setProjectHistory] = useState<{
         timestamp: number; progress: number
     }[] | undefined>();
 
     useEffect(() => {
         async function fetchData() {
             try {
-                if (exportAreaOfInterest?.file?.url) {
-                    const res = await fetch(exportAreaOfInterest.file.url);
-                    setProjectGeoJSON(await res.json());
-                }
-
                 if (exportHistory?.file?.url) {
                     const history = await getProjectHistory(projectId, exportHistory.file.url);
                     setProjectHistory(history);
@@ -153,7 +173,7 @@ function Project(props: Props) {
             }
         }
         fetchData();
-    }, [exportAreaOfInterest, exportHistory, projectId]);
+    }, [exportHistory, projectId]);
 
     const [
         chartPoints,
@@ -302,6 +322,35 @@ function Project(props: Props) {
 
     const roundedTotalArea = Math.round(aoiGeometry?.totalArea ?? 0);
 
+    const aoiGeometryFeature = useMemo(() => (
+        transformAoiToGeoJson(aoiGeometry)
+    ), [aoiGeometry]);
+
+    const aoiGeometryBlob = useMemo(() => {
+        if (!aoiGeometryFeature) {
+            return undefined;
+        }
+        const blob = new Blob(
+            [JSON.stringify(aoiGeometryFeature, null, 2)],
+            { type: 'application/geo+json' },
+        );
+        return blob;
+    }, [aoiGeometryFeature]);
+
+    const onAoiDownloadClick = useCallback(() => {
+        if (!aoiGeometryBlob) {
+            return;
+        }
+        const url = URL.createObjectURL(aoiGeometryBlob);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `area_of_interest_${firebaseId}.geojson`;
+        a.click();
+
+        URL.revokeObjectURL(url);
+    }, [aoiGeometryBlob, firebaseId]);
+
     return (
         <Page contentClassName={_cs(styles.project, className)}>
             <OgMeta
@@ -432,11 +481,11 @@ function Project(props: Props) {
                     })
                 )}
             >
-                {projectGeoJSON && (
+                {aoiGeometryFeature && (
                     <div className={styles.mapContainer}>
                         <DynamicProjectMap
                             className={styles.projectsMap}
-                            geoJSON={projectGeoJSON}
+                            geoJSON={aoiGeometryFeature}
                         />
                     </div>
                 )}
@@ -747,7 +796,44 @@ function Project(props: Props) {
                         </Link>
                     </Card>
                 )}
-                {exportAreaOfInterest && (
+                {aoiGeometry && (
+                    <Card
+                        childrenContainerClassName={styles.downloadCard}
+                        heading={t('area-of-interest-title')}
+                        description={t('area-of-interest-description')}
+                    >
+                        <div className={styles.fileDetails}>
+                            <Tag>GEOJSON</Tag>
+                            <div>
+                                {t('download-size', {
+                                    size: getFileSizeProperties(
+                                        aoiGeometryBlob?.size ?? 0,
+                                    ).size,
+                                    formatParams: {
+                                        size: {
+                                            style: 'unit',
+                                            unit: getFileSizeProperties(
+                                                aoiGeometryBlob?.size ?? 0,
+                                            ).unit,
+                                            maximumFractionDigits: 1,
+                                        },
+                                    },
+                                })}
+                            </div>
+                        </div>
+                        <Button
+                            variant="border"
+                            className={styles.link}
+                            onClick={onAoiDownloadClick}
+                        >
+                            <IoDownloadOutline />
+                            {t('download')}
+                        </Button>
+                    </Card>
+                )}
+                {/* NOTE: If in case there is no aoiGeometry,
+                we show exportAreaOfInterest if present */}
+                {!aoiGeometry && exportAreaOfInterest && (
                     <Card
                         childrenContainerClassName={styles.downloadCard}
                         key={exportAreaOfInterest?.id}

src/pages/[locale]/styles.module.css

@@ -316,8 +316,8 @@
                 gap: var(--spacing-mega-large);
 
                 .partnerLogo {
-                    width: 10rem;
-                    height: 5rem;
+                    width: 8rem;
+                    height: 4rem;
                 }
             }
         }