flagging functionality working

server/routes/feedback.router.js

@@ -4,7 +4,7 @@ const pool = require('../modules/pool.js');
 
 // GET for admin functionality
 router.get('/', (req, res) => {
-  let queryText = `SELECT * FROM "feedback";`;
+  let queryText = `SELECT * FROM "feedback" ORDER BY "id";`;
   pool.query(queryText).then(result => {
     res.send(result.rows);
   }).catch(error => {
@@ -39,6 +39,14 @@ router.delete('/:id', (req, res) => {
 });
 
 // PUT for admin flagging
-
+router.put('/:id', (req, res) => {
+  let changeID = req.params.id;
+  let queryText = `UPDATE "feedback" SET "flagged" = NOT "flagged" WHERE "id"=$1;`;
+  pool.query(queryText, [changeID]).then(result => {
+    res.sendStatus(200);
+  }).catch(error => {
+    console.log('Error with updating feedback flagging in database:', error);
+  });
+});
 
 module.exports = router;

src/components/Admin/Admin.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import TableHeader from "../TableHeader/TableHeader";
 import StarsIcon from "@mui/icons-material/Stars";
 import DeleteIcon from '@mui/icons-material/Delete';
-import Button from "@mui/material";
+import { Flag, FlagOutlined } from "@mui/icons-material";
 import axios from 'axios';
 import './Admin.css';
 
@@ -33,6 +33,15 @@ export default function Admin() {
     });
   }
 
+  const toggleFlag = (id) =>{
+    console.log('id is:', id);
+    axios.put('/feedback/'+id).then(response =>{
+      fetchFeedback();
+    }).catch(error => {
+      console.log('Error with Axios Delete in Admin.jsx:', error );
+    });
+  }
+
   return (
     <div className="admin-content">
       <div className="stars">
@@ -48,7 +57,12 @@ export default function Admin() {
               <td>{feedbackItem.understanding}</td>
               <td>{feedbackItem.support}</td>
               <td>{feedbackItem.comments}</td>
-              <td>Flag Button</td>
+              <td>
+                  {feedbackItem.flagged ? 
+                  <Flag onClick={() => toggleFlag(feedbackItem.id)}/> 
+                  : 
+                  <FlagOutlined onClick={() => toggleFlag(feedbackItem.id)}/>}
+              </td>
               <td><DeleteIcon onClick={() => deleteRow(feedbackItem.id)}/></td>
             </tr>
           ))}