Merge pull request #1915 from sportstimes/task/site-selector-locale-all

Task/site selector locale all

src/components/SiteSelector/SiteSelector.tsx

@@ -1,75 +1,81 @@
-"use client"
+'use client';
 
-import React, {Component} from "react";
-import {useTranslations} from 'next-intl';
-import { useRouter, useParams} from 'next/navigation'
-import {usePlausible} from "next-plausible";
+import React, { Component } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { usePlausible } from 'next-plausible';
+import { useLocale, useTranslations } from 'next-intl';
 
 interface SiteConfig {
-	name: string;
-	siteKey: string;
-	url: string;
-	calenderCDN: string;
-	supportsEmailReminders: boolean;
-	supportsWebPush: boolean;
+  name: string;
+  siteKey: string;
+  url: string;
+  calenderCDN: string;
+  supportsEmailReminders: boolean;
+  supportsWebPush: boolean;
 }
 
 const SiteSelector: FunctionComponent = ({}) => {
-	const plausible = usePlausible();
-	const router = useRouter()
-	const t = useTranslations('All');
+  const plausible = usePlausible();
+  const router = useRouter();
+  const t = useTranslations('All');
+  const locale = useLocale();
 
-	const sitesConfig = require(`/_db/sites.json`);
-	const sites = sitesConfig.sites;
-
-	const config = require(`/_db/${process.env.NEXT_PUBLIC_SITE_KEY}/config.json`);
-
-	// Picker Items
-	const siteItems: React.ReactElement[] = [];
-	let currentValue = "";
-
-	sitesConfig.sites.forEach(function (site: SiteConfig, index: number) {
-		if(site.siteKey == config.siteKey){
-			currentValue = site.url;
-		}
-
-		siteItems.push(
-			<option value={site.url} key={site.siteKey}>
-				{site.name}
-			</option>
-		);
-	});
+  const sitesConfig = require(`/_db/sites.json`);
+  const sites = sitesConfig.sites;
 
-	const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-		plausible("Changed Site", {
-			props: {
-				site: event.target.value
-			}
-		});
-
-		router.push(event.target.value, event.target.value);
-	};
+  const config = require(
+    `/_db/${process.env.NEXT_PUBLIC_SITE_KEY}/config.json`,
+  );
 
-
+  // Picker Items
+  const siteItems: React.ReactElement[] = [];
+  let currentValue = '';
 
-	return (
-		<div>
-			<label htmlFor="site" className="sr-only">
-				Select Site
-			</label>
-			<select
-				aria-label="Motorsport"
-				name="site"
-				onChange={onChange}
-				value={currentValue}
-				className="text-gray-900 pl-2 pr-8 py-0 text-base
+  sitesConfig.sites.forEach(function (site: SiteConfig, index: number) {
+    if (site.siteKey == config.siteKey) {
+      currentValue = site.url;
+    }
+
+    let url = site.url;
+    if (locale != 'en') {
+      url = `${site.url}/${locale}`;
+    }
+
+    siteItems.push(
+      <option value={url} key={site.siteKey}>
+        {site.name}
+      </option>,
+    );
+  });
+
+  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    plausible('Changed Site', {
+      props: {
+        site: event.target.value,
+      },
+    });
+
+    router.push(event.target.value, event.target.value);
+  };
+
+  return (
+    <div>
+      <label htmlFor="site" className="sr-only">
+        Select Site
+      </label>
+      <select
+        aria-label="Motorsport"
+        name="site"
+        onChange={onChange}
+        value={currentValue}
+        className="text-gray-900 pl-2 pr-8 py-0 text-base
 				border-gray-300 focus:outline-none focus:ring-indigo-500
 				focus:border-indigo-500 sm:text-sm rounded-md"
-			>
-				{siteItems}
-			</select>
-		</div>
-	);
-}
+      >
+        {siteItems}
+      </select>
+    </div>
+  );
+};
 
 export default SiteSelector;