refactor(canvas): hoist the canvasRef all the way up to app where we'…

…ll use it to generate the image

src/components/app/index.tsx

@@ -11,6 +11,8 @@ type AppState = {
 };
 
 class App extends Component<{}, AppState> {
+ private canvasRef = React.createRef<HTMLCanvasElement>();
+
  constructor(props: {}) {
  super(props);
 
@@ -50,7 +52,16 @@ class App extends Component<{}, AppState> {
  event.preventDefault();
  const { userSession } = this.state;
 
- userSession.putFile('painting.bmp', '', {});
+ userSession.putFile(
+ 'painting.json',
+ JSON.stringify({
+ data: '',
+ createdAt: Date.now(),
+ }),
+ {
+ encrypt: false,
+ },
+ );
  };
 
  UNSAFE_componentWillMount() {
@@ -71,9 +82,10 @@ class App extends Component<{}, AppState> {
  <div className="app">
  {userSession.isUserSignedIn() ? (
  <Workspace
+ canvasRef={this.canvasRef}
  person={new Person(userSession.loadUserData().profile)}
- signOut={this.signOut}
  savePainting={this.savePainting}
+ signOut={this.signOut}
  />
  ) : (
  <Splash signIn={this.signIn} />

src/components/canvas/index.tsx

@@ -1,8 +1,11 @@
-import React, { Component, MouseEvent, TouchEvent } from 'react';
+import React, { Component, MouseEvent, RefObject, TouchEvent } from 'react';
 
 import './style.css';
 
-type CanvasProps = {};
+type CanvasProps = {
+ canvasRef: RefObject<HTMLCanvasElement>;
+};
+
 type CanvasState = {
  canvasContext: CanvasRenderingContext2D | null;
  canvasRect: ClientRect | DOMRect | null;
@@ -20,10 +23,10 @@ class Canvas extends Component<CanvasProps, CanvasState> {
  prevY: -1,
  };
 
- private el = React.createRef<HTMLCanvasElement>();
-
  public componentDidMount() {
- const { current } = this.el;
+ const {
+ canvasRef: { current },
+ } = this.props;
 
  if (!current) {
  return;
@@ -36,9 +39,11 @@ class Canvas extends Component<CanvasProps, CanvasState> {
  }
 
  public render() {
+ const { canvasRef } = this.props;
+
  return (
  <canvas
- ref={this.el}
+ ref={canvasRef}
  className="canvas"
  width="1080"
  height="1080"
@@ -108,7 +113,9 @@ class Canvas extends Component<CanvasProps, CanvasState> {
  };
 
  private paint = (clientX: number, clientY: number) => {
- const { current } = this.el;
+ const {
+ canvasRef: { current },
+ } = this.props;
  const { canvasContext, canvasRect, isPainting, prevX, prevY } = this.state;
 
  if (!(current && canvasContext && canvasRect && isPainting)) {

src/components/canvas/tests.tsx

@@ -6,6 +6,8 @@ import Canvas from '.';
 it('renders without crashing', () => {
  const div = document.createElement('div');
 
- ReactDOM.render(<Canvas />, div);
+ const mockCanvasRef = React.createRef<HTMLCanvasElement>();
+
+ ReactDOM.render(<Canvas canvasRef={mockCanvasRef} />, div);
  ReactDOM.unmountComponentAtNode(div);
 });

src/components/workspace/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, RefObject } from 'react';
 import { Person } from 'blockstack';
 
 import Canvas from '../canvas';
@@ -7,20 +7,26 @@ import './style.css';
 import Button from '../button';
 
 type WorkspaceProps = {
+ canvasRef: RefObject<HTMLCanvasElement>;
  person: Person;
- signOut: (event: MouseEvent<HTMLButtonElement>) => void;
  savePainting: (event: MouseEvent<HTMLButtonElement>) => void;
+ signOut: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-const Workspace: FC<WorkspaceProps> = ({ person, signOut, savePainting }) => (
+const Workspace: FC<WorkspaceProps> = ({
+ canvasRef,
+ person,
+ savePainting,
+ signOut,
+}) => (
  <div className="workspace">
  <header className="header">
  <h2 className="current-user">
  Signed in as {person.name() || 'nameless person'}
  </h2>
  <Button onClick={signOut}>Sign out</Button>
  </header>
- <Canvas />
+ <Canvas canvasRef={canvasRef} />
  <footer className="footer">
  <i />
  <Button onClick={savePainting}>Save</Button>

src/components/workspace/tests.tsx

@@ -7,16 +7,18 @@ import Workspace from '.';
 it('renders without crashing', () => {
  const div = document.createElement('div');
 
+ const mockCanvasRef = React.createRef<HTMLCanvasElement>();
  const mockPerson = new Person({ name: 'John Doe' });
  const mockHandler = (event: MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
  };
 
  ReactDOM.render(
  <Workspace
+ canvasRef={mockCanvasRef}
  person={mockPerson}
- signOut={mockHandler}
  savePainting={mockHandler}
+ signOut={mockHandler}
  />,
  div,
  );