From 4aa48785be9ab95934651f1d0a919d15a80f5e08 Mon Sep 17 00:00:00 2001
From: VarunVAshrit <vaash@equinor.com>
Date: Wed, 18 Dec 2024 16:41:02 +0530
Subject: [PATCH] Revert "Filtering on magazine tags on the /no/magasin page
 goes to Norwegian homepage instead of filtering #2687"

This reverts commit c7e3217e58a7dc5ede241bba394a439ef18ab812.
---
 web/pageComponents/shared/MagazineTagBar.tsx | 107 +------------------
 web/templates/magazine/MagazinePage.tsx      |  20 ++--
 2 files changed, 10 insertions(+), 117 deletions(-)

diff --git a/web/pageComponents/shared/MagazineTagBar.tsx b/web/pageComponents/shared/MagazineTagBar.tsx
index ea05c7183..75cc6251e 100644
--- a/web/pageComponents/shared/MagazineTagBar.tsx
+++ b/web/pageComponents/shared/MagazineTagBar.tsx
@@ -1,104 +1,7 @@
-// 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[]
@@ -148,20 +51,14 @@ 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={localizedHref(href)}
+          href={href}
           className={`${allTagLink.active ? 'font-bold' : 'font-normal'} ${linkClassNames}`}
           data-title={allTagLink.label}
           onClick={(event) => {
@@ -177,7 +74,7 @@ const MagazineTagBar = forwardRef<HTMLDivElement, MagazineTagBarProps>(function
         {tags.map((it: TagLink) => (
           <Link
             className={`${it.active ? 'font-bold' : 'font-normal'} ${linkClassNames}`}
-            href={localizedHref(`${href}?tag=${it.label}`)}
+            href={`${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
index 9f2fa81a0..d91743d19 100644
--- a/web/templates/magazine/MagazinePage.tsx
+++ b/web/templates/magazine/MagazinePage.tsx
@@ -14,33 +14,29 @@ type MagazinePageProps = {
 
 const MagazinePage = ({ data }: MagazinePageProps) => {
   const router = useRouter()
-  const parentSlug = router.locale === router.defaultLocale 
-  ? router.asPath.split('?')[0]
-  : `/${router.locale}${router.asPath.split('?')[0]}`;
+  const parentSlug =
+    (router.locale !== router.defaultLocale ? `/${router.locale}` : '') +
+    router.asPath.substring(router.asPath.indexOf('/'), router.asPath.lastIndexOf('/'))
 
   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: currentPath,
-      });
+        pathname: parentSlug,
+      })
     } else {
       router.push({
-        pathname: currentPath,
+        pathname: parentSlug,
         query: {
           tag: tagValue,
         },
-      });
+      })
     }
-  };  
+  }
 
   return (
     <>