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