From dc0ecd1f39d5526c1f88419c0b424e1f2155d15c Mon Sep 17 00:00:00 2001 From: karkir0003 Date: Sun, 24 Dec 2023 17:09:15 -0500 Subject: [PATCH] class --> functional --- pages/index.js | 136 ++++++++++++++++++++----------------------------- 1 file changed, 54 insertions(+), 82 deletions(-) diff --git a/pages/index.js b/pages/index.js index 3e2edb6..a986f69 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useState, useEffect} from "react"; import Head from "next/head" import stylesheet from 'styles/main.scss' @@ -6,97 +6,69 @@ import Header from "../components/Header" import Main from "../components/Main" import Footer from "../components/Footer" -class IndexPage extends React.Component { - constructor(props) { - super(props) - this.state = { - isArticleVisible: false, - timeout: false, - articleTimeout: false, - article: "", - loading: "is-loading" - } - this.handleOpenArticle = this.handleOpenArticle.bind(this) - this.handleCloseArticle = this.handleCloseArticle.bind(this) - } +const IndexPage = () => { + const [isArticleVisible, setIsArticleVisible] = useState(false); + const [timeout, setTimeout] = useState(false); + const [articleTimeout, setArticleTimeout] = useState(false); + const [article, setArticle] = useState(""); + const [loading, setLoading] = useState("is-loading"); - componentDidMount() { - this.timeoutId = setTimeout(() => { - this.setState({ loading: "" }) - }, 100) - } - - componentWillUnmount() { - if (this.timeoutId) { - clearTimeout(this.timeoutId) - } - } - - handleOpenArticle(article) { - this.setState({ - isArticleVisible: !this.state.isArticleVisible, - article - }) + useEffect(() => { + const timeoutId = setTimeout(() => { + setLoading(""); + }, 100); + return () => clearTimeout(timeoutId) + }, []); + const handleOpenArticle = (article) => { + setIsArticleVisible(!isArticleVisible); + setArticle(article); setTimeout(() => { - this.setState({ - timeout: !this.state.timeout - }) - }, 325) - + setTimeout(!timeout) + }, 325); setTimeout(() => { - this.setState({ - articleTimeout: !this.state.articleTimeout - }) - }, 350) - } - - handleCloseArticle() { - this.setState({ - articleTimeout: !this.state.articleTimeout - }) + setArticleTimeout(!articleTimeout) + }, 350); + }; + const handleCloseArticle = () => { + setArticleTimeout(!articleTimeout); setTimeout(() => { - this.setState({ - timeout: !this.state.timeout - }) - }, 325) - + setTimeout(!timeout) + }, 325); setTimeout(() => { - this.setState({ - isArticleVisible: !this.state.isArticleVisible, - article: "" - }) - }, 350) - } - render() { - return ( -
-
- - Next.js Starter - - + setIsArticleVisible(!isArticleVisible); + setArticle(""); + }, 350); + }; -