@powerhousedao/academy 5.0.1-staging.15 → 5.0.1-staging.17

package/docs/academy/03-ExampleUsecases/Chatroom/05-ImplementChatroomEditor.md

@@ -9,7 +9,7 @@ Run below command to generate the editor template for the `Chatroom` document mo
 Notice the `--editor` flag which defines the `chatroom` document model editor. And the `--document-types` flag which defines the document type `powerhouse/chatroom`.
 
 ```bash
-ph generate -- --editor ChatRoomEditor --document-types powerhouse/chat-room
+ph generate --editor ChatRoomEditor --document-types powerhouse/chat-room
 ```
 
 Once complete, navigate to the `editors/chat-room/editor.tsx` file and open it in your editor.
@@ -37,36 +37,41 @@ The utils function will help you with mapping information from the document mode
 Now, let's copy & paste the code below into the `editor.tsx` file located at `editors/chat-room-editor`and save the file.
 
 ```typescript
-/* eslint-disable react/jsx-no-bind */
-import { EditorProps } from "document-model/document";
+import { generateId } from "document-model/core";
+import { useUser } from "@powerhousedao/reactor-browser/connect";
+import { useSelectedChatRoomDocument } from "../../document-models/chat-room/hooks.js";
 import {
-  ChatRoomState,
-  ChatRoomAction,
-  ChatRoomLocalState,
-  ReactionType,
-  actions,
-} from "../../document-models/chat-room";
-import { utils as documentModelUtils } from "document-model/document";
-import { ChatRoom, ChatRoomProps, MessageProps } from "./components";
-import { reactionKeyToReactionType, mapReactions } from "./utils";
-
-export type IProps = EditorProps<
-  ChatRoomState,
-  ChatRoomAction,
-  ChatRoomLocalState
->;
-
-export default function Editor(props: IProps) {
-  const disableChatRoom = !props.context.user;          // we're disabling the chatroom when a user is not logged in.
+  addMessage,
+  addEmojiReaction,
+  removeEmojiReaction,
+  editChatName,
+  editChatDescription,
+} from "../../document-models/chat-room/gen/creators.js";
+import {
+  ChatRoom,
+  type ChatRoomProps,
+  type MessageProps,
+} from "./components/index.js";
+import { reactionKeyToReactionType, mapReactions } from "./utils.js";
+
+export default function Editor() {
+  const [document, dispatch] = useSelectedChatRoomDocument();
+  const user = useUser();
+
+  const disableChatRoom = !user;
+
+  if (!document) {
+    return <div>Loading...</div>;
+  }
 
   const messages: ChatRoomProps["messages"] =
-    props.document.state.global.messages.map((message) => ({    // this object comes from the document state with a mapping that validates which message which user has send.
+    document.state.global.messages.map((message) => ({
       id: message.id,
       message: message.content || "",
       timestamp: message.sentAt,
       userName: message.sender.name || message.sender.id,
-      imgUrl: message.sender.avatarUrl || undefined,        // if the user has an avatar set we'll use it.
-      isCurrentUser: message.sender.id === props.context.user?.address,
+      imgUrl: message.sender.avatarUrl || undefined,
+      isCurrentUser: message.sender.id === user?.address,
       reactions: mapReactions(message.reactions),
     }));
 
@@ -75,14 +80,14 @@ export default function Editor(props: IProps) {
       return;
     }
 
-    props.dispatch(
-      actions.addMessage({
-        messageId: documentModelUtils.hashKey(),
+    dispatch(
+      addMessage({
+        messageId: generateId(),
         content: message,
         sender: {
-          id: props.context.user?.address || "anon-user",
-          name: props.context.user?.ens?.name || null,  // The context of the editor allows us to get hold of the users profile information.
-          avatarUrl: props.context.user?.ens?.avatarUrl || null,
+          id: user?.address || "anon-user",
+          name: user?.ens?.name || null,
+          avatarUrl: user?.ens?.avatarUrl || null,
         },
         sentAt: new Date().toISOString(),
       }),
@@ -92,10 +97,10 @@ export default function Editor(props: IProps) {
   const addReaction = (
     messageId: string,
     userId: string,
-    reactionType: ReactionType,
+    reactionType: "HEART" | "THUMBS_UP" | "THUMBS_DOWN" | "LAUGH" | "CRY",
   ) => {
-    props.dispatch(
-      actions.addEmojiReaction({
+    dispatch(
+      addEmojiReaction({
         messageId,
         reactedBy: userId,
         type: reactionType,
@@ -106,10 +111,10 @@ export default function Editor(props: IProps) {
   const removeReaction = (
     messageId: string,
     userId: string,
-    reactionType: ReactionType,
+    reactionType: "HEART" | "THUMBS_UP" | "THUMBS_DOWN" | "LAUGH" | "CRY",
   ) => {
-    props.dispatch(
-      actions.removeEmojiReaction({
+    dispatch(
+      removeEmojiReaction({
         messageId,
         senderId: userId,
         type: reactionType,
@@ -117,7 +122,7 @@ export default function Editor(props: IProps) {
     );
   };
 
-  const onClickReaction: MessageProps["onClickReaction"] = (reaction) => {      // This allows us to increase the reactions on a emoji that already has been used as a reaction to a message.
+  const onClickReaction: MessageProps["onClickReaction"] = (reaction) => {
     const message = messages.find(
       (message) => message.id === reaction.messageId,
     );
@@ -128,7 +133,7 @@ export default function Editor(props: IProps) {
 
     const messageId = reaction.messageId;
     const reactionType = reactionKeyToReactionType(reaction.type);
-    const currentUserId = props.context.user?.address || "anon-user";
+    const currentUserId = user?.address || "anon-user";
 
     const existingReaction = message.reactions?.find(
       (r) => r.type === reaction.type,
@@ -146,13 +151,13 @@ export default function Editor(props: IProps) {
   };
 
   const onSubmitTitle: ChatRoomProps["onSubmitTitle"] = (title) => {
-    props.dispatch(actions.editChatName({ name: title }));
+    dispatch(editChatName({ name: title }));
   };
 
   const onSubmitDescription: ChatRoomProps["onSubmitDescription"] = (
     description,
   ) => {
-    props.dispatch(actions.editChatDescription({ description }));
+    dispatch(editChatDescription({ description }));
   };
 
   return (
@@ -163,18 +168,19 @@ export default function Editor(props: IProps) {
     >
       <ChatRoom
         description={
-          props.document.state.global.description || "This is a chat room demo"
+          document.state.global.description || "This is a chat room demo"
         }
-        disabled={disableChatRoom}      // we're disabling the chatroom when a user is not logged in.
-        messages={messages}             // the list of messages users are submitting
+        disabled={disableChatRoom}
+        messages={messages}
         onClickReaction={onClickReaction}
         onSendMessage={onSendMessage}
         onSubmitDescription={onSubmitDescription}
         onSubmitTitle={onSubmitTitle}
-        title={props.document.state.global.name || "Chat Room Demo"}
+        title={document.state.global.name || "Chat Room Demo"}
       />
     </div>
   );
+}
 ```
 
 Now you can run the Connect app and see the `Chatroom` editor in action.

package/docs/academy/05-Architecture/01-WorkingWithTheReactor.md

@@ -47,5 +47,3 @@ In addition to the choice of storage, Reactors also have other configurations.
 
 - The **operational data** and **read models** associated with the document models inside a reactor allow to query the gathered data inside a document model or quickly visualize the crucial insights at a glance.
 - **Listeners**, which continuously listen to any changes in a document model, help us to connect additional tools such as codegenerators and scripts to the reactors and the document models it holds
-
-> Jump to: Configure a listener for your reactor and add a codegenerator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerhousedao/academy",
-  "version": "5.0.1-staging.15",
+  "version": "5.0.1-staging.17",
   "homepage": "https://powerhouse.academy",
   "repository": {
     "type": "git",

package/sidebars.ts

@@ -11,6 +11,14 @@
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   academySidebar: [
+    {
+      type: "doc",
+      id: "academy/EthereumArgentinaHackathon",
+      label: "ETH Argentina Hackathon",
+      customProps: {
+        icon: "/img/ethereum-logo.jpg",
+      },
+    },
     {
       type: "category",
       label: "Get started",

package/src/css/custom.css

@@ -525,3 +525,23 @@ html[data-theme="dark"] .DocSearch-Hits > *:empty {
   margin-top: 0.5rem;
   font-style: italic;
 }
+
+/* Ethereum Argentina Hackathon sidebar icon */
+.menu__link[href*="EthereumArgentinaHackathon"] {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.menu__link[href*="EthereumArgentinaHackathon"]::before {
+  content: "" !important;
+  display: inline-block !important;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  background-image: url("/img/ethereum-logo.jpeg") !important;
+  background-size: cover !important;
+  background-position: center !important;
+  border-radius: 50% !important;
+  flex-shrink: 0 !important;
+}

package/docs/academy/09-AIResources

@@ -1,131 +0,0 @@
-# AI Resources
-
-We have a couple of AI resources to help you with your daily work or exploring our ecosystem. 
-
-:::warning
-- Be aware that AI tooling can make mistakes.    
-- Documentation can be out of date or code can be work in progress.    
-- Always verify your coding agent's suggestions. 
-:::
-
-
-| Tool | Description |
-|---|---|
-| [**Deepwiki**](https://deepwiki.com/powerhouse-inc/powerhouse) | A searchable/queriable wiki to understand our growing Powerhouse **Monorepository** better. <br /> DeepWiki provides up-to-date documentation you can talk to, for every repo in the world. Think Deep Research for GitHub. |
-| [**Context7**](https://context7.com/powerhouse-inc/powerhouse) | The Powerhouse **Academy Documentation** is also available as context through the context7 MCP Server. <br /> LLMs rely on outdated or generic information about the libraries you use. <br /> Context7 pulls up-to-date, version-specific documentation and code examples directly from the source. <br /> Paste accurate, relevant documentation directly into tools like Cursor, Claude, or any LLM. <br /> The official repository can be found [here](https://github.com/upstash/context7). |
-
-
-### Context7 Installation
-
-<details>
-<summary><b>Install in Cursor</b></summary>
-
-Go to: `Settings` -> `Cursor Settings` -> `MCP` -> `Add new global MCP server`
-
-Pasting the following configuration into your Cursor `~/.cursor/mcp.json` file is the recommended approach. You may also install in a specific project by creating `.cursor/mcp.json` in your project folder.
-
-**Cursor Local Server Connection**
-
-```json
-{
-  "mcpServers": {
-    "context7": {
-      "command": "npx",
-      "args": ["-y", "@upstash/context7-mcp"]
-    }
-  }
-}
-```
-
-</details>
-
-<details>
-<summary><b>Install in VS Code</b></summary>
-
-Add this to your VS Code MCP config file. See [VS Code MCP docs](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more info.
-
-**VS Code Local Server Connection**
-
-```json
-"mcp": {
-  "servers": {
-    "context7": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["-y", "@upstash/context7-mcp"]
-    }
-  }
-}
-```
-</details>
-
-For other editors, please refer to the [official documentation](https://github.com/upstash/context7#%-installation).
-
-### Context7 Troubleshooting
-
-<details>
-<summary><b>MCP, Documentation or Module Not Found Errors</b></summary>
-
-If you encounter `ERR_MODULE_NOT_FOUND`, try using `bunx` instead of `npx`:
-
-```json
-{
-  "mcpServers": {
-    "context7": {
-      "command": "bunx",
-      "args": ["-y", "@upstash/context7-mcp"]
-    }
-  }
-}
-```
-
-This often resolves module resolution issues in environments where `npx` doesn't properly install or resolve packages.
-
-</details>
-
-<details>
-<summary><b>ESM Resolution Issues</b></summary>
-
-For errors like `Error: Cannot find module 'uriTemplate.js'`, try the `--experimental-vm-modules` flag:
-
-```json
-{
-  "mcpServers": {
-    "context7": {
-      "command": "npx",
-      "args": ["-y", "--node-options=--experimental-vm-modules", "@upstash/context7-mcp@1.0.6"]
-    }
-  }
-}
-```
-
-</details>
-
-<details>
-<summary><b>TLS/Certificate Issues</b></summary>
-
-Use the `--experimental-fetch` flag to bypass TLS-related problems:
-
-```json
-{
-  "mcpServers": {
-    "context7": {
-      "command": "npx",
-      "args": ["-y", "--node-options=--experimental-fetch", "@upstash/context7-mcp"]
-    }
-  }
-}
-```
-
-</details>
-
-<details>
-<summary><b>General MCP Client Errors</b></summary>
-
-1. Try adding `@latest` to the package name
-2. Use `bunx` as an alternative to `npx`
-3. Consider using `deno` as another alternative
-4. Ensure you're using Node.js v18 or higher for native fetch support
-
-</details>
-