test-connection.tsx•4.11 kB
import React from "react";
import { Platform, View } from "react-native";
import * as Clipboard from "expo-clipboard";
import { Button } from "@/components/ui/Button";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import { Input } from "@/components/ui/Input";
import { Text } from "@/components/ui/Text";
import useAppSettings from "@/lib/settings";
import { cn } from "@/lib/utils";
import { z } from "zod";
export default function TestConnection() {
const { settings, isLoading } = useAppSettings();
const [text, setText] = React.useState("");
const [randomId, setRandomId] = React.useState(Math.random());
const [status, setStatus] = React.useState<"running" | "success" | "error">(
"running",
);
const appendText = (text: string) => {
setText((prev) => prev + (prev ? "\n\n" : "") + text);
};
React.useEffect(() => {
if (isLoading) {
return;
}
setStatus("running");
appendText("Running connection test ...");
function runTest() {
const request = new XMLHttpRequest();
request.onreadystatechange = () => {
if (request.readyState !== 4) {
return;
}
if (request.status === 0) {
appendText("Network connection failed: " + request.responseText);
setStatus("error");
return;
}
if (request.status !== 200) {
appendText("Recieve non success error code: " + request.status);
appendText("Got the following response:");
appendText(request.responseText);
setStatus("error");
return;
}
try {
const schema = z.object({
status: z.string(),
});
const data = schema.parse(JSON.parse(request.responseText));
if (data.status !== "ok") {
appendText(`Server is not healthy: ${data.status}`);
setStatus("error");
return;
}
appendText("ALL GOOD");
setStatus("success");
} catch (e) {
appendText(`Failed to parse response as JSON: ${e}`);
appendText("Got the following response:");
appendText(request.responseText);
setStatus("error");
return;
}
};
appendText("Using address: " + settings.address);
request.open("GET", `${settings.address}/api/health`);
request.send();
}
runTest();
}, [settings.address, randomId]);
return (
<CustomSafeAreaView>
<View className="m-4 flex flex-col gap-2 p-2">
<Button
className="w-full"
onPress={async () => {
await Clipboard.setStringAsync(text);
}}
>
<Text>Copy Diagnostics Result</Text>
</Button>
<Button
className="w-full"
variant="secondary"
onPress={() => {
setText("");
setRandomId(Math.random());
}}
>
<Text>Retry</Text>
</Button>
<View
className={cn(
"w-full rounded-md p-2",
status === "running" && "bg-primary/50",
status === "success" && "bg-green-500",
status === "error" && "bg-red-500",
)}
>
<Text
className={cn(
"w-full text-center",
status === "running" && "text-primary-foreground",
status === "success" && "text-white",
status === "error" && "text-white",
)}
>
{status === "running" && "Running connection test ..."}
{status === "success" && "Connection test successful"}
{status === "error" && "Connection test failed"}
</Text>
</View>
<Input
className="h-fit leading-6"
style={{
fontFamily: Platform.OS === "ios" ? "Courier New" : "monospace",
}}
multiline={true}
scrollEnabled={true}
value={text}
onChangeText={setText}
editable={false}
/>
</View>
</CustomSafeAreaView>
);
}