Changed all functional components to class components. added better comments, minor optimizations here and there, removed some unfinished posts from blogs

source/src/components/LanguageToggleButton.tsx

@@ -1,48 +1,55 @@
+import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faLanguage } from "@fortawesome/free-solid-svg-icons"
 import styled from "styled-components"
 import ReactTooltip from "react-tooltip"
 
-import LanguageContext from "../LanguageContext"
+import { LanguageContext } from "../App"
 import theming from "../theming"
 
-const StyledThemeButton = styled.div<{ language: string }>`
-	${theming.styles.navbarButtonStyle}
-	${(props) =>
-		props.language == "en"
-			? ""
-			: "transform: scaleX(-1);\
+interface StyledThemeButtonProps {
+	language: string
+}
+
+export default class LanguageToggleButton extends React.Component {
+	StyledThemeButton = styled.div<StyledThemeButtonProps>`
+		${theming.styles.navbarButtonStyle}
+		${(props) =>
+			props.language == "en"
+				? ""
+				: "transform: scaleX(-1);\
 			-moz-transform: scaleX(-1);\
 			-webkit-transform: scaleX(-1);\
 			-ms-transform: scaleX(-1);"};
-`
+	`
 
-function LanguageToggleButton() {
-	function languageName(language) {
+	languageName = (language) => {
 		let name = "English"
 		if (language == "kr") name = "Korean"
 		return name
 	}
 
-	return (
-		<LanguageContext.Consumer>
-			{({ language, toggleLanguage }) => (
-				<>
-					<StyledThemeButton
-						data-tip
-						data-for="language"
-						onClick={toggleLanguage}
-						language={language}
-					>
-						<FontAwesomeIcon icon={faLanguage} />
-					</StyledThemeButton>
-					<ReactTooltip id="language" type="dark" effect="solid">
-						<span>Using {languageName(language)} language</span>
-					</ReactTooltip>
-				</>
-			)}
-		</LanguageContext.Consumer>
-	)
+	render() {
+		return (
+			<LanguageContext.Consumer>
+				{({ language, toggleLanguage }) => (
+					<>
+						<this.StyledThemeButton
+							data-tip
+							data-for="language"
+							onClick={toggleLanguage}
+							language={language}
+						>
+							<FontAwesomeIcon icon={faLanguage} />
+						</this.StyledThemeButton>
+						<ReactTooltip id="language" type="dark" effect="solid">
+							<span>
+								Using {this.languageName(language)} language
+							</span>
+						</ReactTooltip>
+					</>
+				)}
+			</LanguageContext.Consumer>
+		)
+	}
 }
-
-export default LanguageToggleButton