Fix bot things

src/Managing.WebApp/src/hooks/useAccounts.tsx

@@ -7,16 +7,11 @@ type UseAccountsProps = {
   callback?: (data: Account[]) => void | undefined
 }
 
-const useAcconuts = ({ callback }: UseAccountsProps) => {
+const useAccounts = ({ }: UseAccountsProps) => {
   const { apiUrl } = useApiUrlStore()
   const accountClient = new AccountClient({}, apiUrl)
 
   const query = useQuery({
-    onSuccess: (data) => {
-      if (data && callback) {
-        callback(data)
-      }
-    },
     queryFn: () => accountClient.account_GetAccounts(),
     queryKey: ['accounts'],
   })
@@ -24,4 +19,4 @@ const useAcconuts = ({ callback }: UseAccountsProps) => {
   return query
 }
 
-export default useAcconuts
+export default useAccounts

src/Managing.WebApp/src/pages/botsPage/botList.tsx

@@ -104,7 +104,7 @@ const BotList: React.FC<IBotList> = ({ list }) => {
   }
 
   function getMoneyManagementBadge(moneyManagement: MoneyManagement) {
-    const classes = baseBadgeClass() + 'bg-primary'
+    const classes = baseBadgeClass() + ' bg-primary'
     return (
       <button
         className={classes}
@@ -115,7 +115,7 @@ const BotList: React.FC<IBotList> = ({ list }) => {
       >
         <p className="text-primary-content flex">
           <EyeIcon width={15}></EyeIcon>
-          {moneyManagement.name}
+          MoneyManagement
         </p>
       </button>
     )
@@ -180,26 +180,13 @@ const BotList: React.FC<IBotList> = ({ list }) => {
             </figure>
             <div className="card-body">
               <h2 className="card-title text-sm">
-                {bot.name}
-                {/* {exchangeBadge(bot.exchange)} */}
+                {bot.ticker}
+                {getMoneyManagementBadge(bot.moneyManagement)}
                 {getIsForWatchingBadge(bot.isForWatchingOnly, bot.name)}
                 {getToggleBotStatusBadge(bot.status, bot.name, bot.botType)}
                 {getDeleteBadge(bot.name)}
-                {getMoneyManagementBadge(bot.moneyManagement)}
               </h2>
-              <div className="columns-2">
-                <div>
-                  <div>
-                    <CardText title="Ticker" content={bot.ticker}></CardText>
-                  </div>
-                  <div>
-                    <CardText
-                      title="Timeframe"
-                      content={bot.timeframe}
-                    ></CardText>
-                  </div>
-                </div>
-              </div>
+             
 
               <div className="columns-2">
                 <div>

src/Managing.WebApp/src/pages/botsPage/bots.tsx

@@ -23,11 +23,9 @@ import {
 } from '../../generated/ManagingApi'
 
 import BotList from './botList'
+import { useQuery } from '@tanstack/react-query'
 
 const Bots: React.FC = () => {
-  const [bots, setBots] = useState<TradingBot[]>([])
-  const [scenarios, setScenarios] = React.useState<Scenario[]>([])
-  const [accounts, setAccounts] = React.useState<Account[]>([])
   const [showModal, setShowModal] = useState(false)
   const { register, handleSubmit } = useForm<StartBotRequest>()
   const { apiUrl } = useApiUrlStore()
@@ -46,42 +44,39 @@ const Bots: React.FC = () => {
       })
   }
 
-  useEffect(() => {
-    setupHubConnection().then(() => {
-      if (bots.length == 0) {
-        botClient.bot_GetActiveBots().then((data) => {
-          setBots(data)
-        })
-      }
-    })
+  const { data: bots } = useQuery({
+    queryFn: () => botClient.bot_GetActiveBots(),
+    queryKey: ['bots'],
+  })
 
-    const scenarioClient = new ScenarioClient({}, apiUrl)
-    scenarioClient.scenario_GetScenarios().then((data) => {
-      setScenarios(data)
-    })
+  const scenarioClient = new ScenarioClient({}, apiUrl)
+  const { data: scenarios } = useQuery({
+    queryFn: () => scenarioClient.scenario_GetScenarios(),
+    queryKey: ['scenarios'],
+  })
 
-    const accountClient = new AccountClient({}, apiUrl)
-    accountClient.account_GetAccounts().then((data) => {
-      setAccounts(data)
-    })
-  }, [])
+  const accountClient = new AccountClient({}, apiUrl)
+  const { data: accounts } = useQuery({
+    queryFn: () => accountClient.account_GetAccounts(),
+    queryKey: ['accounts'],
+  })
 
-  const setupHubConnection = async () => {
-    const hub = new Hub('bothub', apiUrl).hub
+  // const setupHubConnection = async () => {
+  //   const hub = new Hub('bothub', apiUrl).hub
 
-    hub.on('BotsSubscription', (bots: TradingBot[]) => {
-      // eslint-disable-next-line no-console
-      console.log(
-        'bot List',
-        bots.map((bot) => {
-          return bot.name
-        })
-      )
-      setBots(bots)
-    })
+  //   hub.on('BotsSubscription', (bots: TradingBot[]) => {
+  //     // eslint-disable-next-line no-console
+  //     console.log(
+  //       'bot List',
+  //       bots.map((bot) => {
+  //         return bot.name
+  //       })
+  //     )
+  //     setBots(bots)
+  //   })
 
-    return hub
-  }
+  //   return hub
+  // }
 
   function openModal() {
     setShowModal(true)
@@ -136,7 +131,7 @@ const Bots: React.FC = () => {
             <PlayIcon width="20"></PlayIcon>
           </button>
         </div>
-        <BotList list={bots} />
+        <BotList list={bots || []} />
         {showModal ? (
           <>
             <div>