Unify page function style

src/pages/donate.js

@@ -36,7 +36,7 @@ export const query = graphql`
   }
 `;
 
-function DonatePage(props) {
+const DonatePage = (props) => {
   const [amount, setAmount] = useState(5);
   const { t } = useI18next();
   const { path } = React.useContext(I18nextContext);
@@ -126,7 +126,7 @@ function DonatePage(props) {
       </section>
     </Layout>
   );
-}
+};
 
 DonatePage.propTypes = {
   data: PropTypes.object.isRequired,

src/pages/donate/thank-you.js

@@ -23,7 +23,7 @@ export const query = graphql`
   }
 `;
 
-function ThankYouPage(props) {
+const ThankYouPage = (props) => {
   const { site } = props.data;
 
   let contactEmail = site.siteMetadata.contactEmail;
@@ -46,7 +46,7 @@ function ThankYouPage(props) {
       </section>
     </Layout>
   );
-}
+};
 
 ThankYouPage.propTypes = {
   data: PropTypes.object.isRequired,

src/pages/index.js

@@ -54,8 +54,10 @@ export const query = graphql`
   }
 `;
 
-class IndexPage extends React.Component {
-  componentDidMount() {
+const IndexPage = (props) => {
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
     anime({
       targets: [
         "." + styles.profileCard + " > span",
@@ -81,10 +83,9 @@ class IndexPage extends React.Component {
       duration: 250,
       easing: "easeInOutCirc",
     });
-  }
+  }, []);
 
-  render() {
-    let meta = this.props.data.site.siteMetadata;
+  let meta = props.data.site.siteMetadata;
 
   return (
     <Layout title="Kevin Kandlbinder" transparentTopbar={true}>
@@ -192,7 +193,7 @@ class IndexPage extends React.Component {
             <Trans>featuredProjects</Trans>
           </h1>
           <div className={projectStyles.projectList}>
-              {this.props.data.allProjectsJson.nodes.map((project) => {
+            {props.data.allProjectsJson.nodes.map((project) => {
               return (
                 <Link
                   className={projectStyles.projectCard}
@@ -203,9 +204,7 @@ class IndexPage extends React.Component {
                     className={projectStyles.projectCardImage}
                     style={{
                       backgroundImage:
-                          "url(" +
-                          project.image.childImageSharp.resize.src +
-                          ")",
+                        "url(" + project.image.childImageSharp.resize.src + ")",
                     }}
                   >
                     <div className={projectStyles.projectCardMeta}>
@@ -235,8 +234,16 @@ class IndexPage extends React.Component {
       </Link>
     </Layout>
   );
+};
+
+/*class IndexPage extends React.Component {
+  componentDidMount() {
   }
-}
+
+  render() {
+
+    
+}*/
 
 IndexPage.propTypes = {
   data: PropTypes.object.isRequired,