add a toast

Author: KamathAnjali

package-lock.json

@@ -23,6 +23,7 @@
     "react-scroll": "^1.8.0",
     "react-table": "^7.6.3",
     "react-test-renderer": "^16.14.0",
+    "react-toastify": "^8.1.0",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^3.11.2",
     "reactstrap": "^8.8.1",

package.json

@@ -23,14 +23,15 @@ import {
   FaRandom,
   FaQuestionCircle,
 } from 'react-icons/fa';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import {
   DefaultColumnFilter,
   SelectDifficultyColumnFilter,
   SelectColumnFilter,
   SelectCheckedColumnFilter,
 } from './filters';
 import { Event } from '../Shared/Tracking';
-
 import questions, { updated } from '../../data';
 
 import 'react-toggle/style.css';
@@ -505,16 +506,24 @@ const Table = () => {
             disableFilters: true,
             Cell: ({ row }) => {
               const id = Number(row?.original?.id);
-              console.log('⭐ Row ID:', id, row?.original);
-
               if (Number.isNaN(id)) return '❌';
 
               const handleKeyPress = e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   const updatedImportant = [...important];
                   updatedImportant[id] = !updatedImportant[id];
                   setImportant(updatedImportant);
-                  console.log('Toggled important:', updatedImportant);
+                  toast(
+                    updatedImportant[id]
+                      ? 'Marked as Important'
+                      : 'Removed from Important',
+                    {
+                      type: updatedImportant[id] ? 'success' : 'info',
+                      autoClose: 1200,
+                      hideProgressBar: true,
+                      position: 'bottom-center',
+                    },
+                  );
                 }
               };
 
@@ -524,10 +533,20 @@ const Table = () => {
                   tabIndex={0}
                   style={{ cursor: 'pointer', fontSize: '1.2em' }}
                   onClick={() => {
-                    console.log('Star clicked!', id); // add this
                     const updatedImportant = [...important];
                     updatedImportant[id] = !updatedImportant[id];
                     setImportant(updatedImportant);
+                    toast(
+                      updatedImportant[id]
+                        ? 'Marked as Important'
+                        : 'Removed from Important',
+                      {
+                        type: updatedImportant[id] ? 'success' : 'info',
+                        autoClose: 1200,
+                        hideProgressBar: true,
+                        position: 'bottom-center',
+                      },
+                    );
                   }}
                   onKeyDown={handleKeyPress}
                   aria-label="Mark as important for revision"
@@ -609,6 +628,7 @@ const Table = () => {
 
   return (
     <Container className="table">
+      <ToastContainer />
       <ReactTooltip />
       <PatternFrequencies filters={filters} rows={filteredRows} />