feat: fix lint errors

src/components/App/Helper/AskQuestion/index.tsx

@@ -1,6 +1,6 @@
 import { TextareaAutosize } from '@mui/base'
 import { FormControl, InputLabel, MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { MdSend } from 'react-icons/md'
 import { PropagateLoader } from 'react-spinners'
 import { toast } from 'react-toastify'
@@ -10,6 +10,7 @@ import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { ToastMessage } from '~/components/common/Toast/toastMessage'
+import { useSocket } from '~/hooks/useSockets'
 import { postAskQuestion } from '~/network/fetchGraphData'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
@@ -41,8 +42,9 @@ export const AskQuestion = () => {
   const [question, setQuestion] = useState('')
   const [selectedValue, setSelectedValue] = useState<string>('Beginner')
   const searchTerm = useAppStore((s) => s.currentSearch)
-  const isSocketSet: { current: boolean } = useRef<boolean>(false)
-  const socket: Socket | null = null
+
+  const socket: Socket | undefined = useSocket()
+
   const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const [askedQuestions, askedQuestionsAnswers, setAskedQuestion, setAskedQuestionAnswer, hasQuestionInProgress] =
@@ -67,16 +69,12 @@ export const AskQuestion = () => {
   )
 
   useEffect(() => {
-    if (isSocketSet.current) {
+    if (!socket) {
       return
     }
 
     if (handleAskQuestion) {
-      if (socket) {
-        socket.on('askquestionhook', handleAskQuestion)
-
-        isSocketSet.current = true
-      }
+      socket.on('askquestionhook', handleAskQuestion)
     }
   }, [handleAskQuestion, socket])
 

src/components/App/Helper/TeachMe/index.tsx

@@ -19,6 +19,7 @@ import { updateBudget } from '~/utils/setBudget'
 import { AskQuestion } from '../AskQuestion'
 
 import 'reactflow/dist/style.css'
+import { useSocket } from '~/hooks/useSockets'
 
 type ResponseType = {
   tutorial: string
@@ -30,7 +31,7 @@ export const TeachMe = () => {
   const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const isSocketSet: { current: boolean } = useRef<boolean>(false)
-  const socket: Socket | null = null
+  const socket: Socket | undefined = useSocket()
 
   const [setTeachMeAnswer, setHasTeachingInProgress, setInstagraphAnswer, setHasInstagraphInProgress] = useTeachStore(
     (s) => [s.setTeachMeAnswer, s.setHasTeachingInProgress, s.setInstagraphAnswer, s.setHasInstagraphInProgress],
@@ -61,24 +62,18 @@ export const TeachMe = () => {
   )
 
   useEffect(() => {
-    if (isSocketSet.current) {
+    if (!socket) {
       return
     }
 
     if (handleTeachMe) {
-      if (socket) {
-        socket.on('teachmehook', handleTeachMe)
-
-        isSocketSet.current = true
-      }
+      socket.on('teachmehook', handleTeachMe)
     }
 
     if (handleInstagraph) {
-      if (socket) {
-        socket.on('instagraphhook', handleInstagraph)
+      socket.on('instagraphhook', handleInstagraph)
 
-        isSocketSet.current = true
-      }
+      isSocketSet.current = true
     }
   }, [socket, handleTeachMe, handleInstagraph])
 

src/components/App/index.tsx

@@ -1,6 +1,7 @@
 import { Suspense, lazy, useCallback, useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import 'react-toastify/dist/ReactToastify.css'
+import { Socket } from 'socket.io-client'
 import styled from 'styled-components'
 import { DataRetriever } from '~/components/DataRetriever'
 import { GlobalStyle } from '~/components/GlobalStyle'
@@ -75,7 +76,7 @@ export const App = () => {
     useDataStore((s) => s.setCategoryFilter),
   ]
 
-  const socket = useSocket()
+  const socket: Socket | undefined = useSocket()
 
   const form = useForm<{ search: string }>({ mode: 'onChange' })