Issusid #230765 fix: Sonar Lint Issue in My learning Journey

src/components/Assesment/Assesment.jsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
   Typography,
   Dialog,
-} from "../../../node_modules/@mui/material/index";
+} from "@mui/material";
 import LogoutImg from "../../assets/images/logout.svg";
 import { styled } from "@mui/material/styles";
 import {
@@ -21,16 +21,15 @@ import {
   setLocalData,
 } from "../../utils/constants";
 import practicebg from "../../assets/images/practice-bg.svg";
-import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
-import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
 import HelpLogo from "../../assets/help.png";
 import CloseIcon from "@mui/icons-material/Close";
 
-import axios from "../../../node_modules/axios/index";
+import axios from "axios";
 // import { useDispatch } from 'react-redux';
 import { setVirtualId } from "../../store/slices/user.slice";
 import { useDispatch, useSelector } from "react-redux";
-import React from "react";
 import desktopLevel1 from "../../assets/images/desktopLevel1.png";
 import desktopLevel2 from "../../assets/images/desktopLevel2.png";
 import desktopLevel3 from "../../assets/images/desktopLevel3.jpg";
@@ -49,8 +48,14 @@ import panda from "../../assets/images/panda.svg";
 import cryPanda from "../../assets/images/cryPanda.svg";
 import { uniqueId } from "../../services/utilService";
 import { end } from "../../services/telementryService";
+import PropTypes from "prop-types";
 
 export const LanguageModal = ({ lang, setLang, setOpenLangModal }) => {
+  LanguageModal.propTypes = {
+    lang: PropTypes.string.isRequired,
+    setLang: PropTypes.func.isRequired,
+    setOpenLangModal: PropTypes.func.isRequired,
+  };
   const [selectedLang, setSelectedLang] = useState(lang);
   return (
     <Box
@@ -333,6 +338,12 @@ export const MessageDialog = ({
     </Box>
   );
 };
+MessageDialog.propTypes = {
+  closeDialog: PropTypes.func,
+  dontShowHeader: PropTypes.bool,
+  isError: PropTypes.any,
+  message: PropTypes.string,
+};
 
 export const ProfileHeader = ({
   setOpenLangModal,
@@ -427,7 +438,14 @@ export const ProfileHeader = ({
           {handleBack && (
             <Box ml={{ xs: "10px", sm: "94px" }}>
               <IconButton onClick={handleBack}>
-                <img src={back} alt="back" style={{ height: "30px" }} />
+                <img
+                  src={back}
+                  alt="back"
+                  style={{ height: "30px" }}
+                  width="30" // Set width attribute
+                  height="30" // Set height attribute
+                  loading="lazy" // Lazy-load the image
+                />
               </IconButton>
             </Box>
           )}
@@ -444,10 +462,14 @@ export const ProfileHeader = ({
               >
                 <img
                   src={profilePic}
-                  alt="profile-pic"
+                  alt="Profile picture"
                   style={{ height: "30px" }}
+                  width="30" // Set width attribute
+                  height="30" // Set height attribute
+                  loading="lazy" // Lazy-load the image
                 />
               </Box>
+
               <Box ml="12px">
                 <span
                   style={{
@@ -543,12 +565,19 @@ export const ProfileHeader = ({
     </>
   );
 };
+ProfileHeader.propTypes = {
+  points: PropTypes.number,
+  setOpenLangModal: PropTypes.func,
+  handleBack: PropTypes.func,
+  profileName: PropTypes.string,
+  lang: PropTypes.string,
+};
 
 const Assesment = ({ discoverStart }) => {
   let username;
   if (localStorage.getItem("token") !== null) {
     let jwtToken = localStorage.getItem("token");
-    var userDetails = jwtDecode(jwtToken);
+    let userDetails = jwtDecode(jwtToken);
     username = userDetails.student_name;
     setLocalData("profileName", username);
   }
@@ -901,4 +930,8 @@ const Assesment = ({ discoverStart }) => {
   );
 };
 
+Assesment.propTypes = {
+  discoverStart: PropTypes.bool,
+};
+
 export default Assesment;

src/components/AssesmentEnd/AssesmentEnd.jsx

@@ -1,5 +1,5 @@
 import MainLayout from "../Layouts.jsx/MainLayout";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import {
   AssesmentCompletePlane,
   AverageMood,
@@ -9,14 +9,13 @@ import {
   setLocalData,
 } from "../../utils/constants";
 import homeBackground from "../../assets/images/homeBackground.png";
-import { Typography } from "../../../node_modules/@mui/material/index";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import LevelCompleteAudio from "../../assets/audio/levelComplete.wav";
 import { ProfileHeader } from "../Assesment/Assesment";
 import desktopLevel5 from "../../assets/images/assesmentComplete.png";
-import config from '../../utils/urlConstants.json';
+import config from "../../utils/urlConstants.json";
 import { uniqueId } from "../../services/utilService";
 
 const AssesmentEnd = () => {
@@ -40,9 +39,9 @@ const AssesmentEnd = () => {
       setLevel(data.data.milestone_level);
       setLocalData("userLevel", data.data.milestone_level?.replace("m", ""));
       let sessionId = getLocalData("sessionId");
-      if (!sessionId){
+      if (!sessionId) {
         sessionId = uniqueId();
-        localStorage.setItem("sessionId", sessionId)
+        localStorage.setItem("sessionId", sessionId);
       }
       const getPointersDetails = await axios.get(
         `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.GET_POINTER}/${virtualId}/${sessionId}?language=${lang}`

src/components/DiscoverEnd/DiscoverEnd.jsx

@@ -1,19 +1,15 @@
 import { Box, Card, CardContent, IconButton, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import Confetti from "react-confetti";
-import axios from "../../../node_modules/axios/index";
-import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
 import LevelCompleteAudio from "../../assets/audio/levelComplete.wav";
 import back from "../../assets/images/back-arrow.svg";
 import discoverEndLeft from "../../assets/images/discover-end-left.svg";
 import discoverEndRight from "../../assets/images/discover-end-right.svg";
 import textureImage from "../../assets/images/textureImage.png";
-import {
-  LetsStart,
-  getLocalData,
-  setLocalData,
-} from "../../utils/constants";
-import config from '../../utils/urlConstants.json';
+import { LetsStart, getLocalData, setLocalData } from "../../utils/constants";
+import config from "../../utils/urlConstants.json";
 
 const sectionStyle = {
   backgroundImage: `url(${textureImage})`,
@@ -34,7 +30,6 @@ const SpeakSentenceComponent = () => {
   const [level, setLevel] = useState("");
 
   useEffect(() => {
-
     (async () => {
       let audio = new Audio(LevelCompleteAudio);
       audio.play();
@@ -54,10 +49,10 @@ const SpeakSentenceComponent = () => {
 
   const handleProfileBack = () => {
     try {
-      if (process.env.REACT_APP_IS_APP_IFRAME === 'true') {
-        navigate("/")
+      if (process.env.REACT_APP_IS_APP_IFRAME === "true") {
+        navigate("/");
       } else {
-        navigate("/discover-start")
+        navigate("/discover-start");
       }
     } catch (error) {
       console.error("Error posting message:", error);
@@ -77,7 +72,14 @@ const SpeakSentenceComponent = () => {
       }}
     >
       <IconButton>
-        <img src={back} alt="back" style={{ height: "30px" }} />
+        <img
+          src={back}
+          alt="back"
+          style={{ height: "30px" }}
+          width="30" // Set width attribute
+          height="30" // Set height attribute
+          loading="lazy" // Lazy-load the image
+        />
       </IconButton>
       <Card sx={sectionStyle}>
         <Box sx={{ position: "absolute", left: "3px", bottom: "0px" }}>
@@ -132,7 +134,7 @@ const SpeakSentenceComponent = () => {
           </Typography>
 
           <Box
-           onClick={() => handleProfileBack()}
+            onClick={handleProfileBack}
             sx={{
               display: "flex",
               justifyContent: "center",

src/components/DiscoverSentance/DiscoverSentance.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import axios from "../../../node_modules/axios/index";
+import axios from "axios";
 import elephant from "../../assets/images/elephant.svg";
 import {
   callConfetti,
@@ -9,7 +9,6 @@ import {
 } from "../../utils/constants";
 import WordsOrImage from "../Mechanism/WordsOrImage";
 import { uniqueId } from "../../services/utilService";
-import useSound from "use-sound";
 import LevelCompleteAudio from "../../assets/audio/levelComplete.wav";
 import config from "../../utils/urlConstants.json";
 import { MessageDialog } from "../Assesment/Assesment";
@@ -63,7 +62,7 @@ const SpeakSentenceComponent = () => {
   }, [currentQuestion]);
 
   useEffect(() => {
-    if (!(localStorage.getItem("contentSessionId") !== null)) {
+    if (localStorage.getItem("contentSessionId") === null) {
       (async () => {
         const sessionId = getLocalData("sessionId");
         const virtualId = getLocalData("virtualId");
@@ -118,7 +117,7 @@ const SpeakSentenceComponent = () => {
     try {
       const lang = getLocalData("lang");
 
-      if (!(localStorage.getItem("contentSessionId") !== null)) {
+      if (localStorage.getItem("contentSessionId") === null) {
         const pointsRes = await axios.post(
           `${process.env.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST}/${config.URLS.ADD_POINTER}`,
           {

src/components/Layouts.jsx/MainLayout.jsx

@@ -243,6 +243,9 @@ const MainLayout = (props) => {
           <img
             src={levelsImages?.[LEVEL]?.backgroundAddOn}
             alt="backgroundAddOn"
+            width="30" // Set width attribute
+            height="30" // Set height attribute
+            loading="lazy" // Lazy-load the image
           />
         </Box>
       )}