From 6c45dfdd76407ae0ea107afbb6abca260eb138ab Mon Sep 17 00:00:00 2001 From: joaquinvanschoren Date: Fri, 10 Nov 2023 22:43:14 +0100 Subject: [PATCH] added internationalization calls navbar and search --- app/public/locales/en/common.yml | 22 ++++++++++++++- app/src/components/Settings.js | 17 +++++++---- .../navbar/NavbarCreationDropdown.js | 23 +++++++++------ .../navbar/NavbarLanguagesDropdown.js | 20 +++++++------ .../navbar/NavbarNotificationsDropdown.js | 17 +++++++++-- .../components/navbar/NavbarUserDropdown.js | 13 +++++++-- app/src/components/search/Filter.js | 13 +-------- app/src/components/search/SearchContainer.js | 10 ++++--- app/src/components/sidebar/SidebarNavList.js | 2 +- app/src/pages/d/search.js | 28 +++++++++---------- 10 files changed, 106 insertions(+), 59 deletions(-) diff --git a/app/public/locales/en/common.yml b/app/public/locales/en/common.yml index f0148f2a..80228603 100644 --- a/app/public/locales/en/common.yml +++ b/app/public/locales/en/common.yml @@ -595,4 +595,24 @@ apis: - "Command line" tooltip: colab: "Run in Google Colab" - copy: "Copy to clipboard" \ No newline at end of file + copy: "Copy to clipboard" +search: + sort_by: "Sort by" + showing: "Showing" + out_of: "out of" + results: "results" + results_per_page: "Results per page" + relevance: "Relevance" + most_runs: "Runs" + most_likes: "Likes" + most_downloads: "Downloads" + most_recent: "Recent" + most_instances: "Dataset size" + most_features: "Number of Features" + most_numeric_features: "Numeric features" + most_missing_values: "Missing values" + most_classes: "Most classes" + status: "Status" + licence: "Licence" + size: "Size" + diff --git a/app/src/components/Settings.js b/app/src/components/Settings.js index edf4c735..ca615a2c 100644 --- a/app/src/components/Settings.js +++ b/app/src/components/Settings.js @@ -7,6 +7,7 @@ import { Box, Drawer, Grid, ListItemButton, Typography } from "@mui/material"; import { THEMES } from "../constants"; import useTheme from "../hooks/useTheme"; +import { useTranslation } from "next-i18next"; const DemoButton = styled.div` cursor: pointer; @@ -94,16 +95,22 @@ function Demo({ title, themeVariant }) { } function Demos() { + // When developing, reload i18n resources on page reload + const { i18n, t } = useTranslation(); + if (process.env.NODE_ENV === "development") { + i18n.reloadResources(); + } + return ( - Select a theme + {t("settings.select_theme")} - - - - + + + + diff --git a/app/src/components/navbar/NavbarCreationDropdown.js b/app/src/components/navbar/NavbarCreationDropdown.js index b44ed43b..b860b9d3 100644 --- a/app/src/components/navbar/NavbarCreationDropdown.js +++ b/app/src/components/navbar/NavbarCreationDropdown.js @@ -18,6 +18,7 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faMagicWandSparkles } from "@fortawesome/free-solid-svg-icons"; +import { useTranslation } from "next-i18next"; const IconButton = styled(MuiIconButton)` svg { @@ -76,9 +77,15 @@ function NavbarCreationDropdown() { setOpen(false); }; + // When developing, reload i18n resources on page reload + const { i18n, t } = useTranslation(); + if (process.env.NODE_ENV === "development") { + i18n.reloadResources(); + } + return ( - + @@ -94,26 +101,26 @@ function NavbarCreationDropdown() { > - Create and share + {t("create.title")} diff --git a/app/src/components/navbar/NavbarLanguagesDropdown.js b/app/src/components/navbar/NavbarLanguagesDropdown.js index 5d111a44..40e4813b 100644 --- a/app/src/components/navbar/NavbarLanguagesDropdown.js +++ b/app/src/components/navbar/NavbarLanguagesDropdown.js @@ -27,24 +27,28 @@ const Flag = styled.img` const languageOptions = { en: { icon: "/static/img/flags/us.png", - name: "English", + name: "languages.english", }, fr: { icon: "/static/img/flags/fr.png", - name: "French", + name: "languages.french", }, de: { icon: "/static/img/flags/de.png", - name: "German", + name: "languages.german", }, nl: { icon: "/static/img/flags/nl.png", - name: "Dutch", + name: "languages.dutch", }, }; function NavbarLanguagesDropdown() { - const { i18n } = useTranslation(); + // When developing, reload i18n resources on page reload + const { i18n, t } = useTranslation(); + if (process.env.NODE_ENV === "development") { + i18n.reloadResources(); + } const selectedLanguage = languageOptions[i18n.language]; const router = useRouter(); @@ -55,7 +59,7 @@ function NavbarLanguagesDropdown() { query: router.query, }, router.asPath, - { locale } + { locale }, ); } @@ -76,7 +80,7 @@ function NavbarLanguagesDropdown() { return ( {selectedLanguage && ( - + handleLanguageChange(language)} > - {languageOptions[language].name} + {t(languageOptions[language].name)} ))} diff --git a/app/src/components/navbar/NavbarNotificationsDropdown.js b/app/src/components/navbar/NavbarNotificationsDropdown.js index 90e4feee..6ea2975b 100644 --- a/app/src/components/navbar/NavbarNotificationsDropdown.js +++ b/app/src/components/navbar/NavbarNotificationsDropdown.js @@ -1,5 +1,5 @@ import React, { useRef, useState } from "react"; -import Link from "next/link"; +import NextLink from "next/link"; import styled from "@emotion/styled"; import { @@ -18,6 +18,7 @@ import { Typography, } from "@mui/material"; import { Bell, Server } from "react-feather"; +import { useTranslation } from "next-i18next"; const Popover = styled(MuiPopover)` .MuiPaper-root { @@ -43,6 +44,10 @@ const NotificationHeader = styled(Box)` border-bottom: 1px solid ${(props) => props.theme.palette.divider}; `; +const Link = styled(NextLink)` + text-decoration: none; +`; + function Notification({ title, description, Icon }) { return ( @@ -79,6 +84,12 @@ function NavbarNotificationsDropdown() { setOpen(false); }; + // When developing, reload i18n resources on page reload + const { i18n, t } = useTranslation(); + if (process.env.NODE_ENV === "development") { + i18n.reloadResources(); + } + return ( @@ -99,7 +110,7 @@ function NavbarNotificationsDropdown() { > - 1 New Notification + {t("notifications.new_notifications")} @@ -112,7 +123,7 @@ function NavbarNotificationsDropdown() { diff --git a/app/src/components/navbar/NavbarUserDropdown.js b/app/src/components/navbar/NavbarUserDropdown.js index d00a4afb..d70dd349 100644 --- a/app/src/components/navbar/NavbarUserDropdown.js +++ b/app/src/components/navbar/NavbarUserDropdown.js @@ -13,6 +13,7 @@ import useAuth from "../../hooks/useAuth"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleUser } from "@fortawesome/free-solid-svg-icons"; +import { useTranslation } from "next-i18next"; const IconButton = styled(MuiIconButton)` svg { @@ -43,9 +44,15 @@ function NavbarUserDropdown() { router.push("/auth/sign-in"); }; + // When developing, reload i18n resources on page reload + const { i18n, t } = useTranslation(); + if (process.env.NODE_ENV === "development") { + i18n.reloadResources(); + } + return ( - + - Profile - Sign out + {t("account.profile")} + {t("account.sign_out")} ); diff --git a/app/src/components/search/Filter.js b/app/src/components/search/Filter.js index 46710e93..12913004 100644 --- a/app/src/components/search/Filter.js +++ b/app/src/components/search/Filter.js @@ -2,18 +2,7 @@ import React from "react"; import { useTheme } from "@mui/material/styles"; import styled from "@emotion/styled"; -import { - Card, - Tooltip, - CardHeader, - Badge, - Link as MuiLink, - Chip as MuiChip, - Box, - TabPanel, - Tab, - Tabs, -} from "@mui/material"; +import { Link as MuiLink, Chip as MuiChip } from "@mui/material"; import TimeAgo from "react-timeago"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; diff --git a/app/src/components/search/SearchContainer.js b/app/src/components/search/SearchContainer.js index 7a274d92..57695460 100644 --- a/app/src/components/search/SearchContainer.js +++ b/app/src/components/search/SearchContainer.js @@ -39,6 +39,7 @@ import { faXmark, } from "@fortawesome/free-solid-svg-icons"; import Wrapper from "../Wrapper"; +import { i18n } from "next-i18next"; const SearchResults = styled(Results)` margin: 0px; @@ -95,7 +96,7 @@ const SortView = ({ label, options, value, onChange }) => { - Sort by + {i18n.t("search.sort_by")} ( - Results per page + {i18n.t("search.results_per_page")} ( }} > - Showing {start} - {end} out of {totalResults} results + {i18n.t("search.showing")} {start} - {end}{" "} + {i18n.t("search.out_of")} {totalResults} {i18n.t("search.results")} ); @@ -249,7 +251,7 @@ const SearchContainer = memo( {search_facets.map((facet, index) => ( } diff --git a/app/src/components/sidebar/SidebarNavList.js b/app/src/components/sidebar/SidebarNavList.js index 50f1f689..b6a3347d 100644 --- a/app/src/components/sidebar/SidebarNavList.js +++ b/app/src/components/sidebar/SidebarNavList.js @@ -11,7 +11,7 @@ const SidebarNavList = (props) => { const childRoutes = pages.reduce( (items, page) => reduceChildRoutes({ items, page, currentRoute: pathname, depth }), - [] + [], ); return {childRoutes}; diff --git a/app/src/pages/d/search.js b/app/src/pages/d/search.js index 5550e495..36be3b65 100644 --- a/app/src/pages/d/search.js +++ b/app/src/pages/d/search.js @@ -6,6 +6,7 @@ import SearchContainer from "../../components/search/SearchContainer"; import searchConfig from "./searchConfig"; // Server-side translation +import { i18n } from "next-i18next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; export async function getStaticProps(context) { // extract the locale identifier from the URL @@ -17,62 +18,61 @@ export async function getStaticProps(context) { }, }; } - const sort_options = [ { - name: "Relevance", + name: "relevance", value: [], }, { - name: "Most runs", + name: "most_runs", value: [{ field: "runs", direction: "desc" }], }, { - name: "Most likes", + name: "most_likes", value: [{ field: "nr_of_likes", direction: "desc" }], }, { - name: "Most downloads", + name: "most_downloads", value: [{ field: "nr_of_downloads", direction: "desc" }], }, { - name: "Most recent", + name: "most_recent", value: [{ field: "date", direction: "desc" }], }, { - name: "Most instances", + name: "most_instances", value: [{ field: "qualities.NumberOfInstances", direction: "desc" }], }, { - name: "Most features", + name: "most_features", value: [{ field: "qualities.NumberOfFeatures", direction: "desc" }], }, { - name: "Most numeric features", + name: "most_numeric_features", value: [{ field: "qualities.NumberOfNumericFeatures", direction: "desc" }], }, { - name: "Most missing value", + name: "most_missing_values", value: [{ field: "qualities.NumberOfMissing values", direction: "desc" }], }, { - name: "Most classes", + name: "most_classes", value: [{ field: "qualities.NumberOfClasses", direction: "desc" }], }, ]; const search_facets = [ { - label: "Status", + label: "status", field: "status.keyword", }, { - label: "Licence", + label: "licence", field: "licence.keyword", show: "10", }, { - label: "Size", + label: "size", field: "qualities.NumberOfInstances", }, ];