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,25 +8,8 @@ import { randomQuote } from '../../utils/get-words';
 
 import './404.css';
 
-class NotFoundPage extends Component {
+const FourOhFour = () => {
-  constructor(props) {
+  const quote = randomQuote();
-    super(props);
-    this.state = {
-      randomQuote: null
-    };
-  }
-
-  componentDidMount() {
-    this.updateQuote();
-  }
-
-  updateQuote() {
-    this.setState({
-      randomQuote: randomQuote()
-    });
-  }
-
-  render() {
   return (
     <div className='notfound-page-wrapper'>
       <Helmet title='Page Not Found | freeCodeCamp' />
@@ -34,31 +17,25 @@ class NotFoundPage extends Component {
       <Spacer />
       <h1>Page not found.</h1>
       <Spacer />
-        {this.state.randomQuote ? (
       <div>
         <p>
-              We couldn&#x27;t find what you were looking for, but here is a
+          We couldn&#x27;t find what you were looking for, but here is a quote:
-              quote:
         </p>
         <Spacer />
         <blockquote className='quote-wrapper'>
           <p className='quote'>
             <span>&#8220;</span>
-                {this.state.randomQuote.quote}
+            {quote.quote}
           </p>
-              <p className='author'>- {this.state.randomQuote.author}</p>
+          <p className='author'>- {quote.author}</p>
         </blockquote>
       </div>
-        ) : (
-          <Loader />
-        )}
       <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>
   );
 }