How To Display Programming Language Select Button

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import CodeEditor, { SelectionText } from "@uiw/react-textarea-code-editor";
import "./index.css";
import exts from "code-example/ext.json";

const useFetch = (language) => {
  const [code, setCode] = useState("");
  const [loading, setLoading] = useState(false);
  const [lang, setLang] = useState(language);
  const [error, setError] = useState();

  useEffect(() => {
    setLoading(true);
    const fetchData = async () => {
      try {
        const codeStr = await import(`code-example/txt/sample.${language}.txt`);
        setCode(
          atob((codeStr.default || "").replace("data:text/plain;base64,", ""))
        );

        let str = language;
        if (/^(mysql|pgsql)$/.test(language)) {
          str = "sql";
        }
        if (/^(objective-c)$/.test(language)) {
          str = "objc";
        }
        if (/^(vue)$/.test(language)) {
          str = "html";
        }
        setLang(str);
        setLoading(false);
      } catch (error) {
        console.log(error);
        setLoading(false);
        setError(error);
        setCode("");
      }
    };
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [language]);

  return { lang, loading, code, setCode, error };
};

const Loading = () => (
  <div
    style={{
      position: "fixed",
      top: 0,
      left: 0,
      background: "rgba(51, 51, 51, 0.62)",
      right: 0,
      bottom: 0,
      textAlign: "center",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      zIndex: 999,
      color: "white"
    }}
  >
    Loading...{" "}
  </div>
);

function App() {
  const textRef = React.useRef();
  const [language, setLanguage] = useState("jsx");
  const { loading, code, setCode } = useFetch(language);
  return (
    <div>
      <h3>Auto</h3>
      {loading ? <Loading /> : null}
      <CodeEditor
        value={code}
        ref={textRef}
        language="js"
        placeholder="Please enter JS code."
        onChange={(evn) => setCode(evn.target.value)}
        padding={15}
        style={{
          fontFamily:
            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
          fontSize: 12
        }}
      />
      <select
        value={language}
        onChange={(evn) => setLanguage(evn.target.value)}
      >
        {exts.map((keyName, idx) => {
          if (/^diff/.test(keyName)) return null;
          return (
            <option key={idx} value={keyName}>
              Language: {keyName}
            </option>
          );
        })}
      </select>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

@clarnx https://codesandbox.io/embed/react-textarea-code-editor-for-example-https-github-com-uiwjs-react-textarea-code-editor-issues-142-4svb4f?fontsize=14&hidenavigation=1&theme=dark

uiwjs / react-textarea-code-editor

How To Display Programming Language Select Button #142