Update

React/test-feedback/src/App.js

@@ -3,19 +3,22 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { Nav } from './components/Nav'
 import { Home } from './pages/Home'
 import { About } from './pages/About'
+import { FeedProvider } from './context/FeedContext'
 
 export const App = () => {
   return (
-    <Router>
-      <div>
-        <Nav />
-        <div className="container">
-          <Routes>
-            <Route exact path='/' element={<Home />} />
-            <Route exact path='/about' element={<About />} />
-          </Routes>
+    <FeedProvider>
+      <Router>
+        <div>
+          <Nav />
+          <div className="container">
+            <Routes>
+              <Route exact path='/' element={<Home />} />
+              <Route exact path='/about' element={<About />} />
+            </Routes>
+          </div>
         </div>
-      </div>
-    </Router>
+      </Router>
+    </FeedProvider>
   )
 }

React/test-feedback/src/components/feed/FeedForm.js

@@ -1,10 +1,12 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { FeedRating } from './FeedRating'
 import { Button } from '../shared/Button'
 import { Card } from '../shared/Card'
 import { v4 as uuid } from 'uuid'
+import FeedContext from '../../context/FeedContext'
 
 export const FeedForm = (props) => {
+  const { addFeed } = useContext(FeedContext)
   const [text, setText] = useState('')
   const [rating, setRating] = useState(0)
   const [isDisabled, setIsDisabled] = useState(true)
@@ -17,7 +19,7 @@ export const FeedForm = (props) => {
       text,
       rating
     }
-    props.addFeed(newFeed)
+    addFeed(newFeed)
   }
 
   const handleChange = (e) => {
@@ -37,15 +39,15 @@ export const FeedForm = (props) => {
     <Card>
       <form onSubmit={handleSubmit} >
         <h2>How would you rate your service with us?</h2>
-        <FeedRating setRating = {(rating) => setRating(rating)} />
+        <FeedRating setRating={(rating) => setRating(rating)} />
         <div className="input-group">
           <input
             onChange={handleChange}
             type="text"
             value={text}
             placeholder="Write a review"
           />
-          <Button type = 'submit' isDisabled={isDisabled} >
+          <Button type='submit' isDisabled={isDisabled} >
             Send
           </Button>
         </div>

React/test-feedback/src/components/feed/FeedItem.js

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Card } from '../shared/Card'
 import { FaTimes } from 'react-icons/fa'
+import FeedContext from '../../context/FeedContext'
 
-export const FeedItem = ({ item, deleteFeed }) => {
+export const FeedItem = ({ item }) => {
+  const { deleteFeed } = useContext(FeedContext)
   return (
     <Card>
       <div className="num-display">{item.rating}</div>

React/test-feedback/src/components/feed/FeedList.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { FeedItem } from './FeedItem'
 import { motion, AnimatePresence } from 'framer-motion'
 
-export const FeedList = ({ feed, deleteFeed }) => {
+export const FeedList = ({ feed }) => {
   if (!feed) {
     return <h1>Nothing</h1>
   }
@@ -12,7 +12,7 @@ export const FeedList = ({ feed, deleteFeed }) => {
       <AnimatePresence>
         {feed.map((item) => (
           <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-            <FeedItem item={item} deleteFeed={deleteFeed} />
+            <FeedItem item={item} />
           </motion.div>
         ))}
       </AnimatePresence>

React/test-feedback/src/context/FeedContext.js

@@ -0,0 +1,37 @@
+import React, { createContext, useEffect, useState } from 'react'
+import Feedback from '../data/FeedData'
+
+const FeedContext = createContext()
+
+export const FeedProvider = ({children}) => {
+  const [feed, setFeed] = useState(Feedback)
+  useEffect(() => {
+
+  }, [])
+
+  const deleteFeed = (id) => {
+    setFeed(feed.filter(f => f.id != id))
+  }
+
+  const addFeed = (newFeed) => {
+    setFeed([newFeed, ...feed])
+  }
+
+  const editFeed = () => {
+
+  }
+
+  return (
+    <FeedContext.Provider
+    value={{
+      feed,
+      addFeed,
+      deleteFeed
+    }}
+    >
+      {children}
+    </FeedContext.Provider>
+  )
+}
+
+export default FeedContext

React/test-feedback/src/pages/Home.js

@@ -1,25 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import Feedback from '../data/FeedData'
+import React, { useContext, useEffect, useState } from 'react'
 import { FeedList } from '../components/feed/FeedList'
 import { FeedStats } from '../components/feed/FeedStats'
 import { FeedForm } from '../components/feed/FeedForm'
+import FeedContext from '../context/FeedContext'
 
 export const Home = () => {
-  const [feed, setFeed] = useState(Feedback)
-
-  const deleteFeed = (id) => {
-    setFeed(feed.filter(f => f.id != id))
-  }
-
-  const addFeed = (newFeed) => {    
-    setFeed([newFeed, ...feed])
-  }
-
+  const { feed } = useContext(FeedContext)
   return (
     <div className="container">
-      <FeedForm addFeed = {addFeed} />
+      <FeedForm />
       <FeedStats feed={feed} />
-      <FeedList feed={feed} deleteFeed={deleteFeed} />
+      <FeedList feed={feed} />
     </div>
   )
 }