react_monday_boost_provider_context_fetch_user_greeting.ts

1import React, { useEffect, useState } from "react";
2import { MondayBoostProvider, useMondayBoost } from "react-monday-boost-test";
3
4const AppContent: React.FC = () => {
5  const { context, monday } = useMondayBoost();
6  const [userName, setUserName] = useState<string>("User");
7
8  useEffect(() => {
9    if (monday) {
10      monday.api(`query { me { name } }`).then((res: any) => {
11        if (res.data?.me?.name) {
12          setUserName(res.data.me.name);
13        }
14      });
15    }
16  }, [monday]);
17
18  return (
19    <div style={{ padding: "20px" }}>
20      <h1>Hello, {userName}!</h1>
21      <p>Current Board ID: {context?.boardId || "Loading..."}</p>
22    </div>
23  );
24};
25
26const App: React.FC = () => {
27  return (
28    <MondayBoostProvider>
29      <AppContent />
30    </MondayBoostProvider>
31  );
32};
33
34export default App;