xdd

2024-03-04 19:12:28 -03:00 · 2024-03-04 19:12:28 -03:00 · 456562c490
parent 443f0b61e2
commit 456562c490
8 changed files with 194 additions and 46 deletions
--- a/.env.development
+++ b/.env.development
@ -1 +1 @@
-VITE_API_BASE_URL=http://localhost:8025
+VITE_API_BASE_URL=https://logs.nadeko.net
--- a/dist/.gitkeep
+++ b/dist/.gitkeep
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@

 <head>
 	<meta charset="utf-8" />
-	<link rel="icon" href="/favicon.gif" type="image/gif" >
+	<link rel="icon" href="/favicon.gif" type="image/gif">
 	<!-- <link rel="icon" href="/favicon.ico" /> -->
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<meta name="theme-color" content="#090A0B" />
--- a/package.json
+++ b/package.json
@ -8,8 +8,11 @@
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.12",
    "dayjs": "^1.11.7",
+    "i18next": "^23.10.0",
+    "i18next-browser-languagedetector": "^7.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
    "react-linkify": "^1.0.0-alpha",
    "react-query": "^3.39.3",
    "react-window": "^1.8.8",
--- a/src/components/Filters.tsx
+++ b/src/components/Filters.tsx
@ -8,6 +8,7 @@ import { store } from "../store";
 import { Docs } from "./Docs";
 // import { Optout } from "./Optout";
 import { Settings } from "./Settings";
+import { useTranslation } from 'react-i18next';

 const FiltersContainer = styled.form`
    display: inline-flex;
@ -33,6 +34,7 @@ const FiltersWrapper = styled.div`
 `;

 export function Filters() {
+		const { t } = useTranslation();
    const { setCurrents, state } = useContext(store);
    const queryClient = useQueryClient();
    const channels = useChannels();
@ -57,14 +59,14 @@ export function Filters() {
            <Autocomplete
                id="autocomplete-channels"
                options={channels.map(channel => channel.name)}
-                style={{ width: 225 }}
+                style={{ width: 255 }}
                defaultValue={state.currentChannel}
                getOptionLabel={(channel: string) => channel}
                clearOnBlur={false}
-                renderInput={(params) => <TextField {...params} name="channel" label="channel or id:123" variant="filled" autoFocus={state.currentChannel === null} />}
+                renderInput={(params) => <TextField {...params} name="channel" label={t('channel')} variant="filled" autoFocus={state.currentChannel === null} />}
            />
-            <TextField error={state.error} name="username" label="username or id:123" variant="filled" autoComplete="off" defaultValue={state.currentUsername} autoFocus={state.currentChannel !== null && state.currentUsername === null} />
-            <Button variant="contained" color="secondary" size="large" type="submit">load</Button>
+            <TextField error={state.error} name="username" label={t('username')} variant="filled" autoComplete="off" defaultValue={state.currentUsername} autoFocus={state.currentChannel !== null && state.currentUsername === null} />
+            <Button variant="contained" color="secondary" size="large" type="submit">{t('load')}</Button>
            <Settings />
            <Docs />
            {/* <Optout /> */}
--- a/src/hooks/useChannels.ts
+++ b/src/hooks/useChannels.ts
@ -8,21 +8,25 @@ export interface Channel {
 }

 export function useChannels(): Array<Channel> {
-    const { state } = useContext(store);
+	const { state } = useContext(store);

-    const { data } = useQuery<Array<Channel>>(`channels`, () => {
+	const { data } = useQuery<Array<Channel>>(`channels`, () => {
+			const queryUrl = new URL(`${state.apiBaseUrl}/channels`);

-        const queryUrl = new URL(`${state.apiBaseUrl}/channels`);
+			return fetch(queryUrl.toString()).then((response) => {
+					if (response.ok) {
+							return response;
+					}

-        return fetch(queryUrl.toString()).then((response) => {
-            if (response.ok) {
-                return response;
-            }
+					throw Error(response.statusText);
+			}).then(response => response.json())
+					.then((data: { channels: Array<Channel> }) => {
+							// Assuming each Channel object has a 'name' property
+							// Sort the channels alphabetically by 'name'
+							return data.channels.sort((a, b) => a.name.localeCompare(b.name));
+					});
+	}, { refetchOnWindowFocus: false, refetchOnReconnect: false });

-            throw Error(response.statusText);
-        }).then(response => response.json())
-            .then((data: { channels: Array<Channel> }) => data.channels);
-    }, { refetchOnWindowFocus: false, refetchOnReconnect: false });
-
-    return data ?? [];
-}
+	// Return the sorted data or an empty array if data is undefined
+	return data ?? [];
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,35 +1,83 @@
-import { StrictMode } from 'react';
-import { useContext } from 'react';
-import { createRoot } from 'react-dom/client';
-import { QueryClientProvider } from 'react-query';
-import { Page } from './components/Page';
-import { StateProvider, store } from './store';
-import { createTheme } from '@mui/material';
-import { ThemeProvider } from '@mui/material/styles';
+import { StrictMode } from "react";
+import { useContext } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClientProvider } from "react-query";
+import { Page } from "./components/Page";
+import { StateProvider, store } from "./store";
+import { createTheme } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+const resources = {
+  en: {
+    translation: {
+			load: "load",
+      channel: "channel or id:123",
+      username: "username or id:123",
+			emote: "Show Emotes",
+			name: "Show Name",
+			timestamp: "Show Timestamp",
+			chatmode: "Twitch Chat Mode",
+			newmsgbottom: "Newest messages at the bottom",
+    },
+  },
+  es: {
+    translation: {
+			load: "cargar",
+      channel: "canal o id:123",
+      username: "usuario o id:123",
+			emote: "Mostrar Emotes",
+			name: "Mostrar Nombre",
+			timestamp: "Mostrar Timestamp",
+			chatmode: "Modo de chat de Twitch",
+    },
+  },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: "en",
+    supportedLngs: ["es", "en"],
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ["querystring", "navigator", "htmlTag"],
+    },
+  });
+
+export default i18n;

 const pageTheme = createTheme({
-	palette: {
-		mode: 'dark'
-	},
+  palette: {
+    mode: "dark",
+  },
 });

 function App() {
-	const { state } = useContext(store);
+  const { state } = useContext(store);

-	return <QueryClientProvider client={state.queryClient}>
-		<Page />
-	</QueryClientProvider>
+  return (
+    <QueryClientProvider client={state.queryClient}>
+      <Page />
+    </QueryClientProvider>
+  );
 }

-const container = document.getElementById('root') as Element;
+const container = document.getElementById("root") as Element;
 const root = createRoot(container);

 root.render(
-	<StrictMode>
-		<StateProvider>
-			<ThemeProvider theme={pageTheme}>
-				<App />
-			</ThemeProvider>
-		</StateProvider>
-	</StrictMode>
-	);
+  <StrictMode>
+    <StateProvider>
+      <ThemeProvider theme={pageTheme}>
+        <App />
+      </ThemeProvider>
+    </StateProvider>
+  </StrictMode>
+);
--- a/yarn.lock
+++ b/yarn.lock
@ -198,6 +198,13 @@
  dependencies:
    regenerator-runtime "^0.13.11"

+"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7":
  version "7.20.7"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@ -1152,6 +1159,14 @@ bl@^4.0.3:
    inherits "^2.0.4"
    readable-stream "^3.4.0"

+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
 brace-expansion@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
@ -1314,6 +1329,11 @@ comma-separated-tokens@^1.0.0:
  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==

+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
 console-control-strings@^1.0.0, console-control-strings@~1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
@ -1616,6 +1636,11 @@ fs-extra@^9.0.0:
    jsonfile "^6.0.1"
    universalify "^2.0.0"

+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
 fsevents@~2.3.2:
  version "2.3.2"
  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@ -1663,6 +1688,13 @@ glob@^7.1.3:
  version "7.2.3"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"

 globals@^11.1.0:
  version "11.12.0"
@ -1729,6 +1761,27 @@ hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-
  dependencies:
    react-is "^16.7.0"

+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
+i18next-browser-languagedetector@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz#de0321cba6881be37d82e20e4d6f05aa75f6e37f"
+  integrity sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
+i18next@^23.10.0:
+  version "23.10.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.10.0.tgz#fb328794ae692e6fdde0564259e421f4203c4a2c"
+  integrity sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 ieee754@^1.1.13, ieee754@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@ -1747,7 +1800,15 @@ import-fresh@^3.2.1:
    parent-module "^1.0.0"
    resolve-from "^4.0.0"

-inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@ -2011,6 +2072,13 @@ minimatch@=7.3.0:
  dependencies:
    brace-expansion "^2.0.1"

+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
  version "1.2.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@ -2107,7 +2175,7 @@ oblivious-set@1.0.0:
  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==

-once@^1.3.1, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@ -2176,6 +2244,11 @@ patch-package@^6.5.0:
    tmp "^0.0.33"
    yaml "^1.10.2"

+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
 path-key@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
@ -2364,6 +2437,14 @@ react-dom@^18.2.0:
    loose-envify "^1.1.0"
    scheduler "^0.23.0"

+react-i18next@^14.0.5:
+  version "14.0.5"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.0.5.tgz#5df7b88a3ac8afbef8089ed0d0c27e12b9a1acac"
+  integrity sha512-5+bQSeEtgJrMBABBL5lO7jPdSNAbeAZ+MlFWDw//7FnVacuVu3l9EeWFzBQvZsKy+cihkbThWOAThEdH8YjGEw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    html-parse-stringify "^3.0.1"
+
 react-immutable-proptypes@2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/react-immutable-proptypes/-/react-immutable-proptypes-2.2.0.tgz#cce96d68cc3c18e89617cbf3092d08e35126af4a"
@ -2514,6 +2595,11 @@ regenerator-runtime@^0.13.11:
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==

+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 remarkable@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-2.0.1.tgz#280ae6627384dfb13d98ee3995627ca550a12f31"
@ -3041,6 +3127,11 @@ vite@^4.1.4:
  optionalDependencies:
    fsevents "~2.3.2"

+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 web-streams-polyfill@4.0.0-beta.3:
  version "4.0.0-beta.3"
  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz#2898486b74f5156095e473efe989dcf185047a38"