Filtering on magazine tags on the /no/magasin page goes to Norwegian …

…homepage instead of filtering #2687
equinor · Dec 17, 2024 · c7e3217 · c7e3217
1 parent 737dbcd
commit c7e3217
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 10 deletions.
diff --git a/web/pageComponents/shared/MagazineTagBar.tsx b/web/pageComponents/shared/MagazineTagBar.tsx
@@ -1,7 +1,104 @@
+// import { AnchorHTMLAttributes, forwardRef } from 'react'
+// import styled from 'styled-components'
+// import { Link } from '@core/Link'
+// import { useIntl } from 'react-intl'
+
+// export type MagazineTagBarProps = {
+//   tags: TagLink[]
+//   href: string
+//   onClick?: (value: string) => void
+//   defaultActive: boolean
+// }
+
+// export type TagLink = {
+//   label: string
+//   active: boolean
+// } & AnchorHTMLAttributes<HTMLAnchorElement>
+
+// const Wrapper = styled.div`
+//   display: flex;
+//   align-content: center;
+//   border-top: 1px solid var(--grey-30);
+//   border-bottom: 1px solid var(--grey-30);
+// `
+// const TagWrapper = styled.div`
+//   display: flex;
+//   flex-wrap: nowrap;
+//   margin: auto;
+//   overflow-x: scroll;
+//   white-space: nowrap;
+//   padding: var(--space-large);
+//   grid-gap: var(--space-xLarge);
+
+//   ::-webkit-scrollbar {
+//     display: none;
+//   }
+
+//   @media (min-width: 1024px) {
+//     flex-wrap: wrap;
+//     padding: var(--space-large) var(--space-3xLarge);
+//     overflow: overlay;
+//   }
+// `
+// const allTagLink: TagLink = {
+//   href: '#',
+//   label: 'All',
+//   active: false,
+// }
+
+// const MagazineTagBar = forwardRef<HTMLDivElement, MagazineTagBarProps>(function MagazineTagBar(
+//   { tags, onClick, href, defaultActive = false },
+//   ref,
+// ) {
+//   const intl = useIntl()
+//   allTagLink.label = intl.formatMessage({ id: 'magazine_tag_filter_all', defaultMessage: 'ALL' })
+//   allTagLink.active = defaultActive
+//   const linkClassNames = `inline-block text-base lg:text-xs relative no-underline hover:font-bold before:block before:content-[attr(data-title)] before:font-bold before:h-0 before:overflow-hidden before:invisible after:content-[''] after:absolute after:border-l-2 after:border-energy-red-100 after:right-[calc(var(--space-xLarge)_*-0.5)] after:h-full last:after:hidden`
+//   return (
+//     <Wrapper ref={ref} className="mb-8 mx-auto">
+//       <TagWrapper>
+//         <Link
+//           href={href}
+//           className={`${allTagLink.active ? 'font-bold' : 'font-normal'} ${linkClassNames}`}
+//           data-title={allTagLink.label}
+//           onClick={(event) => {
+//             if (onClick) {
+//               event.preventDefault()
+//               onClick('ALL')
+//               allTagLink.active = true
+//             }
+//           }}
+//         >
+//           {allTagLink.label}
+//         </Link>
+//         {tags.map((it: TagLink) => (
+//           <Link
+//             className={`${it.active ? 'font-bold' : 'font-normal'} ${linkClassNames}`}
+//             href={`${href}${`?tag=${it.label}`}`}
+//             key={`key_${it.label}`}
+//             data-title={it.label}
+//             onClick={(event) => {
+//               if (onClick) {
+//                 event.preventDefault()
+//                 onClick(it.label)
+//                 allTagLink.active = false
+//               }
+//             }}
+//           >
+//             {it.label}
+//           </Link>
+//         ))}
+//       </TagWrapper>
+//     </Wrapper>
+//   )
+// })
+
+// export default MagazineTagBar
 import { AnchorHTMLAttributes, forwardRef } from 'react'
 import styled from 'styled-components'
 import { Link } from '@core/Link'
 import { useIntl } from 'react-intl'
+import { useRouter } from 'next/router'
 
 export type MagazineTagBarProps = {
   tags: TagLink[]
@@ -51,14 +148,20 @@ const MagazineTagBar = forwardRef<HTMLDivElement, MagazineTagBarProps>(function
   ref,
 ) {
   const intl = useIntl()
+  const router = useRouter()
   allTagLink.label = intl.formatMessage({ id: 'magazine_tag_filter_all', defaultMessage: 'ALL' })
   allTagLink.active = defaultActive
+
+  const localizedHref = (baseHref: string) => 
+    router.locale === router.defaultLocale ? baseHref : `/${router.locale}${baseHref}`
+
   const linkClassNames = `inline-block text-base lg:text-xs relative no-underline hover:font-bold before:block before:content-[attr(data-title)] before:font-bold before:h-0 before:overflow-hidden before:invisible after:content-[''] after:absolute after:border-l-2 after:border-energy-red-100 after:right-[calc(var(--space-xLarge)_*-0.5)] after:h-full last:after:hidden`
+
   return (
     <Wrapper ref={ref} className="mb-8 mx-auto">
       <TagWrapper>
         <Link
-          href={href}
+          href={localizedHref(href)}
           className={`${allTagLink.active ? 'font-bold' : 'font-normal'} ${linkClassNames}`}
           data-title={allTagLink.label}
           onClick={(event) => {
@@ -74,7 +177,7 @@ const MagazineTagBar = forwardRef<HTMLDivElement, MagazineTagBarProps>(function
         {tags.map((it: TagLink) => (
           <Link
             className={`${it.active ? 'font-bold' : 'font-normal'} ${linkClassNames}`}
-            href={`${href}${`?tag=${it.label}`}`}
+            href={localizedHref(`${href}?tag=${it.label}`)}
             key={`key_${it.label}`}
             data-title={it.label}
             onClick={(event) => {

diff --git a/web/templates/magazine/MagazinePage.tsx b/web/templates/magazine/MagazinePage.tsx
@@ -14,29 +14,33 @@ type MagazinePageProps = {
 
 const MagazinePage = ({ data }: MagazinePageProps) => {
   const router = useRouter()
-  const parentSlug =
-    (router.locale !== router.defaultLocale ? `/${router.locale}` : '') +
-    router.asPath.substring(router.asPath.indexOf('/'), router.asPath.lastIndexOf('/'))
+  const parentSlug = router.locale === router.defaultLocale 
+  ? router.asPath.split('?')[0]
+  : `/${router.locale}${router.asPath.split('?')[0]}`;
 
   const { hideFooterComponent, footerComponent, tags } = data
 
   const titleStyles = useSharedTitleStyles(data?.hero?.type, data?.content?.[0])
 
   const handleClickTag = (tagValue: string) => {
+    const currentPath = router.locale === router.defaultLocale
+      ? router.asPath.split('?')[0]
+      : `/${router.locale}${router.asPath.split('?')[0]}`;
+
     if (tagValue === 'ALL') {
       delete router.query.filter
       router.push({
-        pathname: parentSlug,
-      })
+        pathname: currentPath,
+      });
     } else {
       router.push({
-        pathname: parentSlug,
+        pathname: currentPath,
         query: {
           tag: tagValue,
         },
-      })
+      });
     }
-  }
+  };  
 
   return (
     <>