Skip to content

Instantly share code, notes, and snippets.

@JonAbrams

JonAbrams/index.js

Last active Nov 10, 2018
Embed
What would you like to do?
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);
});
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} />
);
};
import { createSpace } from 'spaceace';
export const rootSpace = createSpace({
title: "SpaceAce demo",
presenter: { name: 'Jon', email: 'jon@jonabrams.com' },
date: "2018-11-15",
slides: [
{ title: "SpaceAce", body: "A new take on state management", id: 'abc' },
{ title: "Features!", body: "Immutable, simple, compatible", id: '123' }
]
});
console.log(`Name of the presentation: ${rootSpace.title}`);
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');
import React from 'react';
export class Slide = ({ space }) => {
return (
<div>
<label>
Title: <input onClick={space('title')} />
</label>
</div>
);
};
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 });
};
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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment