Skip to content

Commit

Permalink
docs: ✏️ adding useStorage and useSession docs
Browse files Browse the repository at this point in the history
  • Loading branch information
fredcido committed Dec 8, 2023
1 parent 12e50c8 commit d9d9aae
Show file tree
Hide file tree
Showing 10 changed files with 311 additions and 83 deletions.
40 changes: 2 additions & 38 deletions src/app-example/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,9 @@ import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import { MiroProvider } from "../../esm";
import { routes } from "./routes";

import { UseCurrentUser } from "./pages/UserCurrentUser";
import { Index } from "./pages/Index";
import { Miro } from "./pages/UseMiro";
import { UseInfo } from "./pages/UseInfo";
import { UseOnlineUsers } from "./pages/UseOnlineUsers";
import { UseSelectedItems } from "./pages/UseSelectedItems";
import { UseViewport } from "./pages/UseViewport";

const router = createBrowserRouter([
{
path: "/app.html",
element: <Index />,
},
{
path: "/miro",
element: <Miro />,
},
{
path: "/use-current-user",
element: <UseCurrentUser />,
},
{
path: "/use-info",
element: <UseInfo />,
},
{
path: "/use-online-users",
element: <UseOnlineUsers />,
},
{
path: "/use-selected-items",
element: <UseSelectedItems />,
},
{
path: "/use-viewport",
element: <UseViewport />,
},
]);
const router = createBrowserRouter(routes);

const App = () => {
return (
Expand Down
26 changes: 8 additions & 18 deletions src/app-example/pages/Index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,19 @@

import * as React from "react";
import { Link } from "react-router-dom";
import { routes } from "../routes";

const readable = (path: string) => path.split("/").pop();

export const Index: React.FC = () => {
return (
<main>
<ul>
<li>
<Link to={`/miro`}>useMiro</Link>
</li>
<li>
<Link to={`/use-current-user`}>useCurrentUser</Link>
</li>
<li>
<Link to={`/use-info`}>useInfo</Link>
</li>
<li>
<Link to={`/use-online-users`}>useOnlineUsers</Link>
</li>
<li>
<Link to={`/use-selected-items`}>useSelectedItems</Link>
</li>
<li>
<Link to={`/use-viewport`}>useViewport</Link>
</li>
{routes.map((route) => (
<li key={route.path}>
<Link to={route.path}>{readable(route.path)}</Link>
</li>
))}
</ul>
</main>
);
Expand Down
55 changes: 55 additions & 0 deletions src/app-example/pages/UseSession.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
"use client";

import * as React from "react";
import { OnlineUserInfo } from "@mirohq/websdk-types";
import { useSession } from "../../../esm";

export const UseSession: React.FC = () => {
const { status, session, start, usersInSession, usersNotInSession } = useSession();

const handleStartSession = async () => {
await start({
name: "Test session",
});
};

const handleInviteUser = async (user: OnlineUserInfo) => {
await session?.invite(user);
};

return (
<div>
<h4>Session {status}</h4>
{session ? (
<div>
<p>
#{session.id} - {session.name}
</p>
<ul>
<li>
<strong>Users in session</strong>
</li>
{usersInSession.map((user) => (
<li key={user.id}>
#{user.id} - {user.name}
</li>
))}
</ul>
<ul>
<li>
<strong>Users not in session</strong>
</li>
{usersNotInSession.map((user) => (
<li key={user.id}>
#{user.id} - {user.name}
<button onClick={() => handleInviteUser(user)}>Invite</button>
</li>
))}
</ul>
</div>
) : (
<button onClick={handleStartSession}>Start session</button>
)}
</div>
);
};
37 changes: 37 additions & 0 deletions src/app-example/pages/UseStorage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
"use client";

import * as React from "react";
import { useStorage } from "../../../esm";

export const UseStorage: React.FC = () => {
const { status, result, error, set, remove } = useStorage("react-hooks", "example");

if (status === "loading") {
return <p>Fetching values...</p>;
}

if (error) {
return <p>Something went wrong</p>;
}

const handleSetValue = async () => {
await set("Just changed from the app");
};

const handleRemoveValue = async () => {
await remove();
};

if (status === "success") {
return (
<div>
<p>Current value:</p>
<pre>{JSON.stringify(result, null, 2)}</pre>
<button onClick={handleSetValue}>Set value</button>
<button disabled={!result} onClick={handleRemoveValue}>
Remove value
</button>
</div>
);
}
};
2 changes: 1 addition & 1 deletion src/app-example/pages/UseViewport.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const UseViewport: React.FC = () => {
if (status === "success") {
return (
<div>
<p>Selected items:</p>
<p>Current viewport:</p>
<ul>
<li>
X and Y: {result?.x} x {result?.y}
Expand Down
52 changes: 52 additions & 0 deletions src/app-example/routes.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
"use client";

import * as React from "react";

import { UseCurrentUser } from "./pages/UserCurrentUser";
import { Index } from "./pages/Index";
import { Miro } from "./pages/UseMiro";
import { UseInfo } from "./pages/UseInfo";
import { UseOnlineUsers } from "./pages/UseOnlineUsers";
import { UseSelectedItems } from "./pages/UseSelectedItems";
import { UseViewport } from "./pages/UseViewport";
import { UseStorage } from "./pages/UseStorage";
import { UseSession } from "./pages/UseSession";

export const routes = [
{
path: "/app.html",
element: <Index />,
},
{
path: "/miro",
element: <Miro />,
},
{
path: "/use-current-user",
element: <UseCurrentUser />,
},
{
path: "/use-info",
element: <UseInfo />,
},
{
path: "/use-online-users",
element: <UseOnlineUsers />,
},
{
path: "/use-selected-items",
element: <UseSelectedItems />,
},
{
path: "/use-viewport",
element: <UseViewport />,
},
{
path: "/use-storage",
element: <UseStorage />,
},
{
path: "/use-session",
element: <UseSession />,
},
];
75 changes: 74 additions & 1 deletion src/useSession/useSession.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,76 @@
# useSession

Interact with [Miro collaborative sessions](https://developers.miro.com/docs/websdk-reference-session).
Interact with [Miro collaborative sessions](https://developers.miro.com/docs/websdk-reference-session).

**Note**: Make sure you are running this code in a configured [Miro WebSDK app](https://developers.miro.com/docs/build-your-first-hello-world-app).

## Example


```tsx
import * as React from "react";
import { createRoot } from "react-dom/client";
import { useSession } from "@mirohq/websdk-react-hooks";

export const UseSession: React.FC = () => {
const { status, session, start, usersInSession, usersNotInSession } = useSession();

const handleStartSession = async () => {
await start({
name: "Test session",
});
};

const handleInviteUser = async (user: OnlineUserInfo) => {
await session?.invite(user);
};

return (
<div>
<h4>Session {status}</h4>
{session ? (
<div>
<p>
#{session.id} - {session.name}
</p>
<ul>
<li>
<strong>Users in session</strong>
</li>
{usersInSession.map((user) => (
<li key={user.id}>
#{user.id} - {user.name}
</li>
))}
</ul>
<ul>
<li>
<strong>Users not in session</strong>
</li>
{usersNotInSession.map((user) => (
<li key={user.id}>
#{user.id} - {user.name}
<button onClick={() => handleInviteUser(user)}>Invite</button>
</li>
))}
</ul>
</div>
) : (
<button onClick={handleStartSession}>Start session</button>
)}
</div>
);
};

const App = () => {
return (
<MiroProvider>
<UseSelectedItems />
</MiroProvider>
)
};

const container = document.getElementById("root")!;
const root = createRoot(container);
root.render(<App />);
```
Loading

0 comments on commit d9d9aae

Please sign in to comment.