Refactor class components to functions

Author: ewydra

src/components/ArticleForm.jsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from "react";
+import React, { Fragment, useContext } from "react";
 import { connect } from "react-redux";
 import { Formik, Field, Form } from "formik";
 import { format } from 'date-fns';
@@ -22,57 +22,55 @@ const validate = values => {
   return errors;
 }
 
-export class ArticleForm extends Component {
-  static contextType = SnackbarContext;
+export const ArticleForm = ({ article, title, createArticle, history }) => {
+  const context = useContext(SnackbarContext)
 
-  submit = (values, { resetForm }) => {
+  const submit = (values, { resetForm }) => {
     values.date = format(new Date(), 'MMMM d, yyyy H:mm:ss');
     values.id = Date.now();
-    this.props.createArticle(values, this.props.history);
-    this.context.showSnackbar('The article was published successfully', 'success');
+    createArticle(values, history);
+    context.showSnackbar('The article was published successfully', 'success');
     resetForm();
   }
 
-  render() {
-    return (
-      <Fragment>
-        <h1 className="Article-form__title">{this.props.title || ''}</h1>
-          <Formik
-            initialValues={this.props.article || initialValues}
-            onSubmit={this.submit}
-            validate={validate}
-            render={({ isSubmitting }) => (
-              <Form className="Article-form">
-                <Field
-                  name="title"
-                  placeholder="Title"
-                  component={TextField}
-                />
-                <Field
-                  name="abstract"
-                  placeholder="Abstract"
-                  component={TextField}
-                />
-                <Field
-                  name="text"
-                  placeholder="Text"
-                  rows={15}
-                  component={TextField}
-                />
-                <button
-                  type="submit"
-                  disabled={isSubmitting}
-                  className="Article-form__button"
-                >
-                  Submit
-                </button>
-              </Form>
-            )}
-          />
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <h1 className="Article-form__title">{title || ''}</h1>
+        <Formik
+          initialValues={article || initialValues}
+          onSubmit={submit}
+          validate={validate}
+          render={({ isSubmitting }) => (
+            <Form className="Article-form">
+              <Field
+                name="title"
+                placeholder="Title"
+                component={TextField}
+              />
+              <Field
+                name="abstract"
+                placeholder="Abstract"
+                component={TextField}
+              />
+              <Field
+                name="text"
+                placeholder="Text"
+                rows={15}
+                component={TextField}
+              />
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="Article-form__button"
+              >
+                Submit
+              </button>
+            </Form>
+          )}
+        />
+    </Fragment>
+  );
+};
 
 const mapDispatchToProps = {
   createArticle

src/components/ArticleList.jsx

@@ -1,23 +1,18 @@
-import React, {Component} from 'react';
+import React from 'react';
 import ArticleListItem from './ArticleListItem';
 import withLoading from './utils/withLoading';
 
-export class ArticleList extends Component {
-  listArticles = () => (
-    Object.entries(this.props.articles).map(([key, val]) => {
+export const ArticleList = ({ articles }) => {
+  const listArticles = () => 
+    Object.entries(articles).map(([key, val]) => {
       return <ArticleListItem key={key} article={val} />
     })
-  )
 
-  render() {
-    return ( 
+    return (
       <ul className="Article-list">
-        {this.listArticles()}
+        {listArticles()}
       </ul>
     )
-  }
 }
 
-ArticleList = withLoading(ArticleList)
-
-export default ArticleList;
+export default withLoading(ArticleList);

src/components/ArticleListPage.jsx

@@ -1,20 +1,17 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { isLoading, getArticlesSelector } from '../selectors/articles';
 import { fetchArticles } from '../actions/articles';
 import { ArticleList } from './ArticleList';
 
-class ArticleListPage extends Component {
-  componentDidMount() {
-    this.props.fetchArticles();
-  }
+const ArticleListPage = ({ articles, isLoading, fetchArticles }) => {
+  useEffect(() => {
+    fetchArticles()
+  }, [fetchArticles]);
 
-  render() {
-    const { articles, isLoading } = this.props;
-    return (
-      <ArticleList articles={articles} isLoading={isLoading} />
-    )
-  }
+  return (
+    <ArticleList articles={articles} isLoading={isLoading} />
+  )
 }
 
 const mapStateToProps = (state) => ({

src/components/Snackbar/SnackbarProvider.jsx

@@ -1,36 +1,32 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import SnackbarContext from './SnackbarContext';
 import Snackbar from './Snackbar';
 
-export class SnackbarProvider extends Component {
-  showSnackbar = (message, status) => {
-    this.setState({
-      message,
-      status,
-      isOpen: true,
-    });
-    setTimeout(() => this.setState({ isOpen: false}), 3000);
-  };
+export const SnackbarProvider = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [message, setMessage] = useState('')
+  const [status, setStatus] = useState('success')
 
-  state = {
-    isOpen: false,
-    message: '',
-    status: 'success',
-    showSnackbar: this.showSnackbar,
-  };
+  const showSnackbar = useCallback((message, status) => {
+    setIsOpen(true)
+    setMessage(message)
+    setStatus(status)
+    setTimeout(() => setIsOpen(false), 3000);
+  }, []);
 
-  render() {
-    const { children } = this.props;
+  const value = useMemo(() => ({
+    isOpen,
+    message,
+    status,
+    showSnackbar,
+  }), [isOpen, message, status, showSnackbar])
 
-    return (
-      <SnackbarContext.Provider
-        value={this.state}
-      >
-        <Snackbar />
-        {children}
-      </SnackbarContext.Provider>
-    );
-  }
+  return (
+    <SnackbarContext.Provider value={value}>
+      <Snackbar />
+      {children}
+    </SnackbarContext.Provider>
+  );
 }
 
 export default SnackbarProvider;