From c7e3217e58a7dc5ede241bba394a439ef18ab812 Mon Sep 17 00:00:00 2001 From: VarunVAshrit Date: Tue, 17 Dec 2024 12:16:38 +0530 Subject: [PATCH 1/6] Filtering on magazine tags on the /no/magasin page goes to Norwegian homepage instead of filtering #2687 --- web/pageComponents/shared/MagazineTagBar.tsx | 107 ++++++++++++++++++- web/templates/magazine/MagazinePage.tsx | 20 ++-- 2 files changed, 117 insertions(+), 10 deletions(-) diff --git a/web/pageComponents/shared/MagazineTagBar.tsx b/web/pageComponents/shared/MagazineTagBar.tsx index 75cc6251e..ea05c7183 100644 --- 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 + +// 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(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 ( +// +// +// { +// if (onClick) { +// event.preventDefault() +// onClick('ALL') +// allTagLink.active = true +// } +// }} +// > +// {allTagLink.label} +// +// {tags.map((it: TagLink) => ( +// { +// if (onClick) { +// event.preventDefault() +// onClick(it.label) +// allTagLink.active = false +// } +// }} +// > +// {it.label} +// +// ))} +// +// +// ) +// }) + +// 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(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 ( { @@ -74,7 +177,7 @@ const MagazineTagBar = forwardRef(function {tags.map((it: TagLink) => ( { diff --git a/web/templates/magazine/MagazinePage.tsx b/web/templates/magazine/MagazinePage.tsx index d91743d19..9f2fa81a0 100644 --- 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 ( <> From 27daac567dbe6ba913965df70e50309b8385a689 Mon Sep 17 00:00:00 2001 From: VarunVAshrit Date: Tue, 17 Dec 2024 12:19:44 +0530 Subject: [PATCH 2/6] Removed commented code --- web/pageComponents/shared/MagazineTagBar.tsx | 96 -------------------- 1 file changed, 96 deletions(-) diff --git a/web/pageComponents/shared/MagazineTagBar.tsx b/web/pageComponents/shared/MagazineTagBar.tsx index ea05c7183..f9c2118bd 100644 --- a/web/pageComponents/shared/MagazineTagBar.tsx +++ b/web/pageComponents/shared/MagazineTagBar.tsx @@ -1,99 +1,3 @@ -// 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 - -// 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(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 ( -// -// -// { -// if (onClick) { -// event.preventDefault() -// onClick('ALL') -// allTagLink.active = true -// } -// }} -// > -// {allTagLink.label} -// -// {tags.map((it: TagLink) => ( -// { -// if (onClick) { -// event.preventDefault() -// onClick(it.label) -// allTagLink.active = false -// } -// }} -// > -// {it.label} -// -// ))} -// -// -// ) -// }) - -// export default MagazineTagBar import { AnchorHTMLAttributes, forwardRef } from 'react' import styled from 'styled-components' import { Link } from '@core/Link' From 0d1ee53a22bbfe685ca33239acecb963343354e1 Mon Sep 17 00:00:00 2001 From: VarunVAshrit Date: Wed, 18 Dec 2024 16:40:36 +0530 Subject: [PATCH 3/6] Revert "Removed commented code" This reverts commit 27daac567dbe6ba913965df70e50309b8385a689. --- web/pageComponents/shared/MagazineTagBar.tsx | 96 ++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/web/pageComponents/shared/MagazineTagBar.tsx b/web/pageComponents/shared/MagazineTagBar.tsx index f9c2118bd..ea05c7183 100644 --- a/web/pageComponents/shared/MagazineTagBar.tsx +++ b/web/pageComponents/shared/MagazineTagBar.tsx @@ -1,3 +1,99 @@ +// 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 + +// 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(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 ( +// +// +// { +// if (onClick) { +// event.preventDefault() +// onClick('ALL') +// allTagLink.active = true +// } +// }} +// > +// {allTagLink.label} +// +// {tags.map((it: TagLink) => ( +// { +// if (onClick) { +// event.preventDefault() +// onClick(it.label) +// allTagLink.active = false +// } +// }} +// > +// {it.label} +// +// ))} +// +// +// ) +// }) + +// export default MagazineTagBar import { AnchorHTMLAttributes, forwardRef } from 'react' import styled from 'styled-components' import { Link } from '@core/Link' From 4aa48785be9ab95934651f1d0a919d15a80f5e08 Mon Sep 17 00:00:00 2001 From: VarunVAshrit Date: Wed, 18 Dec 2024 16:41:02 +0530 Subject: [PATCH 4/6] 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 - -// 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(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 ( -// -// -// { -// if (onClick) { -// event.preventDefault() -// onClick('ALL') -// allTagLink.active = true -// } -// }} -// > -// {allTagLink.label} -// -// {tags.map((it: TagLink) => ( -// { -// if (onClick) { -// event.preventDefault() -// onClick(it.label) -// allTagLink.active = false -// } -// }} -// > -// {it.label} -// -// ))} -// -// -// ) -// }) - -// 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(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 ( { @@ -177,7 +74,7 @@ const MagazineTagBar = forwardRef(function {tags.map((it: TagLink) => ( { 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 ( <> From 27f2846221ec6afcef49bc1ffacaa6ea0a54685e Mon Sep 17 00:00:00 2001 From: VarunVAshrit Date: Fri, 20 Dec 2024 16:55:23 +0530 Subject: [PATCH 5/6] :bug:Filtering on magazine tags on the /no/magasin page --- web/templates/magazine/Magazineroom.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/templates/magazine/Magazineroom.tsx b/web/templates/magazine/Magazineroom.tsx index 71c9e6285..0ae2f9b64 100644 --- a/web/templates/magazine/Magazineroom.tsx +++ b/web/templates/magazine/Magazineroom.tsx @@ -58,11 +58,11 @@ const MagazineRoom = ({ pageData, slug }: MagazineIndexTemplateProps) => { if (tagValue === 'ALL') { delete router.query.filter router.push({ - pathname: parentSlug, + pathname: router.pathname, }) } else { router.push({ - pathname: parentSlug, + pathname: `${router.query.locale ? `/${router.query.locale}` : ''}${router.pathname}`, query: { tag: tagValue, }, From e11fd181b1325143af70b8e6907c17f5a3a3dc13 Mon Sep 17 00:00:00 2001 From: VarunVAshrit Date: Fri, 20 Dec 2024 17:27:25 +0530 Subject: [PATCH 6/6] :bug: Changed parentSlug --- web/templates/magazine/Magazineroom.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/web/templates/magazine/Magazineroom.tsx b/web/templates/magazine/Magazineroom.tsx index 0ae2f9b64..fb9503282 100644 --- a/web/templates/magazine/Magazineroom.tsx +++ b/web/templates/magazine/Magazineroom.tsx @@ -35,9 +35,7 @@ const MagazineRoom = ({ pageData, slug }: MagazineIndexTemplateProps) => { const resultsRef = useRef(null) const [isLoading, setIsLoading] = useState(false) 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.locale}` : ''}${router.pathname}` const magazineList = useMemo(() => magazineArticles, [magazineArticles]) const pagedList = useMemo(() => chunkArray(magazineList, 12), [magazineList]) @@ -58,11 +56,11 @@ const MagazineRoom = ({ pageData, slug }: MagazineIndexTemplateProps) => { if (tagValue === 'ALL') { delete router.query.filter router.push({ - pathname: router.pathname, + pathname: parentSlug, }) } else { router.push({ - pathname: `${router.query.locale ? `/${router.query.locale}` : ''}${router.pathname}`, + pathname: parentSlug, query: { tag: tagValue, },