changed class componenets to functional components and cleaned code

source/src/components/Footer.tsx

@@ -1,6 +1,7 @@
+import styled from "styled-components"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
-import styled from "styled-components"
 
 import theming from "../theming"
 

source/src/components/Navbar.tsx

@@ -1,17 +1,17 @@
-import React from "react"
+import styled from "styled-components"
+import { Link } from "react-router-dom"
+import ReactTooltip from "react-tooltip"
+import { isMobile } from "react-device-detect"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch } from "@fortawesome/free-solid-svg-icons"
-import styled from "styled-components"
-import ReactTooltip from "react-tooltip"
-import { Link } from "react-router-dom"
-import { isMobile } from "react-device-detect"
+
+import ThemeToggleButton from "./ThemeToggleButton"
+import Sidebar from "./Sidebar"
 
 import theming from "../theming"
 import NavbarData from "../data/NavbarData"
 
-import Sidebar from "./Sidebar"
-import ThemeToggleButton from "./ThemeToggleButton"
-
 const StyledNav = styled.nav`
 	/* set z index to arbitrarily high value to prevent other components from drawing over the navbar */
 	z-index: 9999;
@@ -65,18 +65,16 @@ const StyledLink = styled(Link)`
 	margin: 0 0.2rem 0 0.2rem;
 `
 
-export default class Navbar extends React.Component {
-	render() {
+const Navbar = () => {
 	return (
 		<StyledNav>
 			<StyledContainer>
 				<Link to="/">
 					<StyledImg
-							src={
-								process.env.PUBLIC_URL + "/icon/icon_circle.svg"
-							}
+						src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
 					/>
 				</Link>
+
 				<StyledNavLinks>
 					{NavbarData.map((item, index) => (
 						<StyledLink key={index} to={item.path}>
@@ -94,6 +92,7 @@ export default class Navbar extends React.Component {
 				>
 					<FontAwesomeIcon icon={faSearch} />
 				</StyledLink>
+
 				{!isMobile && (
 					<ReactTooltip id="search" type="dark" effect="solid">
 						<span>Search</span>
@@ -105,4 +104,5 @@ export default class Navbar extends React.Component {
 		</StyledNav>
 	)
 }
-}
+
+export default Navbar

source/src/components/PostCard.tsx

@@ -1,10 +1,8 @@
 import styled from "styled-components"
 import { useNavigate } from "react-router-dom"
 
-import theming from "../theming"
+import { Post } from "../types/typings"
 
-import Tag from "../components/Tag"
-import TagList from "../components/TagList"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
 	faBook,
@@ -12,7 +10,10 @@ import {
 	faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
 
-import { Post } from "../types/typings"
+import Tag from "../components/Tag"
+import TagList from "../components/TagList"
+
+import theming from "../theming"
 
 const StyledPostCard = styled.div`
 	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
@@ -60,11 +61,12 @@ const StyledPostCardContent = styled.div`
 interface _PostDateBase extends Post {
 	url: string
 }
-interface PostCardProps {
+
+interface Props {
 	postData: _PostDateBase
 }
 
-export default function PostCard(props: PostCardProps) {
+const PostCard = (props: Props) => {
 	const navigate = useNavigate()
 
 	return (
@@ -120,3 +122,5 @@ export default function PostCard(props: PostCardProps) {
 		</StyledPostCard>
 	)
 }
+
+export default PostCard

source/src/components/Sidebar.tsx

@@ -1,15 +1,16 @@
-import React from "react"
+import { useState } from "react"
 import styled, { css } from "styled-components"
 import ReactTooltip from "react-tooltip"
 import { isMobile } from "react-device-detect"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
 
-import theming from "../theming"
-import NavbarData, { Item } from "../data/NavbarData"
-
 import SubMenu from "./SubMenu"
 
+import NavbarData, { Item } from "../data/NavbarData"
+import theming from "../theming"
+
 const CommonSidebarToggleButtonStyle = css`
 	${theming.styles.navbarButtonStyle}
 	width: 1.5rem;
@@ -33,7 +34,7 @@ const StyledToggleSidebarButton2 = styled.div`
 	font-size: 1.1rem;
 `
 
-const StyledOverlay = styled.div<SidebarState>`
+const StyledOverlay = styled.div<{ isSidebarOpen: boolean }>`
 	display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
 	position: fixed;
 	top: 0;
@@ -49,7 +50,7 @@ const StyledOverlay = styled.div<SidebarState>`
 	}
 `
 
-const SidebarNav = styled.nav<SidebarState>`
+const SidebarNav = styled.nav<{ isSidebarOpen: boolean }>`
 	width: 250px;
 	height: 100vh;
 	display: flex;
@@ -77,40 +78,26 @@ const SidebarWrap = styled.div`
 	width: 100%;
 `
 
-interface SidebarProps {}
-interface SidebarState {
-	isSidebarOpen: boolean
-}
-
-export default class Sidebar extends React.Component<
-	SidebarProps,
-	SidebarState
-> {
-	constructor(props: SidebarProps) {
-		super(props)
-		this.state = {
-			isSidebarOpen: false,
-		}
-	}
+const Sidebar = () => {
+	const [isSidebarOpen, setSidebarOpen] = useState(false)
 
 	// for some reason this.setState only works if this is an arrow function
-	toggleSidebar = () => {
-		this.setState({ isSidebarOpen: !this.state.isSidebarOpen })
-		document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden"
+	const toggleSidebar = () => {
+		setSidebarOpen((prev) => !prev)
+		document.body.style.overflow = isSidebarOpen ? "" : "hidden"
 	}
 
-	render() {
 	return (
 		<>
 			<StyledOverlay
-					isSidebarOpen={this.state.isSidebarOpen}
-					onClick={this.toggleSidebar}
+				isSidebarOpen={isSidebarOpen}
+				onClick={toggleSidebar}
 			/>
 
 			<StyledToggleSidebarButton
 				data-tip
 				data-for="sidebar"
-					onClick={this.toggleSidebar}
+				onClick={toggleSidebar}
 			>
 				<FontAwesomeIcon icon={faEllipsisV}></FontAwesomeIcon>
 				{!isMobile && (
@@ -120,13 +107,10 @@ export default class Sidebar extends React.Component<
 				)}
 			</StyledToggleSidebarButton>
 
-				<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
+			<SidebarNav isSidebarOpen={isSidebarOpen}>
 				<SidebarWrap>
-						<StyledToggleSidebarButton2
-							onClick={this.toggleSidebar}
-						>
-							<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>{" "}
-							Close
+					<StyledToggleSidebarButton2 onClick={toggleSidebar}>
+						<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon> Close
 					</StyledToggleSidebarButton2>
 					{NavbarData.map((item: Item, index) => {
 						return <SubMenu item={item} key={index} />
@@ -136,4 +120,5 @@ export default class Sidebar extends React.Component<
 		</>
 	)
 }
-}
+
+export default Sidebar

source/src/components/SubMenu.tsx

@@ -1,9 +1,13 @@
-import React from "react"
+/**
+ * @file Submenu item for sidebar
+ */
+
+import { useState } from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
 
-import theming from "../theming"
 import { Item } from "../data/NavbarData"
+import theming from "../theming"
 
 const SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};
@@ -38,51 +42,37 @@ const DropdownLink = styled(Link)`
 	}
 `
 
-interface SubMenuProps {
+interface Props {
 	item: Item
 }
 
-interface SubMenuState {
-	isSubNavOpen: boolean
+const SubMenu = (props: Props) => {
+	const [isSubNavOpen, setSubNavOpen] = useState(false)
+
+	const handleSidebarLinkClick = () => {
+		if (props.item.subNav) setSubNavOpen((prev) => !prev)
 	}
 
-export default class SubMenu extends React.Component<
-	SubMenuProps,
-	SubMenuState
-> {
-	constructor(props: SubMenuProps) {
-		super(props)
-		this.state = {
-			isSubNavOpen: false,
-		}
-	}
-
-	showSubNav = () => this.setState({ isSubNavOpen: !this.state.isSubNavOpen })
-
-	render() {
 	return (
 		<>
-				<SidebarLink
-					to={this.props.item.path}
-					onClick={this.props.item.subNav && this.showSubNav}
-				>
+			<SidebarLink to={props.item.path} onClick={handleSidebarLinkClick}>
 				<div>
-						{this.props.item.icon}
-						<SidebarLabel>{this.props.item.title}</SidebarLabel>
+					{props.item.icon}
+					<SidebarLabel>{props.item.title}</SidebarLabel>
 				</div>
 				<div>
-						{this.props.item.subNav && this.state.isSubNavOpen
-							? this.props.item.iconOpened
-							: this.props.item.subNav
-							? this.props.item.iconClosed
+					{props.item.subNav && isSubNavOpen
+						? props.item.iconOpened
+						: props.item.subNav
+						? props.item.iconClosed
 						: null}
 				</div>
 			</SidebarLink>
 
 			{/* not used as of the moment */}
-				{this.state.isSubNavOpen && // check if subNav is open
-					this.props.item.subNav && // check if subNav exists in that item
-					this.props.item.subNav.map((item, index) => {
+			{isSubNavOpen && // check if subNav is open
+				props.item.subNav && // check if subNav exists in that item
+				props.item.subNav.map((item, index) => {
 					// shows all items in subNav
 					return (
 						<DropdownLink to={item.path} key={index}>
@@ -94,4 +84,5 @@ export default class SubMenu extends React.Component<
 		</>
 	)
 }
-}
+
+export default SubMenu

source/src/components/Tag.tsx

@@ -1,9 +1,10 @@
 import React from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import styled from "styled-components"
 
-import theming from "../theming"
 import { faTag } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+import theming from "../theming"
 
 const StyledTag = styled.div`
 	text-align: center;
@@ -15,17 +16,17 @@ const StyledTag = styled.div`
 	color: white;
 `
 
-interface TagProps {
+interface Props {
 	text: string
 	onClick?: (event: React.MouseEvent<never>) => void
 }
 
-export default class Tag extends React.Component<TagProps> {
-	render() {
+const Tag = (props: Props) => {
 	return (
-			<StyledTag onClick={this.props.onClick || undefined}>
-				<FontAwesomeIcon icon={faTag} /> &nbsp;{this.props.text}
+		<StyledTag onClick={props.onClick || undefined}>
+			<FontAwesomeIcon icon={faTag} /> &nbsp;{props.text}
 		</StyledTag>
 	)
 }
-}
+
+export default Tag

source/src/components/TagList.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { ReactNode } from "react"
 import styled from "styled-components"
 
 const StyledTagList = styled.div<{ direction: string }>`
@@ -10,16 +10,17 @@ const StyledTagList = styled.div<{ direction: string }>`
 	justify-content: ${({ direction }) => direction};
 `
 
-interface TagListProps {
+interface Props {
 	direction?: string
+	children?: ReactNode | undefined
 }
 
-export default class TagList extends React.Component<TagListProps> {
-	render() {
+const TagList = (props: Props) => {
 	return (
-			<StyledTagList direction={this.props.direction || "center"}>
-				{this.props.children}
+		<StyledTagList direction={props.direction || "center"}>
+			{props.children}
 		</StyledTagList>
 	)
 }
-}
+
+export default TagList

source/src/components/ThemeToggleButton.tsx

@@ -1,9 +1,9 @@
-import React from "react"
+import styled, { ThemeConsumer } from "styled-components"
+import { isMobile } from "react-device-detect"
+import ReactTooltip from "react-tooltip"
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
-import styled, { ThemeConsumer } from "styled-components"
-import ReactTooltip from "react-tooltip"
-import { isMobile } from "react-device-detect"
 
 import theming from "../theming"
 
@@ -16,8 +16,7 @@ const StyledThemeButton = styled.div`
 		})};
 `
 
-export default class Navbar extends React.Component {
-	render() {
+const Navbar = () => {
 	return (
 		<ThemeConsumer>
 			{({ currentTheme, setTheme }) => (
@@ -27,9 +26,7 @@ export default class Navbar extends React.Component {
 						data-for="theme"
 						className="right"
 						onClick={() =>
-								setTheme(
-									currentTheme === "dark" ? "light" : "dark"
-								)
+							setTheme(currentTheme === "dark" ? "light" : "dark")
 						}
 					>
 						{currentTheme == "dark" && (
@@ -49,4 +46,5 @@ export default class Navbar extends React.Component {
 		</ThemeConsumer>
 	)
 }
-}
+
+export default Navbar