Add settings page query

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/pages/SettingsPage.tsx

@@ -4,8 +4,43 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Helmet } from "react-helmet-async"
+import { Suspense, useEffect } from "react"
+import {
+  graphql,
+  PreloadedQuery,
+  usePreloadedQuery,
+  useQueryLoader,
+} from "react-relay"
+import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__/SettingsPageQuery.graphql"
+
+const settingsPageQuery = graphql`
+  query SettingsPageQuery {
+    node(id: "AZSfP_xAcAC5IAAAAAAltA") {
+      id
+      ... on Organization {
+        name
+        logoUrl
+      }
+    }
+  }
+`
+
+interface Member {
+  id: string;
+  fullName: string;
+  primaryEmailAddress: string;
+  role: string;
+}
+
+function SettingsPageContent({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<SettingsPageQueryType>;
+}) {
+  const data = usePreloadedQuery(settingsPageQuery, queryRef);
+  const organization = data.node;
+  const members: Member[] = [];
 
-export default function SettingsPage() {
   return (
     <>
       <Helmet>
@@ -44,9 +79,13 @@ export default function SettingsPage() {
               <label className="text-sm font-medium">Organization logo</label>
               <div className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
                 <div className="flex items-center gap-3">
+                  {organization.logoUrl ? (
+                    <img src={organization.logoUrl} alt="Logo" className="h-10 w-10 rounded-lg object-cover" />
+                  ) : (
                     <div className="flex h-10 w-10 items-center justify-center rounded-lg border">
                       <Upload className="h-5 w-5 text-muted-foreground" />
                     </div>
+                  )}
                   <span className="text-muted-foreground">
                     Upload a logo to be displayed at the top of your trust page
                   </span>
@@ -63,7 +102,7 @@ export default function SettingsPage() {
                   <span className="text-muted-foreground">Set the name of the organization</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-sm">ACME</span>
+                  <span className="text-sm">{organization.name}</span>
                   <Button variant="outline" size="sm">
                     Edit
                   </Button>
@@ -84,19 +123,15 @@ export default function SettingsPage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {[
+              {members.map((member) => (
-                { name: "Antoine Bouchardy", email: "antoine.bouchardy@hexa.com", role: "Admin" },
+                <div key={member.id} className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
-                { name: "Bryan Frimin", email: "bryan.frimin@hexa.com", role: "Admin" },
-              ].map((member) => (
-                <div key={member.email} className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
                   <div className="flex items-center gap-3">
                     <Avatar>
-                      <AvatarImage src={`/placeholder.svg?height=32&width=32`} />
+                      <AvatarFallback>{member.fullName.charAt(0)}</AvatarFallback>
-                      <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
                     </Avatar>
                     <div className="flex flex-col">
-                      <span className="text-sm font-medium">{member.name}</span>
+                      <span className="text-sm font-medium">{member.fullName}</span>
-                      <span className="text-sm text-muted-foreground">{member.email}</span>
+                      <span className="text-sm text-muted-foreground">{member.primaryEmailAddress}</span>
                     </div>
                   </div>
                   <div className="flex items-center gap-2">
@@ -123,3 +158,37 @@ export default function SettingsPage() {
     </>
   )
 }
+
+function SettingsPageFallback() {
+  return (
+    <div className="p-6 space-y-6">
+      <div className="space-y-1">
+        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+        <div className="h-4 w-96 bg-muted animate-pulse rounded" />
+      </div>
+      <div className="space-y-2">
+        {[1, 2].map((i) => (
+          <div key={i} className="h-64 bg-muted animate-pulse rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  const [queryRef, loadQuery] = useQueryLoader<SettingsPageQueryType>(settingsPageQuery);
+
+  useEffect(() => {
+    loadQuery({});
+  }, [loadQuery]);
+
+  if (!queryRef) {
+    return <SettingsPageFallback />;
+  }
+
+  return (
+    <Suspense fallback={<SettingsPageFallback />}>
+      <SettingsPageContent queryRef={queryRef} />
+    </Suspense>
+  );
+}

apps/console/src/pages/__generated__/SettingsPageQuery.graphql.ts

@@ -0,0 +1,126 @@
+/**
+ * @generated SignedSource<<1daa3e6f3ef43392ed73ce9ddb46aa47>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type SettingsPageQuery$variables = Record<PropertyKey, never>;
+export type SettingsPageQuery$data = {
+  readonly node: {
+    readonly id: string;
+    readonly logoUrl?: string;
+    readonly name?: string;
+  };
+};
+export type SettingsPageQuery = {
+  response: SettingsPageQuery$data;
+  variables: SettingsPageQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "kind": "Literal",
+    "name": "id",
+    "value": "AZSfP_xAcAC5IAAAAAAltA"
+  }
+],
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v2 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "logoUrl",
+      "storageKey": null
+    }
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SettingsPageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v0/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v1/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "SettingsPageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v0/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v1/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": "node(id:\"AZSfP_xAcAC5IAAAAAAltA\")"
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "911c50f40d00159bd8201b7193fe6686",
+    "id": null,
+    "metadata": {},
+    "name": "SettingsPageQuery",
+    "operationKind": "query",
+    "text": "query SettingsPageQuery {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      name\n      logoUrl\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "fc0474b3b161e0a1e6c41f9898afa5b0";
+
+export default node;