From 750d0741a21cbc90ac7c1f720b7cbb59cc3d764f Mon Sep 17 00:00:00 2001
From: Matt Hayes <matt@mysterycommand.com>
Date: Fri, 26 Apr 2019 16:05:59 -0400
Subject: [PATCH] feat(canvas): save user painting, only one for now, and no
 erasing only add, but kind of a cool star

---
 src/components/app/index.tsx       | 19 ++++++++++++++++++-
 src/components/canvas/index.tsx    | 27 ++++++++++++++++++++++++++-
 src/components/canvas/tests.tsx    |  6 +++++-
 src/components/workspace/index.tsx |  4 +++-
 src/components/workspace/tests.tsx |  2 ++
 5 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index 8f42d0ae..160b4c00 100644
--- a/src/components/app/index.tsx
+++ b/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}
diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx
index 92ffa1a7..4adf0921 100644
--- a/src/components/canvas/index.tsx
+++ b/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(),
diff --git a/src/components/canvas/tests.tsx b/src/components/canvas/tests.tsx
index 79ab044c..bd7ed631 100644
--- a/src/components/canvas/tests.tsx
+++ b/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);
 });
diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
index cccb144b..69d8c464 100644
--- a/src/components/workspace/index.tsx
+++ b/src/components/workspace/index.tsx
@@ -8,6 +8,7 @@ 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;
@@ -15,6 +16,7 @@ type WorkspaceProps = {
 
 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>
diff --git a/src/components/workspace/tests.tsx b/src/components/workspace/tests.tsx
index 41fee28e..580cca0c 100644
--- a/src/components/workspace/tests.tsx
+++ b/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}