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 (
 		<HelmetProvider>
 			<ThemeProvider
@@ -160,6 +189,7 @@ function App() {
 					setTheme: ({ setTheme, ...theme }) => _setTheme(theme), // make setTheme function available in other components
 				}}
 			>
+				<LanguageContext.Provider value={languageState}>
 					<GlobalStyle />
 					<Router>
 						<Navbar />
@@ -185,20 +215,31 @@ function App() {
 									<Route
 										exact
 										path="/archives"
-									component={() => <Home title="Archives" />}
+										component={() => (
+											<Home title="Archives" />
+										)}
 									/>
 									<Route
 										exact
 										path="/portfolio"
 										component={Portfolio}
 									/>
-								<Route exact path="/404" component={NotFound} />
-								<Route exact path="/:path*" component={Page} />
+									<Route
+										exact
+										path="/404"
+										component={NotFound}
+									/>
+									<Route
+										exact
+										path="/:path*"
+										component={Page}
+									/>
 								</Switch>
 							)}
 						</div>
 						<Footer />
 					</Router>
+				</LanguageContext.Provider>
 			</ThemeProvider>
 		</HelmetProvider>
 	)

source/src/LanguageContext.ts

@@ -0,0 +1,11 @@
+/**
+ *  go to App.tsx and search for `languageState` to see the actual values
+ */
+
+import { createContext } from "react"
+
+export default createContext({
+	language: "",
+	// eslint-disable-next-line @typescript-eslint/no-empty-function
+	toggleLanguage: () => {},
+})

source/src/components/LanguageToggleButton.tsx

@@ -1,34 +1,48 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faLanguage } from "@fortawesome/free-solid-svg-icons"
 import styled from "styled-components"
-import theme from "styled-theming"
-
 import ReactTooltip from "react-tooltip"
 
+import LanguageContext from "../LanguageContext"
 import theming from "../theming"
 
-const StyledThemeButton = styled.div`
+const StyledThemeButton = styled.div<{ language: string }>`
 	${theming.styles.navbarButtonStyle}
 	transition: transform 0.2s linear;
-	/* ${theme("mode", {
-		light: "",
-		dark: "transform: scaleX(-1);\
+	${(props) =>
+		props.language == "en"
+			? ""
+			: "transform: scaleX(-1);\
 			-moz-transform: scaleX(-1);\
 			-webkit-transform: scaleX(-1);\
-			-ms-transform: scaleX(-1);",
-	})}; */
+			-ms-transform: scaleX(-1);"};
 `
 
 function LanguageToggleButton() {
+	function languageName(language) {
+		let name = "English"
+		if (language == "kr") name = "Korean"
+		return name
+	}
+
 	return (
+		<LanguageContext.Consumer>
+			{({ language, toggleLanguage }) => (
 				<>
-			<StyledThemeButton data-tip data-for="language">
+					<StyledThemeButton
+						data-tip
+						data-for="language"
+						onClick={toggleLanguage}
+						language={language}
+					>
 						<FontAwesomeIcon icon={faLanguage} />
 					</StyledThemeButton>
 					<ReactTooltip id="language" type="dark" effect="solid">
-				<span>Change to Korean/English</span>
+						<span>Using {languageName(language)} language</span>
 					</ReactTooltip>
 				</>
+			)}
+		</LanguageContext.Consumer>
 	)
 }