Feature/cypress

cypress/e2e/error_spec.cy.js

@@ -1,19 +1,26 @@
 describe('error page', () => {
-  // it('should display an error page if failed to get fact', () => {
-  //   cy.intercept('https://catfact.ninja/fact', {
-  //     statusCode: 500
-  //   })
-  //   cy.visit('https://cats-meow.vercel.app/')
-  //   cy.get('button[class=fact-btn]').click()
-  //   cy.get('h2').contains('Looks like there was a problem. Please try again later')
-  // })
+  it('should display an error page if failed to get fact', () => {
+    cy.intercept('https://catfact.ninja/fact', {
+      statusCode: 500
+    })
+    cy.visit('http://localhost:3000/')
+    cy.get('button[class=fact-btn]').click()
+    cy.get('h2').contains("Looks like something is wrong. Please try again later.")
+  })
 
-  // it('should display message if no favorited facts', () => {
-  //   cy.visit('https://cats-meow.vercel.app/')
-  //   cy.get('button[class=fav-btn]').click()
-  //   cy.get('h2').contains('No saved ideas yet')
-  // })
-    it('should be able to visit home page', () => {
-      cy.visit('https://cats-meow.vercel.app/')
+  it('should display message if no favorited facts', () => {
+    cy.visit('https://cats-meow.vercel.app/')
+    cy.get('button[class=fav-btn]').click()
+    cy.get('h2').contains('No saved ideas yet')
+  })
+    it('should be able to navigate back to home page', () => {
+      cy.intercept('https://catfact.ninja/fact', {
+      statusCode: 500
+    })
+      cy.visit('http://localhost:3000/')
+      cy.get('button[class=fact-btn]').click()
+      cy.get('h2').contains("Looks like something is wrong. Please try again later.")
+      cy.get('h3').click()
+      cy.get('h1').contains('Cats Meow')
     })
 })  

src/components/App/App.js

@@ -1,7 +1,6 @@
 import './App.css';
 import React, { useState } from 'react';
 import Home from '../Home/Home';
-// import Header from '../Header/Header';
 import Fact, { factLoader } from '../Fact/Fact';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Favorites from '../Favorites/Favorites';
@@ -10,7 +9,6 @@ import RootLayout from '../../utilities/RootLayout';
 
 const App = () => {
   const [favorites, setFavorites] = useState(JSON.parse(sessionStorage.getItem('allFavorites')) || []);
-  const [err, setErr] = useState('');
 
   const favoriteFact = (currentFact) => {
     const noDuplicate = favorites.every(fact => fact.fact !== currentFact.fact)
@@ -27,15 +25,12 @@ const App = () => {
     setFavorites(newFavs)
     sessionStorage.setItem('allFavorites', JSON.stringify(newFavs))
   }
-
-  const removeErr = () => {
-    setErr('')
-  }
 
   const routes = createBrowserRouter([
     {
       path: "/",
       element: <RootLayout />,
+      errorElement: <Error err="Looks like something is wrong. Please try again later." />,
       children: [
         {
           path: "/",
@@ -49,30 +44,14 @@ const App = () => {
         {
           path: "/favorites",
           element: <Favorites removeFav={removeFav} favs={favorites} />
-        },
-        {
-          path: "/*",
-          element: <Error removeErr={removeErr} err="Page does not exist" /> 
         }
       ]
-    },
-
-    ]
-  )
-
-
-    if (err) {
-      return (
-        <div className="error-page">
-          <Error removeErr={removeErr} err={err} />
-        </div>
-      )
-    } else {
-      return (
-        <RouterProvider router={routes} />
-      )
     }
+  ])
 
+  return (
+    <RouterProvider router={routes} />
+  )
 }
 
 export default App;

src/components/Error/Error.js

@@ -3,20 +3,19 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import './Error.css'; 
 
-const Error = ({ err, removeErr }) => {
+const Error = ({ err }) => {
   return (
     <section className="error-page">
       <h2 className="error-message">{err}</h2>
       <img className="error-img" src="https://images.unsplash.com/photo-1498579687545-d5a4fffb0a9e?ixlib=rb-4.0.3&ixid
       =M3wxMjA3fDB8MHxzZWFyY2h8NXx8c2FkJTIwY2F0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" alt="sad cat in a box"/>
-      <Link to="/"><h3 onClick={() => removeErr()}>return home</h3></Link>
+      <Link to="/"><h3>return home</h3></Link>
     </section>
   )
 }
 
 export default Error;
 
 Error.propTypes = {
-  err: PropTypes.string.isRequired,
-  removeErr: PropTypes.func.isRequired
+  err: PropTypes.string.isRequired
 }

src/components/Fact/Fact.js

@@ -5,11 +5,16 @@ import PropTypes from 'prop-types';
 import { useLoaderData } from 'react-router-dom';
 
 const Fact = ({ favFact }) => {
-  const [currentFact, setCurrentFact] = useState(JSON.parse(sessionStorage.getItem('currentFact')) || {});
+  const [currentFact, setCurrentFact] = useState(JSON.parse(sessionStorage.getItem('currentFact')));
   // const [err, setErr] = useState('');
 
   const randFact = useLoaderData()
 
+  if (currentFact === null) {
+    setCurrentFact(randFact)
+    sessionStorage.setItem('currentFact', JSON.stringify({fact: randFact.fact}))
+  }
+
   const setFact = (fact) => {
     setCurrentFact({fact: fact});
     sessionStorage.setItem('currentFact', JSON.stringify({fact: fact}))
@@ -29,7 +34,7 @@ const Fact = ({ favFact }) => {
   return (
     <section className="fact-page">
       <div className="fact-display">
-        <p className="fact">{currentFact.fact || randFact.fact}</p>
+        <p className="fact">{currentFact.fact}</p>
         <img className="fact-img" src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib
         =rb-4.0.3&ixid
         =M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGNhdHN8ZW58MHx8MHx