commit af072141a26674ef740b9ef771ff24ad9cb4ff88
parent cc3d046e71b532da3eaf5511481885f5fe88e8b0
Author: MTRNord <mtrnord1@gmail.com>
Date: Thu, 1 May 2025 17:39:50 +0200
Update the settings pages to work with the real data
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
4 files changed, 35 insertions(+), 20 deletions(-)
diff --git a/src/app/dashboard/settings/bot/page.tsx b/src/app/dashboard/settings/bot/page.tsx
@@ -1,7 +1,6 @@
import { listBots } from "@/lib/api";
import { User } from "@/lib/auth";
import { cookies } from "next/headers";
-import { mockTeams } from "../../mockData";
import SettingsLayout from "../settingsLayout";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
@@ -20,14 +19,19 @@ export default async function BotSettingsPage({
return <div className="flex h-screen w-full items-center justify-center">Loading...</div>
}
const listData = await listBots(session.matrixId, session.token);
- const selectedTeam = mockTeams.find((t) => t.id === teamIdParam) || mockTeams[0];
+
+ if (!listData) {
+ return <div className="flex h-screen w-full items-center justify-center">Loading...</div>
+ }
+
+ const selectedBot = listData.bots.find((team) => team.id === teamIdParam) || listData.bots[0];
return (
- <SettingsLayout currentTab={"settings"} listData={listData} selectedTeam={selectedTeam} teamIdParam={teamIdParam}>
+ <SettingsLayout currentTab={"settings"} listData={listData} selectedBot={selectedBot} teamIdParam={teamIdParam}>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="bot-name">Bot Name</Label>
- <Input id="bot-name" defaultValue={selectedTeam.name} className="bg-gray-900 border-gray-800" />
+ <Input id="bot-name" defaultValue={selectedBot.displayName} className="bg-gray-900 border-gray-800" />
</div>
<div className="pt-4 flex justify-between">
<Button variant="outline" className="border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300">
diff --git a/src/app/dashboard/settings/members/page.tsx b/src/app/dashboard/settings/members/page.tsx
@@ -2,7 +2,6 @@ import { listBots } from "@/lib/api";
import { User } from "@/lib/auth";
import { cookies } from "next/headers";
import SettingsLayout from "../settingsLayout";
-import { mockTeams } from "../../mockData";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { LogOut, Settings, UserPlus } from "lucide-react";
@@ -25,10 +24,18 @@ export default async function MembersSettingsPage({
return <div className="flex h-screen w-full items-center justify-center">Loading...</div>
}
const listData = await listBots(session.matrixId, session.token);
- const selectedTeam = mockTeams.find((t) => t.id === teamIdParam) || mockTeams[0];
+
+ if (!listData) {
+ return <div className="flex h-screen w-full items-center justify-center">Loading...</div>
+ }
+
+ const selectedBot = listData.bots.find((team) => team.id === teamIdParam) || listData.bots[0];
+ // TODO: get teams from the API
+ // @ts-expect-error - members is not a property of the data yet
+ selectedBot.members = []
return (
- <SettingsLayout currentTab={"members"} listData={listData} selectedTeam={selectedTeam} teamIdParam={teamIdParam}>
+ <SettingsLayout currentTab={"members"} listData={listData} selectedBot={selectedBot} teamIdParam={teamIdParam}>
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-gray-400">Team Members</h3>
<Dialog>
@@ -82,7 +89,8 @@ export default async function MembersSettingsPage({
<ScrollArea className="h-[300px] rounded-md border border-gray-800">
<div className="p-4 space-y-3">
- {selectedTeam.members.map((member) => (
+ {/* @ts-expect-error - members is not yet a thing */}
+ {selectedBot.members.map((member) => (
<div key={member.id} className="flex items-center justify-between p-3 rounded-md bg-gray-900">
<div className="flex items-center gap-3">
<Avatar className="h-10 w-10 border border-gray-800">
diff --git a/src/app/dashboard/settings/protectedRooms/page.tsx b/src/app/dashboard/settings/protectedRooms/page.tsx
@@ -1,7 +1,6 @@
import { listBots } from "@/lib/api";
import { User } from "@/lib/auth";
import { cookies } from "next/headers";
-import { mockTeams } from "../../mockData";
import SettingsLayout from "../settingsLayout";
import AddProtectedRoom from "@/components/modals/add-protected-room";
import { ScrollArea } from "@/components/ui/scroll-area";
@@ -19,17 +18,22 @@ export default async function ProtectedRoomsSettingsPage({
return <div className="flex h-screen w-full items-center justify-center">Loading...</div>
}
const listData = await listBots(session.matrixId, session.token);
- const selectedTeam = mockTeams.find((t) => t.id === teamIdParam) || mockTeams[0];
+
+ if (!listData) {
+ return <div className="flex h-screen w-full items-center justify-center">Loading...</div>
+ }
+
+ const selectedBot = listData.bots.find((team) => team.id === teamIdParam) || listData.bots[0];
return (
- <SettingsLayout currentTab={"rooms"} listData={listData} selectedTeam={selectedTeam} teamIdParam={teamIdParam}>
+ <SettingsLayout currentTab={"rooms"} listData={listData} selectedBot={selectedBot} teamIdParam={teamIdParam}>
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-gray-400">Protected Rooms</h3>
<AddProtectedRoom filled />
</div>
<ScrollArea className="h-[300px] rounded-md border border-gray-800">
- <ProtectedRomsList team={selectedTeam} />
+ <ProtectedRomsList selectedBot={selectedBot} />
</ScrollArea>
</SettingsLayout>
)
diff --git a/src/app/dashboard/settings/settingsLayout.tsx b/src/app/dashboard/settings/settingsLayout.tsx
@@ -2,8 +2,7 @@ import LayoutWrapper from "@/components/dashboard/layoutWrapper"
import TabNavigation from "@/components/dashboard/tab-navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { ListResponse } from "@/lib/api";
-import { Team } from "../mockData";
+import { DraupnirBot, ListResponse } from "@/lib/api";
import Link from "next/link";
export default function SettingsLayout({
@@ -11,17 +10,17 @@ export default function SettingsLayout({
currentTab,
listData,
teamIdParam,
- selectedTeam,
+ selectedBot,
}: {
children: React.ReactNode;
currentTab: string;
listData?: ListResponse;
teamIdParam?: string;
- selectedTeam: Team;
+ selectedBot: DraupnirBot;
}) {
return (
<LayoutWrapper listData={listData} activeTab="settings" teamIdParam={teamIdParam}>
- <TabNavigation selectedTeam={selectedTeam} currentTab="settings" />
+ <TabNavigation selectedBot={selectedBot} currentTab="settings" />
<Card className="border-gray-800 bg-gray-950">
<CardHeader>
<div className="flex items-center justify-between">
@@ -35,13 +34,13 @@ export default function SettingsLayout({
<Tabs defaultValue={currentTab} className="space-y-4">
<TabsList className="bg-gray-900">
<TabsTrigger value="members" asChild>
- <Link href={`/dashboard/settings/members?team=${selectedTeam.id}`}>Team Members</Link>
+ <Link href={`/dashboard/settings/members?team=${selectedBot.id}`}>Team Members</Link>
</TabsTrigger>
<TabsTrigger value="rooms" asChild>
- <Link href={`/dashboard/settings/protectedRooms?team=${selectedTeam.id}`}>Protected Rooms</Link>
+ <Link href={`/dashboard/settings/protectedRooms?team=${selectedBot.id}`}>Protected Rooms</Link>
</TabsTrigger>
<TabsTrigger value="settings" asChild>
- <Link href={`/dashboard/settings/bot?team=${selectedTeam.id}`}>Bot Settings</Link>
+ <Link href={`/dashboard/settings/bot?team=${selectedBot.id}`}>Bot Settings</Link>
</TabsTrigger>
</TabsList>
</Tabs>
