feat(canvas): save user painting, only one for now, and no erasing on…

…ly add, but kind of a cool star

src/components/app/index.tsx

@@ -51,11 +51,16 @@ class App extends Component<{}, AppState> {
  savePainting = (event: MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
  const { userSession } = this.state;
+ const { current } = this.canvasRef;
+
+ if (!current) {
+ return;
+ }
 
  userSession.putFile(
  'painting.json',
  JSON.stringify({
- data: '',
+ data: current.toDataURL('image/png'),
  createdAt: Date.now(),
  }),
  {
@@ -64,6 +69,17 @@ class App extends Component<{}, AppState> {
  );
  };
 
+ fetchPainting = () => {
+ const { userSession } = this.state;
+ const { current } = this.canvasRef;
+
+ return !current
+ ? Promise.resolve(JSON.stringify({}))
+ : userSession.getFile('painting.json', {
+ decrypt: false,
+ });
+ };
+
  UNSAFE_componentWillMount() {
  const { userSession } = this.state;
 
@@ -83,6 +99,7 @@ class App extends Component<{}, AppState> {
  {userSession.isUserSignedIn() ? (
  <Workspace
  canvasRef={this.canvasRef}
+ fetchPainting={this.fetchPainting}
  person={new Person(userSession.loadUserData().profile)}
  savePainting={this.savePainting}
  signOut={this.signOut}

src/components/canvas/index.tsx

@@ -4,6 +4,7 @@ import './style.css';
 
 type CanvasProps = {
  canvasRef: RefObject<HTMLCanvasElement>;
+ fetchPainting: () => Promise<string | ArrayBuffer>;
 };
 
 type CanvasState = {
@@ -26,12 +27,36 @@ class Canvas extends Component<CanvasProps, CanvasState> {
  public componentDidMount() {
  const {
  canvasRef: { current },
+ fetchPainting,
  } = this.props;
 
- if (!current) {
+ if (!(current && fetchPainting)) {
  return;
  }
 
+ fetchPainting().then(file => {
+ const { data } = JSON.parse((file as string) || '{}');
+
+ if (!data) {
+ return;
+ }
+
+ const { canvasContext } = this.state;
+
+ if (!canvasContext) {
+ return;
+ }
+
+ const ctx = canvasContext as CanvasRenderingContext2D;
+
+ const img = new Image(current.width, current.height);
+ img.src = data;
+
+ setImmediate(() => {
+ ctx.drawImage(img, 0, 0);
+ });
+ });
+
  this.setState({
  canvasContext: current.getContext('2d'),
  canvasRect: current.getBoundingClientRect(),

src/components/canvas/tests.tsx

@@ -7,7 +7,11 @@ it('renders without crashing', () => {
  const div = document.createElement('div');
 
  const mockCanvasRef = React.createRef<HTMLCanvasElement>();
+ const mockFetch = () => Promise.resolve(JSON.stringify({}));
 
- ReactDOM.render(<Canvas canvasRef={mockCanvasRef} />, div);
+ ReactDOM.render(
+ <Canvas canvasRef={mockCanvasRef} fetchPainting={mockFetch} />,
+ div,
+ );
  ReactDOM.unmountComponentAtNode(div);
 });

src/components/workspace/index.tsx

@@ -8,13 +8,15 @@ import Button from '../button';
 
 type WorkspaceProps = {
  canvasRef: RefObject<HTMLCanvasElement>;
+ fetchPainting: () => Promise<string | ArrayBuffer>;
  person: Person;
  savePainting: (event: MouseEvent<HTMLButtonElement>) => void;
  signOut: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
 const Workspace: FC<WorkspaceProps> = ({
  canvasRef,
+ fetchPainting,
  person,
  savePainting,
  signOut,
@@ -26,7 +28,7 @@ const Workspace: FC<WorkspaceProps> = ({
  </h2>
  <Button onClick={signOut}>Sign out</Button>
  </header>
- <Canvas canvasRef={canvasRef} />
+ <Canvas canvasRef={canvasRef} fetchPainting={fetchPainting} />
  <footer className="footer">
  <i />
  <Button onClick={savePainting}>Save</Button>

src/components/workspace/tests.tsx

@@ -8,6 +8,7 @@ it('renders without crashing', () => {
  const div = document.createElement('div');
 
  const mockCanvasRef = React.createRef<HTMLCanvasElement>();
+ const mockFetch = () => Promise.resolve(JSON.stringify({}));
  const mockPerson = new Person({ name: 'John Doe' });
  const mockHandler = (event: MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
@@ -16,6 +17,7 @@ it('renders without crashing', () => {
  ReactDOM.render(
  <Workspace
  canvasRef={mockCanvasRef}
+ fetchPainting={mockFetch}
  person={mockPerson}
  savePainting={mockHandler}
  signOut={mockHandler}