feat: Persist data from url

2060-io · Sep 20, 2024 · 111215f · 111215f
1 parent 2fdd592
commit 111215f
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 11 deletions.
diff --git a/app/app/components/footer/footer.tsx b/app/app/components/footer/footer.tsx
@@ -8,13 +8,14 @@ import About from './about'
 interface Footer {
   translations: Translations
   currentPage: string
+  urlParams: URLSearchParams | null
 }
 
-const Footer: React.FC<Footer> = ({ translations, currentPage }) => {
+const Footer: React.FC<Footer> = ({ translations, currentPage, urlParams }) => {
   return (
     <footer className="flex flex-col lg:flex-row xl:flex-row 2xl:flex-row -mx-6 bg-zinc-300 text-center">
       <About translations={translations} />
-      <NavbarFooter translations={translations} currentPage={currentPage} />
+      <NavbarFooter translations={translations} currentPage={currentPage} urlParams={urlParams} />
     </footer>
   )
 }

diff --git a/app/app/components/navBars/navbarFooter.tsx b/app/app/components/navBars/navbarFooter.tsx
@@ -5,25 +5,43 @@ import { Translations } from '../utils'
 interface NavBarFooter {
   translations: Translations
   currentPage: string
+  urlParams: URLSearchParams | null
 }
 
-const NavbarFooter: React.FC<NavBarFooter> = ({ translations, currentPage }) => {
+const NavbarFooter: React.FC<NavBarFooter> = ({ translations, currentPage, urlParams }) => {
+  const urlData = (urlParams: URLSearchParams | null): string => {
+    let data = ''
+    if (null === urlParams) {
+      return data
+    }
+
+    if (null !== urlParams.get('oob')) {
+      data = '/?oob=' + urlParams.get('oob')
+    }
+
+    if (null !== urlParams.get('_oob')) {
+      data = '/?_oob=' + urlParams.get('_oob')
+    }
+
+    return data
+  }
+
   return (
     <div className="lg:p-4 xl:p-4 2xl:p-4 lg:flex xl:flex 2xl:flex lg:flex-1 xl:flex-1 2xl:flex-1 order-1 lg:order-2 xl:order-2 2xl:order-2 lg:space-x-4 xl:space-x-4 2xl:space-x-4 items-center text-center">
       <nav className="justify-center w-[100%]">
         º
         <div className="flex justify-center h-10">
           <div className="flex text-sm lg:text-lg xl:text-lg 2xl:text-lg font-medium">
             <Link
-              href="/"
+              href={`/` + urlData(urlParams)}
               className={`px-3 py-2 text-center ${
                 currentPage === '/' ? 'text-hologram-color underline' : 'text-gray-500 hover:text-gray-700'
               }`}
             >
               {translations.nav_home}
             </Link>
             <Link
-              href="terms"
+              href={`terms` + urlData(urlParams)}
               className={`px-3 py-2 ${
                 currentPage === '/terms'
                   ? 'text-hologram-color underline'
@@ -33,7 +51,7 @@ const NavbarFooter: React.FC<NavBarFooter> = ({ translations, currentPage }) =>
               {translations.terms}
             </Link>
             <Link
-              href="privacity"
+              href={`privacity` + urlData(urlParams)}
               className={`px-3 py-2 ${
                 currentPage === '/privacity'
                   ? 'text-hologram-color underline'

diff --git a/app/app/components/navBars/navbarTopPage.tsx b/app/app/components/navBars/navbarTopPage.tsx
@@ -6,9 +6,27 @@ import { Translations } from '../utils'
 interface NavBarTopPage {
   translations: Translations
   titleSection: string
+  urlParams: URLSearchParams | null
 }
 
-const NavBarTopPage: React.FC<NavBarTopPage> = ({ translations, titleSection }) => {
+const NavBarTopPage: React.FC<NavBarTopPage> = ({ translations, titleSection, urlParams }) => {
+  const urlData = (urlParams: URLSearchParams | null): string => {
+    let data = ''
+    if (null === urlParams) {
+      return data
+    }
+
+    if (null !== urlParams.get('oob')) {
+      data = '/?oob=' + urlParams.get('oob')
+    }
+
+    if (null !== urlParams.get('_oob')) {
+      data = '/?_oob=' + urlParams.get('_oob')
+    }
+
+    return data
+  }
+
   return (
     <div className="lg:py-4 py-2 lg:flex lg:space-x-4 lg:flex-1 items-center text-center">
       <nav className="justify-center w-[100%]">
@@ -19,7 +37,10 @@ const NavBarTopPage: React.FC<NavBarTopPage> = ({ translations, titleSection })
             </p>
           </div>
           <div className="lg:flex-1  w-1/4 text-right lg:text-lg xl:text-lg 2xl:text-lg font-medium">
-            <Link href="/" className="px-3 py-2 underline text-gray-500 dark:text-gray-400">
+            <Link
+              href={`/` + urlData(urlParams)}
+              className="px-3 py-2 underline text-gray-500 dark:text-gray-400"
+            >
               {translations.nav_home}
             </Link>
           </div>

diff --git a/app/app/page.tsx b/app/app/page.tsx
@@ -136,7 +136,7 @@ export default function HomePage() {
 
         <SectionStandardsBuilt translations={translations ?? {}} />
 
-        <Footer translations={translations ?? {}} currentPage={pathname} />
+        <Footer translations={translations ?? {}} currentPage={pathname} urlParams={searchParams} />
 
         {/* 
         {deviceType === 'mobile' && (

diff --git a/app/app/privacity/page.tsx b/app/app/privacity/page.tsx
@@ -12,11 +12,14 @@ import { Translations } from '../components/utils'
 const Privacity = () => {
   const [translations, setTranslations] = useState<Translations>()
   const pathname: string = usePathname()
+  const [searchParams, setSearchParams] = useState<URLSearchParams | null>(null)
 
   useEffect(() => {
     const userLocale = navigator.language.startsWith('es') ? 'es' : 'en'
     const loadedTranslations = loadTranslations(userLocale)
     setTranslations(loadedTranslations)
+    const params = new URLSearchParams(window.location.search)
+    setSearchParams(params)
   }, [])
 
   return (
@@ -39,14 +42,15 @@ const Privacity = () => {
       <NavBarTopPage
         translations={translations ?? {}}
         titleSection={translations?.privacy ?? ''}
+        urlParams={searchParams}
       ></NavBarTopPage>
 
       <section className="my-2 pb-36">
         <p className="text-xl font-bold mb-4">{translations?.privacy_section_title}</p>
         <p className="text-xl text-justify">{translations?.privacy_section_text}</p>
       </section>
 
-      <Footer translations={translations ?? {}} currentPage={pathname}></Footer>
+      <Footer translations={translations ?? {}} currentPage={pathname} urlParams={searchParams}></Footer>
     </div>
   )
 }

diff --git a/app/app/terms/page.tsx b/app/app/terms/page.tsx
@@ -12,11 +12,14 @@ import { Translations } from '../components/utils'
 const Terms = () => {
   const [translations, setTranslations] = useState<Translations>()
   const pathname: string = usePathname()
+  const [searchParams, setSearchParams] = useState<URLSearchParams | null>(null)
 
   useEffect(() => {
     const userLocale = navigator.language.startsWith('es') ? 'es' : 'en'
     const loadedTranslations = loadTranslations(userLocale)
     setTranslations(loadedTranslations)
+    const params = new URLSearchParams(window.location.search)
+    setSearchParams(params)
   }, [])
 
   return (
@@ -39,6 +42,7 @@ const Terms = () => {
       <NavBarTopPage
         translations={translations ?? {}}
         titleSection={translations?.terms ?? ''}
+        urlParams={searchParams}
       ></NavBarTopPage>
 
       <section className="my-2">
@@ -82,7 +86,7 @@ const Terms = () => {
         <p className="text-xl text-justify mb-4">{translations?.terms_harm_text}</p>
       </section>
 
-      <Footer translations={translations ?? {}} currentPage={pathname}></Footer>
+      <Footer translations={translations ?? {}} currentPage={pathname} urlParams={searchParams}></Footer>
     </div>
   )
 }