import { useState, useRef, useEffect, useCallback } from "react"; import "./App.css"; import { client } from "./lib/appwrite"; import { AppwriteException } from "appwrite"; import AppwriteSvg from "../public/appwrite.svg"; import ReactSvg from "../public/react.svg"; function App() { const [detailHeight, setDetailHeight] = useState(55); const [logs, setLogs] = useState([]); const [status, setStatus] = useState("idle"); const [showLogs, setShowLogs] = useState(false); const detailsRef = useRef(null); const updateHeight = useCallback(() => { if (detailsRef.current) { setDetailHeight(detailsRef.current.clientHeight); } }, [logs, showLogs]); useEffect(() => { updateHeight(); window.addEventListener("resize", updateHeight); return () => window.removeEventListener("resize", updateHeight); }, [updateHeight]); useEffect(() => { if (!detailsRef.current) return; detailsRef.current.addEventListener("toggle", updateHeight); return () => { if (!detailsRef.current) return; detailsRef.current.removeEventListener("toggle", updateHeight); }; }, []); async function sendPing() { if (status === "loading") return; setStatus("loading"); try { const result = await client.ping(); const log = { date: new Date(), method: "GET", path: "/v1/ping", status: 200, response: JSON.stringify(result), }; setLogs((prevLogs) => [log, ...prevLogs]); setStatus("success"); } catch (err) { const log = { date: new Date(), method: "GET", path: "/v1/ping", status: err instanceof AppwriteException ? err.code : 500, response: err instanceof AppwriteException ? err.message : "Something went wrong", }; setLogs((prevLogs) => [log, ...prevLogs]); setStatus("error"); } setShowLogs(true); } return (
{"React
{"Appwrite
{status === "loading" ? (
Loading...
Waiting for connection...
) : status === "success" ? (

Congratulations!

) : (

Check connection

)}

{status === "success" ? ( You connected your app successfully. ) : status === "error" || status === "idle" ? ( Send a ping to verify the connection ) : null}

Edit your app

Edit{" "} app/page.js to get started with building your app.

Go to console

Navigate to the console to control and oversee the Appwrite services.

Explore docs

Discover the full power of Appwrite by diving into our documentation.

); } export default App;