From b97676dd3e5da48debc58686dd0d046f2bfcf8bd Mon Sep 17 00:00:00 2001 From: reya Date: Mon, 29 Jan 2024 09:30:33 +0700 Subject: [PATCH] feat: add translation to relay screen --- apps/desktop/src/routes/home/index.tsx | 9 +- .../relays/components/relayEventList.tsx | 13 ++- .../routes/relays/components/relayItem.tsx | 7 +- .../routes/relays/components/relayList.tsx | 91 ------------------- .../src/routes/relays/components/sidebar.tsx | 6 +- apps/desktop/src/routes/relays/index.tsx | 7 +- apps/desktop/src/routes/relays/url.tsx | 57 ++++++------ src-tauri/locales/en.json | 25 ++++- 8 files changed, 78 insertions(+), 137 deletions(-) delete mode 100644 apps/desktop/src/routes/relays/components/relayList.tsx diff --git a/apps/desktop/src/routes/home/index.tsx b/apps/desktop/src/routes/home/index.tsx index 2fc80ce4..9af90aac 100644 --- a/apps/desktop/src/routes/home/index.tsx +++ b/apps/desktop/src/routes/home/index.tsx @@ -18,10 +18,13 @@ import { TutorialModal } from "@lume/ui/src/tutorial/modal"; import { COL_TYPES } from "@lume/utils"; import * as Tooltip from "@radix-ui/react-tooltip"; import { useState } from "react"; +import { useTranslation } from "react-i18next"; import { VList } from "virtua"; export function HomeScreen() { + const { t } = useTranslation(); const { columns, vlistRef, addColumn } = useColumnContext(); + const [selectedIndex, setSelectedIndex] = useState(-1); const renderItem = (column: IColumn) => { @@ -124,7 +127,7 @@ export function HomeScreen() { - Move Left + {t("global.moveLeft")} @@ -151,7 +154,7 @@ export function HomeScreen() { - Move Right + {t("global.moveRight")} @@ -174,7 +177,7 @@ export function HomeScreen() { - New Column + {t("global.newColum")} diff --git a/apps/desktop/src/routes/relays/components/relayEventList.tsx b/apps/desktop/src/routes/relays/components/relayEventList.tsx index 88bc4923..bc637764 100644 --- a/apps/desktop/src/routes/relays/components/relayEventList.tsx +++ b/apps/desktop/src/routes/relays/components/relayEventList.tsx @@ -4,10 +4,13 @@ import { FETCH_LIMIT } from "@lume/utils"; import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk"; import { useInfiniteQuery } from "@tanstack/react-query"; import { useCallback, useMemo } from "react"; +import { useTranslation } from "react-i18next"; import { VList } from "virtua"; export function RelayEventList({ relayUrl }: { relayUrl: string }) { const ark = useArk(); + + const { t } = useTranslation(); const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({ queryKey: ["relay-events", relayUrl], @@ -37,14 +40,10 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) { if (!lastEvent) return; return lastEvent.created_at - 1; }, + select: (data) => data?.pages.flatMap((page) => page), refetchOnWindowFocus: false, }); - const allEvents = useMemo( - () => (data ? data.pages.flatMap((page) => page) : []), - [data], - ); - const renderItem = useCallback( (event: NDKEvent) => { switch (event.kind) { @@ -64,7 +63,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) { {status === "pending" ? ( ) : ( - allEvents.map((item) => renderItem(item)) + data.map((item) => renderItem(item)) )}
{hasNextPage ? ( @@ -79,7 +78,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) { ) : ( <> - Load more + {t("global.loading")} )} diff --git a/apps/desktop/src/routes/relays/components/relayItem.tsx b/apps/desktop/src/routes/relays/components/relayItem.tsx index 72754927..001c73a2 100644 --- a/apps/desktop/src/routes/relays/components/relayItem.tsx +++ b/apps/desktop/src/routes/relays/components/relayItem.tsx @@ -1,17 +1,20 @@ import { User, useRelaylist } from "@lume/ark"; import { PlusIcon, SearchIcon } from "@lume/icons"; import { normalizeRelayUrl } from "nostr-fetch"; +import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; export function RelayItem({ url, users }: { url: string; users?: string[] }) { const domain = new URL(url).hostname; + + const { t } = useTranslation(); const { connectRelay } = useRelaylist(); return (
- Relay:{" "} + {t("global.relay")}:{" "} {url} @@ -39,7 +42,7 @@ export function RelayItem({ url, users }: { url: string; users?: string[] }) { className="inline-flex h-8 items-center justify-center gap-2 rounded-lg bg-neutral-100 px-2 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800" > - Inspect + {t("global.inspect")} - -
-
- - Relay:{" "} - - - {key} - -
-
-
- {value.slice(0, 4).map((item) => ( - - ))} - {value.length > 4 ? ( -
- +{value.length} -
- ) : null} -
-
- ))} - - )} - - ); -} diff --git a/apps/desktop/src/routes/relays/components/sidebar.tsx b/apps/desktop/src/routes/relays/components/sidebar.tsx index 89b49315..b92c2381 100644 --- a/apps/desktop/src/routes/relays/components/sidebar.tsx +++ b/apps/desktop/src/routes/relays/components/sidebar.tsx @@ -3,11 +3,13 @@ import { CancelIcon, LoaderIcon, RefreshIcon } from "@lume/icons"; import { cn } from "@lume/utils"; import { NDKKind, NDKSubscriptionCacheUsage } from "@nostr-dev-kit/ndk"; import { useQuery } from "@tanstack/react-query"; +import { useTranslation } from "react-i18next"; import { RelayForm } from "./relayForm"; export function RelaySidebar({ className }: { className?: string }) { const ark = useArk(); + const { t } = useTranslation(); const { removeRelay } = useRelaylist(); const { status, data, isRefetching, refetch } = useQuery({ queryKey: ["relay-personal"], @@ -40,7 +42,7 @@ export function RelaySidebar({ className }: { className?: string }) { )} >
-

Connected relays

+

{t("relays.sidebar.title")}

) : !data.length ? (
-

Empty.

+

{t("relays.sidebar.empty")}

) : ( data.map((item) => ( diff --git a/apps/desktop/src/routes/relays/index.tsx b/apps/desktop/src/routes/relays/index.tsx index 222bf705..7e9a7af1 100644 --- a/apps/desktop/src/routes/relays/index.tsx +++ b/apps/desktop/src/routes/relays/index.tsx @@ -1,8 +1,11 @@ import { cn } from "@lume/utils"; +import { useTranslation } from "react-i18next"; import { NavLink, Outlet } from "react-router-dom"; import { RelaySidebar } from "./components/sidebar"; export function RelaysScreen() { + const { t } = useTranslation(); + return (
@@ -20,7 +23,7 @@ export function RelaysScreen() { ) } > - Global + {t("relays.global")} - Follows + {t("relays.follows")}
diff --git a/apps/desktop/src/routes/relays/url.tsx b/apps/desktop/src/routes/relays/url.tsx index 91238c58..7c5a7ee0 100644 --- a/apps/desktop/src/routes/relays/url.tsx +++ b/apps/desktop/src/routes/relays/url.tsx @@ -1,15 +1,16 @@ -import { ArrowLeftIcon, LoaderIcon } from "@lume/icons"; +import { LoaderIcon } from "@lume/icons"; import { NIP11 } from "@lume/types"; import { User } from "@lume/ui"; import { Suspense } from "react"; -import { Await, useLoaderData, useNavigate, useParams } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { Await, useLoaderData, useParams } from "react-router-dom"; import { RelayEventList } from "./components/relayEventList"; export function RelayUrlScreen() { + const { t } = useTranslation(); const { url } = useParams(); const data: { relay?: { [key: string]: string } } = useLoaderData(); - const navigate = useNavigate(); const getSoftwareName = (url: string) => { const filename = url.substring(url.lastIndexOf("/") + 1); @@ -32,7 +33,7 @@ export function RelayUrlScreen() { fallback={
- Loading... + {t("global.loading")}
} > @@ -40,7 +41,7 @@ export function RelayUrlScreen() { resolve={data.relay} errorElement={
-

Could not load relay information 😬

+

{t("relays.relayView.empty")}

} > @@ -55,7 +56,7 @@ export function RelayUrlScreen() { {resolvedRelay.pubkey ? (
- Owner: + {t("relays.relayView.owner")}:
@@ -65,7 +66,7 @@ export function RelayUrlScreen() { {resolvedRelay.contact ? (
- Contact: + {t("relays.relayView.contact")}:
- Software: + {t("relays.relayView.software")}:
- Supported NIPs: + {t("relays.relayView.nips")}:
{resolvedRelay.supported_nips.map((item) => ( @@ -113,26 +114,24 @@ export function RelayUrlScreen() { {resolvedRelay.limitation ? (
- Limitation + {t("relays.relayView.limit")}
- {Object.keys(resolvedRelay.limitation).map( - (key, index) => { - return ( -
-

- {titleCase(key)}: -

-

- {resolvedRelay.limitation[key].toString()} -

-
- ); - }, - )} + {Object.keys(resolvedRelay.limitation).map((key) => { + return ( +
+

+ {titleCase(key)}: +

+

+ {resolvedRelay.limitation[key].toString()} +

+
+ ); + })}
) : null} @@ -144,10 +143,10 @@ export function RelayUrlScreen() { rel="noreferrer" className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium hover:bg-blue-600" > - Open payment website + {t("relays.relayView.payment")} - You need to make a payment to connect this relay + {t("relays.relayView.paymentNote")}
) : null} diff --git a/src-tauri/locales/en.json b/src-tauri/locales/en.json index 61b32f5e..0127616a 100644 --- a/src-tauri/locales/en.json +++ b/src-tauri/locales/en.json @@ -1,7 +1,12 @@ { "global": { + "relay": "Relay", "continue": "Continue", - "loading": "Loading" + "loading": "Loading", + "moveLeft": "Move Left", + "moveRight": "Move Right", + "newColumn": "New Column", + "inspect": "Inspect" }, "welcome": { "title": "Lume is a magnificent client for Nostr to meet, explore\nand freely share your thoughts with everyone.", @@ -66,5 +71,23 @@ "subtitle": "Translate text to your preferred language, powered by Nostr Wine." }, "footer": "There are many more settings you can configure from the 'Settings' Screen. Be sure to visit it later." + }, + "relays": { + "global": "Global", + "follows": "Follows", + "sidebar": { + "title": "Connected relays", + "empty": "Empty." + }, + "relayView": { + "empty": "Could not load relay information 😬", + "owner": "Owner", + "contact": "Contact", + "software": "Software", + "nips": "Supported NIPs", + "limit": "Limitation", + "payment": "Open payment website", + "paymentNote": "You need to make a payment to connect this relay" + } } }