Added titles to all pages

dn54321 · Oct 27, 2024 · bec24fc · bec24fc
1 parent 1724ffe
commit bec24fc
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 24 deletions.
diff --git a/app/icons/page.tsx b/app/icons/page.tsx
@@ -14,6 +14,7 @@ export default function Page() {
     return (
         <Container maxWidth="lg">
             <Toolbar />
+            <title>{`${t("webapp.name")} - ${t("weather.icon.text")}`}</title>
             <Typography component="h2" variant="h3">{t("weather.icon.text")}</Typography>
             <Divider />
             <Grid container spacing={2} mt="20px">

diff --git a/app/icons/weather/[id]/page.tsx b/app/icons/weather/[id]/page.tsx
@@ -6,7 +6,7 @@ import Grid from "@mui/material/Grid2";
 import { WeatherIcon } from "@components/ui/weather-icon";
 import { weatherIconShowcase } from "@project/app/icons/layout";
 import { use } from "react";
-import { useTranslation } from "react-i18next";
+import { useSystemTranslation } from "@src/hooks/use-system-translation";
 
 export interface PageProps {
     params: Promise<{
@@ -18,16 +18,18 @@ export default function Page(props: PageProps) {
     const params = use(props.params);
     const weatherId = parseInt(params.id);
     const weatherDetails = weatherIconShowcase.find(weather => weather.id === weatherId);
-    const { t } = useTranslation();
+    const { t } = useSystemTranslation();
+    const weatherName = weatherDetails ? t(weatherDetails.name) : "";
     return (
         <Container maxWidth="lg">
             <Toolbar />
+            <title>{`${weatherName} - ${t("webapp.name")}`}</title>
             <Stack direction={{ xs: "column", md: "row" }} alignItems="center">
                 <Box fontSize="15em"><WeatherIcon id={weatherId} /></Box>
                 <Grid size={{ xs: 12, sm: 6 }} fontSize="20em">
                     {
                         weatherDetails === undefined
-                            ? <Typography variant="body2">Invalid ID. Please try again later.</Typography>
+                            ? <Typography variant="body2">{t("page.iconGallery.invalidIcon")}</Typography>
                             : (
                                     <Box>
                                         <Typography variant="body2">
@@ -36,7 +38,7 @@ export default function Page(props: PageProps) {
                                                 :
                                                 {" "}
                                             </b>
-                                            {t(weatherDetails.name)}
+                                            {weatherName}
                                         </Typography>
                                         <Typography variant="body2">
                                             <b>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Button, Stack, Box, Container } from "@mui/material";
-import Head from "next/head";
 import CloudIcon from "@mui/icons-material/Cloud";
 import styled from "@mui/system/styled";
 import { ThemeToggleButton } from "@components/ui/theme-toggle-button";
@@ -60,9 +59,7 @@ export default function NotFound() {
     const { t } = useSystemTranslation();
     return (
         <Page>
-            <Head>
-                <title>{`${t("webapp.name")} - t("page.404.pageNotFound")` }</title>
-            </Head>
+            <title>{`${t("webapp.name")} - ${t("page.404.pageNotFound")}` }</title>
             <Container maxWidth="lg" sx={{ height: "100%" }} disableGutters>
                 <Box position="absolute" top={10} right={10}>
                     <ThemeToggleButton />

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,7 +3,6 @@ import { Container } from "@mui/material";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import styled from "@mui/system/styled";
-import Head from "next/head";
 import { useEffect } from "react";
 import { SearchBar } from "@components/ui/search-bar";
 import { useWidgetStore } from "@src/hooks/stores/use-widget-store";
@@ -126,10 +125,8 @@ export default function Home() {
 
     return (
         <Box height="100%">
-            <Head>
-                <title>{t("webapp.name")}</title>
-                <meta name="description" content={t("webapp.description")} />
-            </Head>
+            <title>{t("webapp.name")}</title>
+            <meta name="description" content={t("webapp.description")} />
             <Box display="grid" gridTemplateRows="1fr auto" width="100%" height="100%" position="relative">
                 <Stack alignItems="center" direction="row" position="absolute" top={10} right={10}>
                     <LocalisationDropdownButton />

diff --git a/app/weather/[location]/page.tsx b/app/weather/[location]/page.tsx
@@ -20,7 +20,7 @@ import { LocationListWidget } from "@components/widgets/location-list-widget";
 import { PollutionWidget } from "@components/widgets/pollution-widget";
 import { RainfallWidget } from "@components/widgets/rainfall-widget";
 import { WeatherStatWidget } from "@components/widgets/weather-stat-widget";
-import { useSystemSettings } from "@src/hooks/use-system-settings";
+import { useSystemTranslation } from "@src/hooks/use-system-translation";
 
 interface PageProps {
     params: Promise<{
@@ -31,7 +31,7 @@ interface PageProps {
 export default function Page(pageProps: PageProps) {
     const params = use(pageProps.params);
     const location = params.location;
-    const { locale } = useSystemSettings();
+    const { t, locale } = useSystemTranslation();
     const weatherQuery = useGetWeather(location, undefined, locale);
     const pollutionQuery = useGetPollution(weatherQuery.data?.lat, weatherQuery.data?.lon);
     const nearbyLocationQuery = useGetNearbyLocation(weatherQuery.data?.lat, weatherQuery.data?.lon, locale);
@@ -52,7 +52,7 @@ export default function Page(pageProps: PageProps) {
 
     return (
         <Box>
-            <title>{locationShortForm ? `${locationShortForm} - Weaget` : "Weaget" }</title>
+            <title>{locationShortForm ? `${locationShortForm} - ${t("webapp.name")}` : t("webapp.name") }</title>
             <Box display="grid" gridTemplateRows="80px auto max-content" gap={1} height="100%" width="100%">
                 <Box sx={{ gridRow: "1" }}><Navbar /></Box>
                 <Box>

diff --git a/src/hooks/use-system-translation.ts b/src/hooks/use-system-translation.ts
@@ -6,11 +6,5 @@ export function useSystemTranslation(
     options?: UseTranslationOptions<undefined> | undefined,
 ) {
     const { locale } = useSystemSettings();
-    const userLocale = (typeof window !== "undefined")
-        ? navigator.languages.find(lng => lng.startsWith(locale))
-        : undefined;
-
-    const parsedLocale = userLocale || locale;
-
-    return { ...i18nTranslation(ns, { lng: parsedLocale, ...options }), locale };
+    return { ...i18nTranslation(ns, { lng: locale, ...options }), locale };
 }
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
@@ -258,7 +258,7 @@
       "gallery": "Gallery",
       "name": "Name",
       "description": "Description",
-      "invalidIcon": "Invalid ID. Please try again later."
+      "invalidIcon": "Invalid Weather Icon."
     },
     "404": {
       "description": "The page you have been looking for could not be found.",