Start of data filling

components/gui/server/game-group-select.tsx

@@ -0,0 +1,85 @@
+import { Game, GameGroup } from "@/types/stellaris";
+import { Dropdown } from "@nextui-org/react";
+import { Dispatch, Key, SetStateAction, Suspense } from "react";
+import { fetchGameGroups } from "@/components/server/fetchers";
+
+type SelectionType = "all" | Set<Key>;
+
+export const GameGroupSelect = (
+  props: {
+    game: Game,
+    groups: [GameGroup[], Dispatch<SetStateAction<Array<GameGroup>>>],
+    currentGroups: [GameGroup[], Dispatch<SetStateAction<Array<GameGroup>>>]
+  }) => {
+  const currentGame = props.game;
+  const [gameGroups, setGameGroups] = props.groups;
+  const [currentGameGroups, setCurrentGameGroups] = props.currentGroups;
+
+  const changeSelection = (keys: SelectionType) => {
+    if (keys != "all") {
+      let newSelection: GameGroup[] = [];
+      keys.forEach(key => {
+        gameGroups.forEach(group => {
+          if (key == group.name) {
+            newSelection.push(group);
+          }
+        })
+      });
+      setCurrentGameGroups(newSelection)
+    }
+  }
+
+  return (
+    <>
+      <Suspense>
+        <DataHandler game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
+      </Suspense>
+      <Dropdown>
+        <Dropdown.Button flat color="secondary" css={{ tt: "capitalize" }}>
+          {currentGameGroups.map(elem => elem.name).join(", ")}
+        </Dropdown.Button>
+        <Dropdown.Menu
+          aria-label="Multiple selection actions"
+          color="secondary"
+          disallowEmptySelection
+          selectionMode="multiple"
+          selectedKeys={currentGameGroups.map(elem => elem.name)}
+          onSelectionChange={changeSelection}
+          items={gameGroups}
+        >
+          {gameGroups.map((item) => (
+            <Dropdown.Item
+              key={item.name}
+              color="default"
+            >
+              {item.name}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  )
+}
+
+const DataHandler = async (
+  props: {
+  game: Game,
+  groups: [GameGroup[], Dispatch<SetStateAction<Array<GameGroup>>>],
+  currentGroups: [GameGroup[], Dispatch<SetStateAction<Array<GameGroup>>>]
+}) => {
+  if (props) {
+    const currentGame = props.game;
+    const [gameGroups, setGameGroups] = props.groups;
+    const [currentGameGroups, setCurrentGameGroups] = props.currentGroups;
+  
+    if (!gameGroups[0] || gameGroups[0].game_id != currentGame.id) {
+      setGameGroups(await fetchGameGroups(currentGame));
+    }
+    else if (!currentGameGroups[0] || currentGameGroups[0].game_id != gameGroups[0].game_id) {
+      setCurrentGameGroups(gameGroups);
+    }
+  
+  }
+
+  return <></>
+}

components/gui/server/game-select.tsx

@@ -0,0 +1,43 @@
+import { Game } from "@/types/stellaris";
+import { Dropdown } from "@nextui-org/react";
+import { Dispatch, Key, SetStateAction, useState } from "react";
+
+type SelectionType = "all" | Set<Key>;
+
+export const GameSelect = (props: { games: Game[], currentGame: Game | undefined, setCurrentGame: Dispatch<SetStateAction<Game>> }) => {
+  const changeSelection = (keys: SelectionType) => {
+    if (keys != "all") {
+      props.games.forEach(game => {
+        if (game.name == keys.keys().next().value) [
+          props.setCurrentGame(game)
+        ]
+      })
+    }
+  }
+
+  return (
+    <Dropdown>
+      <Dropdown.Button flat color="secondary" css={{ tt: "capitalize" }}>
+        {props.currentGame ? props.currentGame.name : "-"}
+      </Dropdown.Button>
+      <Dropdown.Menu
+        aria-label="Single selection actions"
+        color="secondary"
+        disallowEmptySelection
+        selectionMode="single"
+        selectedKeys={[props.currentGame ? props.currentGame.name : "-"]}
+        onSelectionChange={changeSelection}
+        items={props.games}
+      >
+        {props.games.map((item) => (
+          <Dropdown.Item
+            key={item.name}
+            color="default"
+          >
+            {item.name}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}