From 6c1de6bbbd4bf35139c98079f085aa42cdcb7d0e Mon Sep 17 00:00:00 2001 From: developomp Date: Wed, 19 May 2021 13:38:10 +0900 Subject: [PATCH] added language toggle feature --- source/src/App.tsx | 139 ++++++++++++------ source/src/LanguageContext.ts | 11 ++ .../src/components/LanguageToggleButton.tsx | 46 ++++-- 3 files changed, 131 insertions(+), 65 deletions(-) create mode 100644 source/src/LanguageContext.ts diff --git a/source/src/App.tsx b/source/src/App.tsx index b6f7a1d..d4c0f50 100644 --- a/source/src/App.tsx +++ b/source/src/App.tsx @@ -5,7 +5,7 @@ import storage from "local-storage-fallback" import { useState, useEffect } from "react" import theme from "styled-theming" import Spinner from "./components/Spinner" - +import LanguageContext from "./LanguageContext" import theming from "./theming" import Navbar from "./components/Navbar" @@ -125,16 +125,9 @@ blockquote { ` function App() { - const [currentTheme, _setTheme] = useState(() => { - const savedTheme = storage.getItem("theme") - return savedTheme ? JSON.parse(savedTheme) : { mode: "dark" } - }) - - // save theme when theme is changed - useEffect(() => { - storage.setItem("theme", JSON.stringify(currentTheme)) - }, [currentTheme]) - + /** + * Loading + */ const [isLoading, setLoading] = useState(true) // show loading screen until all fonts are loaded. @@ -151,6 +144,42 @@ function App() { } }, []) + /** + * Theme + */ + const [currentTheme, _setTheme] = useState(() => { + const savedTheme = storage.getItem("theme") + return savedTheme ? JSON.parse(savedTheme) : { mode: "dark" } + }) + + // save theme when it is changed + useEffect(() => { + storage.setItem("theme", JSON.stringify(currentTheme)) + }, [currentTheme]) + + /** + * Language + */ + + const [currentLanguage, _setLanguage] = useState( + storage.getItem("lang") || "en" // get language from storage and set to "en" if not set already + ) + + // save language when it is changed + useEffect(() => { + storage.setItem("lang", currentLanguage) + }, [currentLanguage]) + + const languageState = { + language: currentLanguage, + toggleLanguage: () => { + // cycle through languages + let setLanguageTo = "en" + if (currentLanguage == "en") setLanguageTo = "kr" + _setLanguage(setLanguageTo) + }, + } + return ( _setTheme(theme), // make setTheme function available in other components }} > - - - -
- {isLoading ? ( - - ) : ( - - ( - - )} + + + + +
+ {isLoading ? ( + - } - /> - - - - - )} -
-
- + ) : ( + + ( + + )} + /> + ( + + )} + /> + + + + + )} +
+