Got index server list working

frontend/src/Components/ServerList/ServerCard/ServerCard.tsx

@@ -10,7 +10,7 @@ interface ServerCardProps {
 
 const ServerCard = ({ name, online, linkTo }: ServerCardProps) => {
   return (
-    <Link to={linkTo} className={styles.serverCard}>
+    <Link to={linkTo} className={styles.serverCard} target="_blank" rel="noopener noreferrer">
       <Card>
         <Card.Header>
           <Card.Title>{name}</Card.Title>

frontend/src/Components/ServerList/ServerList.tsx

@@ -1,20 +1,20 @@
+import { useEffect, useState } from "react";
 import ServerCard from "./ServerCard/ServerCard";
+import { getServerList, type Server } from "../../Lib/Servers";
 
-interface ServerListProps {
-  servers: Array<Server>;
-}
+const ServerList = () => {
+  const [servers, setServers] = useState<Array<Server>>([]);
 
-interface Server {
-  name: string;
-  online: boolean;
-  linkTo: string;
-}
+  useEffect(() => {
+    getServerList().then(serverList => {
+      setServers(serverList);
+    })
+  })
 
-const ServerList = ({ servers }: ServerListProps) => {
   return (
     <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
       {servers.map(server => {
-        return (<ServerCard name={server.name} online={server.online} linkTo={server.linkTo} key={server.name} />)
+        return (<ServerCard name={server.owner} online={false} linkTo={server.url} key={server.name} />)
       })}
     </div>
   )

frontend/src/Components/ServerSearch/ServerSearchResult/ServerSearchResult.tsx

@@ -11,7 +11,7 @@ const ServerSearchResult = ({ searchResult, server }: ServerSearchResultProps) =
   const resultUrl = getUrlForSearchResult(searchResult, server);
 
   return (
-    <Link to={resultUrl}>
+    <Link to={resultUrl} target="_blank" rel="noopener noreferrer">
       <h3>{searchResult.name}</h3>
     </Link>
   )

frontend/src/Lib/Servers.ts

@@ -1,6 +1,8 @@
+import axios from "axios";
+import { apiUrl } from "./api";
 
 export interface Server {
-  name: string;
+  name?: string;
   id: string;
   online?: boolean;
   owner: string;
@@ -8,18 +10,7 @@ export interface Server {
 }
 
 export const getServerList = async (): Promise<Array<Server>> => {
-  return [{
-    id: "asdf",
-    name: "test server",
-    owner: "meeeee",
-    url: "https://jellyfin.foxhawk.co.uk",
-    online: true
-  },
-  {
-    id: "qwer",
-    name: "test server 2",
-    owner: "someone else",
-    url: "https://jellyfin.foxhawk.co.uk",
-    online: true
-  }];
+  const response = await axios.get<Array<Server>>(`${apiUrl}/servers`);
+
+  return response.data;
 }

frontend/src/Lib/api.ts

@@ -0,0 +1,2 @@
+
+export const apiUrl = "http://localhost:5092"

frontend/src/index.tsx

@@ -4,7 +4,7 @@ const Index = () => {
   return (
     <div style={{ width: "100%", padding: "20px", display: "flex", flexDirection: "column", alignItems: "center" }}>
       <h1>Available Servers</h1>
-      <ServerList servers={[{ name: "test", online: false, linkTo: "" }, { name: "test", online: false, linkTo: "" }, { name: "test", online: false, linkTo: "" }, { name: "test", online: false, linkTo: "" },]} />
+      <ServerList />
     </div>
   )
 }