Feature/multiple photos

cypress/e2e/error_spec.cy.js

@@ -1,26 +1,6 @@
 describe('error page', () => {
   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.")
+    cy.visit('http://localhost:3000/factsss')
+    cy.get('.error-message').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 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')
-    })
 })  

cypress/e2e/fact_spec.cy.js

@@ -1,47 +1,26 @@
 describe('visiting the fact page', () => {
 
   it('should show a random fact upon visit', () => {
-    cy.clearAllSessionStorage()
-    cy.intercept('https://catfact.ninja/fact', {
+    cy.intercept('https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=10', {
       status: 200,
       fixture: 'cat-facts'
     })
     cy.visit('http://localhost:3000/')
     cy.get('button[class=fact-btn]').click()
-    cy.get('p').contains('Cats can see like wicked good')
+    cy.get('p[class=name]').contains('Siamese')
+    cy.get('p[class=dog-friendly]').contains("Yes")
+    cy.get('p[class=energy-level]').contains(5)
+    cy.get('p[class=affection-level]').contains(5)
+    cy.get('p[class=origin]').contains('Thailand')
+    cy.get('p[class=temperament]').contains("Active, Agile, Clever, Sociable, Loving, Energetic")
+    cy.get('p[class=fact]').contains("While Siamese cats are extremely fond of their people, they will follow you around and supervise your every move, being talkative and opinionated. They are a demanding and social cat, that do not like being left alone for long periods.")
+    cy.get('img[class=fact-img]').should('be.visible')
   })
 
-  it('should have two buttons', () => {
-    cy.clearAllSessionStorage()
+  it('should have three buttons', () => {
     cy.visit('http://localhost:3000/fact')
-    cy.get('button[class=fav-card-btn]').should('be.visible')
-    cy.get('button[class=new-fact-btn]').should('be.visible')
-  })
-
-  it('should display error when failed to fetch fact and provide a path back home', () => {
-    cy.visit('http://localhost:3000/fact')
-    cy.intercept('https://catfact.ninja/fact', {
-      statusCode: 404,
-      body: '404 Not Found!',
-      headers: {
-        'x-not-found': 'true',
-      },
-    })
-    cy.get('h2').contains('Looks like something is wrong. Please try again later.')
-    cy.get('a').click()
-    cy.get('h1').contains('Cats Meow')
-  })
-
-  it('should maintain fact display over page refresh', () => {
-    cy.clearAllSessionStorage()
-    cy.visit('http://localhost:3000/fact')
-    cy.intercept('https://catfact.ninja/fact', {
-      status: 200,
-      fixture: 'cat-facts'
-    })
-    cy.get('button[class=new-fact-btn]').click()
-    cy.get('p').contains('Cats can see like wicked good')
-    cy.reload()
-    cy.get('p').contains('Cats can see like wicked good')
+    cy.get('.fav').should('be.visible')
+    cy.get('.left').should('be.visible')
+    cy.get('.right').should('be.visible')
   })
 })

cypress/e2e/favorites_spec.cy.js

@@ -1,28 +1,43 @@
 describe('favorites page', () => {
-  it('should be able to favorite a fact', () => {
-    cy.intercept('https://catfact.ninja/fact', {
+  beforeEach(() => {
+    cy.intercept('https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=10', {
       status: 200,
       fixture: 'cat-facts'
     })
     cy.visit('http://localhost:3000/fact')
-    cy.get('button[class=new-fact-btn]').click()
-    cy.get('p').contains('Cats can see like wicked good')
-    cy.get('button[class=fav-card-btn]').click()
-    cy.get('div[class=nav-links]').children().next().next().click()
-    cy.get('p[class=fav-card-fact]').contains('Cats can see like wicked good')
+    cy.get('.name').contains('Siamese')
+    cy.get('.fav').click()
+    cy.get('.nav-links').children().next().next().click()
   })
 
-  it('should have a card and a way to delete the card', () => {
-    cy.intercept('https://catfact.ninja/fact', {
-      status: 200,
-      fixture: 'cat-facts'
-    })
-    cy.visit('http://localhost:3000/fact')
-    cy.get('button[class=new-fact-btn]').click()
-    cy.get('button[class=fav-card-btn]').click()
-    cy.get('div[class=nav-links]').children().next().next().click()
-    cy.get('div[class=fav-card]').should('have.length', 1)
-    cy.get('button[class=delete-btn]:first').click()
-    cy.get('section[class=fav-card-display]').contains('No saved ideas yet')
+  it('should contain a favorited fact', () => {
+    cy.get('.fav-card-name').contains('Siamese')
+  })
+
+  it('should have have a delete button', () => {
+    cy.get('.card-btn-container').invoke('show')
+    cy.get('.delete-btn').invoke('show').click()
+    cy.get('.no-ideas').contains('No saved ideas yet')
+  })
+
+  it('should have an expand button', () => {
+    cy.get('.card-btn-container').invoke('show')
+    cy.get('.expand-btn').invoke('show').click()
+    cy.get('.exp-name').contains('Siamese')
+    cy.get('.exp-description').contains('While Siamese cats are extremely fond of their people, they will follow you around and supervise your every move, being talkative and opinionated. They are a demanding and social cat, that do not like being left alone for long periods.')
+    cy.get('.exp-stats-title').contains('Stats')
+    cy.get('.exp-dogFriendly').contains('Yes')
+    cy.get('.exp-energyLevel').contains('5')
+    cy.get('.exp-origin').contains('Thailand')
+    cy.get('.exp-temperament').contains('Active, Agile, Clever, Sociable, Loving, Energetic')
+    cy.get('.exp-links-title').contains('External Links')
+    cy.get('.vca-link').contains('VCA')
+    cy.get('.wiki-link').contains('Wikipedia')
+  })
+
+  it('should have a button to return to favorites view', () => {
+    cy.get('.card-btn-container').invoke('show')
+    cy.get('.expand-btn').invoke('show').click()
+    cy.get('.remove-card').click()
   })
 })

cypress/fixtures/cat-facts.json

@@ -1,3 +1,49 @@
-{
-  "fact": "Cats can see like wicked good"
+[{
+  "breeds": [{
+      "adaptability": "5",
+      "affection_level": "5",
+      "alt_names": "Siam, Thai Cat",
+      "cfa_url": "http://cfa.org/Breeds/BreedsSthruT/Siamese.aspx",
+      "child_friendly": "4",
+      "country_code": "TH",
+      "country_codes": "TH",
+      "description": "While Siamese cats are extremely fond of their people, they will follow you around and supervise your every move, being talkative and opinionated. They are a demanding and social cat, that do not like being left alone for long periods.",
+      "dog_friendly": "5",
+      "energy_level": "5",
+      "experimental": "0",
+      "grooming": "1",
+      "hairless": "0",
+      "health_issues": "1",
+      "hypoallergenic": "1",
+      "id": "siam",
+      "indoor": "0",
+      "intelligence": "5",
+      "lap": "1",
+      "life_span": "12 - 15",
+      "name": "Siamese",
+      "natural": "0",
+      "origin": "Thailand",
+      "rare": "0",
+      "reference_image_id": "ai6Jps4sx",
+      "rex": "0",
+      "shedding_level": "2",
+      "short_legs": "0",
+      "social_needs": "5",
+      "stranger_friendly": "5",
+      "suppressed_tail": "0",
+      "temperament": "Active, Agile, Clever, Sociable, Loving, Energetic",
+      "vcahospitals_url": "https://vcahospitals.com/know-your-pet/cat-breeds/siamese",
+      "vetstreet_url": "http://www.vetstreet.com/cats/siamese",
+      "vocalisation": 5,
+      "weight": {
+        "imperial": "8 - 15",
+        "metric": "4 - 7"
+      },
+      "wikipedia_url": "https://en.wikipedia.org/wiki/Siamese_(cat)"
+  }],
+  "height": "809",
+  "id": "uTG1YFzJV",
+  "url": "https://cdn2.thecatapi.com/images/uTG1YFzJV.jpg",
+  "width": "1080"
 }
+]

src/components/About/About.css

@@ -1,6 +1,6 @@
 .about-box {
   display: flex;
-  background-color: pink;
+  background-color: #4b5d67;
 }
 
 .how-list {

src/components/App/App.css

@@ -1,6 +1,8 @@
 html { 
   height: 100%;
+  background-color: black;
 }
+
 main {
   height: 100%;
-}
+}

src/components/App/App.js

@@ -1,29 +1,64 @@
 import './App.css';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Home from '../Home/Home';
-import Fact, { factLoader } from '../Fact/Fact';
+import Fact from '../Fact/Fact';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Favorites from '../Favorites/Favorites';
 import Error from '../Error/Error';
 import RootLayout from '../../utilities/RootLayout';
+import dataCleaner from '../../utilities/dataCleaner';
+import { getCatPhotos } from '../../utilities/api-call';
 
 const App = () => {
-  const [favorites, setFavorites] = useState(JSON.parse(sessionStorage.getItem('allFavorites')) || []);
+  const [favoritedFacts, setFavoritedFacts] = useState([]);
+  const [cats, setCats] = useState([]);
+  const [count, setCount] = useState(0);
+  const [err, setErr] = useState()
+
+  useEffect(() => {
+    if (cats.length === 0) {
+      getCatPhotos()
+      .then(res => {
+        setCats(dataCleaner(res))
+      })
+      .catch(err => {
+        console.log(err)
+        setErr(err)
+
+      })
+    }
+  },[cats])
 
   const favoriteFact = (currentFact) => {
-    const noDuplicate = favorites.every(fact => fact.fact !== currentFact.fact)
-
+    const noDuplicate = favoritedFacts.every(fact => fact.id !== currentFact.id)
     if (noDuplicate) {
-      setFavorites([...favorites, currentFact])
-      sessionStorage.setItem('allFavorites', JSON.stringify([...favorites, currentFact]))
+      currentFact.favorited = true;
+      setFavoritedFacts([...favoritedFacts, currentFact])
+      const updatedCats = cats.map((cat) => {
+        if (cat.id === currentFact.id) {
+          return currentFact
+        }
+        return cat
+      });
+      setCats([...updatedCats])
     }
   }
 
   const removeFav = (id) => {
-    sessionStorage.removeItem('allFavorites')
-    const newFavs = favorites.filter(fact => fact.id !== id)
-    setFavorites(newFavs)
-    sessionStorage.setItem('allFavorites', JSON.stringify(newFavs))
+    const updatedCats = cats.map((cat) => {
+        if (cat.id === id) {
+          cat.favorited = false;
+          return cat
+        }
+        return cat
+      });
+    setCats([...updatedCats])
+    const newFavs = favoritedFacts.filter(fact => fact.id !== id)
+    setFavoritedFacts(newFavs)
+  }
+
+  const addData = (data) => {
+    setCats([...cats, ...data])
   }
 
   const routes = createBrowserRouter([
@@ -38,17 +73,25 @@ const App = () => {
         },
         {
           path: "/fact",
-          element: <Fact favFact={favoriteFact} />,
-          loader: factLoader
+          element: <Fact 
+            favFact={favoriteFact}
+            removeFav={removeFav} 
+            setCats={setCats} 
+            cats={cats} 
+            addData={addData} 
+            catCount={count}
+            err={err}
+            setErr={err}
+            saveCatCount={setCount}/>,
         },
         {
           path: "/favorites",
-          element: <Favorites removeFav={removeFav} favs={favorites} />
+          element: <Favorites removeFav={removeFav} favs={favoritedFacts} />
         }
       ]
     }
   ])
-  
+
   return (
     <RouterProvider router={routes} />
   )