Skip to content

Commit 5253bb7

Browse files
Asha20Asha20
committed
wip
1 parent 7cfa463 commit 5253bb7

File tree

5 files changed

+86
-55
lines changed

5 files changed

+86
-55
lines changed

‎example/App.tsx‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ function App() {
107107
const [panelHeight, setPanelHeight] = useState(100);
108108
const [panelVisible, setPanelVisible] = useState(true);
109109

110+
const [panel, setPanel] = useState(false);
111+
110112
if (typeof import.meta.env.VITE_APP_ID !== "string") {
111113
return (
112114
<div style={{ maxWidth: "50em" }}>
@@ -154,22 +156,27 @@ function App() {
154156
{...(blur ? { onBlur } : {})}
155157
style={{ width: 500, height: 600 }}
156158
>
157-
<HtmlPanel
158-
url="/example/panel.html"
159-
height={panelHeight}
160-
show={panelVisible}
161-
>
162-
I am an HTML panel.
163-
<button
164-
onClick={() => setPanelHeight(panelHeight > 100 ? 100 : 150)}
159+
{panel && (
160+
<HtmlPanel
161+
url="example/panel.html"
162+
height={panelHeight}
163+
show={panelVisible}
165164
>
166-
Toggle panel height
167-
</button>
168-
<button onClick={() => setPanelVisible(false)}>Hide panel</button>
169-
</HtmlPanel>
165+
I am an HTML panel.
166+
<button
167+
onClick={() => setPanelHeight(panelHeight > 100 ? 100 : 150)}
168+
>
169+
Toggle panel height
170+
</button>
171+
<button onClick={() => setPanelVisible(false)}>Hide panel</button>
172+
</HtmlPanel>
173+
)}
170174
</Chatbox>
171175
</Session>
172176

177+
<button onClick={() => setPanel((x) => !x)}>
178+
toggle panel to {String(!panel)}
179+
</button>
173180
<button onClick={otherMe}>switch user (new session)</button>
174181
<br />
175182
<button onClick={switchConv}>

‎example/main.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,20 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
88
<App />
99
</React.StrictMode>,
1010
);
11+
12+
// import Talk from "talkjs";
13+
14+
// await Talk.ready;
15+
16+
// const me = new Talk.User({ id: "alice", name: "Alice" });
17+
// const session = new Talk.Session({ appId: "Hku1c4Pt", me });
18+
// const chatbox = session.createChatbox();
19+
// const conversation = session.getOrCreateConversation("abc");
20+
// conversation.setParticipant(me);
21+
22+
// chatbox.select(conversation);
23+
// chatbox.mount(document.getElementById("root")!);
24+
25+
// chatbox.createHtmlPanel({ url: "./example/panel.html" });
26+
27+
// document.getElementById("root")!.style.height = "100vh";

‎example/panel.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,7 @@
1515
}
1616
</style>
1717
</head>
18-
<body></body>
18+
<body>
19+
Default content here
20+
</body>
1921
</html>

‎lib/HtmlPanel.tsx‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useContext, useEffect, useState } from "react";
1+
import { useContext, useEffect, useRef, useState } from "react";
22
import { createPortal } from "react-dom";
33
import Talk from "talkjs";
44
import { BoxContext } from "./MountedBox";
@@ -24,71 +24,73 @@ type HtmlPanelProps = {
2424
children: React.ReactNode;
2525
};
2626

27-
type State =
28-
| { type: "none" }
29-
| { type: "loading" }
30-
| { type: "loaded"; panel: Talk.HtmlPanel };
31-
3227
export function HtmlPanel({
3328
url,
3429
height = 100,
3530
show = true,
3631
conversationId,
3732
children,
3833
}: HtmlPanelProps) {
39-
const [state, setState] = useState<State>({ type: "none" });
34+
const panelPromise = useRef<undefined | Promise<Talk.HtmlPanel>>(undefined);
35+
const [panel, setPanel] = useState<undefined | Talk.HtmlPanel>(undefined);
4036
const box = useContext(BoxContext);
4137

4238
useEffect(() => {
43-
async function run() {
44-
if (state.type !== "none" || !box) return;
39+
function run() {
40+
console.log("@@trying");
41+
if (!box || panelPromise.current) return;
42+
console.log("@@initializing");
43+
44+
// const old = await panelPromise;
45+
// old?.destroy();
4546

46-
setState({ type: "loading" });
47-
const panel = await box.createHtmlPanel({
48-
url,
49-
conversation: conversationId,
50-
height,
51-
show,
52-
});
53-
await panel.windowLoadedPromise;
54-
setState({ type: "loaded", panel });
47+
const panel = box
48+
.createHtmlPanel({ url, conversation: conversationId, height, show })
49+
.then(async (panel) => {
50+
await panel.windowLoadedPromise;
51+
console.log("@@window loaded");
52+
// setPanel(panel);
53+
return panel;
54+
});
55+
56+
panelPromise.current = panel;
5557
}
5658

5759
run();
5860

59-
return () => {
60-
if (state.type === "loaded") {
61-
state.panel.destroy();
62-
setState({ type: "none" });
63-
}
64-
};
61+
// return () => {
62+
// console.log("@@cleanup", panelPromise);
63+
// if (panelPromise) {
64+
// panelPromise.current?.then((panel) => {
65+
// panelPromise.current = undefined;
66+
// panel.destroy().then(() => {
67+
// console.log("@@deleted");
68+
// setPanel(undefined);
69+
// });
70+
// });
71+
// } else {
72+
// setPanel(undefined);
73+
// }
74+
// };
6575
// We intentionally exclude `height` and `show` from the dependency array so
6676
// that we update them later via methods instead of by re-creating the
6777
// entire panel from scratch each time.
6878
//
6979
// eslint-disable-next-line react-hooks/exhaustive-deps
70-
}, [state, url, box, conversationId]);
80+
}, [url, box, conversationId]);
7181

7282
useEffect(() => {
73-
if (state.type === "loaded") {
74-
state.panel.setHeight(height);
75-
}
76-
}, [state, height]);
83+
panel?.setHeight(height);
84+
}, [panel, height]);
7785

7886
useEffect(() => {
79-
if (state.type === "loaded") {
80-
if (show) {
81-
state.panel.show();
82-
} else {
83-
state.panel.hide();
84-
}
87+
if (show) {
88+
panel?.show();
89+
} else {
90+
panel?.hide();
8591
}
86-
}, [state, show]);
92+
}, [panel, show]);
8793

88-
return (
89-
<>
90-
{state.type === "loaded" &&
91-
createPortal(children, state.panel.window.document.body)}
92-
</>
93-
);
94+
// return <>{panel && createPortal(children, panel.window.document.body)}</>;
95+
return null;
9496
}

‎lib/hooks.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,14 @@ export function useUIBox<
8484
if (session?.isAlive) {
8585
const uibox = session[create](options) as R;
8686
setBox(uibox);
87+
(window as any).ui = uibox;
88+
console.log("@@create");
8789
if (ref) {
8890
ref.current = uibox;
8991
}
9092

9193
return () => {
94+
console.log("@@destroy");
9295
uibox.destroy();
9396
setBox(undefined);
9497
};

0 commit comments

Comments
 (0)