From 60c3bd6771d365011c177e4a1a03cf69f8e5a0ed Mon Sep 17 00:00:00 2001
From: Sarah Mundy <109107992+sarahfirstvoices@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:11:03 -0800
Subject: [PATCH] fw-5179, fix refresh error (#185)

* Move NavBar home buttons into loading container
* Ensure siteLoading is false until siteStore is ready
---
 src/components/NavBar/NavBarPresentation.js | 46 ++++++++++-----------
 src/components/Site/SiteData.js             |  7 ++--
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/NavBar/NavBarPresentation.js b/src/components/NavBar/NavBarPresentation.js
index 4e08f5b9..0330cf76 100644
--- a/src/components/NavBar/NavBarPresentation.js
+++ b/src/components/NavBar/NavBarPresentation.js
@@ -37,31 +37,31 @@ function NavBarPresentation({
     <nav id="NavBar" className="relative z-10" role="navigation">
       <div className="bg-fv-charcoal max-w-screen-2xl mx-auto px-2 lg:px-6 xl:px-16">
         <div className="h-16 flex justify-between items-center py-1 space-x-2 lg:space-x-4">
-          {/* Home Links */}
-          <div className="flex items-center">
-            <div
-              className={`${
-                isHome ? '' : 'hidden'
-              } md:flex items-center text-white`}
-            >
-              <span className="sr-only">FirstVoices Logo</span>
-              <Link to="/">{fvlogo}</Link>
-            </div>
-            <div className="w-16 text-white text-sm leading-tight text-center mr-2">
-              Beta Version
-            </div>
-            {!isHome && (
-              <Link
-                className="h-9 text-white flex items-center group bg-fv-charcoal rounded-lg text-lg font-medium hover:text-gray-100"
-                to={`/${site?.sitename}/`}
-              >
-                <span className="sr-only">{site?.title}</span>
-                {getIcon('Home', 'fill-current h-full w-auto')}
-              </Link>
-            )}
-          </div>
           {!siteLoading && (
             <>
+              {/* Home Links */}
+              <div className="flex items-center">
+                <div
+                  className={`${
+                    isHome ? '' : 'hidden'
+                  } md:flex items-center text-white`}
+                >
+                  <span className="sr-only">FirstVoices Logo</span>
+                  <Link to="/">{fvlogo}</Link>
+                </div>
+                <div className="w-16 text-white text-sm leading-tight text-center mr-2">
+                  Beta Version
+                </div>
+                {!isHome && (
+                  <Link
+                    className="h-9 text-white flex items-center group bg-fv-charcoal rounded-lg text-lg font-medium hover:text-gray-100"
+                    to={`/${site?.sitename}/`}
+                  >
+                    <span className="sr-only">{site?.title}</span>
+                    {getIcon('Home', 'fill-current h-full w-auto')}
+                  </Link>
+                )}
+              </div>
               {/* Menus */}
               <div id="NavMenus" className="hidden lg:flex xl:space-x-6 ">
                 {menuData?.dictionary && generateMenu(menuData?.dictionary)}
diff --git a/src/components/Site/SiteData.js b/src/components/Site/SiteData.js
index 811c6398..fbda35a9 100644
--- a/src/components/Site/SiteData.js
+++ b/src/components/Site/SiteData.js
@@ -5,7 +5,7 @@ import i18next from 'i18next'
 // FPCC
 import { useImmersion } from 'common/dataHooks/useImmersion'
 import { useSite } from 'common/dataHooks/useSites'
-import { useSiteDispatch } from 'context/SiteContext'
+import { useSiteDispatch, useSiteStore } from 'context/SiteContext'
 
 function SiteData() {
   const navigate = useNavigate()
@@ -15,7 +15,8 @@ function SiteData() {
   // --------------------------------
   // Get Language Site data
   // --------------------------------
-  const { isLoading, error, data } = useSite()
+  const { isLoading, error, data } = useSite() // site data request, to put in the site store
+  const { site } = useSiteStore() // site store, to validate when it is ready for use
 
   useEffect(() => {
     if (isLoading === false && error === null) {
@@ -61,7 +62,7 @@ function SiteData() {
   }, [immersionIsLoading, immersionError, immersionData])
 
   return {
-    siteLoading: isLoading || data?.id?.length < 1,
+    siteLoading: isLoading || site?.id?.length < 1,
   }
 }