React App

From 2e5924109ee0b9ae216fc3aab78c5c0aa0c057d9 Mon Sep 17 00:00:00 2001 From: Bryan C Guner <66654881+bgoonz@users.noreply.github.com> Date: Thu, 25 Feb 2021 12:11:14 -0500 Subject: [PATCH 1/7] Initial commit --- README.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..85e0088 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# udemy-react-translator +Created with CodeSandbox From 4b8389c8ed6444313a4e1884d0ebd32dfde09515 Mon Sep 17 00:00:00 2001 From: Bryan C Guner <66654881+bgoonz@users.noreply.github.com> Date: Thu, 25 Feb 2021 12:11:15 -0500 Subject: [PATCH 2/7] Initial commit --- package.json | 47 ++++++++++++++++++++++++++ public/index.html | 52 ++++++++++++++++++++++++++++ src/App.js | 19 +++++++++++ src/components/field.js | 14 ++++++++ src/components/languages.js | 67 +++++++++++++++++++++++++++++++++++++ src/components/translate.js | 46 +++++++++++++++++++++++++ src/index.js | 5 +++ src/styles.css | 15 +++++++++ 8 files changed, 265 insertions(+) create mode 100644 package.json create mode 100644 public/index.html create mode 100644 src/App.js create mode 100644 src/components/field.js create mode 100644 src/components/languages.js create mode 100644 src/components/translate.js create mode 100644 src/index.js create mode 100644 src/styles.css diff --git a/package.json b/package.json new file mode 100644 index 0000000..6d45d6a --- /dev/null +++ b/package.json @@ -0,0 +1,47 @@ +{ + "name": "react", + "version": "1.0.0", + "description": "", + "keywords": [], + "main": "src/index.js", + "dependencies": { + "axios": "0.19.2", + "react": "16.12.0", + "react-dom": "16.12.0", + "react-scripts": "3.0.1" + }, + "devDependencies": { + "typescript": "3.8.3" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ], + "eslintConfig": { + "extends": [ + "react-app", + "shared-config" + ], + "rules": { + "no-unused-vars": "off" + }, + "overrides": [ + { + "files": [ + "**/*.ts?(x)" + ], + "rules": { + "no-unused-vars": "off" + } + } + ] + } +} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..659ce81 --- /dev/null +++ b/public/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + + React App + + + + +

+ + + diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..1b1536e --- /dev/null +++ b/src/App.js @@ -0,0 +1,19 @@ +import "./styles.css"; +import React, { useState } from "react"; +import Field from "./components/field"; +import Languages from "./components/languages"; +import Translate from "./components/translate"; + +export default function App() { + const [language, setLanguage] = useState("ru"); + const [text, setText] = useState(""); + + return ( +

+ + +

+ +

+ ); +} diff --git a/src/components/field.js b/src/components/field.js new file mode 100644 index 0000000..7665523 --- /dev/null +++ b/src/components/field.js @@ -0,0 +1,14 @@ +import React from "react"; + +export default ({ label, value, onChange }) => { + return ( +

+ {label} + onChange(e.target.value)} + /> +

+ ); +}; diff --git a/src/components/languages.js b/src/components/languages.js new file mode 100644 index 0000000..a9f3d49 --- /dev/null +++ b/src/components/languages.js @@ -0,0 +1,67 @@ +/* eslint-disable */ + +import React, { useState } from "react"; + +const LANGUAGES = [ + { label: "Afrikaans", value: "af" }, + { label: "Arabic", value: "ar" }, + { label: "French", value: "fr" }, + { label: "Hindi", value: "hi" }, + { label: "Japanese", value: "ja" }, + { label: "Portuguese", value: "pt" }, + { label: "Russian", value: "ru" }, + { label: "Simplified Chinese", value: "zh-CN" }, + { label: "Spanish", value: "es" }, + { label: "Swahili", value: "sw" }, + { label: "Thai", value: "th" } +]; + +const Languages = ({ language, onLanguageChange }) => { + if (language === undefined) { + language = "es"; + } + const languageConfig = LANGUAGES.find(l => l.value === language); + if (!languageConfig) { + throw new Error(`Unknown language code '${language}'`); + } + + const [open, setOpen] = useState(false); + + const onSelect = language => { + setOpen(false); + onLanguageChange(language); + }; + + return ( +

+ Select Language +

+ +

+
+
+ {LANGUAGES.map(({ label, value }) => { + return ( + onSelect(value)} + className="dropdown-item" + > + {label} + + ); + })} +
+
+

+ ); +}; + +export default Languages; diff --git a/src/components/translate.js b/src/components/translate.js new file mode 100644 index 0000000..ba7fc20 --- /dev/null +++ b/src/components/translate.js @@ -0,0 +1,46 @@ +import React, { useEffect, useState } from "react"; +import axios from "axios"; + +const doTranslation = async (input, languageCode, cancelToken) => { + try { + const { data } = await axios.post( + "https://translation.googleapis.com/language/translate/v2?key=AIzaSyCf0Xy0OnhxlduyEt3K8zP-sOuu-l_u6uA", + { + q: input, + target: languageCode + }, + { cancelToken: cancelToken.token } + ); + + return data.data.translations[0].translatedText; + } catch (err) { + return ""; + } +}; + +export default ({ language, text }) => { + const [translated, setTranslated] = useState(""); + + useEffect(() => { + if (!text) { + return; + } + + const cancelToken = axios.CancelToken.source(); + + doTranslation(text, language, cancelToken).then(setTranslated); + + return () => { + try { + cancelToken.cancel(); + } catch (err) {} + }; + }, [text, language]); + + return ( +
+ Output +
{translated}
+
+ ); +}; diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..c24e9d8 --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; + +ReactDOM.render(, document.getElementById("root")); diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..5cbb438 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,15 @@ +.container { + margin: 10px 20px; +} + +input { + margin: 8px 0; +} + +label { + font-weight: 700; +} + +.title { + margin-top: 10px; +} From b68b7a438c09b1d022803bb15139a8d56a851a6b Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Thu, 25 Feb 2021 17:11:19 +0000 Subject: [PATCH 3/7] Add renovate.json --- renovate.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 renovate.json diff --git a/renovate.json b/renovate.json new file mode 100644 index 0000000..f45d8f1 --- /dev/null +++ b/renovate.json @@ -0,0 +1,5 @@ +{ + "extends": [ + "config:base" + ] +} From 7133e827854812c7fff84030b48c665bcdb5867b Mon Sep 17 00:00:00 2001 From: Bryan C Guner <66654881+bgoonz@users.noreply.github.com> Date: Thu, 25 Feb 2021 12:28:54 -0500 Subject: [PATCH 4/7] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 85e0088..09b9c66 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,6 @@ # udemy-react-translator Created with CodeSandbox + + + +[sandbox](https://codesandbox.io/s/twilight-snow-9c4uk) From c140078d9ceb85fa9d2ba8f948668bd1f280addd Mon Sep 17 00:00:00 2001 From: Bryan C Guner <66654881+bgoonz@users.noreply.github.com> Date: Thu, 25 Feb 2021 16:23:03 -0500 Subject: [PATCH 5/7] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 09b9c66..a106e19 100644 --- a/README.md +++ b/README.md @@ -4,3 +4,6 @@ Created with CodeSandbox [sandbox](https://codesandbox.io/s/twilight-snow-9c4uk) + + +[gitbook](https://bryan-guner.gitbook.io/udemy-react-notes/) From 0ce3db6416e313a4e37296adcb63f27abce3f690 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Thu, 25 Feb 2021 21:34:00 +0000 Subject: [PATCH 6/7] Update dependency axios to v0.21.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d45d6a..81652b7 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "keywords": [], "main": "src/index.js", "dependencies": { - "axios": "0.19.2", + "axios": "0.21.1", "react": "16.12.0", "react-dom": "16.12.0", "react-scripts": "3.0.1" From 1ff30b0cd97d65d42db0e196148ea2fd873b86b4 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Thu, 25 Feb 2021 21:34:08 +0000 Subject: [PATCH 7/7] Update dependency bulma to v0.9.2 --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 659ce81..c106ffe 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ >