@olenbetong/synergi-react 0.6.7

package/src/useSearchParamState.ts

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+
+type SearchParamValue = string | null;
+
+/**
+ * A hook that wraps useState, and keeps the state value synced with
+ * a search parameter.
+ *
+ * @param {string} key They key used to store the value in the search parameters
+ * @param {SearchParamValue} fallbackValue Default value for the state. Only used if the search parameters do not contains a value for the key parameter
+ * @deprecated Use equivalent hook in @olenbetong/appframe-react instead
+ */
+export function useSearchParamState(
+  key: string,
+  fallbackValue?: SearchParamValue | (() => SearchParamValue),
+  multiple?: false
+): [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>];
+export function useSearchParamState(
+  key: string,
+  fallbackValue: string[] | (() => string[]),
+  multiple: true
+): [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export function useSearchParamState(
+  key: string,
+  fallbackValue?:
+    | string[]
+    | SearchParamValue
+    | (() => SearchParamValue)
+    | (() => string[]),
+  multiple: boolean = false
+):
+  | [SearchParamValue, React.Dispatch<React.SetStateAction<SearchParamValue>>]
+  | [string[], React.Dispatch<React.SetStateAction<string[]>>] {
+  let defaultRef = useRef<SearchParamValue | string[]>(multiple ? [] : null);
+  let [value, setValue] = useState<SearchParamValue | string[]>(() => {
+    let params = new URLSearchParams(window.location.search);
+    let value = multiple ? params.getAll(key) : params.get(key);
+
+    // Even if we don't use the default value here, we want to keep it for later
+    // so we can see if the default value is the active value. If that's the case,
+    // we remove the parameter from the search parameters.
+    if (typeof fallbackValue === "function") {
+      defaultRef.current = fallbackValue();
+    } else {
+      defaultRef.current = fallbackValue ?? (multiple ? [] : null);
+    }
+
+    if (!value) {
+      return defaultRef.current;
+    }
+
+    return value;
+  });
+
+  useEffect(() => {
+    let params = new URLSearchParams(window.location.search);
+
+    if (multiple) {
+      params.delete(key);
+      (value as string[]).forEach((v) => params.append(key, v));
+    } else if (value && value !== defaultRef.current) {
+      params.set(key, String(value));
+    } else {
+      params.delete(key);
+    }
+
+    let newPath = window.location.pathname;
+    let paramString = params.toString();
+    if (paramString.length) {
+      newPath += "?" + paramString;
+    }
+
+    window.history.replaceState({ path: newPath }, "", newPath);
+  }, [key, value]);
+
+  // @ts-ignore i give up
+  return [value, setValue];
+}

package/src/useTranslation/index.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+
+async function translateText(text: string, target: string, apiKey: string) {
+  let url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
+  let body = JSON.stringify({
+    q: text,
+    target,
+  });
+
+  let options = {
+    body,
+    method: "POST",
+  };
+
+  let result = await fetch(url, options);
+  let json = await result.json();
+  let { data } = json;
+
+  if (data && data.translations) {
+    let [translation] = data.translations;
+
+    return {
+      from: translation.detectedSourceLanguage,
+      translation: translation.translatedText,
+    };
+  }
+
+  return false;
+}
+
+export function useTranslation(text: string, targetLanguage: string, apiKey: string) {
+  let [translation, setTranslation] = useState("");
+  let [error, setError] = useState<string | null>(null);
+  let [from, setSourceLang] = useState<string | null>(null);
+  let [isTranslating, setIsTranslating] = useState(false);
+  let textRef = useRef(text);
+
+  useEffect(() => {
+    textRef.current = text;
+    return () => {
+      setTranslation("");
+      setError(null);
+      setSourceLang(null);
+      setIsTranslating(false);
+    };
+  }, [apiKey, targetLanguage, text]);
+
+  async function translate() {
+    setIsTranslating(true);
+
+    try {
+      let result = await translateText(text, targetLanguage, apiKey);
+      if (result && textRef.current === text) {
+        let { from, translation } = result;
+        setSourceLang(from);
+        setTranslation(translation);
+        setIsTranslating(false);
+      }
+    } catch (error) {
+      if (textRef.current === text) {
+        setError((error as Error).message);
+        setIsTranslating(false);
+      }
+    }
+  }
+
+  return {
+    error,
+    from,
+    isTranslating,
+    translation,
+    translate,
+  };
+}