From 5cd68cae44f0b7770e991e9231ec54413c6d21e5 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 10 Mar 2023 09:10:49 +0800
Subject: [PATCH] When clicking the logo button to go back, use filter states

---
 .../elements/images/OmnivoreFullLogo.tsx      | 106 +++++++++---------
 .../elements/images/OmnivoreLogoBase.tsx      |  42 +++++++
 .../elements/images/OmnivoreNameLogo.tsx      |  34 ++----
 .../templates/reader/ReaderHeader.tsx         |   2 +-
 4 files changed, 105 insertions(+), 79 deletions(-)
 create mode 100644 packages/web/components/elements/images/OmnivoreLogoBase.tsx

diff --git a/packages/web/components/elements/images/OmnivoreFullLogo.tsx b/packages/web/components/elements/images/OmnivoreFullLogo.tsx
index 7dc9d805a..5aa52ff11 100644
--- a/packages/web/components/elements/images/OmnivoreFullLogo.tsx
+++ b/packages/web/components/elements/images/OmnivoreFullLogo.tsx
@@ -1,5 +1,8 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import { config } from '../../tokens/stitches.config'
+import { OmnivoreLogoBase } from './OmnivoreLogoBase'
 
 export type OmnivoreFullLogoProps = {
   color?: string
@@ -9,64 +12,55 @@ export type OmnivoreFullLogoProps = {
 
 export function OmnivoreFullLogo(props: OmnivoreFullLogoProps): JSX.Element {
   const fillColor = props.color || config.theme.colors.graySolid
-  const href = props.href || '/home'
 
   return (
-    <Link passHref href={href}>
-      <a
-        style={{
-          textDecoration: 'none',
-          display: 'flex',
-          alignItems: 'center',
-        }}
+    <OmnivoreLogoBase {...props}>
+      <svg
+        width="129"
+        height="26"
+        viewBox="0 0 129 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <svg
-          width="129"
-          height="26"
-          viewBox="0 0 129 26"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M43.4131 13.2862C43.4131 9.75626 41.2214 7.74365 38.3606 7.74365C35.4839 7.74365 33.308 9.75626 33.308 13.2862C33.308 16.8004 35.4839 18.8288 38.3606 18.8288C41.2214 18.8288 43.4131 16.8162 43.4131 13.2862ZM41.1002 13.2862C41.1002 15.5728 40.0149 16.8109 38.3606 16.8109C36.701 16.8109 35.6209 15.5728 35.6209 13.2862C35.6209 10.9996 36.701 9.76153 38.3606 9.76153C40.0149 9.76153 41.1002 10.9996 41.1002 13.2862Z"
-            fill={fillColor}
-          />
-          <path
-            d="M47.3285 7.89117V18.6813H49.5413V11.6319H49.6309L52.4232 18.6286H53.9301L56.7224 11.6582H56.812V18.6813H59.0248V7.89117H56.2114L53.2399 15.1408H53.1134L50.1419 7.89117H47.3285Z"
-            fill={fillColor}
-          />
-          <path
-            d="M72.1549 7.89117H69.8842V14.6771H69.7893L65.1319 7.89117H63.1298V18.6813H65.4111V11.89H65.4901L70.1845 18.6813H72.1549V7.89117Z"
-            fill={fillColor}
-          />
-          <path
-            d="M78.5465 7.89117H76.2652V18.6813H78.5465V7.89117Z"
-            fill={fillColor}
-          />
-          <path
-            d="M84.5983 7.89117H82.0641L85.789 18.6813H88.7289L92.4485 7.89117H89.9196L87.3063 16.0891H87.2062L84.5983 7.89117Z"
-            fill={fillColor}
-          />
-          <path
-            d="M105.28 13.2862C105.28 9.75626 103.088 7.74365 100.227 7.74365C97.3504 7.74365 95.1745 9.75626 95.1745 13.2862C95.1745 16.8004 97.3504 18.8288 100.227 18.8288C103.088 18.8288 105.28 16.8162 105.28 13.2862ZM102.967 13.2862C102.967 15.5728 101.881 16.8109 100.227 16.8109C98.5675 16.8109 97.4874 15.5728 97.4874 13.2862C97.4874 10.9996 98.5675 9.76153 100.227 9.76153C101.881 9.76153 102.967 10.9996 102.967 13.2862Z"
-            fill={fillColor}
-          />
-          <path
-            d="M109.195 18.6813H111.476V14.8563H113.141L115.185 18.6813H117.704L115.412 14.4875C116.64 13.9606 117.319 12.8911 117.319 11.4159C117.319 9.27155 115.902 7.89117 113.452 7.89117H109.195V18.6813ZM111.476 13.0228V9.75626H113.015C114.332 9.75626 114.969 10.3411 114.969 11.4159C114.969 12.4854 114.332 13.0228 113.025 13.0228H111.476Z"
-            fill={fillColor}
-          />
-          <path
-            d="M121.157 18.6813H128.449V16.8004H123.438V14.224H128.053V12.3431H123.438V9.77206H128.427V7.89117H121.157V18.6813Z"
-            fill={fillColor}
-          />
-          <path
-            d="M8.42285 17.9061V10.5447C8.42285 9.91527 9.16173 9.55951 9.65432 9.99737L11.9257 13.3087C12.3909 13.6918 13.0477 13.6918 13.5129 13.3087L15.7296 10.0247C16.2222 9.61424 16.961 9.94263 16.961 10.5721V14.458C16.961 16.3463 18.2199 17.8788 20.1081 17.8788H20.1629C21.7775 17.8788 23.1731 16.7841 23.5563 15.2243C23.7478 14.4033 23.912 13.5549 23.912 12.8982C23.8847 6.46715 18.4388 1.596 11.9257 2.03385C6.39776 2.41698 1.9371 6.87764 1.55397 12.4056C1.11612 18.9187 6.26093 24.3645 12.7193 24.3645"
-            stroke={fillColor}
-            strokeWidth="2.18182"
-            strokeMiterlimit="10"
-          />
-        </svg>
-      </a>
-    </Link>
+        <path
+          d="M43.4131 13.2862C43.4131 9.75626 41.2214 7.74365 38.3606 7.74365C35.4839 7.74365 33.308 9.75626 33.308 13.2862C33.308 16.8004 35.4839 18.8288 38.3606 18.8288C41.2214 18.8288 43.4131 16.8162 43.4131 13.2862ZM41.1002 13.2862C41.1002 15.5728 40.0149 16.8109 38.3606 16.8109C36.701 16.8109 35.6209 15.5728 35.6209 13.2862C35.6209 10.9996 36.701 9.76153 38.3606 9.76153C40.0149 9.76153 41.1002 10.9996 41.1002 13.2862Z"
+          fill={fillColor}
+        />
+        <path
+          d="M47.3285 7.89117V18.6813H49.5413V11.6319H49.6309L52.4232 18.6286H53.9301L56.7224 11.6582H56.812V18.6813H59.0248V7.89117H56.2114L53.2399 15.1408H53.1134L50.1419 7.89117H47.3285Z"
+          fill={fillColor}
+        />
+        <path
+          d="M72.1549 7.89117H69.8842V14.6771H69.7893L65.1319 7.89117H63.1298V18.6813H65.4111V11.89H65.4901L70.1845 18.6813H72.1549V7.89117Z"
+          fill={fillColor}
+        />
+        <path
+          d="M78.5465 7.89117H76.2652V18.6813H78.5465V7.89117Z"
+          fill={fillColor}
+        />
+        <path
+          d="M84.5983 7.89117H82.0641L85.789 18.6813H88.7289L92.4485 7.89117H89.9196L87.3063 16.0891H87.2062L84.5983 7.89117Z"
+          fill={fillColor}
+        />
+        <path
+          d="M105.28 13.2862C105.28 9.75626 103.088 7.74365 100.227 7.74365C97.3504 7.74365 95.1745 9.75626 95.1745 13.2862C95.1745 16.8004 97.3504 18.8288 100.227 18.8288C103.088 18.8288 105.28 16.8162 105.28 13.2862ZM102.967 13.2862C102.967 15.5728 101.881 16.8109 100.227 16.8109C98.5675 16.8109 97.4874 15.5728 97.4874 13.2862C97.4874 10.9996 98.5675 9.76153 100.227 9.76153C101.881 9.76153 102.967 10.9996 102.967 13.2862Z"
+          fill={fillColor}
+        />
+        <path
+          d="M109.195 18.6813H111.476V14.8563H113.141L115.185 18.6813H117.704L115.412 14.4875C116.64 13.9606 117.319 12.8911 117.319 11.4159C117.319 9.27155 115.902 7.89117 113.452 7.89117H109.195V18.6813ZM111.476 13.0228V9.75626H113.015C114.332 9.75626 114.969 10.3411 114.969 11.4159C114.969 12.4854 114.332 13.0228 113.025 13.0228H111.476Z"
+          fill={fillColor}
+        />
+        <path
+          d="M121.157 18.6813H128.449V16.8004H123.438V14.224H128.053V12.3431H123.438V9.77206H128.427V7.89117H121.157V18.6813Z"
+          fill={fillColor}
+        />
+        <path
+          d="M8.42285 17.9061V10.5447C8.42285 9.91527 9.16173 9.55951 9.65432 9.99737L11.9257 13.3087C12.3909 13.6918 13.0477 13.6918 13.5129 13.3087L15.7296 10.0247C16.2222 9.61424 16.961 9.94263 16.961 10.5721V14.458C16.961 16.3463 18.2199 17.8788 20.1081 17.8788H20.1629C21.7775 17.8788 23.1731 16.7841 23.5563 15.2243C23.7478 14.4033 23.912 13.5549 23.912 12.8982C23.8847 6.46715 18.4388 1.596 11.9257 2.03385C6.39776 2.41698 1.9371 6.87764 1.55397 12.4056C1.11612 18.9187 6.26093 24.3645 12.7193 24.3645"
+          stroke={fillColor}
+          strokeWidth="2.18182"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </OmnivoreLogoBase>
   )
 }
diff --git a/packages/web/components/elements/images/OmnivoreLogoBase.tsx b/packages/web/components/elements/images/OmnivoreLogoBase.tsx
new file mode 100644
index 000000000..9b0c7215d
--- /dev/null
+++ b/packages/web/components/elements/images/OmnivoreLogoBase.tsx
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { ReactChildren } from 'react'
+import { config } from '../../tokens/stitches.config'
+
+export type OmnivoreLogoBaseProps = {
+  color?: string
+  href?: string
+  showTitle?: boolean
+  children: React.ReactNode
+}
+
+export function OmnivoreLogoBase(props: OmnivoreLogoBaseProps): JSX.Element {
+  const href = props.href || '/home'
+  const router = useRouter()
+
+  return (
+    <Link passHref href={href}>
+      <a
+        style={{
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+        onClick={(event) => {
+          const query = window.sessionStorage.getItem('q')
+          if (query) {
+            console.log(
+              'going to: ',
+              window.sessionStorage.getItem('q'),
+              props.href
+            )
+            router.push(`/home?${query}`)
+            event.preventDefault()
+          }
+        }}
+      >
+        {props.children}
+      </a>
+    </Link>
+  )
+}
diff --git a/packages/web/components/elements/images/OmnivoreNameLogo.tsx b/packages/web/components/elements/images/OmnivoreNameLogo.tsx
index 06e371390..cb43e1ab5 100644
--- a/packages/web/components/elements/images/OmnivoreNameLogo.tsx
+++ b/packages/web/components/elements/images/OmnivoreNameLogo.tsx
@@ -1,8 +1,7 @@
 import { config } from '../../tokens/stitches.config'
 import Image from 'next/image'
 import { StyledText } from '../../elements/StyledText'
-import Link from 'next/link'
-import { SpanBox } from '../LayoutPrimitives'
+import { OmnivoreLogoBase } from './OmnivoreLogoBase'
 
 export function OmnivoreNameLogoImage(): JSX.Element {
   return (
@@ -66,27 +65,18 @@ export type OmnivoreNameLogoProps = {
 
 export function OmnivoreNameLogo(props: OmnivoreNameLogoProps): JSX.Element {
   const fillColor = props.color || config.theme.colors.graySolid
-  const href = props.href || '/home'
 
   return (
-    <Link passHref href={href}>
-      <a
-        style={{
-          textDecoration: 'none',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <OmnivoreLogoIcon size={27} strokeColor={fillColor}></OmnivoreLogoIcon>
-        {props.showTitle && (
-          <StyledText
-            style="logoTitle"
-            css={{ color: fillColor, paddingLeft: '12px' }}
-          >
-            Omnivore
-          </StyledText>
-        )}
-      </a>
-    </Link>
+    <OmnivoreLogoBase {...props}>
+      <OmnivoreLogoIcon size={27} strokeColor={fillColor}></OmnivoreLogoIcon>
+      {props.showTitle && (
+        <StyledText
+          style="logoTitle"
+          css={{ color: fillColor, paddingLeft: '12px' }}
+        >
+          Omnivore
+        </StyledText>
+      )}
+    </OmnivoreLogoBase>
   )
 }
diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index e14e3a46c..e3345535f 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { DotsThreeOutline, TextAa } from 'phosphor-react'
 import { PrimaryDropdown } from '../PrimaryDropdown'