Merge pull request #20 from ropali/fix/infinite-list-card-render

fix: Container List component re-renders infinitely

src/components/Containers/ContainerCard.jsx

@@ -1,5 +1,3 @@
-
-
 const ContainerCard = ({ container, onClick, isSelected }) => {
     const statusColor = container.Status.includes("Exited") ? 'bg-red-500' : 'bg-green-500';
 
@@ -27,7 +25,7 @@ const ContainerCard = ({ container, onClick, isSelected }) => {
                 <p className="text-xs ">
                     <span className="font-medium">Status:</span> {container.Status.split(' ')[0]}
                 </p>
-                {container.Ports && container.Ports.length > 0 && (
+                {container.Ports && container.Ports.length > 0 && container.Ports[0].PublicPort && (
                     <p className="text-xs ">
                         <span className="font-medium">Ports:</span> {container.Ports[0].PublicPort} &rarr; {container.Ports[0].PrivatePort}
                     </p>
@@ -42,4 +40,4 @@ const ContainerCard = ({ container, onClick, isSelected }) => {
     );
 };
 
-export default ContainerCard;
+export default ContainerCard;

src/components/Containers/ContainersList.jsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react'
+import React, {useEffect, useState} from 'react'
 import ContainersTopBar from "./ContainersTopBar"
 import ContainerCard from './ContainerCard'
-import { useContainers } from '../../state/ContainerContext'
+import {useContainers} from '../../state/ContainerContext'
 
 
 function ContainersList() {
 
-    const { containers, loadContainers, selectedContainer ,setSelectedContainer } = useContainers();
+    const {containers, loadContainers, selectedContainer, setSelectedContainer} = useContainers();
 
     const [searchQuery, setSearchQuery] = useState('');
 
@@ -33,12 +33,15 @@ function ContainersList() {
         return matchesSearchQuery && matchesFilter;
     });
 
+    // Load containers initially and after container actions
+    // TODO: This fixes the issue now but need to fix it in a better way
     useEffect(() => {
-
-        loadContainers()
-
-    }, [containers])
-
+        loadContainers();
+        const interval = setInterval(() => {
+            loadContainers();
+        }, 3000);
+        return () => clearInterval(interval);
+    }, [loadContainers]);
 
 
     return (

src/state/ContainerContext.jsx

@@ -1,28 +1,26 @@
-import React, { createContext, useState, useContext, useCallback } from 'react';
-import { invoke } from '@tauri-apps/api/tauri';
+import React, {createContext, useCallback, useContext, useState} from 'react';
+import {invoke} from '@tauri-apps/api/tauri';
 
 const ContainerContext = createContext();
 
-export function ContainerProvider({ children }) {
-  const [containers, setContainers] = useState([]);
-  const [selectedContainer, setSelectedContainer] = useState(null)
+export function ContainerProvider({children}) {
+    const [containers, setContainers] = useState([]);
+    const [selectedContainer, setSelectedContainer] = useState(null)
 
-  const loadContainers = useCallback(() => {
-    invoke('fetch_containers').then((newContainers) => {
-      setContainers(newContainers);
-    });
-  }, []);
+    const loadContainers = useCallback(() => {
+        invoke('fetch_containers').then((newContainers) => {
+            setContainers(newContainers);
+        });
+    }, []);
 
 
-
-
-  return (
-    <ContainerContext.Provider value={{ containers, selectedContainer, loadContainers, setSelectedContainer }}>
-      {children}
-    </ContainerContext.Provider>
-  );
+    return (
+        <ContainerContext.Provider value={{containers, selectedContainer, loadContainers, setSelectedContainer}}>
+            {children}
+        </ContainerContext.Provider>
+    );
 }
 
 export function useContainers() {
-  return useContext(ContainerContext);
+    return useContext(ContainerContext);
 }