|
1 | | -<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li><li><a href="/demos/todo-app/">Todo App</a></li><li><a href="/demos/todo-app/todo-app-v6-collaboration/">Todo App v6 (collaboration)</a></li></ul></nav><section class="s1" id="/demos/todo-app/todo-app-v6-collaboration/" data-id="TA7"><h1>Todo App v6 (collaboration)</h1><iframe srcdoc="<html><head><script src="/umd/react.production.min.js"></script><script src="/umd/react-dom.production.min.js"></script><script src="/umd/partysocket.js"></script><script src="/umd/tinybase.js"></script><script src="/umd/persister-browser.js"></script><script src="/umd/persister-partykit-client.js"></script><script src="/umd/ui-react.js"></script><script src="/umd/ui-react-dom-debug.js"></script><style>@font-face{font-family:Inter;src:url(https://tinybase.org/fonts/inter.woff2) format('woff2')}body{display:grid;grid-template-columns:35% minmax(0,1fr);grid-template-rows:auto auto 1fr;box-sizing:border-box;font-family:Inter,sans-serif;letter-spacing:-.04rem;grid-gap:1rem .5rem;margin:0;min-height:100vh;padding:1rem}body *{box-sizing:border-box;outline-color:#d81b60}#newTodo{border:1px solid #ccc;display:block;font:inherit;letter-spacing:inherit;padding:.5rem;width:100%}#todos{grid-column:2;grid-row:2/span 2;margin:0;padding:0}#todos .todo{background:#fff;border:1px solid #ccc;display:flex;margin-bottom:.5rem;padding:.5rem}#todos .todo .text{cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap}#todos .todo .text::before{content:'\1F7E0';padding:0 .5rem 0 .25rem}#todos .todo .text.done{color:#ccc}#todos .todo .text.done::before{content:'\2705'}#types{margin:0}#types .type{cursor:pointer;margin-bottom:.5rem;user-select:none}#types .type.current{color:#d81b60}#todos .todo .type{border:none;color:#777;font:inherit;font-size:.8rem;margin-top:.1rem}#undoRedo{grid-column:1;grid-row:3}#undoRedo #redo,#undoRedo #undo{cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;user-select:none}#undoRedo #redo::before,#undoRedo #undo::before{padding-right:.5rem;vertical-align:middle}#undoRedo #redo.disabled,#undoRedo #undo.disabled{cursor:default;opacity:.3}#undoRedo #undo::before{content:'\21A9'}#undoRedo #redo::before{content:'\21AA'}#room{grid-column:1;grid-row:3}#room button{font-size:inherit;border:1px solid #ccc;background:#d81b60;color:#fff}</style></head><body></body><script>(()=>{const l=React["createElement"],{createCheckpoints:i,createIndexes:d,createMetrics:c,createStore:u}=TinyBase,{createLocalPersister:p,createSessionPersister:y}=TinyBasePersisterBrowser,h=TinyBasePersisterPartyKitClient["createPartyKitPersister"],m=PartySocketModule["default"],{CellView:v,Provider:w,SliceView:e,useAddRowCallback:s,useCell:n,useCheckpoints:C,useCreateCheckpoints:S,useCreateIndexes:g,useCreateMetrics:k,useCreatePersister:I,useCreateStore:b,useMetric:r,useRow:x,useSetCellCallback:f,useSetCheckpointCallback:A,useSetValueCallback:P,useValue:R}=TinyBaseUiReact,{useCallback:T,useEffect:o,useState:B}=React,M=TinyBaseUiReactDomDebug["StoreInspector"],D=["Home","Work","Archived"],L={todos:{text:{type:"string"},done:{type:"boolean",default:!1},type:{type:"string",default:"Home",allow:D}}},E={todos:{0:{text:"Clean the floor",type:"Home"},1:{text:"Install TinyBase",type:"Work"},2:{text:"Book holiday",type:"Archived"}}},t=()=>{const e=b(()=>u().setTablesSchema(L)),t=S(e,i),[o,a]=(I(e,e=>p(e,"todos/store"),[],async e=>{await e.startAutoLoad(E),t.clear(),await e.startAutoSave()},[t]),_());I(e,e=>{if(o)return h(e,new m({host:O,room:o}))},[o],async e=>{e&&(await e.startAutoSave(),await e.startAutoLoad(),t.clear())},[t]);var r=b(()=>u().setValuesSchema({type:{type:"string",default:"Home"}})),n=(I(r,e=>y(e,"todos/viewStore"),[],async e=>{await e.startAutoLoad(),await e.startAutoSave()}),g(e,e=>d(e).setIndexDefinition("types","todos","type"))),s=k(e,e=>{const o=c(e);return o.setMetricDefinition("pending","todos","sum",e=>e("done")?0:1),D.forEach(t=>{o.setMetricDefinition(t,"todos","sum",e=>e("type")!=t||e("done")?0:1)}),o});return l(w,{store:e,storesById:{viewStore:r},indexes:n,metrics:s,checkpoints:t},l(N,null),l(V,null),l(K,null),l(j,{roomId:o,createRoomId:a}),l($,null),l(M,null))},N=(window.addEventListener("load",()=>ReactDOM.createRoot(document.body).render(l(t,null))),()=>{var e=r("pending");return 0<e?"Todo: "+e:"All done!"}),V=()=>{const[e,t]=B(""),o=R("type","viewStore"),a=T(({target:{value:e}})=>t(e),[]),r=A(()=>`adding '${e}'`,[e]),n=s("todos",({which:e,target:{value:t}})=>13==e&&""!=t?{text:t,type:o}:null,[o],void 0,()=>{t(""),r()},[t,r]);return l("input",{id:"newTodo",onChange:a,onKeyDown:n,placeholder:"New Todo",value:e})},$=()=>l("ul",{id:"todos"},l(e,{indexId:"types",sliceId:R("type","viewStore"),rowComponent:a})),a=e=>l("li",{className:"todo"},l(H,{...e}),l(W,{...e})),H=({tableId:e,rowId:t})=>{const{done:o,text:a}=x(e,t),r="text"+(o?" done":""),n=f(e,t,"done",()=>!o,[o]),s=A(()=>`${o?"resuming":"completing"} '${a}'`,[o]),i=T(()=>{n(),s()},[n,s]);return l("span",{className:r,onClick:i},l(v,{tableId:e,rowId:t,cellId:"text"}))},K=()=>l("ul",{id:"types"},D.map(e=>l(U,{key:e,type:e}))),U=({type:e})=>{var t=r(e),o=R("type","viewStore"),a=P("type",()=>e,[e],"viewStore"),o="type"+(e==o?" current":"");return l("li",{className:o,onClick:a},e,0<t?` (${t})`:"")},W=({tableId:e,rowId:t})=>{const o=n(e,t,"type"),a=C(),r=f(e,t,"type",({target:{value:e}})=>e,[],void 0,(e,t)=>a.addCheckpoint(`changing to '${t}'`),[a]);return l("select",{className:"type",onChange:r,value:o},D.map(e=>l("option",null,e)))},O="partykit-todo-server.tinyplexbot.partykit.dev",_=()=>{const[e,t]=B("");return o(()=>{const e=()=>t(parent.location.hash.substring(1));return e(),parent.addEventListener("hashchange",e),()=>parent.removeEventListener("hashchange",e)},[]),[e,T(()=>{var e=(""+Math.random()).substring(2,10);parent.history.replaceState(null,null,"#"+e),t(e)},[])]},j=({roomId:e,createRoomId:t})=>l("div",{id:"room"},e?l("a",{href:"#"+e,target:"_blank"},"Sharing to room ",e):l("button",{onClick:t},"Share"))})()</script></html>"></iframe><p>In this version of the Todo app, we use the <a href="https://partykit.io/">PartyKit</a> <a href="/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> to make the application collaborative.</p><p>We're making changes to the <a href="/demos/todo-app/todo-app-v5-checkpoints/">Todo App v5 (checkpoints)</a> demo.</p><h3 id="server-implementation">Server Implementation</h3><p>To have a collaborative PartyKit experience, you need to deploy a server. <a href="/">TinyBase</a> provides a ready-made PartyKit server that supports the synchronization and storage needed by client apps like this demo.</p><p>The server implementation for this demo is in the top level 'support' directory of the <a href="/">TinyBase</a> repo for reference. But don't get too excited. It is literally just this:</p><pre><code><span class="keyword">import</span> <span class="punctuation">{</span>TinyBasePartyKitServer<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/persisters/persister-partykit-server'</span><span class="punctuation">;</span> |
| 1 | +<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li><li><a href="/demos/todo-app/">Todo App</a></li><li><a href="/demos/todo-app/todo-app-v6-collaboration/">Todo App v6 (collaboration)</a></li></ul></nav><section class="s1" id="/demos/todo-app/todo-app-v6-collaboration/" data-id="TA7"><h1>Todo App v6 (collaboration)</h1><iframe srcdoc="<html><head><script src="/umd/react.production.min.js"></script><script src="/umd/react-dom.production.min.js"></script><script src="/umd/partysocket.js"></script><script src="/umd/tinybase.js"></script><script src="/umd/persister-browser.js"></script><script src="/umd/persister-partykit-client.js"></script><script src="/umd/ui-react.js"></script><script src="/umd/ui-react-dom-debug.js"></script><style>@font-face{font-family:Inter;src:url(https://tinybase.org/fonts/inter.woff2) format('woff2')}body{display:grid;grid-template-columns:35% minmax(0,1fr);grid-template-rows:auto auto 1fr;box-sizing:border-box;font-family:Inter,sans-serif;letter-spacing:-.04rem;grid-gap:1rem .5rem;margin:0;min-height:100vh;padding:1rem}body *{box-sizing:border-box;outline-color:#d81b60}#newTodo{border:1px solid #ccc;display:block;font:inherit;letter-spacing:inherit;padding:.5rem;width:100%}#todos{grid-column:2;grid-row:2/span 2;margin:0;padding:0}#todos .todo{background:#fff;border:1px solid #ccc;display:flex;margin-bottom:.5rem;padding:.5rem}#todos .todo .text{cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap}#todos .todo .text::before{content:'\1F7E0';padding:0 .5rem 0 .25rem}#todos .todo .text.done{color:#ccc}#todos .todo .text.done::before{content:'\2705'}#types{margin:0}#types .type{cursor:pointer;margin-bottom:.5rem;user-select:none}#types .type.current{color:#d81b60}#todos .todo .type{border:none;color:#777;font:inherit;font-size:.8rem;margin-top:.1rem}#undoRedo{grid-column:1;grid-row:3}#undoRedo #redo,#undoRedo #undo{cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;user-select:none}#undoRedo #redo::before,#undoRedo #undo::before{padding-right:.5rem;vertical-align:middle}#undoRedo #redo.disabled,#undoRedo #undo.disabled{cursor:default;opacity:.3}#undoRedo #undo::before{content:'\21A9'}#undoRedo #redo::before{content:'\21AA'}#room{grid-column:1;grid-row:3}#room button{font-size:inherit;border:1px solid #ccc;background:#d81b60;color:#fff}</style></head><body></body><script>(()=>{const l=React["createElement"],{createCheckpoints:i,createIndexes:d,createMetrics:c,createStore:u}=TinyBase,{createLocalPersister:p,createSessionPersister:y}=TinyBasePersisterBrowser,h=TinyBasePersisterPartyKitClient["createPartyKitPersister"],m=PartySocketModule["default"],{CellView:v,Provider:w,SliceView:e,useAddRowCallback:s,useCell:n,useCheckpoints:C,useCreateCheckpoints:S,useCreateIndexes:g,useCreateMetrics:k,useCreatePersister:I,useCreateStore:b,useMetric:r,useRow:x,useSetCellCallback:f,useSetCheckpointCallback:A,useSetValueCallback:P,useValue:R}=TinyBaseUiReact,{useCallback:T,useEffect:o,useState:B}=React,M=TinyBaseUiReactDomDebug["StoreInspector"],D=["Home","Work","Archived"],L={todos:{text:{type:"string"},done:{type:"boolean",default:!1},type:{type:"string",default:"Home",allow:D}}},E={todos:{0:{text:"Clean the floor",type:"Home"},1:{text:"Install TinyBase",type:"Work"},2:{text:"Book holiday",type:"Archived"}}},t=()=>{const e=b(()=>u().setTablesSchema(L)),t=S(e,i),[o,a]=(I(e,e=>p(e,"todos/store"),[],async e=>{await e.startAutoLoad(E),t.clear(),await e.startAutoSave()},[t]),_());I(e,e=>{if(o)return h(e,new m({host:O,room:o}))},[o],async e=>{e&&(await e.startAutoSave(),await e.startAutoLoad(),t.clear())},[t]);var r=b(()=>u().setValuesSchema({type:{type:"string",default:"Home"}})),n=(I(r,e=>y(e,"todos/viewStore"),[],async e=>{await e.startAutoLoad(),await e.startAutoSave()}),g(e,e=>d(e).setIndexDefinition("types","todos","type"))),s=k(e,e=>{const o=c(e);return o.setMetricDefinition("pending","todos","sum",e=>e("done")?0:1),D.forEach(t=>{o.setMetricDefinition(t,"todos","sum",e=>e("type")!=t||e("done")?0:1)}),o});return l(w,{store:e,storesById:{viewStore:r},indexes:n,metrics:s,checkpoints:t},l(N,null),l(V,null),l(K,null),l(j,{roomId:o,createRoomId:a}),l($,null),l(M,null))},N=(window.addEventListener("load",()=>ReactDOM.createRoot(document.body).render(l(t,null))),()=>{var e=r("pending");return 0<e?"Todo: "+e:"All done!"}),V=()=>{const[e,t]=B(""),o=R("type","viewStore"),a=T(({target:{value:e}})=>t(e),[]),r=A(()=>`adding '${e}'`,[e]),n=s("todos",({which:e,target:{value:t}})=>13==e&&""!=t?{text:t,type:o}:null,[o],void 0,()=>{t(""),r()},[t,r]);return l("input",{id:"newTodo",onChange:a,onKeyDown:n,placeholder:"New Todo",value:e})},$=()=>l("ul",{id:"todos"},l(e,{indexId:"types",sliceId:R("type","viewStore"),rowComponent:a})),a=e=>l("li",{className:"todo"},l(H,{...e}),l(W,{...e})),H=({tableId:e,rowId:t})=>{const{done:o,text:a}=x(e,t),r="text"+(o?" done":""),n=f(e,t,"done",()=>!o,[o]),s=A(()=>`${o?"resuming":"completing"} '${a}'`,[o]),i=T(()=>{n(),s()},[n,s]);return l("span",{className:r,onClick:i},l(v,{tableId:e,rowId:t,cellId:"text"}))},K=()=>l("ul",{id:"types"},D.map(e=>l(U,{key:e,type:e}))),U=({type:e})=>{var t=r(e),o=R("type","viewStore"),a=P("type",()=>e,[e],"viewStore"),o="type"+(e==o?" current":"");return l("li",{className:o,onClick:a},e,0<t?` (${t})`:"")},W=({tableId:e,rowId:t})=>{const o=n(e,t,"type"),a=C(),r=f(e,t,"type",({target:{value:e}})=>e,[],void 0,(e,t)=>a.addCheckpoint(`changing to '${t}'`),[a]);return l("select",{className:"type",onChange:r,value:o},D.map(e=>l("option",null,e)))},O="partykit-todo-server.tinyplexbot.partykit.dev",_=()=>{const[e,t]=B("");return o(()=>{const e=()=>t(parent.location.hash.substring(1));return e(),parent.addEventListener("hashchange",e),()=>parent.removeEventListener("hashchange",e)},[]),[e,T(()=>{var e=(""+Math.random()).substring(2,12);parent.history.replaceState(null,null,"#"+e),t(e)},[])]},j=({roomId:e,createRoomId:t})=>l("div",{id:"room"},e?l("a",{href:"#"+e,target:"_blank"},"Sharing to room ",e):l("button",{onClick:t},"Share"))})()</script></html>"></iframe><p>In this version of the Todo app, we use the <a href="https://partykit.io/">PartyKit</a> <a href="/api/persisters/interfaces/persister/persister/"><code>Persister</code></a> to make the application collaborative.</p><p>We're making changes to the <a href="/demos/todo-app/todo-app-v5-checkpoints/">Todo App v5 (checkpoints)</a> demo.</p><h3 id="server-implementation">Server Implementation</h3><p>To have a collaborative PartyKit experience, you need to deploy a server. <a href="/">TinyBase</a> provides a ready-made PartyKit server that supports the synchronization and storage needed by client apps like this demo.</p><p>The server implementation for this demo is in the top level 'support' directory of the <a href="/">TinyBase</a> repo for reference. But don't get too excited. It is literally just this:</p><pre><code><span class="keyword">import</span> <span class="punctuation">{</span>TinyBasePartyKitServer<span class="punctuation">}</span> <span class="keyword">from</span> <span class="string">'tinybase/persisters/persister-partykit-server'</span><span class="punctuation">;</span> |
2 | 2 |
|
3 | 3 | <span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> <span class="class-name">extends</span> TinyBasePartyKitServer <span class="punctuation">{</span><span class="punctuation">}</span> |
4 | 4 | </code></pre><p>The TinyBasePartyKitServer class does all the work for synchronizing and storing data in the PartyKit cloud. Obviously if you need to enhance your server, you should just be able to extend that TinyBasePartyKitServer class accordingly.</p><p>For the purposes of this demo, this server has been deployed to partykit.dev, and so on the client, we need to set its address:</p><pre><code><span class="keyword">const</span> <span class="constant">PARTYKIT_HOST</span> <span class="operator">=</span> <span class="string">'partykit-todo-server.tinyplexbot.partykit.dev'</span><span class="punctuation">;</span> |
|
23 | 23 | <span class="keyword">return</span> <span class="punctuation">[</span> |
24 | 24 | roomId<span class="punctuation">,</span> |
25 | 25 | <span class="function">useCallback</span><span class="punctuation">(</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="operator">=></span> <span class="punctuation">{</span> |
26 | | - <span class="keyword">const</span> newRoomId <span class="operator">=</span> <span class="punctuation">(</span><span class="string">''</span> <span class="operator">+</span> Math<span class="punctuation">.</span><span class="function">random</span><span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="function">substring</span><span class="punctuation">(</span><span class="number">2</span><span class="punctuation">,</span> <span class="number">10</span><span class="punctuation">)</span><span class="punctuation">;</span> |
| 26 | + <span class="keyword">const</span> newRoomId <span class="operator">=</span> <span class="punctuation">(</span><span class="string">''</span> <span class="operator">+</span> Math<span class="punctuation">.</span><span class="function">random</span><span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="function">substring</span><span class="punctuation">(</span><span class="number">2</span><span class="punctuation">,</span> <span class="number">12</span><span class="punctuation">)</span><span class="punctuation">;</span> |
27 | 27 | parent<span class="punctuation">.</span>history<span class="punctuation">.</span><span class="function">replaceState</span><span class="punctuation">(</span><span class="keyword">null</span><span class="punctuation">,</span> <span class="keyword">null</span><span class="punctuation">,</span> <span class="string">'#'</span> <span class="operator">+</span> newRoomId<span class="punctuation">)</span><span class="punctuation">;</span> |
28 | 28 | <span class="function">setRoomId</span><span class="punctuation">(</span>newRoomId<span class="punctuation">)</span><span class="punctuation">;</span> |
29 | 29 | <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">)</span><span class="punctuation">,</span> |
|
0 commit comments