display dummy public key from server

backend/src/main.rs

@@ -71,5 +71,6 @@ async fn rocket() -> _ {
         .mount("/hello", routes![hello])
         .mount("/api/this_site", routes::this_site::routes())
         .mount("/api/this_region", routes::this_region::routes())
+        .mount("/api/this_node", routes::this_node::routes())
         .mount("/api/apps", routes::apps::routes())
 }

backend/src/routes/mod.rs

@@ -1,3 +1,4 @@
 pub mod apps;
+pub mod this_node;
 pub mod this_region;
 pub mod this_site;

backend/src/routes/this_node.rs

@@ -0,0 +1,26 @@
+use rocket::serde::json::Json;
+use rocket::serde::{Deserialize, Serialize};
+use rocket::Route;
+use thiserror::Error;
+
+#[derive(sqlx::FromRow, Serialize, Deserialize)]
+#[serde(crate = "rocket::serde")]
+pub struct NodeDetails {
+    pub public_key: String,
+}
+
+#[derive(Debug, Error, Responder)]
+pub enum ThisNodeError {}
+
+#[get("/", format = "json")]
+async fn show() -> Result<Json<NodeDetails>, ThisNodeError> {
+    let dummy_details = NodeDetails {
+        public_key: "xxx".to_string(),
+    };
+
+    Ok(Json(dummy_details))
+}
+
+pub fn routes() -> Vec<Route> {
+    routes![show]
+}

frontend/src/contexts/this_site/api.ts

@@ -24,4 +24,8 @@ export default class ThisSiteApi extends BaseApi {
       description,
     })
   }
+
+  showNode(): Promise<ApiResult<any, any>> {
+    return this.apiCall("this_node")
+  }
 }

frontend/src/contexts/this_site/pages/ThisNode.tsx

@@ -1,9 +1,50 @@
-import { Box, Text } from "@chakra-ui/react"
+import { VStack, Text, Table } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
+import ThisSiteApi from "../api"
+import { NodeDetails } from "../types"
+
+const api = new ThisSiteApi()
+
+const getNode = async (): Promise<NodeDetails | null> => {
+  const result = await api.showNode()
+  if ("Ok" in result) return result.Ok
+  return null
+}
 
 export default function ThisNode() {
+  const [node, setNode] = useState<NodeDetails | null>(null)
+
+  const fetchNode = async () => {
+    const node = await getNode()
+    console.log("fetched node", node)
+    setNode(node)
+  }
+
+  useEffect(() => {
+    fetchNode()
+  }, [])
+
+  if (!node) {
+    return <></>
+  }
+
   return (
-    <Box>
-      <Text>This node</Text>
-    </Box>
+    <VStack alignItems={"stretch"}>
+      <Text textStyle="xl">This P2Panda Node</Text>
+      <Table.Root variant="line">
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader>Key</Table.ColumnHeader>
+            <Table.ColumnHeader>Value</Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Public key</Table.Cell>
+            <Table.Cell>{node.public_key}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </VStack>
   )
 }

frontend/src/contexts/this_site/types.ts

@@ -8,3 +8,7 @@ export type RegionDetails = {
   name: string
   description: string
 }
+
+export type NodeDetails = {
+  public_key: string
+}