feat: basic i18n

next.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  i18n: {
+    locales: [
+      "en",
+      "en-US",
+      "en-GB",
+      "es",
+      "es-AR",
+      "es-ES",
+      "pl",
+      "pl-PL",
+      "fr",
+      "fr-BE",
+      "fr-CA",
+    ],
+    defaultLocale: "en",
+  },
+};

package.json

@@ -14,6 +14,7 @@
     "@geist-ui/react-icons": "^1.0.0",
     "@gqless/react": "^1.0.0-alpha.31",
     "apollo-server-micro": "^2.18.2",
+    "debounce": "^1.2.0",
     "gqless": "^1.0.0-alpha.31",
     "next": "^10.0.0",
     "random-gradient": "^0.0.2",

public/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "index": {},
+  "search": {
+    "title": "Search",
+    "placeholder": "Type something ..."
+  },
+  "player": {
+    "error": "Oops, something went wrong :("
+  }
+}

public/i18n/es.json

@@ -0,0 +1,10 @@
+{
+  "index": {},
+  "search": {
+    "title": "Buscar",
+    "placeholder": "Escribe algo ..."
+  },
+  "player": {
+    "error": "Oh oh, algo salió mal :("
+  }
+}

public/i18n/fr.json

@@ -0,0 +1,10 @@
+{
+  "index": {},
+  "search": {
+    "title": "Chercher",
+    "placeholder": "Tapez quelque chose ..."
+  },
+  "player": {
+    "error": "Quelque chose s'est mal passé :("
+  }
+}

public/i18n/pl.json

@@ -0,0 +1,10 @@
+{
+  "index": {},
+  "search": {
+    "title": "Szukać",
+    "placeholder": "Napisz coś ..."
+  },
+  "player": {
+    "error": "Ojojoj, coś poszło nie tak :("
+  }
+}

src/components/Card/style.ts

@@ -25,6 +25,9 @@ export const Title = styled.h3`
   margin: 0;
   margin-bottom: var(--sz1);
   color: var(--accents-7);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 export const Subtitle = styled.h4`
@@ -33,6 +36,9 @@ export const Subtitle = styled.h4`
   text-transform: uppercase;
   color: var(--accents-4);
   margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 export const Body = styled.div`

src/components/Player/index.tsx

@@ -2,9 +2,12 @@ import { useContext } from "react";
 import { Play, Pause, Square, AlertCircle } from "@geist-ui/react-icons";
 import { LineSkeleton } from "@/components/Skeleton";
 import { PlayerContext } from "@/lib/context/player";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+
 import { Container, Controls, Title, ErrorNotification, Button } from "./style";
 
 export const Player = () => {
+  const { t } = useTranslation();
   const { station, play, pause, stop, error, playing, loading } = useContext(
     PlayerContext
   );
@@ -14,7 +17,7 @@ export const Player = () => {
   if (error) {
     return (
       <ErrorNotification>
-        <AlertCircle /> <p>Oops, can't play this station :(</p>
+        <AlertCircle /> <p>{t.player.error}</p>
       </ErrorNotification>
     );
   }

src/components/SearchInput/index.ts

@@ -14,6 +14,6 @@ export const SearchInput = styled.input`
 
   :hover,
   :focus {
-    border-color: var(--accents-4);
+    border-color: var(--accents-3);
   }
 `;

src/lib/hooks/useTranslation.ts

@@ -0,0 +1,31 @@
+import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+import en from "../../../public/i18n/en.json";
+
+export const useTranslation = createUseTranslation("en", en);
+
+export function createUseTranslation<T>(defaultLocale: string, translation: T) {
+  const cache = new Map();
+  cache.set(defaultLocale, translation);
+
+  return function useTranslation() {
+    const { locale } = useRouter();
+    const [lang] = locale.split("-");
+    const [t, setTranslation] = useState(translation);
+
+    useEffect(() => {
+      if (cache.has(lang)) {
+        return setTranslation(cache.get(lang));
+      }
+
+      fetch(`/i18n/${lang}.json`)
+        .then((r) => r.json())
+        .then((translation) => {
+          cache.set(lang, translation);
+          setTranslation(translation);
+        });
+    }, [lang]);
+
+    return { t };
+  };
+}

src/pages/search.tsx

@@ -1,30 +1,34 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, ChangeEvent } from "react";
 import { Box } from "@/components/Box";
 import { Heading } from "@/components/Typography";
 import { SearchInput } from "@/components/SearchInput";
 import { StationCardList } from "@/components/StationCardList";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import debounce from "debounce";
 
 export const Index = () => {
+  const { t } = useTranslation();
   const input = useRef<HTMLInputElement>(null);
-  const [query, setQuery] = useState("");
+  const [Q, setQ] = useState("");
 
-  const showList = query.length >= 3;
-  const onChange = ({ target: { value } }) => setQuery(value);
+  const showList = Q.length >= 3;
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => setQ(e.target.value);
+  const debouncedOnChange = debounce(onChange, 350);
 
   useEffect(() => input.current.focus(), []);
 
   return (
     <Box p={["var(--sz4)"]}>
-      <Heading as="h3">Search</Heading>
+      <Heading as="h3">{t.search.title}</Heading>
 
       <SearchInput
         type="text"
-        onChange={onChange}
         ref={input}
-        placeholder="Type something ..."
+        onChange={debouncedOnChange}
+        placeholder={t.search.placeholder}
       />
 
-      {showList && <StationCardList name={query} limit={20} />}
+      {showList && <StationCardList name={Q} limit={20} />}
     </Box>
   );
 };

yarn.lock

@@ -3204,6 +3204,11 @@ data-uri-to-buffer@3.0.0:
   dependencies:
     buffer-from "^1.1.1"
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@4, debug@^4.1.0, debug@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"