frontend: add a scrollDown for issue replies and Delete buttom

iKozay · Apr 4, 2024 · a75fd35 · a75fd35
1 parent 89846e2
commit a75fd35
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/frontend/src/Pages/Issue.jsx b/src/frontend/src/Pages/Issue.jsx
@@ -1,8 +1,10 @@
 import { useParams } from "react-router-dom";
-import { useState, useEffect, useContext } from "react";
+import { useState, useEffect, useContext, useRef } from "react";
 import fetchData from "../utilities/fetchData";
 import { UserContext } from "./Root";
+import Button from "../components/generalPurpose/Button";
 export default function Issue() {
+  const scrollRef = useRef();
   const {user} = useContext(UserContext);
   const { issueId } = useParams();
   const [error, setError] = useState(false);
@@ -38,7 +40,11 @@ export default function Issue() {
     }
     fetchIssue();
   }, [issueId]);
-
+  useEffect(()=>{
+    if(scrollRef.current){
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  },[issue]);
   const handleClickDeleteIssue = async () => {
     const response = await fetchData(
       `http://localhost:3000/api/issues/${issueId}`,
@@ -95,6 +101,7 @@ export default function Issue() {
               <p className="text-gray-700">{issue.description}</p>
             </div>
             <div className="p-1">
+              <div ref={scrollRef} className="overflow-y-scroll h-80">
             {issue.replies.map((reply) => (
                 <div key={reply._id} className="mb-1 p-4 bg-gray-100">
                 <p className="text-gray-800">{reply.body}</p>
@@ -105,6 +112,7 @@ export default function Issue() {
                 </div>
             ))}
             </div>
+            </div>
 
             <div className="p-4">
               <textarea
@@ -117,12 +125,15 @@ export default function Issue() {
                   {!isTextAreaValid && (
                <p className="text-red-500">This field is required</p>
               )}
-              <button
-                className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none"
+            <button
+                className={`bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded`}
                 onClick={handleReply}
               >
                 Reply
               </button>
+              {/* <Button handler={(e)=>handleReply(e)}  text="Reply" color="blue" inline={true}/> */}
+              <Button handler={()=>setDeleteBtn(true)} color={"red"} text={"delete"} inline={true}/>
+
               {!replySucceeded&&<span className="text-red-500"> failed to send the reply</span>}
             </div>
           </div>
@@ -148,12 +159,8 @@ export default function Issue() {
                 <span className="text-red-500">issue {issueId}</span>?
               </p>
               <div className="flex justify-end">
-                <button
-                  className="bg-red-500 hover:bg-red-600 text-white font-semibold px-4 py-2 rounded mr-4"
-                  onClick={handleClickDeleteIssue}
-                >
-                  Delete
-                </button>
+              <Button handler={handleClickDeleteIssue} color={"red"} text={"delete"} inline={true}/>
+
                 <button
                   className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold px-4 py-2 rounded"
                   onClick={() => setDeleteBtn(false)}

diff --git a/src/frontend/src/components/generalPurpose/Button.jsx b/src/frontend/src/components/generalPurpose/Button.jsx
@@ -3,7 +3,7 @@ export default function Button({ type="", handler, value = null, text, color, in
     <div className={`m-1 ${inline ? "inline" : "block"}`}>
       <button
         type={type}
-        onClick={() => handler && handler(value)} 
+        onClick={() => handler(value) && handler} 
 
         className={`bg-${color}-500 hover:bg-${color}-600 text-white font-semibold px-4 py-2 rounded`}
       >

diff --git a/src/frontend/src/components/header/AccountDropdown.jsx b/src/frontend/src/components/header/AccountDropdown.jsx
@@ -37,6 +37,7 @@ function showAccountButton(setToken,user){
                     <Link to="user/reservation"><p className={"p-2 block cursor-pointer hover:bg-gray-600"}/* onClick={()=> window.open("/user/reservation", "_self")}*/>My Reservations</p></Link>
                     {(user && user.role === "admin") &&  <Link to="dashboard"><p className={"p-2 block cursor-pointer hover:bg-slate-600"}>Admin Dashboard</p></Link>}
                     {(user && user.role === "representative") &&  <Link to="/csr/dashboard"><p className={"p-2 block cursor-pointer hover:bg-slate-600"}>CSR Dashboard</p></Link>}
+                    {(user && user.role === "customer") && <Link to="issues"><p className={"p-2 block cursor-pointer hover:bg-slate-600"}>Report an Issue</p></Link>}
                     <hr/>
                     <Link to="/"><p className={"p-2 block cursor-pointer hover:bg-slate-600"} onClick={()=>logoutAccount(setToken)}>Logout</p></Link>