fix news language

datasektionen · Jun 30, 2024 · e32c385 · e32c385
1 parent b55a4b2
commit e32c385
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -63,7 +63,7 @@ export const App = () => {
         <Routes>
           <Route path="/" exact element={<Frontpage lang={lang} />} />
           <Route path="/nyheter/:postId" element={<SingleNews lang={lang} />} />
-          <Route path="/nyheter" element={<News lang={lang} />} />
+          <Route path="/nyheter" element={<News lang={lang} location={location}/>} />
           <Route path="/*" element={<Default lang={lang} />} />
         </Routes>
       </LanguageContext.Provider>

diff --git a/src/components/Frontpage/index.js b/src/components/Frontpage/index.js
@@ -11,6 +11,7 @@ import styles from './Frontpage.module.css'
 import skold from './skold.svg'
 import EventCalendar, { getWeekTimeSpan } from '../EventCalendar/index.jsx';
 import './FixMe.css'
+import { addLangToUrl } from '../../utility/lang.js'
 
 const cx = classNames.bind(styles)
 
@@ -64,7 +65,7 @@ const Frontpage = ({ lang }) => {
               {({ content }) => (
                 <div className={cx('news')}>
                   {/* Title */}
-                  <Link to={lang === 'en' ? '/en/news?itemType=POST' : '/nyheter?itemType=POST'}>
+                  <Link to={addLangToUrl('/nyheter?itemType=POST', lang)}>
                     <h2>
                       <Translate>
                         <English>News</English>
@@ -79,7 +80,7 @@ const Frontpage = ({ lang }) => {
                       /* Single news item*/
                       <li key={item.id}>
                         {/* News item title */}
-                        <Link to={lang === 'en' ? `/en/news/${item.id}` : `/nyheter/${item.id}`}>
+                        <Link to={addLangToUrl(`/nyheter/${item.id}`, lang)}>
                           <h3>
                             <Translate>
                               <English>{item.titleEnglish}</English>
@@ -113,7 +114,7 @@ const Frontpage = ({ lang }) => {
                   {/* "More News" button at the bottom of the news section */}
                   <div className="text-center">
                     <Link
-                      to={lang === 'en' ? '/en/news?itemType=POST' : '/nyheter?itemType=POST'}
+                      to={addLangToUrl('/nyheter?itemType=POST', lang)}
                       className={cx('more-btn')}
                     >
                       <Translate>
@@ -132,7 +133,7 @@ const Frontpage = ({ lang }) => {
               {({ content }) => (
                 <div className={cx('news')}>
                   {/* Title */}
-                  <Link to={lang === 'en' ? '/en/news?itemType=EVENT' : '/nyheter?itemType=EVENT'}>
+                  <Link to={addLangToUrl('/nyheter?itemType=EVENT', lang)}>
                     <h2>
                       {/* TODO: does this really need a "Translate" component? */}
                       <Translate>
@@ -151,7 +152,7 @@ const Frontpage = ({ lang }) => {
                         /* Single event item */
                         <li key={item.id}>
                           {/* Event title */}
-                          <Link to={lang === 'en' ? `/en/news/${item.id}` : `/nyheter/${item.id}`}>
+                          <Link to={addLangToUrl(`/nyheter/${item.id}`, lang)}>
                             <h3>
                               <Translate>
                                 <English>{item.titleEnglish}</English>
@@ -196,7 +197,7 @@ const Frontpage = ({ lang }) => {
                     /* If there's ENOUGH content, show "More events" button */
                     content.length > 4 &&
                     <div className="text-center">
-                      <Link to={lang === 'en' ? '/en/news?itemType=EVENT' : '/nyheter?itemType=EVENT'} className={cx('more-btn')}>
+                      <Link to={addLangToUrl('/nyheter?itemType=EVENT', lang)} className={cx('more-btn')}>
                         <Translate>
                           <English>More Events »</English>
                           <Swedish>Mer Event »</Swedish>
@@ -214,7 +215,8 @@ const Frontpage = ({ lang }) => {
             <h2 id="sections_intro">Are you an international student?</h2>
             <div className="text-center" id="home_sections">
               <p>
-                Read this website in <a href="/en" className="inline_link">English</a>, or go to the website for META internationals and discover everything you need to know as an international student in the CS Chapter.
+                Read this website in <a href={addLangToUrl("/", "en")} className="inline_link">English</a>, 
+                or go to the website for META internationals and discover everything you need to know as an international student in the CS Chapter.
               </p>
               <p>
                 <a className="action" href="https://meta-internationals.mailchimpsites.com/">META Internationals website</a>
@@ -305,7 +307,7 @@ const Frontpage = ({ lang }) => {
                   <p><strong>Organization number</strong></p>
                   <p>802412 - 7709</p>
 
-                  <p><a className="action" href="/kontakt">Contact</a></p>
+                  <p><a className="action" href="/kontakt?lang=en">Contact</a></p>
                 </English>
               </Translate>
             </div>

diff --git a/src/components/News/SingleNews.js b/src/components/News/SingleNews.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import { Title } from 'react-head'
 import classNames from 'classnames/bind'
 import styles from './News.module.css'
@@ -101,8 +101,8 @@ const EventInfoSidebar = ({item, lang}) => // item CAN'T be undefined here
     </div>
   </div>
 
-export const SingleItem = ({ item, location, lang, match }) =>
-<Calypso type='item' search={'/' + match.params.postId}>
+export const SingleItem = ({ item, location, lang, postId }) =>
+<Calypso type='item' search={'/' + postId}>
   {(item) => // item CAN be undefined here
     <Fragment>
       <Title>
@@ -187,4 +187,9 @@ export const SingleItem = ({ item, location, lang, match }) =>
   }
 </Calypso>
 
-export default SingleItem
+export const SingleNews = ({lang}) => {
+  const { postId } = useParams()
+  return <SingleItem lang={lang} postId={postId} />
+}
+
+export default SingleNews
diff --git a/src/components/News/index.js b/src/components/News/index.js
@@ -16,7 +16,7 @@ if (global && !global.URLSearchParams) {
 
 const cx = classNames.bind(styles)
 
-export const News = ({ location, lang, match }) => {
+export const News = ({ location, lang }) => {
   const [searchParams,] = useSearchParams()
   const itemType = searchParams.get("itemType")
   const getSearch = page => {

diff --git a/src/utility/lang.js b/src/utility/lang.js
@@ -1,12 +1,13 @@
 import { useSearchParams } from "react-router-dom"
 
-// handles the case if the lang is undefinede
+// handles the case if the lang is undefined, and if there already are get parameters
 export const addLangToUrl = (url, lang) => {
-  return lang ? url + "?lang=" + lang : url
+  const delimiter = url.includes('?') ? '&' : '?';
+  return lang ? `${url}${delimiter}lang=${lang}` : url
 }
 
 // fetches value of the "lang" get param. Can be null
 export const useLang = () => {
-  const [searchParams, ] = useSearchParams()
+  const [searchParams,] = useSearchParams()
   return searchParams.get("lang")
 }