pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

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

Browse source
This commit is contained in:
Kim, Jimin 2021-05-20 15:56:41 +09:00
parent c850184bc7
commit 046dd05713
20 changed files with 987 additions and 927 deletions
Download patch file Download diff file Expand all files Collapse all files

234
source/src/App.tsx
View file

@ -1,12 +1,12 @@
import React, { createContext } from "react"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import { ThemeProvider, createGlobalStyle } from "styled-components"
import { HelmetProvider } from "react-helmet-async"
import storage from "local-storage-fallback"
import { useState, useEffect } from "react"
import Spinner from "./components/Spinner"
import LanguageContext from "./LanguageContext"
import theming from "./theming"
import Spinner from "./components/Spinner"
import Navbar from "./components/Navbar"
import Footer from "./components/Footer"
@ -126,124 +126,130 @@ blockquote {
}
`
function App() {
/**
* Loading
*/
const [isLoading, setLoading] = useState(true)
interface AppProps {}
interface AppState {
isLoading: boolean
currentTheme: string
currentLanguage: string
}
export const LanguageContext = createContext({
language: "",
// eslint-disable-next-line @typescript-eslint/no-empty-function
toggleLanguage: () => {},
})
export default class App extends React.Component<AppProps, AppState> {
constructor(props) {
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
// 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
useEffect(() => {
// checks if document.fonts.onloadingdone is supported on the browser
if (typeof document.fonts.onloadingdone != undefined) {
document.fonts.onloadingdone = () => {
setLoading(false)
this.setState({ isLoading: false })
}
} else {
setLoading(false)
this.setState({ isLoading: false })
}
}, [])
/**
* Theme
*/
const [currentTheme, _setTheme] = useState(
storage.getItem("theme") || "dark" // get theme from storage and set to "dark" mode if not set already
)
// save theme when it is changed
useEffect(() => {
storage.setItem("theme", 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
theme={{
currentTheme: currentTheme,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
setTheme: (setThemeTo) => _setTheme(setThemeTo), // make setTheme function available in other components
}}
>
<LanguageContext.Provider value={languageState}>
<GlobalStyle />
<Router>
<Navbar />
<div id="content">
{isLoading ? (
<Spinner
size={200}
color={
currentTheme == "dark"
? theming.dark.color1
: theming.light.color1
}
/>
) : (
<Switch>
<Route
exact
path="/"
component={() => (
<Home howMany={4} title="Home" />
)}
/>
<Route
exact
path="/archives"
component={() => (
<Home title="Archives" />
)}
/>
<Route
exact
path="/portfolio"
component={Portfolio}
/>
<Route
exact
path="/404"
component={NotFound}
/>
<Route
exact
path="/:path*"
component={Page}
/>
</Switch>
)}
</div>
<Footer />
</Router>
</LanguageContext.Provider>
</ThemeProvider>
</HelmetProvider>
)
}
componentDidUpdate(_, prevState) {
if (this.state.currentTheme !== prevState.currentTheme) {
// save theme when it is changed
storage.setItem("theme", this.state.currentTheme)
}
export default App
if (this.state.currentLanguage !== prevState.currentLanguage) {
// save language when it is changed
storage.setItem("lang", this.state.currentLanguage)
}
}
render() {
return (
<HelmetProvider>
<ThemeProvider
theme={{
currentTheme: this.state.currentTheme,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
setTheme: (setThemeTo) =>
this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
}}
>
<LanguageContext.Provider
value={{
language: this.state.currentLanguage,
toggleLanguage: () => {
// cycle through languages
let setLanguageTo = "en"
if (this.state.currentLanguage == "en")
setLanguageTo = "kr"
this.setState({
currentLanguage: setLanguageTo,
})
},
}}
>
<GlobalStyle />
<Router>
<Navbar />
<div id="content">
{this.state.isLoading ? (
<Spinner size={200} />
) : (
<Switch>
<Route
exact
path="/"
component={() => (
<Home
howMany={4}
title="Home"
/>
)}
/>
<Route
exact
path="/archives"
component={() => (
<Home title="Archives" />
)}
/>
<Route
exact
path="/portfolio"
component={Portfolio}
/>
<Route
exact
path="/404"
component={NotFound}
/>
<Route
exact
path="/:path*"
component={Page}
/>
</Switch>
)}
</div>
<Footer />
</Router>
</LanguageContext.Provider>
</ThemeProvider>
</HelmetProvider>
)
}
}