diff --git a/src/components/Containers/ContainerCard.jsx b/src/components/Containers/ContainerCard.jsx index 0053c4f..2be069b 100644 --- a/src/components/Containers/ContainerCard.jsx +++ b/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 }) => {
Status: {container.Status.split(' ')[0]}
- {container.Ports && container.Ports.length > 0 && ( + {container.Ports && container.Ports.length > 0 && container.Ports[0].PublicPort && (Ports: {container.Ports[0].PublicPort} → {container.Ports[0].PrivatePort}
@@ -42,4 +40,4 @@ const ContainerCard = ({ container, onClick, isSelected }) => { ); }; -export default ContainerCard; \ No newline at end of file +export default ContainerCard; diff --git a/src/components/Containers/ContainersList.jsx b/src/components/Containers/ContainersList.jsx index d6a8d79..7dcab53 100644 --- a/src/components/Containers/ContainersList.jsx +++ b/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 ( diff --git a/src/state/ContainerContext.jsx b/src/state/ContainerContext.jsx index 46dce08..3cbd10c 100644 --- a/src/state/ContainerContext.jsx +++ b/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 ( -