WIP

launcher/fly/src/main/kotlin/me/madhead/tyzenhaus/launcher/fly/routes/MiniAppAPI.kt

@@ -75,6 +75,8 @@ fun Route.miniAppAPI() {
                         val principal = call.principal<APITokenPrincipal>()!!
                         val currencies = groupCurrenciesService.groupCurrencies(principal.groupId) ?: emptyList()
 
+                        println(currencies)
+
                         call.respond(currencies)
                     }
                 }

mini-app/src/common/AppWrapper.tsx

@@ -0,0 +1,56 @@
+import WebApp from "@twa-dev/sdk";
+import { ReactNode, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Error from "./error/Error";
+
+type AppWrapperProps = {
+  children: ReactNode;
+};
+
+export default function AppWrapper(props: AppWrapperProps) {
+  const { platform } = WebApp;
+  const { t } = useTranslation();
+
+  if (platform === "unknown") {
+    return <Error error={t("errors.outsideOfTelegram")} />;
+  } else {
+    return AuthWrapper(props);
+  }
+}
+
+type AuthWrapperProps = AppWrapperProps;
+
+function AuthWrapper({ children }: AuthWrapperProps) {
+  const [ok, setOk] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    async function authenticate() {
+      let response = await fetch("/app/api/auth/validation", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${WebApp.initDataUnsafe.start_param}`,
+        },
+        body: WebApp.initData,
+      });
+
+      setOk(response.ok);
+    }
+
+    authenticate();
+  }, [
+    WebApp,
+    WebApp.initData,
+    WebApp.initDataUnsafe,
+    WebApp.initDataUnsafe.start_param,
+  ]);
+
+  const { t } = useTranslation();
+
+  if (ok === null) {
+    return null;
+  } else if (ok === false) {
+    return <Error error={t("errors.unauthorized")} />;
+  } else {
+    return children;
+  }
+}

mini-app/src/common/error/Error.less

@@ -1,4 +1,9 @@
 #error {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   color: red;
   font-size: large;
   text-align: center;

mini-app/src/history/HistoryApp.tsx

@@ -1,15 +1,66 @@
 import "./HistoryApp.less";
-import Error from "../common/error/Error";
 
-import { useTranslation } from "react-i18next";
+import WebApp from "@twa-dev/sdk";
+import { useEffect, useState } from "react";
+import AppWrapper from "../common/AppWrapper";
+
+type Member = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  username: string;
+};
+type Currency = string;
 
 function HistoryApp() {
-  const { t, i18n } = useTranslation();
+  const [members, setMembers] = useState<Member[]>([]);
+  const [currencies, setCurrencies] = useState<Currency[]>([]);
+
+  useEffect(() => {
+    async function loadMembers() {
+      let response = await fetch("/app/api/group/members", {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${WebApp.initDataUnsafe.start_param}`,
+        },
+      });
+
+      setMembers((await response.json()).members);
+    }
+
+    loadMembers();
+  }, []);
+  useEffect(() => {
+    async function loadCurrencies() {
+      let response = await fetch("/app/api/group/currencies", {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${WebApp.initDataUnsafe.start_param}`,
+        },
+      });
+
+      setCurrencies(await response.json());
+    }
+
+    loadCurrencies();
+  }, []);
 
   return (
-    <>
-      <Error error={t("errors.outsideOfTelegram")} />
-    </>
+    <AppWrapper>
+      <h1>History</h1>
+      <ul>
+        {members.map((member) => (
+          <li key={member.id}>
+            {member.firstName} {member.lastName} ({member.username})
+          </li>
+        ))}
+      </ul>
+      <ul>
+        {currencies.map((currency) => (
+          <li key={currency}>{currency}</li>
+        ))}
+      </ul>
+    </AppWrapper>
   );
 }
 

mini-app/src/history/history.less

@@ -1,15 +1,15 @@
 @import url(https://fonts.googleapis.com/css2?family=Roboto);
-@import '~normalize.css/normalize.css';
+@import "~normalize.css/normalize.css";
 
 body {
   font-family: "Roboto", sans-serif;
   background-color: var(--tg-theme-bg-color);
-  padding: 80px;
-  height: var(--tg-viewport-height);
 }
 
 #root {
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 24px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
 }

mini-app/src/history/history.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+
 import "@twa-dev/sdk";
 
-import "../i18n/i18n"
+import "../i18n/i18n";
 
 import "./history.less";
 

mini-app/src/i18n/en.json

@@ -1,5 +1,6 @@
 {
     "errors": {
-        "outsideOfTelegram": "This app must be executed inside a Telegram client"
+        "outsideOfTelegram": "This app must be executed inside a Telegram client",
+        "unauthorized": "You are not authorized to use this app"
     }
 }