class --> functional

karkir0003 · Dec 24, 2023 · dc0ecd1 · dc0ecd1
1 parent eb8251c
commit dc0ecd1
Showing 1 changed file with 54 additions and 82 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -1,102 +1,74 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import Head from "next/head"
 import stylesheet from 'styles/main.scss'
 
 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 (
-            <div className={`body ${this.state.loading} ${this.state.isArticleVisible ? "is-article-visible" : ""}`}>
-                <div>
-                    <Head>
-                        <title>Next.js Starter</title>
-                        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,600,600i" rel="stylesheet" />
-                    </Head>
+            setIsArticleVisible(!isArticleVisible);
+            setArticle("");
+        }, 350);
+    };
 
-                    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+    return (
+        <div className={`body ${loading} ${isArticleVisible ? "is-article-visible" : ""}`}>
+            <div>
+                <Head>
+                    <title>Next.js Starter</title>
+                    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,600,600i" rel="stylesheet" />
+                </Head>
 
-                    <div id="wrapper">
-                        <Header onOpenArticle={this.handleOpenArticle} timeout={this.state.timeout} />
-                        <Main
-                            isArticleVisible={this.state.isArticleVisible}
-                            timeout={this.state.timeout}
-                            articleTimeout={this.state.articleTimeout}
-                            article={this.state.article}
-                            onCloseArticle={this.handleCloseArticle}
-                        />
-                        <Footer timeout={this.state.timeout} />
-                    </div>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
 
-                    <div id="bg" />
+                <div id="wrapper">
+                    <Header onOpenArticle={handleOpenArticle} timeout={timeout} />
+                    <Main
+                        isArticleVisible={isArticleVisible}
+                        timeout={timeout}
+                        articleTimeout={articleTimeout}
+                        article={article}
+                        onCloseArticle={handleCloseArticle}
+                    />
+                    <Footer timeout={timeout} />
                 </div>
+
+                <div id="bg" />
             </div>
-        )
-    }
-}
+        </div>
+    );
+};
+
 
-export default IndexPage
+export default IndexPage;