Copy tutorial json when submitting tutorial

Author: tnagorra

manager-dashboard/app/Base/components/SmartLink/index.tsx

@@ -3,7 +3,7 @@ import { Link, LinkProps } from 'react-router-dom';
 
 import {
     useButtonFeatures,
-    Props as ButtonProps,
+    ButtonProps,
 } from '#components/Button';
 
 import useRouteMatching, {

manager-dashboard/app/components/GeoJsonPreview/index.tsx

@@ -6,7 +6,6 @@ import {
 
     TileLayer,
     Coords,
-    Util,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
@@ -34,14 +33,13 @@ const toQuadKey = (x: number, y: number, z: number) => {
 const BingTileLayer = TileLayer.extend({
     getTileUrl(coords: Coords) {
         const quadkey = toQuadKey(coords.x, coords.y, coords.z);
-        const subdomains = this.options.subdomains;
+        const { subdomains } = this.options;
 
         // eslint-disable-next-line no-underscore-dangle
         const url = this._url
             .replace('{subdomain}', subdomains[(coords.x + coords.y) % subdomains.length])
             .replace('{quad_key}', quadkey);
 
-        console.log(url);
         return url;
     },
     toQuadKey,

manager-dashboard/app/views/NewTutorial/index.tsx

@@ -51,7 +51,7 @@ import {
     TabPanel,
 } from '#components/Tabs';
 import TileServerInput, {
-    TILE_SERVER_ESRI,
+    TILE_SERVER_BING,
     tileServerDefaultCredits,
 } from '#components/TileServerInput';
 import InputSection from '#components/InputSection';
@@ -73,10 +73,10 @@ import {
     tutorialFormSchema,
     TutorialFormType,
     PartialTutorialFormType,
+    PartialInformationPagesType,
     ScenarioPagesType,
     CustomOptionType,
     InformationPagesType,
-    PartialInformationPagesType,
     colorKeyToColorMap,
     InformationPageTemplateKey,
     infoPageTemplateoptions,
@@ -90,6 +90,22 @@ import ScenarioPageInput from './ScenarioPageInput';
 import InformationPageInput from './InformationPageInput';
 import styles from './styles.css';
 
+type CustomScreen = Omit<TutorialFormType['scenarioPages'][number], 'scenarioId'>;
+function sanitizeScreens(scenarioPages: TutorialFormType['scenarioPages']) {
+    const screens = scenarioPages.reduce<Record<string, CustomScreen>>(
+        (acc, currentValue) => {
+            const { scenarioId, ...other } = currentValue;
+            acc[scenarioId] = {
+                ...other,
+            };
+
+            return acc;
+        },
+        {},
+    );
+    return screens;
+}
+
 const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
     {
         optionId: 1,
@@ -116,16 +132,17 @@ const defaultCustomOptions: PartialTutorialFormType['customOptions'] = [
         description: 'if you\'re not sure or there is cloud cover / bad imagery',
     },
 ];
+
 const defaultTutorialFormValue: PartialTutorialFormType = {
     projectType: PROJECT_TYPE_BUILD_AREA,
     zoomLevel: 18,
     tileServer: {
-        name: TILE_SERVER_ESRI,
-        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
+        name: TILE_SERVER_BING,
+        credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     tileServerB: {
-        name: TILE_SERVER_ESRI,
-        credits: tileServerDefaultCredits[TILE_SERVER_ESRI],
+        name: TILE_SERVER_BING,
+        credits: tileServerDefaultCredits[TILE_SERVER_BING],
     },
     customOptions: defaultCustomOptions,
 };
@@ -223,21 +240,15 @@ function NewTutorial(props: Props) {
                 informationPages: informationPagesFromForm,
                 ...valuesToCopy
             } = finalValues;
-            type Screens = typeof finalValues.scenarioPages;
-            type Screen = Screens[number];
-            type CustomScreen = Omit<Screen, 'scenarioId'>;
-
-            const screens = scenarioPages.reduce(
-                (acc, currentValue) => {
-                    const { scenarioId, ...other } = currentValue;
-                    acc[scenarioId] = {
-                        ...other,
-                    };
 
-                    return acc;
-                },
-                {} as Record<string, CustomScreen>,
-            );
+            const screens = sanitizeScreens(scenarioPages);
+
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(screens, null, 2));
+                alert('Tutorial JSON copied to clipboard.');
+            } catch (err) {
+                alert(`Tutorial JSON could not be copied ${err}`);
+            }
 
             const storage = getStorage();
             const timestamp = (new Date()).getTime();