Updated list of commands to v4.3. Added groups & permissions. Added connections. Updated redemptions and actions to v4.3.

app/(protected)/settings/connections/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import axios from "axios";
+import * as React from 'react';
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { ConnectionElement, ConnectionAdderElement } from "@/components/elements/connection";
+import { ConnectionDefaultElement } from "@/components/elements/connection-default";
+
+const ConnectionsPage = () => {
+    const { data: session, status } = useSession();
+    const [loading, setLoading] = useState<boolean>(true)
+    const [connections, setConnections] = useState<{ name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date }[]>([])
+
+    useEffect(() => {
+        if (status != "authenticated")
+            return
+
+        const fetchData = async () => {
+            setLoading(true)
+            const response = await axios.get("/api/connection")
+            const data = response.data
+            setConnections(data.data)
+        }
+
+        fetchData().catch(console.error).finally(() => setLoading(false))
+    }, [session])
+
+    const OnConnectionDelete = async (name: string) => {
+        setConnections(connections.filter(c => c.name != name))
+    }
+
+    const OnDefaultConnectionUpdate = async (name: string) => {
+        if (!connections.some(c => c.name == name))
+            return
+
+        axios.put('/api/connection/default', { name: name })
+            .then(d => {
+                setConnections([...connections])
+            })
+    }
+
+    return (
+        <div>
+            <div className="text-2xl text-center pt-[50px]">Connections</div>
+            <div className="grid grid-cols-[1fr] xl:grid-cols-[1fr_1fr]">
+                {connections.map((connection) =>
+                    <ConnectionElement
+                        key={connection.name}
+                        name={connection.name}
+                        type={connection.type}
+                        clientId={connection.clientId}
+                        expiresAt={connection.expiresAt}
+                        scope={connection.scope}
+                        remover={OnConnectionDelete}
+                    />
+                )}
+
+                {!loading &&
+                    <ConnectionAdderElement />
+                }
+            </div>
+            {connections.length > 0 &&
+                <div>
+                    <p className="text-2xl text-center pt-[50px]">Default Connections</p>
+                    <ConnectionDefaultElement
+                        type={"nightbot"}
+                        connections={connections} />
+                    <ConnectionDefaultElement
+                        type={"twitch"}
+                        connections={connections} />
+                </div>
+            }
+        </div>
+    );
+}
+
+export default ConnectionsPage;