chore: using reducer for host and container

web/src/App.tsx

@@ -1,11 +1,19 @@
 
 import { BrowserRouter } from "react-router-dom";
+import { useEffect } from "react";
 import { AppRoutes } from "./routes/";
 import useContinerSourceEvent from "./lib/hooks/useContinerSourceEvent";
+import { useAppDispatch } from "./hooks"
+import { setCurrent } from "./stores/slices/hostSlice";
+import config from "./stores/config";
 import './App.css'
 
 function App() {
+  const dispatch = useAppDispatch();
   useContinerSourceEvent();
+  useEffect(() => {
+    dispatch(setCurrent(config.hosts[0]))
+  }, [])
 
   return (
     <BrowserRouter children={AppRoutes} basename={"/"} />

web/src/components/ContainerList/ContainerList.tsx

@@ -6,13 +6,11 @@ import { fetchContainers } from '../../stores/slices/containerSlice';
 import ContainerRow from '../ContainerRow';
 import './containerList.css'
 
-interface ContainerListProps {
-  host: string
-}
 
-function ContainerList(props: ContainerListProps) {
+function ContainerList() {
   const dispatch = useAppDispatch();
   const { data, loading, error } = useAppSelector(state => state.containers)
+  const { current } = useAppSelector((state) => state.host)
 
   useEffect(() => {
     let title = 'pulseUp for Docker'
@@ -26,8 +24,10 @@ function ContainerList(props: ContainerListProps) {
   }, [data])
 
   useEffect(() => {
-    dispatch(fetchContainers(props.host))
-  }, [dispatch]);
+    if (current === undefined) return
+
+    dispatch(fetchContainers(current))
+  }, [dispatch, current]);
 
   return (<>
     <Row>

web/src/components/ContinerInfoBar/ContinerInfoBar.tsx

@@ -11,7 +11,7 @@ interface ContinerInfoBarProps {
 const { Text } = Typography;
 
 function ContinerInfoBar(props: ContinerInfoBarProps) {
-  const continer = useAppSelector((state) => state.containers.data.find(a => a.id == props.continerId))
+  const container = useAppSelector((state) => state.containers.data.find(a => a.id == props.continerId))
 
   const tagColor = (c: Container | undefined) => {
     if (c == undefined) return
@@ -29,13 +29,13 @@ function ContinerInfoBar(props: ContinerInfoBarProps) {
   return (
     <Row className='container-bar' align='middle'>
       <Col>
-        {continer && <Space align='baseline'>
+        {container && <Space align='baseline'>
           <span className='container-name' >
-            {continer?.name}
+            {container?.name}
           </span>
-          <Text className='continer-tag' keyboard>{continer?.image}</Text>
-          <Text className='continer-tag' keyboard>{continer?.status}</Text>
-          <Tag color={tagColor(continer)}>{continer?.state}</Tag>
+          <Text className='continer-tag' keyboard>{container?.image}</Text>
+          <Text className='continer-tag' keyboard>{container?.status}</Text>
+          <Tag color={tagColor(container)}>{container?.state}</Tag>
         </Space>}
       </Col>
     </Row>

web/src/layout/Aside.tsx

@@ -4,24 +4,27 @@ import ContainerList from "../components/ContainerList";
 import HostList from "../components/HostList";
 import config from "../stores/config";
 import { useState } from "react";
+import { useAppSelector, useAppDispatch } from "../hooks"
+import { setCurrent } from "../stores/slices/hostSlice"
 import './aside.css';
 
-
 const { Title } = Typography
 
 function Aside() {
   let [viewMode, setViewMode] = useState<"host" | "container">("container")
-  let [selectedHost, setSelectedHost] = useState("localhost")
+  const { current } = useAppSelector((state) => state.host)
+  const dispatch = useAppDispatch()
 
   const handleClickHostList = () => {
     if (viewMode == 'container') {
       setViewMode('host')
     }
   }
 
-  const handleSelectHostCallback=(host : any) =>{
-    setSelectedHost(host.name)
+  const handleSelectHostCallback = (host: string) => {
     setViewMode("container")
+
+    dispatch(setCurrent(host))
   }
 
   return (
@@ -32,18 +35,17 @@ function Aside() {
       {viewMode == "container" && <><Row>
         <Col span={24}>
           <Space align="baseline">
-            <Tooltip title={selectedHost} >
-              <Title level={4} className="host-title">{selectedHost}</Title>
+            <Tooltip title={current} >
+              <Title level={4} className="host-title">{current}</Title>
             </Tooltip>
             {config.hosts.length > 1 && <Tooltip title="host list" placement="top">
               <Button type="primary" size="small" className="back-button" icon={<MenuOutlined />} onClick={handleClickHostList} />
             </Tooltip>}
           </Space>
         </Col>
       </Row>
-        <ContainerList host={selectedHost} ></ContainerList></>}
-      {viewMode == "host" && <HostList hosts={config.hosts} onSelect={handleSelectHostCallback}></HostList>}
-
+        <ContainerList></ContainerList></>}
+      {viewMode == "host" && <HostList hosts={config.hosts} onSelect={handleSelectHostCallback}></HostList>} 
     </AntLayout.Sider>
   );
 }

web/src/lib/hooks/useContinerSourceEvent.ts

@@ -1,15 +1,17 @@
 import { useEffect } from "react";
 import { API_URLS } from "../../configs/api";
-import { useAppDispatch } from "../../hooks"
+import { useAppDispatch, useAppSelector } from "../../hooks"
 import { handleSourceEvent } from "../../stores/slices/containerSlice";
 
 const useContinerSourceEvent = () => {
     let es: EventSource | null = null;
-
+    const { current } = useAppSelector((state) => state.host)
     const dispatch = useAppDispatch();
 
     useEffect(() => {
-        es = new EventSource(API_URLS.container_event_stream_url.replace(':host', 'localhost'));
+        if (current === undefined) return
+
+        es = new EventSource(API_URLS.container_event_stream_url.replace(':host', current));
         es.addEventListener("container", (e: Event) => {
             handleEvent((e as MessageEvent));
         });
@@ -18,7 +20,7 @@ const useContinerSourceEvent = () => {
             dispatch(handleSourceEvent(JSON.parse(event.data)))
         }
         return () => es?.close();
-    }, []);
+    }, [current]);
 }
 
 export default useContinerSourceEvent;

web/src/lib/hooks/useLogSourceEvent.ts

@@ -1,14 +1,15 @@
 import { useEffect, useState, useRef } from "react";
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { API_URLS } from "../../configs/api";
 import { Log } from "../../types/Log";
-import _ from 'lodash'
+import { useAppSelector } from "../../hooks";
 import { Container } from "../../types/Container";
-
+import _ from 'lodash'
 
 export default function useLogSourceEvent() {
     const location = useLocation();
-    const container = location.state as Container
+    let params = useParams()
+    const container = useAppSelector((state) => state.containers.data.find(a => a.id == params.id)) as Container
     let es: EventSource | null = null
     let debounceBuffer = _.debounce(flushBuffer, 250, { maxWait: 500 })
     let buffer: Log[] = []
@@ -68,6 +69,8 @@ export default function useLogSourceEvent() {
     }
 
     useEffect(() => {
+        if(container === undefined) return
+
         es = new EventSource(API_URLS.logs_stream_url.replace(':host', container.host).replace(':id', container.id));
         es.onmessage = (e) => {
             handleEvent(e.data);
@@ -103,7 +106,7 @@ export default function useLogSourceEvent() {
             clear()
             close()
         }
-    }, [location])
+    }, [location, container])
 
     return { messages, loading, pause, resume }
 }

web/src/stores/slices/hostSlice.ts

@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+interface HostState {
+  current:  string | undefined
+}
+
+const initialState: HostState = {
+  current: undefined
+}
+
+const hostSlice = createSlice({
+  name: 'host',
+  initialState,
+  reducers: {
+    setCurrent: (state, payloadAction: PayloadAction<any>) => {
+      var { name } = payloadAction.payload
+      state.current = name
+    }
+  }
+})
+
+export const { setCurrent } = hostSlice.actions
+
+export default hostSlice.reducer

web/src/stores/store.ts

@@ -1,10 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit'
-import containerReducer from './slices/containerSlice'             
+import containerReducer from './slices/containerSlice'                
+import hostReducer from './slices/hostSlice';
 
-
 export const store = configureStore({
   reducer: {
-    containers: containerReducer
+    containers: containerReducer,
+    host: hostReducer
   },
 });
 export type AppDispatch = typeof store.dispatch;