Skip to content

Instantly share code, notes, and snippets.

@JonAbrams

JonAbrams/index.js

Last active November 10, 2018 18:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JonAbrams/54d4832327842c77d2f8484f503088c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JonAbrams/54d4832327842c77d2f8484f503088c9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JonAbrams revised this gist Nov 10, 2018. 1 changed file with 22 additions and 0 deletions.
    22 changes: 22 additions & 0 deletions slide.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    import React from 'react';

    export class Slide = ({ space }) => {
    return (
    <div>
    <label>
    Title: <input onClick={space('title')} />
    </label>
    <button onClick={space(saveSlide)} disabled={space.saving}>Save</button>
    </div>
    );
    };

    const saveSlide = async ({ merge, space }, event) => {
    event.preventDefault();
    merge({ saving: true });
    const result = await fetch(saveUrl, {
    method: 'post',
    body: JSON.stringify({ title: space.title })
    }).then(res => res.json());
    merge({ saving: false, error: result.error });
    };
  2. JonAbrams revised this gist Nov 10, 2018. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions slide-quick.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    import React from 'react';

    export class Slide = ({ space }) => {
    return (
    <div>
    <label>
    Title: <input onClick={space('title')} />
    </label>
    </div>
    );
    };
  3. JonAbrams revised this gist Nov 10, 2018. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions slide-immediate.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    import React from 'react';

    export class Slide = ({ space }) => {
    return (
    <div>
    <label>
    Title: <input onClick={event => handleTitleChange(event, space)} />
    </label>
    {/* more to come */}
    </div>
    );
    };

    const handleTitleChange = (event, space) =>
    space({ title: event.target.value }, 'titleChange');
  4. JonAbrams revised this gist Nov 5, 2018. 4 changed files with 40 additions and 2 deletions.
    13 changes: 13 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    import { subscribe } from 'spaceace';

    import { renderApp } from './renderApp';
    import { rootSpace } from './rootSpace';

    renderApp(rootSpace);

    subscribe(rootSpace, ({ newSpace }) => {
    // executed whenever rootSpace is updated
    // rootSpace is immutable, newSpace is the updated version
    // newSpace !== rootSpace
    renderApp(newSpace);
    });
    11 changes: 11 additions & 0 deletions renderApp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    import React from 'react';
    import { render } from 'react-dom';

    import { SlideApp } from './components/slideApp.jsx';

    export const renderApp = rootSpace => {
    render(
    document.getElementById('slide-app'),
    <SlideApp space={rootSpace} />
    );
    };
    4 changes: 2 additions & 2 deletions createRootspace.js → rootspace.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@ export const rootSpace = createSpace({
    presenter: { name: 'Jon', email: '[email protected]' },
    date: "2018-11-15",
    slides: [
    { title: "SpaceAce", body: "A new take on state management" },
    { title: "Features!", body: "Immutable, simple, compatible" }
    { title: "SpaceAce", body: "A new take on state management", id: 'abc' },
    { title: "Features!", body: "Immutable, simple, compatible", id: '123' }
    ]
    });

    14 changes: 14 additions & 0 deletions slideApp.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    import React from 'react';
    import { Slide } from './slide.jsx';

    export class SlideApp = ({ space }) => {
    return (
    <div>
    <h1>{space.title}</h1>

    {space.slides.map(slide =>
    <Slide key={slide.id} space={slide} />
    )}
    </div>
    );
    };
  5. JonAbrams revised this gist Nov 3, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions createRootspace.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,7 @@ import { createSpace } from 'spaceace';
    export const rootSpace = createSpace({
    title: "SpaceAce demo",
    presenter: { name: 'Jon', email: '[email protected]' },
    date: "2018-11-15",
    slides: [
    { title: "SpaceAce", body: "A new take on state management" },
    { title: "Features!", body: "Immutable, simple, compatible" }
  6. JonAbrams revised this gist Nov 3, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion createRootspace.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    import { createSpace } from 'spaceace';

    const rootSpace = createSpace({
    export const rootSpace = createSpace({
    title: "SpaceAce demo",
    presenter: { name: 'Jon', email: '[email protected]' },
    slides: [
  7. JonAbrams created this gist Nov 3, 2018.
    12 changes: 12 additions & 0 deletions createRootspace.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    import { createSpace } from 'spaceace';

    const rootSpace = createSpace({
    title: "SpaceAce demo",
    presenter: { name: 'Jon', email: '[email protected]' },
    slides: [
    { title: "SpaceAce", body: "A new take on state management" },
    { title: "Features!", body: "Immutable, simple, compatible" }
    ]
    });

    console.log(`Name of the presentation: ${rootSpace.title}`);