fix: nav media query listener leak, case-insensitive channel search, race condition in conduct fetch; feat: add Kerala & Tamil Nadu Indian state channels

channels.json

@@ -411,5 +411,20 @@
     "type": "island",
     "url": "https://app.slack.com/client/E09V59WQY1E/C0B7H73EU7L",
     "id": "C0B7H73EU7L"
+  },
+  {
+    "channel":"kerala",
+    "match":"kerala",
+    "type":"indian-state",
+    "url": "https://app.slack.com/client/E09V59WQY1E/C08D8B0STPE",
+    "id":"C08D8B0STPE"
+
+  },
+  {
+    "channel":"tamil-nadu",
+    "match":"tamil-nadu",
+    "type":"indian-state",
+    "url":"https://app.slack.com/client/E09V59WQY1E/C0AU3ELADMK",
+    "id": "C0AU3ELADMK"
   }
 ]

components/nav.js

@@ -158,20 +158,24 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
   }
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window === 'undefined') return
+
       if (!unfixed) {
         window.addEventListener('scroll', onScroll)
       }
 
       const mobileQuery = window.matchMedia('(max-width: 48em)')
-      mobileQuery.addEventListener('change', (e) => {
+      const handleMobileChange = (e) => {
         setMobile(e.matches)
         setToggled(false)
-      })
-    }
+      }
+      mobileQuery.addEventListener('change',handleMobileChange)
+      setMobile(mobileQuery.matches)
+
 
     return () => {
       window.removeEventListener('scroll', onScroll)
+      mobileQuery.removeEventListener('change',handleMobileChange)
     }
   }, [unfixed])
 

components/slides/Slides.js

@@ -469,22 +469,26 @@ const Slides = ({ isOpen, onClose }) => {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [isOpen, currentX, currentY, handleAction, onClose])
 
-  useEffect(() => {
-    if (currentY === 1 && slideData[currentX]?.downSlide?.type === 'fetch') {
-      setConductData({ content: null, loading: true, error: null })
-      fetch('/api/conduct')
-        .then((res) => {
-          if (!res.ok) throw new Error('Failed to fetch')
+  useEffect(()=>{
+    if(currentY===1&&slideData[currentX]?.downSlide?.type==='fetch'){
+      const controller=new AbortController()
+      setConductData({content:null,loading:true,error:null})
+      fetch('/api/conduct',{signal:controller.signal})
+      .then((res)=>{
+        if(!res.ok)throw new Error("failed to fetch")
           return res.text()
-        })
-        .then((html) => {
-          setConductData({ content: html, loading: false, error: null })
-        })
-        .catch(() => {
-          setConductData({ content: null, loading: false, error: true })
-        })
+      })
+      .then((html)=>{
+        setConductData({content:html,loading:false,error:null})
+
+      })
+      .catch((err)=>{
+        if(err.name==='AbortError')return
+        setConductData({content:null,loading:false,error:true})
+      })
+      return()=>controller.abort()
     }
-  }, [currentX, currentY])
+  },[currentX,currentY])
 
   if (!isOpen) return null
 

pages/channels.js

@@ -14,6 +14,7 @@ const formatName = (str) =>
 const getTypeLabel = (type) => {
   if (type === 'us-state') return 'US State'
   if (type === 'island') return 'Island'
+  if (type === 'indian-state')return 'Indian State'
   return 'Country'
 }
 
@@ -103,14 +104,15 @@ const ChannelsPage = () => {
   const [filter, setFilter] = useState('all')
 
   const filtered = useMemo(() => {
-    return channels.filter((c) => {
+   return channels.filter((c) => {
       const matchesSearch =
-        c.channel.includes(search.toLowerCase()) ||
-        c.match.includes(search.toLowerCase())
+        c.channel.toLowerCase().includes(search.toLowerCase()) ||
+        c.match.toLowerCase().includes(search.toLowerCase())
       const matchesFilter =
         filter === 'all' ||
         (filter === 'country' && c.type === 'country') ||
         (filter === 'us-state' && c.type === 'us-state') ||
+        (filter === 'indian-state' && c.type==='indian-state') ||
         (filter === 'island' && c.type === 'island')
       return matchesSearch && matchesFilter
     })
@@ -120,7 +122,9 @@ const ChannelsPage = () => {
     all: channels.length,
     country: channels.filter((c) => c.type === 'country').length,
     'us-state': channels.filter((c) => c.type === 'us-state').length,
+    'indian-state':channels.filter((c)=>c.type==='indian-state').length,
     island: channels.filter((c) => c.type === 'island').length
+
   }), [])
 
   return (
@@ -236,6 +240,10 @@ const ChannelsPage = () => {
             <FilterButton active={filter === 'island'} onClick={() => setFilter('island')}>
               Islands ({counts.island})
             </FilterButton>
+            <FilterButton active={filter==='indian-state'} onClick={()=>setFilter('indian-state')}>
+              Indian States({counts['indian-state']})
+            </FilterButton>
+
           </Box>
         </Box>