Default new content and error handling

NASA-IMPACT · Oct 12, 2023 · 4791c72 · 4791c72
1 parent 50c038d
commit 4791c72
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 60 deletions.
diff --git a/app/scripts/components/publication-tool/atoms.ts b/app/scripts/components/publication-tool/atoms.ts
@@ -1,61 +1,65 @@
 import { atomWithStorage } from 'jotai/utils';
 import { useParams } from 'react-router';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useMemo } from 'react';
 import {  EditorStory } from './types';
-import { toEditorDataStory } from './utils';
+import { toEditorDataStory, toMDXDocument } from './utils';
 
-export const DataStoriesAtom = atomWithStorage<EditorStory[]>(
-  'dataStories',
-  [
+const DEFAULT_STORY: EditorStory = {
+  frontmatter: {
+    id: 'example-data-story',
+    name: 'Example Data Story',
+    description: 'This is an example data story',
+    pubDate: '2023-01-01',
+    taxonomy: []
+  },
+  currentBlockId: '1',
+  blocks: [
     {
-      frontmatter: {
-        id: 'example-data-story',
-        name: 'Example Data Story',
-        description: 'This is an example data story',
-        pubDate: '2023-01-01',
-        taxonomy: []
-      },
-      currentBlockId: '1',
-      blocks: [
-        {
-          id: '1',
-          tag: 'Block',
-          mdx: `
-          <Prose>
-          ### Your markdown header
-      
-          Your markdown contents comes here.
+      id: '1',
+      tag: 'Block',
+      mdx: `
+      <Prose>
+      ### Your markdown header
+  
+      Your markdown contents comes here.
 
-          <Map
-          datasetId='no2'
-          layerId='no2-monthly'
-          center={[120.11, 34.95]}
-          zoom={4.5}
-          dateTime='2020-02-01'
-          compareDateTime='2022-02-01'
-        />
-        <Caption 
-          attrAuthor='NASA' 
-          attrUrl='https://nasa.gov/'
-        >
-          Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-        </Caption> 
-        </Prose>`
-        },
-        {
-          id: '2',
-          tag: 'Block',
-          mdx: `
-          <Prose>
-          ### Second header
-      
-          Let's tell a story of _data_.
-          
-        </Prose>`
-        }
-      ]
+      <Map
+      datasetId='no2'
+      layerId='no2-monthly'
+      center={[120.11, 34.95]}
+      zoom={4.5}
+      dateTime='2020-02-01'
+      compareDateTime='2022-02-01'
+    />
+    <Caption 
+      attrAuthor='NASA' 
+      attrUrl='https://nasa.gov/'
+    >
+      Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
+    </Caption> 
+    </Prose>`
     },
+    {
+      id: '2',
+      tag: 'Block',
+      mdx: `
+      <Prose>
+      ### Second header
+  
+      Let's tell a story of _data_.
+      
+    </Prose>`
+    }
+  ]
+};
+
+export const DEFAULT_STORY_STRING = toMDXDocument(DEFAULT_STORY);
+
+export const DataStoriesAtom = atomWithStorage<EditorStory[]>(
+  'dataStories',
+  [
+    DEFAULT_STORY,
     {
       frontmatter: {
         id: 'example-data-story-2',
@@ -81,17 +85,30 @@ export const DataStoriesAtom = atomWithStorage<EditorStory[]>(
 );
 
 export const useCreateEditorDataStoryFromMDXDocument = () => {
-  const setDataStories = useSetAtom(DataStoriesAtom);
+  const [dataStories, setDataStories] = useAtom(DataStoriesAtom);
   return useCallback(
     (mdxDocument: string) => {
-      const editorDataStory = toEditorDataStory(mdxDocument);
+      let editorDataStory;
+      try {
+        editorDataStory = toEditorDataStory(mdxDocument);
+        const { frontmatter } = editorDataStory;
+        if (!frontmatter.id) {
+          throw new Error('id is required');
+        }
+        if (dataStories.map((p) => p.frontmatter.id).includes(frontmatter.id)) {
+          throw new Error(`id ${frontmatter.id} already exists`);
+        }
+      } catch (error) {
+        return { id: null, error };
+      }
+
       setDataStories((oldDataStories) => {
         const newDataStories = [...oldDataStories, editorDataStory];
         return newDataStories;
       });
-      return editorDataStory;
+      return { id: editorDataStory.frontmatter.id, error: null };
     },
-    [setDataStories]
+    [setDataStories, dataStories]
   );
 };
 

diff --git a/app/scripts/components/publication-tool/index.tsx b/app/scripts/components/publication-tool/index.tsx
@@ -1,9 +1,12 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Route, Routes, useNavigate, useParams } from 'react-router';
 import { useAtomValue } from 'jotai';
 import { Button, ButtonGroup } from '@devseed-ui/button';
+import styled from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
 import DataStoryEditor from './data-story';
 import {
+  DEFAULT_STORY_STRING,
   DataStoriesAtom,
   useCreateEditorDataStoryFromMDXDocument
 } from './atoms';
@@ -75,18 +78,29 @@ function DataStoryEditorLayout() {
   );
 }
 
+const Error = styled.div`
+  color: ${themeVal('color.danger')};
+`;
+
 function PublicationTool() {
   const dataStories = useAtomValue(DataStoriesAtom);
-  const [newStory, setNewStory] = useState<string>('');
+  const [newStory, setNewStory] = useState<string>(DEFAULT_STORY_STRING);
+  const [error, setError] = useState<string>('');
   const createEditorDataStoryFromMDXDocument =
     useCreateEditorDataStoryFromMDXDocument();
   const navigate = useNavigate();
 
-  const onCreate = () => {
-    const { frontmatter } = createEditorDataStoryFromMDXDocument(newStory);
+  const onCreate = useCallback(() => {
+    const { id, error } = createEditorDataStoryFromMDXDocument(newStory);
+    if (error) {
+      console.log(error.message);
+      setError(error.message);
+      return;
+    }
     setNewStory('');
-    navigate(`/publication-tool/${frontmatter.id}`);
-  };
+    setError('');
+    navigate(`/publication-tool/${id}`);
+  }, [createEditorDataStoryFromMDXDocument, newStory, navigate]);
 
   return (
     <Routes>
@@ -136,6 +150,7 @@ function PublicationTool() {
                     rows={20}
                     onChange={(e) => setNewStory(e.currentTarget.value)}
                     placeholder='Paste full MDX document here (including frontmatter)'
+                    value={newStory}
                   />
                 </div>
                 <Button
@@ -145,6 +160,7 @@ function PublicationTool() {
                 >
                   Create
                 </Button>
+                {error && <Error>Error: {error}</Error>}
               </FoldProse>
             </Fold>
           </PageMainContent>