From b4219b3e3a494a6f8bfb2ddb95a13f16767cb4b1 Mon Sep 17 00:00:00 2001
From: Wineshuga <uzochukwuwinnie@gmail.com>
Date: Thu, 28 Dec 2023 16:20:25 +0100
Subject: [PATCH] Fix eslint issue and rename variable

---
 src/components/Mission.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx
index 7d25d14..b26227e 100644
--- a/src/components/Mission.jsx
+++ b/src/components/Mission.jsx
@@ -5,10 +5,10 @@ import { fetchMissions, joinMission, leaveMission } from '../redux/mission/missi
 import '../styles/mission.css';
 
 const Mission = () => {
-  const [isDesktop, setDesktop] = useState(window.innerWidth < 620);
+  const [isMobile, setMobile] = useState(window.innerWidth < 620);
 
   const updateMedia = () => {
-    setDesktop(window.innerWidth < 620);
+    setMobile(window.innerWidth < 620);
   };
 
   useEffect(() => {
@@ -32,12 +32,16 @@ const Mission = () => {
   };
 
   const handleButtons = (id, reserved) => {
+    const leaveLabel = `Leave Mission ${id}`;
+    const joinLabel = `Join Mission ${id}`;
+
     if (reserved) {
       return (
         <button
           className="text-danger border-2 border-danger"
           type="button"
           onClick={() => dispatch(leaveMission({ id }))}
+          aria-label={leaveLabel}
         >
           Leave Mission
         </button>
@@ -48,6 +52,7 @@ const Mission = () => {
         className="text-secondary border-2"
         type="button"
         onClick={() => dispatch(joinMission({ id }))}
+        aria-label={joinLabel}
       >
         Join Mission
       </button>
@@ -59,7 +64,7 @@ const Mission = () => {
       <td className="fw-bold">{ item.name }</td>
       <td className="mission-desc">
         {
-          isDesktop ? (
+          isMobile ? (
             <Link to="Mission-details">
               <p>
                 { item.desc }