fix: fix app failure when clicking 'Account +' on mobile (#2240)

* Also fixes an issue with nested anchor tags Fixes #2223
web3-storage · Mar 10, 2023 · 34e64ea · 34e64ea
1 parent f0e8759
commit 34e64ea
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 28 deletions.
diff --git a/packages/website/components/accordionblock/accordionblock.js b/packages/website/components/accordionblock/accordionblock.js
@@ -10,7 +10,7 @@ export default function AccordionBlock({ block }) {
     <div className="block accordion-block">
       <ZeroAccordion multiple={block.multiple} toggleOnLoad={block.toggleOnLoad} toggleAllOption={true}>
         {block.sections.map((section, index) => (
-          <ZeroAccordionSection key={`accordion_section-${index}`} slug={section.id}>
+          <ZeroAccordionSection key={`accordion_section-${index}`} slug={section.id} trackingId={section.heading}>
             <ZeroAccordionSection.Header>
               <div className="accordion-chevron">
                 <Chevron />

diff --git a/packages/website/components/accordionsingle/accordionsingle.js b/packages/website/components/accordionsingle/accordionsingle.js
@@ -9,7 +9,7 @@ export default function AccordionSingle({ heading, children }) {
   return (
     <div className="block accordion-block">
       <ZeroAccordion multiple={false} toggleOnLoad={false} toggleAllOption={false}>
-        <ZeroAccordionSection>
+        <ZeroAccordionSection trackingId={heading}>
           <ZeroAccordionSection.Header>
             <div className="accordion-chevron">
               <Chevron />

diff --git a/packages/website/components/navigation/navigation.js b/packages/website/components/navigation/navigation.js
@@ -66,14 +66,6 @@ export default function Navigation({ breadcrumbs, isProductApp }) {
     }
   }, [router, isMenuOpen]);
 
-  const handleKeySelect = useCallback(
-    (e, url) => {
-      onLinkClick(e);
-      router.push(url);
-    },
-    [router, onLinkClick]
-  );
-
   // ======================================================= Templates [Buttons]
   const getAccountMenu = () => {
     if (account && account.links) {
@@ -253,7 +245,7 @@ export default function Navigation({ breadcrumbs, isProductApp }) {
                   <Fragment key={item.text}>
                     {item.links ? (
                       <ZeroAccordion multiple={false} toggleOnLoad={false} toggleAllOption={false}>
-                        <ZeroAccordionSection disabled={!Array.isArray(item.links)}>
+                        <ZeroAccordionSection disabled={!Array.isArray(item.links)} trackingId={item.text}>
                           <ZeroAccordionSection.Header>
                             <div className="nav-item-heading">{item.text}</div>
                           </ZeroAccordionSection.Header>
@@ -288,7 +280,7 @@ export default function Navigation({ breadcrumbs, isProductApp }) {
 
                 {isLoggedIn && account && (
                   <ZeroAccordion multiple={false} toggleOnLoad={false} toggleAllOption={false}>
-                    <ZeroAccordionSection disabled={!Array.isArray(account.links)}>
+                    <ZeroAccordionSection disabled={!Array.isArray(account.links)} trackingId={account.text}>
                       <ZeroAccordionSection.Header>
                         <div className="nav-item-heading">{account.text}</div>
                       </ZeroAccordionSection.Header>
@@ -306,15 +298,8 @@ export default function Navigation({ breadcrumbs, isProductApp }) {
                                   {link.text}
                                 </button>
                               ) : (
-                                <Link href={link.url} key={link.text}>
-                                  <a
-                                    href={link.url}
-                                    className="nav-sublink"
-                                    onClick={onLinkClick}
-                                    onKeyPress={e => handleKeySelect(e, link.url)}
-                                  >
-                                    {link.text}
-                                  </a>
+                                <Link href={link.url} key={link.text} onClick={onLinkClick} className="nav-sublink">
+                                  {link.text}
                                 </Link>
                               )
                             )}

diff --git a/packages/website/modules/zero/components/accordion/accordionSection.js b/packages/website/modules/zero/components/accordion/accordionSection.js
@@ -33,7 +33,7 @@ const generateUID = () => {
  *
  * @param { any } props TODO: Define props
  */
-function AccordionSection({ active, toggle, toggleOnLoad, reportUID, slug, disabled, children }) {
+function AccordionSection({ active, toggle, toggleOnLoad, reportUID, slug, disabled, children, trackingId }) {
   const [uid, setUID] = useState(generateUID);
   const [openOnNavigate, setopenOnNavigate] = useState(false);
   const router = useRouter();
@@ -46,13 +46,10 @@ function AccordionSection({ active, toggle, toggleOnLoad, reportUID, slug, disab
   }, [reportUID, uid]);
 
   useEffect(() => {
-    if (open && header) {
-      const headerLabel = header.props.children.find(child => {
-        return child.props.className === 'accordion-header-text';
-      });
-      saEvent('accordion_opened', { title: headerLabel.props.children });
+    if (open && trackingId) {
+      saEvent('accordion_opened', { title: trackingId });
     }
-  }, [header, open]);
+  }, [open, trackingId]);
 
   useEffect(() => {
     if (!!slug && !!router.query.section && router.query.section === slug) {