changes for UX of opening and closing editor from both home and through article view

src/blog/Blog.tsx

@@ -53,7 +53,6 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
     setShowProfile(false);
   };
   const handleShowEditor = () => {
-    console.log("handleShowEditor")
     setShowEditor(true);
   };
   const handleHideEditor = () => {
@@ -67,7 +66,7 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
 
   // derive a single source of truth for view
   const view: View = React.useMemo(() => {
-    if (selectedArticle !== null) return 'article';
+    if (selectedArticle !== null && !showEditor) return 'article';
     if (showRegister) return 'register';
     if (showLogin) return 'login';
     if (showProfile) return 'profile';
@@ -97,9 +96,20 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
         );
       case 'article':
         if (selectedArticle == null || !articles[selectedArticle]) return null;
-        return <ArticleView article={articles[selectedArticle]} onBack={handleArticleViewBack} />;
+        return <ArticleView
+          article={articles[selectedArticle]}
+          onBack={handleArticleViewBack}
+          onEdit={handleShowEditor}
+        />;
       case 'editor':
-        return <ArticleEditor onBack={handleArticleEditorBack} ></ArticleEditor>
+        if (selectedArticle == null || !articles[selectedArticle])
+          return <ArticleEditor
+            onBack={handleArticleEditorBack}
+          />
+        return <ArticleEditor
+          article={articles[selectedArticle] || null}
+          onBack={handleArticleEditorBack}
+        />
       case 'home':
       default:
         return (

src/blog/components/Article/ArticleView.tsx

@@ -3,6 +3,7 @@ import { marked } from 'marked';
 import { Box, Typography, Divider, IconButton, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { ArticleMeta } from "../ArticleMeta";
 import { ArticleProps } from '../../types/props';
 
@@ -25,7 +26,8 @@ const CoverImage = styled('img')({
 
 export default function ArticleView({
   article,
-  onBack
+  onBack,
+  onEdit,
 }: ArticleProps) {
 
   return (
@@ -41,6 +43,10 @@ export default function ArticleView({
         sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
       />
 
+      <IconButton onClick={onEdit} sx={{ mb: 2 }}>
+        <EditRoundedIcon />
+      </IconButton>
+
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
       </Typography>

src/blog/types/props.ts

@@ -9,6 +9,7 @@ export interface LatestProps {
 export interface ArticleProps {
   article: ArticleModel;
   onBack: () => void;
+  onEdit: () => void;
 }
 
 export interface ArticleEditorProps {