.1502411993651747:ae9d4acc7694584095e45f960a84a3b1_69f1504d84b8b87fa7db18fa.69f1507184b8b87fa7db18fc.69f1507163a2bca3b42f3a56:Trae CN.T(2026/4/29 08:27:29)

db.json

@@ -3,16 +3,19 @@
     {
       "id": 1,
       "rating": 10,
-      "text": "This is feedback item 1 coming from the backend"
+      "text": "This is feedback item 1 coming from the backend",
+      "status": "open"
     },
     {
       "id": 2,
       "rating": 8,
-      "text": "This is feedback item 2 coming from the backend"
+      "text": "This is feedback item 2 coming from the backend",
+      "status": "open"
     },
     {
-      "text": "Updated all packages to latest",
+      "text": "Updated feedback content - testing edit functionality",
       "rating": 6,
+      "status": "open",
       "id": 4
     }
   ]

src/components/FeedbackForm.jsx

@@ -21,16 +21,11 @@ function FeedbackForm() {
     }
   }, [feedbackEdit])
 
-  // NOTE: This should be checking input value not state as state won't be the updated value until the next render of the component
-
-  // prettier-ignore
-  const handleTextChange = ({ target: { value } }) => { // 👈  get the value
+  const handleTextChange = ({ target: { value } }) => {
     if (value === '') {
       setBtnDisabled(true)
       setMessage(null)
-
-  // prettier-ignore
-    } else if (value.trim().length < 10) { // 👈 check for less than 10
+    } else if (value.trim().length < 10) {
       setMessage('Text must be at least 10 characters')
       setBtnDisabled(true)
     } else {
@@ -43,25 +38,28 @@ function FeedbackForm() {
   const handleSubmit = (e) => {
     e.preventDefault()
     if (text.trim().length > 10) {
-      const newFeedback = {
-        text,
-        rating,
-      }
-
       if (feedbackEdit.edit === true) {
-        updateFeedback(feedbackEdit.item.id, newFeedback)
+        const wasResolved = feedbackEdit.item.status === 'resolved'
+        const updatedFeedback = {
+          text,
+          rating,
+          status: wasResolved ? 'open' : feedbackEdit.item.status,
+        }
+        updateFeedback(feedbackEdit.item.id, updatedFeedback)
       } else {
+        const newFeedback = {
+          text,
+          rating,
+        }
         addFeedback(newFeedback)
       }
 
-      // NOTE: reset to default state after submission
-      setBtnDisabled(true) // 👈  add this line to reset disabled
-      setRating(10) //👈 add this line to set rating back to 10
+      setBtnDisabled(true)
+      setRating(10)
       setText('')
     }
   }
 
-  // NOTE: pass selected to RatingSelect so we don't need local duplicate state
   return (
     <Card>
       <form onSubmit={handleSubmit}>

src/components/FeedbackItem.jsx

@@ -1,11 +1,13 @@
-import { FaTimes, FaEdit } from 'react-icons/fa'
+import { FaTimes, FaEdit, FaCheck, FaUndo } from 'react-icons/fa'
 import { useContext } from 'react'
 import PropTypes from 'prop-types'
 import Card from './shared/Card'
 import FeedbackContext from '../context/FeedbackContext'
 
 function FeedbackItem({ item }) {
-  const { deleteFeedback, editFeedback } = useContext(FeedbackContext)
+  const { deleteFeedback, editFeedback, toggleStatus } = useContext(FeedbackContext)
+
+  const isResolved = item.status === 'resolved'
 
   return (
     <Card>
@@ -16,7 +18,17 @@ function FeedbackItem({ item }) {
       <button onClick={() => editFeedback(item)} className='edit'>
         <FaEdit color='purple' />
       </button>
+      <button
+        onClick={() => toggleStatus(item.id)}
+        className='status-toggle'
+        title={isResolved ? 'Reopen' : 'Resolve'}
+      >
+        {isResolved ? <FaUndo color='green' /> : <FaCheck color='purple' />}
+      </button>
       <div className='text-display'>{item.text}</div>
+      <div className={`status-badge ${item.status}`}>
+        {item.status === 'resolved' ? 'Resolved' : 'Open'}
+      </div>
     </Card>
   )
 }

src/components/FeedbackList.jsx

@@ -4,13 +4,15 @@ import FeedbackItem from './FeedbackItem'
 import Spinner from './shared/Spinner'
 import FeedbackContext from '../context/FeedbackContext'
 
-// NOTE: added layout prop for nicer animation
-// https://www.framer.com/docs/animation/#layout-animations
-
 function FeedbackList() {
-  const { feedback, isLoading } = useContext(FeedbackContext)
+  const { feedback, isLoading, filter } = useContext(FeedbackContext)
+
+  const filteredFeedback =
+    filter === 'all'
+      ? feedback
+      : feedback.filter((item) => item.status === filter)
 
-  if (!isLoading && (!feedback || feedback.length === 0)) {
+  if (!isLoading && (!filteredFeedback || filteredFeedback.length === 0)) {
     return <p>No Feedback Yet</p>
   }
 
@@ -19,7 +21,7 @@ function FeedbackList() {
   ) : (
     <div className='feedback-list'>
       <AnimatePresence>
-        {feedback.map((item) => (
+        {filteredFeedback.map((item) => (
           <motion.div
             key={item.id}
             initial={{ opacity: 0 }}
@@ -33,14 +35,6 @@ function FeedbackList() {
       </AnimatePresence>
     </div>
   )
-
-  // return (
-  //   <div className='feedback-list'>
-  //     {feedback.map((item) => (
-  //       <FeedbackItem key={item.id} item={item} handleDelete={handleDelete} />
-  //     ))}
-  //   </div>
-  // )
 }
 
 export default FeedbackList

src/components/FeedbackStats.jsx

@@ -2,18 +2,55 @@ import { useContext } from 'react'
 import FeedbackContext from '../context/FeedbackContext'
 
 function FeedbackStats() {
-  const { feedback } = useContext(FeedbackContext)
+  const { feedback, filter, setFilter } = useContext(FeedbackContext)
+
+  const openCount = feedback.filter((item) => item.status === 'open').length
+  const resolvedCount = feedback.filter((item) => item.status === 'resolved').length
+
+  const filteredFeedback =
+    filter === 'all'
+      ? feedback
+      : filter === 'open'
+      ? feedback.filter((item) => item.status === 'open')
+      : feedback.filter((item) => item.status === 'resolved')
+
+  const filteredCount = filteredFeedback.length
 
   const average =
-    feedback.length === 0
+    filteredFeedback.length === 0
       ? 0
-      : feedback.reduce((acc, { rating }) => acc + rating, 0) / feedback.length
+      : filteredFeedback.reduce((acc, { rating }) => acc + rating, 0) / filteredFeedback.length
 
   return (
-    <div className='feedback-stats'>
-      <h4>{feedback.length} Reviews</h4>
-      <h4>Average Rating: {average.toFixed(1).replace(/[.,]0$/, '')}</h4>
-    </div>
+    <>
+      <div className='feedback-stats'>
+        <h4>{filteredCount} Reviews</h4>
+        <h4>Average Rating: {average.toFixed(1).replace(/[.,]0$/, '')}</h4>
+      </div>
+      <div className='current-filter-info'>
+        <h4>当前显示: {filteredCount} 条{filter === 'all' ? '（全部）' : filter === 'open' ? '（Open）' : '（Resolved）'}</h4>
+      </div>
+      <div className='filter-buttons'>
+        <button
+          className={`filter-btn ${filter === 'all' ? 'active' : ''}`}
+          onClick={() => setFilter('all')}
+        >
+          All ({feedback.length})
+        </button>
+        <button
+          className={`filter-btn ${filter === 'open' ? 'active' : ''}`}
+          onClick={() => setFilter('open')}
+        >
+          Open ({openCount})
+        </button>
+        <button
+          className={`filter-btn ${filter === 'resolved' ? 'active' : ''}`}
+          onClick={() => setFilter('resolved')}
+        >
+          Resolved ({resolvedCount})
+        </button>
+      </div>
+    </>
   )
 }
 

src/context/FeedbackContext.js

@@ -9,6 +9,7 @@ export const FeedbackProvider = ({ children }) => {
     item: {},
     edit: false,
   })
+  const [filter, setFilter] = useState('all')
 
   useEffect(() => {
     fetchFeedback()
@@ -30,7 +31,7 @@ export const FeedbackProvider = ({ children }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(newFeedback),
+      body: JSON.stringify({ ...newFeedback, status: 'open' }),
     })
 
     const data = await response.json()
@@ -59,17 +60,32 @@ export const FeedbackProvider = ({ children }) => {
 
     const data = await response.json()
 
-    // NOTE: no need to spread data and item
     setFeedback(feedback.map((item) => (item.id === id ? data : item)))
 
-    // FIX: this fixes being able to add a feedback after editing
-    // credit to Jose https://www.udemy.com/course/react-front-to-back-2022/learn/lecture/29768200#questions/16462688
     setFeedbackEdit({
       item: {},
       edit: false,
     })
   }
 
+  // Toggle feedback status (open <-> resolved)
+  const toggleStatus = async (id) => {
+    const item = feedback.find((item) => item.id === id)
+    const newStatus = item.status === 'open' ? 'resolved' : 'open'
+
+    const response = await fetch(`/feedback/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ ...item, status: newStatus }),
+    })
+
+    const data = await response.json()
+
+    setFeedback(feedback.map((item) => (item.id === id ? data : item)))
+  }
+
   // Set item to be updated
   const editFeedback = (item) => {
     setFeedbackEdit({
@@ -84,10 +100,13 @@ export const FeedbackProvider = ({ children }) => {
         feedback,
         feedbackEdit,
         isLoading,
+        filter,
+        setFilter,
         deleteFeedback,
         addFeedback,
         editFeedback,
         updateFeedback,
+        toggleStatus,
       }}
     >
       {children}

src/index.css

@@ -125,6 +125,49 @@ input:focus {
   align-items: center;
 }
 
+.current-filter-info {
+  color: #fff;
+  margin: 10px 0;
+  padding: 10px 15px;
+  background-color: rgba(255, 106, 149, 0.2);
+  border-radius: 8px;
+  border-left: 4px solid #ff6a95;
+}
+
+.current-filter-info h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 10px;
+  margin: 15px 0;
+}
+
+.filter-btn {
+  padding: 8px 16px;
+  border: 2px solid #fff;
+  border-radius: 20px;
+  background: transparent;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.filter-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.filter-btn.active {
+  background: #ff6a95;
+  border-color: #ff6a95;
+  color: #fff;
+}
+
 .num-display {
   position: absolute;
   top: -10px;
@@ -145,6 +188,36 @@ input:focus {
   right: 40px;
 }
 
+.status-toggle {
+  position: absolute;
+  top: 10px;
+  right: 60px;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-top: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-badge.open {
+  background-color: #ff6a95;
+  color: #fff;
+}
+
+.status-badge.resolved {
+  background-color: #28a745;
+  color: #fff;
+}
+
 .btn {
   color: #fff;
   border: 0;