removed language support for App and made it a functional component

source/src/App.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { Routes, Route } from "react-router-dom"
 import styled, {
 	ThemeProvider,
@@ -249,25 +249,13 @@ const StyledContentContainer = styled.div`
 	margin-top: 5rem;
 `
 
-interface AppProps {}
+const App = () => {
+	const [isLoading, setIsLoading] = useState(true)
+	const [currentTheme, setCurrentTheme] = useState(
+		storage.getItem("theme") || "dark" // get theme from storage and set to "dark" mode if not set already
+	)
 
-interface AppState {
+	useEffect(() => {
-	isLoading: boolean
-	currentTheme: string
-	currentLanguage: string
-}
-
-export default class App extends React.Component<AppProps, AppState> {
-	constructor(props: AppProps) {
-		super(props)
-		this.state = {
-			isLoading: true,
-			currentTheme: storage.getItem("theme") || "dark", // get theme from storage and set to "dark" mode if not set already
-			currentLanguage: storage.getItem("lang") || "en", // get language from storage and set to "en" if not set already
-		}
-	}
-
-	componentDidMount() {
 		// show loading screen until all fonts are loaded.
 		// Experimental feature. Not fully supported on all browsers (IE, I'm looking at you).
 		// https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet
@@ -275,26 +263,18 @@ export default class App extends React.Component<AppProps, AppState> {
 		// checks if document.fonts.onloadingdone is supported on the browser
 		if (typeof document.fonts.onloadingdone != undefined) {
 			document.fonts.onloadingdone = () => {
-				this.setState({ isLoading: false })
+				setIsLoading(false)
 			}
 		} else {
-			this.setState({ isLoading: false })
+			setIsLoading(false)
-		}
 		}
+	}, [])
 
-	componentDidUpdate(_: AppProps, prevState: AppState) {
+	useEffect(() => {
-		if (this.state.currentTheme !== prevState.currentTheme) {
 		// save theme when it is changed
-			storage.setItem("theme", this.state.currentTheme)
+		storage.setItem("theme", currentTheme)
-		}
+	}, [currentTheme])
 
-		if (this.state.currentLanguage !== prevState.currentLanguage) {
-			// save language when it is changed
-			storage.setItem("lang", this.state.currentLanguage)
-		}
-	}
-
-	render() {
 	if (isIE)
 		return (
 			<IENotSupported>
@@ -305,21 +285,16 @@ export default class App extends React.Component<AppProps, AppState> {
 	return (
 		<ThemeProvider
 			theme={{
-					currentTheme: this.state.currentTheme,
+				currentTheme: currentTheme,
-					setTheme: (setThemeTo) =>
+				setTheme: (setThemeTo) => {
-						this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
+					setCurrentTheme(setThemeTo)
+				},
 			}}
 		>
 			<Helmet>
 				<meta property="og:site_name" content="developomp" />
-
 				<meta property="og:title" content="Home" />
-
+				<meta property="og:description" content="developomp's blog" />
-					<meta
-						property="og:description"
-						content="developomp's blog"
-					/>
-
 				<meta property="og:url" content={process.env.PUBLIC_URL} />
 			</Helmet>
 
@@ -327,7 +302,7 @@ export default class App extends React.Component<AppProps, AppState> {
 
 			<Navbar />
 			<StyledContentContainer>
-					{this.state.isLoading ? (
+				{isLoading ? (
 					<Loading />
 				) : (
 					<Routes>
@@ -345,5 +320,6 @@ export default class App extends React.Component<AppProps, AppState> {
 			<Footer />
 		</ThemeProvider>
 	)
-	}
 }
+
+export default App