chore(client): refactor NotFoundPage (#39777)

client/src/client-only-routes/ShowProfileOrFourOhFour.js

@@ -10,7 +10,7 @@ import {
   fetchProfileForUser,
   usernameSelector
 } from '../redux';
-import FourOhFourPage from '../components/FourOhFour';
+import FourOhFour from '../components/FourOhFour';
 import Profile from '../components/profile/Profile';
 import { isBrowser } from '../../utils/index';
 
@@ -69,7 +69,7 @@ class ShowProfileOrFourOhFour extends Component {
       // We have a response from the API, but there is nothing in the store
       // for /:maybeUser. We can derive from this state the /:maybeUser is not
       // a user the API recognises, so we 404
-      return <FourOhFourPage />;
+      return <FourOhFour />;
     }
 
     // We have a response from the API, and we have some state in the

client/src/components/FourOhFour/index.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Helmet from 'react-helmet';
-import { Loader, Spacer } from '../../components/helpers';
+import { Spacer } from '../../components/helpers';
 import { Link } from 'gatsby';
 
 import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
@@ -8,57 +8,34 @@ import { randomQuote } from '../../utils/get-words';
 
 import './404.css';
 
-class NotFoundPage extends Component {
+const FourOhFour = () => {
-  constructor(props) {
+  const quote = randomQuote();
-    super(props);
+  return (
-    this.state = {
+    <div className='notfound-page-wrapper'>
-      randomQuote: null
+      <Helmet title='Page Not Found | freeCodeCamp' />
-    };
+      <img alt='404 Not Found' src={notFoundLogo} />
-  }
+      <Spacer />
-
+      <h1>Page not found.</h1>
-  componentDidMount() {
+      <Spacer />
-    this.updateQuote();
+      <div>
-  }
+        <p>
-
+          We couldn&#x27;t find what you were looking for, but here is a quote:
-  updateQuote() {
+        </p>
-    this.setState({
-      randomQuote: randomQuote()
-    });
-  }
-
-  render() {
-    return (
-      <div className='notfound-page-wrapper'>
-        <Helmet title='Page Not Found | freeCodeCamp' />
-        <img alt='404 Not Found' src={notFoundLogo} />
         <Spacer />
-        <h1>Page not found.</h1>
+        <blockquote className='quote-wrapper'>
-        <Spacer />
+          <p className='quote'>
-        {this.state.randomQuote ? (
+            <span>&#8220;</span>
-          <div>
+            {quote.quote}
-            <p>
+          </p>
-              We couldn&#x27;t find what you were looking for, but here is a
+          <p className='author'>- {quote.author}</p>
-              quote:
+        </blockquote>
-            </p>
-            <Spacer />
-            <blockquote className='quote-wrapper'>
-              <p className='quote'>
-                <span>&#8220;</span>
-                {this.state.randomQuote.quote}
-              </p>
-              <p className='author'>- {this.state.randomQuote.author}</p>
-            </blockquote>
-          </div>
-        ) : (
-          <Loader />
-        )}
-        <Spacer size={2} />
-        <Link className='btn btn-cta' to='/learn'>
-          View the Curriculum
-        </Link>
       </div>
-    );
+      <Spacer size={2} />
-  }
+      <Link className='btn btn-cta' to='/learn'>
-}
+        View the Curriculum
+      </Link>
+    </div>
+  );
+};
 
-export default NotFoundPage;
+export default FourOhFour;

client/src/pages/404.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Router } from '@reach/router';
 
-import NotFoundPage from '../components/FourOhFour';
+import FourOhFour from '../components/FourOhFour';
 /* eslint-disable max-len */
 import ShowProfileOrFourOhFour from '../client-only-routes/ShowProfileOrFourOhFour';
 /* eslint-enable max-len */
@@ -10,7 +10,7 @@ function FourOhFourPage() {
   return (
     <Router>
       <ShowProfileOrFourOhFour path='/:maybeUser' />
-      <NotFoundPage default={true} />
+      <FourOhFour default={true} />
     </Router>
   );
 }