draft: start moving internal context to public api to allow controlling via... (c68ea0ea) · Commits · sc07 / Canvas

packages/chat/lib/components/YapContext.tsx

0 → 100644

+51 −0

Original line number	Diff line number	Diff line
		import type { MXUserID } from "@/lib/const";
		import { MXClient } from "@/lib/MXClient";
		import type React from "react";
		import { createContext, useContext, useMemo, useReducer } from "react";

		type State = {
		stage: "INIT";
		user?: MXUserID;
		};
		type Actions = ["login"] \| ["ready"];

		const context = createContext<{
		state: State;
		dispatch: React.ActionDispatch<[Actions]>;
		}>(
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		null as any,
		);

		export const useYap = () => useContext(context);

		export const YapContext = ({ children }: React.PropsWithChildren) => {
		// @ts-expect-error ignore
		const client = useMemo<MXClient>(() => new MXClient(), []);

		const [state, dispatch] = useReducer<State, [Actions]>(
		(state, [action, ...data]) => {
		switch (action) {
		case "login":
		window.open(client.getLoginUrl(window.location.href), "_blank");
		return state;
		case "ready":
		return state;
		}
		return state;
		},
		{
		stage: "INIT",
		},
		);

		// todo:
		// - migrate to new, public, context
		// - ready state to trigger url parsing for login
		// - store user info in context
		// - replacement definitions & handlers in props

		return (
		<context.Provider value={{ state, dispatch }}>{children}</context.Provider>
		);
		};

+3 −2

Original line number	Diff line number	Diff line
		@@ -2,15 +2,16 @@ import type { MXUserID } from "@/lib/const";
		import { HomeTab } from "./Tab/Home";
		import { RoomTab } from "./Tab/Room";
		import { ContextProvider, useYap } from "@/lib/context";
		import type { YapController } from "@/YapController";

		type Props = {
		userId: MXUserID;
		isSystem: (userId: MXUserID) => boolean;
		};

		export const Yapper = ({ userId, isSystem }: Props) => {
		export const Yapper = ({ controller }: { controller: YapController }) => {
		return (
		<ContextProvider userId={userId} isSystem={isSystem}>
		<ContextProvider userId={`@:`} isSystem={() => false}>
		<YapperInner />
		</ContextProvider>
		);

+1 −0

Original line number	Diff line number	Diff line
		export { MatrixChat } from "./components/MatrixChat";
		export { Yapper } from "./components/Yapper";
		export { YapContext } from "./components/YapContext";

+18 −7

Original line number	Diff line number	Diff line
		import { useEffect, useState } from "react";
		import { MatrixChat, Yapper } from "@sc07-canvas/chat";
		import { useEffect, useMemo, useState } from "react";
		import {
		MatrixChat,
		YapContext,
		YapController,
		Yapper,
		} from "@sc07-canvas/chat";
		import "./App.css";
		import { Sidebar } from "./Sidebar";
		import { useYap } from "../lib/components/YapContext";

		function App() {
		const yap = useYap();
		const [dark, setDark] = useState(true);

		useEffect(() => {
		@@ -18,15 +25,19 @@ function App() {
		<summary>hi</summary>
		abc
		</details>
		<button onClick={() => yap.dispatch(["login"])}>try login</button>
		<Sidebar>
		<MatrixChat />
		</Sidebar>
		<Yapper
		userId={`@grant:aftermath.gg`}
		isSystem={(userId) => userId === "@canvas:aftermath.gg"}
		/>
		<Yapper />
		</>
		);
		}

		export default App;
		export default function AppOuter() {
		return (
		<YapContext>
		<App />
		</YapContext>
		);
		}

+1 −0

Original line number	Diff line number	Diff line
		@@ -14,6 +14,7 @@
		"@fortawesome/free-solid-svg-icons": "^7.2.0",
		"@heroui/react": "^2.8.9",
		"@icons-pack/react-simple-icons": "^13.11.2",
		"@sc07-canvas/chat": "workspace:^",
		"@sc07-canvas/lib": "^1.0.0",
		"altcha-lib": "^1.4.1",
		"date-fns": "^4.1.0",