From 5b37d7bae5d1ff96cce2112ee4648b963c2dd02f Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <me@khairul.my.id>
Date: Wed, 6 Nov 2024 14:53:07 +0700
Subject: [PATCH] feat: multi tab session

---
 frontend/.env.example                         |  1 +
 frontend/.gitignore                           |  4 +-
 frontend/app/index.tsx                        | 60 +++++++++++++++++--
 .../containers/interactive-session.tsx        | 31 ++++++++++
 frontend/components/containers/xtermjs.tsx    |  3 +
 frontend/components/ui/pager-view.tsx         | 27 +++++++++
 frontend/components/ui/pager-view.web.tsx     | 39 ++++++++++++
 frontend/lib/api.ts                           |  2 +
 frontend/package.json                         |  1 +
 frontend/pnpm-lock.yaml                       | 14 +++++
 server/.gitignore                             |  1 +
 server/main.go                                |  6 +-
 12 files changed, 182 insertions(+), 7 deletions(-)
 create mode 100644 frontend/.env.example
 create mode 100644 frontend/components/containers/interactive-session.tsx
 create mode 100644 frontend/components/ui/pager-view.tsx
 create mode 100644 frontend/components/ui/pager-view.web.tsx
 create mode 100644 frontend/lib/api.ts
 create mode 100644 server/.gitignore

diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..8ce5db9
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+EXPO_PUBLIC_API_URL=http://localhost:3000
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 6623142..574ca7f 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -17,4 +17,6 @@ web-build/
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
\ No newline at end of file
+# @end expo-cli
+.env*
+!.env.example
diff --git a/frontend/app/index.tsx b/frontend/app/index.tsx
index 41689ef..e67181c 100644
--- a/frontend/app/index.tsx
+++ b/frontend/app/index.tsx
@@ -1,14 +1,66 @@
-import { View, Text } from "react-native";
-import React from "react";
+import { View, Text, ScrollView, Button } from "react-native";
+import React, { useState } from "react";
 import { Stack } from "expo-router";
-import Terminal from "@/components/containers/terminal";
+import InteractiveSession from "@/components/containers/interactive-session";
+import PagerView from "@/components/ui/pager-view";
+
+let nextSession = 1;
 
 const HomePage = () => {
+  const [sessions, setSessions] = useState<string[]>(["1"]);
+  const [curSession, setSession] = useState(0);
+
   return (
     <View style={{ flex: 1 }}>
       <Stack.Screen options={{ title: "Home" }} />
 
-      <Terminal wsUrl="ws://10.0.0.100:3000/ws" />
+      <ScrollView
+        horizontal
+        style={{ flexGrow: 0 }}
+        contentContainerStyle={{ flexDirection: "row", gap: 8 }}
+      >
+        {sessions.map((session, idx) => (
+          <View
+            key={session}
+            style={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Button
+              title={"Session " + session}
+              color="#222"
+              onPress={() => setSession(idx)}
+            />
+            <Button
+              title="X"
+              onPress={() => {
+                const newSessions = sessions.filter((s) => s !== session);
+                setSessions(newSessions);
+                setSession(
+                  Math.min(Math.max(curSession, 0), newSessions.length - 1)
+                );
+              }}
+            />
+          </View>
+        ))}
+
+        <Button
+          title="[ + ]"
+          onPress={() => {
+            nextSession += 1;
+            setSessions([...sessions, nextSession.toString()]);
+            setSession(sessions.length);
+          }}
+        />
+      </ScrollView>
+
+      <PagerView style={{ flex: 1 }} page={curSession}>
+        {sessions.map((session) => (
+          <InteractiveSession
+            key={session}
+            type="ssh"
+            options={{ serverId: session }}
+          />
+        ))}
+      </PagerView>
     </View>
   );
 };
diff --git a/frontend/components/containers/interactive-session.tsx b/frontend/components/containers/interactive-session.tsx
new file mode 100644
index 0000000..5312f32
--- /dev/null
+++ b/frontend/components/containers/interactive-session.tsx
@@ -0,0 +1,31 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Terminal from "./terminal";
+import { BASE_WS_URL } from "@/lib/api";
+
+type SSHSessionProps = {
+  type: "ssh";
+  options: {
+    serverId: string;
+  };
+};
+
+type Props = SSHSessionProps;
+
+const InteractiveSession = ({ type, options }: Props) => {
+  switch (type) {
+    case "ssh":
+      const params = new URLSearchParams({
+        serverId: options.serverId,
+        token: "token",
+      });
+      return <Terminal wsUrl={BASE_WS_URL + "/ws/ssh?" + params} />;
+
+    default:
+      throw new Error("Unknown interactive session type");
+  }
+
+  return null;
+};
+
+export default InteractiveSession;
diff --git a/frontend/components/containers/xtermjs.tsx b/frontend/components/containers/xtermjs.tsx
index 16812f8..e89232c 100644
--- a/frontend/components/containers/xtermjs.tsx
+++ b/frontend/components/containers/xtermjs.tsx
@@ -69,10 +69,13 @@ const XTermJs = forwardRef<XTermRef, XTermJsProps>((props, ref) => {
     }
 
     function onOpen() {
+      console.log("WS Open");
       resizeTerminal();
     }
 
     function onClose(e: CloseEvent) {
+      console.log("WS Closed", e.reason, e.code);
+
       // Check if the close event was abnormal
       if (!e.wasClean) {
         const reason = e.reason || `Code: ${e.code}`;
diff --git a/frontend/components/ui/pager-view.tsx b/frontend/components/ui/pager-view.tsx
new file mode 100644
index 0000000..99c8568
--- /dev/null
+++ b/frontend/components/ui/pager-view.tsx
@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import RNPagerView from "react-native-pager-view";
+
+export type PagerViewProps = ComponentPropsWithoutRef<typeof RNPagerView> & {
+  page?: number;
+  onChangePage?: (page: number) => void;
+};
+
+const PagerView = ({ page, onChangePage, ...props }: PagerViewProps) => {
+  const ref = useRef<RNPagerView>(null);
+
+  useEffect(() => {
+    if (page != null) {
+      ref.current?.setPage(page);
+    }
+  }, [page]);
+
+  return (
+    <RNPagerView
+      ref={ref}
+      {...props}
+      onPageSelected={(e) => onChangePage?.(e.nativeEvent.position)}
+    />
+  );
+};
+
+export default PagerView;
diff --git a/frontend/components/ui/pager-view.web.tsx b/frontend/components/ui/pager-view.web.tsx
new file mode 100644
index 0000000..0989bf6
--- /dev/null
+++ b/frontend/components/ui/pager-view.web.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { View } from "react-native";
+import { PagerViewProps } from "./pager-view";
+
+const PagerView = ({
+  className,
+  children,
+  page,
+  initialPage,
+}: PagerViewProps) => {
+  const [curPage, setPage] = useState<number>(page || initialPage || 0);
+
+  useEffect(() => {
+    if (page != null) {
+      setPage(page);
+    }
+  }, [page]);
+
+  const content = useMemo(() => {
+    if (!Array.isArray(children)) {
+      return null;
+    }
+
+    return children.map((element, index) => {
+      return (
+        <View
+          key={element.key || index}
+          style={{ display: index === curPage ? "flex" : "none", flex: 1 }}
+        >
+          {element}
+        </View>
+      );
+    });
+  }, [curPage, children]);
+
+  return content;
+};
+
+export default PagerView;
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
new file mode 100644
index 0000000..9c02c70
--- /dev/null
+++ b/frontend/lib/api.ts
@@ -0,0 +1,2 @@
+export const BASE_API_URL = process.env.EXPO_PUBLIC_API_URL || ""; //"http://10.0.0.100:3000";
+export const BASE_WS_URL = BASE_API_URL.replace("http", "ws");
diff --git a/frontend/package.json b/frontend/package.json
index f30c96f..509a374 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,7 @@
     "react-dom": "18.3.1",
     "react-native": "0.76.1",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-pager-view": "6.4.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "4.0.0-beta.16",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 1dc4ea7..0e376ce 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -74,6 +74,9 @@ importers:
       react-native-gesture-handler:
         specifier: ~2.20.2
         version: 2.20.2(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
+      react-native-pager-view:
+        specifier: 6.4.1
+        version: 6.4.1(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
       react-native-reanimated:
         specifier: ~3.16.1
         version: 3.16.1(@babel/core@7.26.0)(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)
@@ -3667,6 +3670,12 @@ packages:
     peerDependencies:
       react: ^16.6.0 || ^17.0.0 || ^18.0.0
 
+  react-native-pager-view@6.4.1:
+    resolution: {integrity: sha512-HnDxXTRHnR6WJ/vnOitv0C32KG9MJjxLnxswuQlBJmQ7RxF2GWOHSPIRAdZ9fLxdLstV38z9Oz1C95+t+yXkcg==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-reanimated@3.16.1:
     resolution: {integrity: sha512-Wnbo7toHZ6kPLAD8JWKoKCTfNoqYOMW5vUEP76Rr4RBmJCrdXj6oauYP0aZnZq8NCbiP5bwwu7+RECcWtoetnQ==}
     peerDependencies:
@@ -9141,6 +9150,11 @@ snapshots:
       react-fast-compare: 3.2.2
       shallowequal: 1.1.0
 
+  react-native-pager-view@6.4.1(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-native: 0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1)
+
   react-native-reanimated@3.16.1(@babel/core@7.26.0)(react-native@0.76.1(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/core': 7.26.0
diff --git a/server/.gitignore b/server/.gitignore
new file mode 100644
index 0000000..3fec32c
--- /dev/null
+++ b/server/.gitignore
@@ -0,0 +1 @@
+tmp/
diff --git a/server/main.go b/server/main.go
index 29e9959..83a6ad4 100644
--- a/server/main.go
+++ b/server/main.go
@@ -121,10 +121,12 @@ func sshWebSocketHandler(w http.ResponseWriter, r *http.Request) {
 
 	// Handle WebSocket to SSH data streaming
 	go func() {
+		defer session.Close()
+
 		for {
 			_, msg, err := wsConn.Read(context.Background())
 			if err != nil {
-				return
+				break
 			}
 
 			if strings.HasPrefix(string(msg), "\x01") {
@@ -153,7 +155,7 @@ func sshWebSocketHandler(w http.ResponseWriter, r *http.Request) {
 }
 
 func main() {
-	http.HandleFunc("/ws", sshWebSocketHandler)
+	http.HandleFunc("/ws/ssh", sshWebSocketHandler)
 	log.Println("Server started on :3000")
 	log.Fatal(http.ListenAndServe(":3000", nil))
 }