Reloading site persists "current page"

Author: TomNUSDS

src/App.css

@@ -46,3 +46,4 @@
 .zoom-066 {
   zoom: 0.667;
 }
+

src/App.tsx

@@ -4,9 +4,9 @@ import '@mdxeditor/editor/style.css';
 import './styles/usdswebsite.override.css';
 import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
-import {Fragment, useState} from "react";
+import {Fragment, useReducer} from "react";
 import {BlogEditorPage} from "./pages/BlogEditorPage.tsx";
-import {Header, PrimaryNav, Grid, GridContainer, Title,} from "@trussworks/react-uswds";
+import {Header, PrimaryNav, Grid, GridContainer} from "@trussworks/react-uswds";
 import {HomePage} from "./pages/HomePage.tsx";
 import {AboutPage} from "./pages/AboutPage.tsx";
 
@@ -23,7 +23,12 @@ type PagesMap = {
 
 
 function App() {
-  const [page, SetPage] = useState<PagesType>("Home");
+  // this is basically useState that persists to localstorage
+  const [page, setPage] = useReducer((_prev: PagesType, cur: PagesType) => {
+    localStorage.setItem('currentPage', cur);
+    return cur;
+  }, (localStorage.getItem('currentPage') as PagesType) || "Home");
+
   const PAGES_MAP: PagesMap = {
     "Home": <HomePage/>,
     "Blog Edit": <BlogEditorPage/>,
@@ -34,7 +39,8 @@ function App() {
     <Fragment>
       <Header basic>
         <div className={"float-left position-absolute top-1 left-105 text-bold"}>
-          Website Content Editor</div>
+          Website Content Editor
+        </div>
         <div className="usa-nav-container">
           <PrimaryNav
             aria-label="Primary navigation"
@@ -43,7 +49,7 @@ function App() {
                  href=""
                  className={eachPage === page ? "usa-nav__link usa-current" : "usa-nav__link"}
                  onClick={(e) => {
-                   SetPage(eachPage);
+                   setPage(eachPage);
                    e.preventDefault();
                    e.stopPropagation();
                  }}>{eachPage}</a>)}/>
@@ -57,7 +63,7 @@ function App() {
               id="main-content"
               role={"main"}
             >
-              {PAGES_MAP[page]}
+              {PAGES_MAP[page] ?? PAGES_MAP.Home}
             </main>
           </Grid>
         </GridContainer>

src/components/EditActionsToolbar.tsx

@@ -33,9 +33,9 @@ export const EditActionsToolbar = (props: {
     const cleanmdtext = mdtext.replace(`<[email protected]>`, '[email protected]');
     props.mdxeditorref?.current?.setMarkdown(cleanmdtext);
     localStorage.setItem(MARKDOWN_LOCAL_STORAGE_KEY, mdtext);
-    setTimeout(() => {
-      window.location.reload(); // needs some help loading cached images
-    }, 250);
+    // setTimeout(() => {
+    //   window.location.reload(); // needs some help loading cached images
+    // }, 250);
     // todo: go through images and see what's missing from cache and prompt for files
   }
 

src/pages/HomePage.tsx

@@ -3,12 +3,13 @@ import {Fragment} from "react";
 export const HomePage = () => {
   return (<Fragment>
       <p className="usa-intro">
-        This site is static only and <strong>all data</strong> is saved into your local browser.
+        This site is static-only and <strong>all data</strong> is saved into your local browser.
       </p>
       <p>
-        Build website posts with fewer mistakes. The intuitive rich text editor lets you see exactly
-        how your page will look as you create it. Save your work anytime by downloading a zip file
-        containing your edits and all associated images.
+        Build website posts with fewer mistakes. The intuitive rich text editor lets you see
+        how your page will look as you create it. Your work is saved into the browser’s cache and
+        you can download a zip file containing your edits and all associated images allow you
+        to submit them into Github using Github Desktop.
       </p>
 
       <p> ➤ <strong>Click <i>Blog Edit</i> in the top nav to begin.</strong></p>
@@ -20,12 +21,11 @@ export const HomePage = () => {
         the most handy.
       </p>
       <ul>
-        <li>Crabby will display the page meta information (aka "Frontmatter yaml header" in technobabel) as guided form,
-          to help
-          you avoid common mistakes.
+        <li>Crabby will display the page meta information (aka "Frontmatter yaml header" in technobabel)
+          as guided input form to help you avoid common mistakes.
         </li>
-        <li>Inserting images will display them in the page and save them when you Download the results.
-          For best results, correctly size images outside before uploading and use .jpg for faster rendering.
+        <li>Inserting images will display them in the page and they will appear in the correct locations
+          when you Download the results.
         </li>
         <li>The buttons on the right toggle between Markdown and Rich Text views.</li>
       </ul>
@@ -43,6 +43,8 @@ export const HomePage = () => {
       </p>
       <h2 id="section-heading-3">Tips and tricks</h2>
       <ul>
+        <li>For best results, correctly size images before uploading.</li>
+        <li>Keep image the filesizes small for faster rendering. .jpg with higher compression is recommended.</li>
         <li>Paste in rich text directly into the editor and let it reformat it as markdown. It can include images.</li>
         <li>Open an existing post’s markdown file.</li>
         <li>Paste in existing MD into the Markdown editor view including the yaml header.</li>