made sync drawing with PUT fetch to API and save in db

denbite · Jan 15, 2021 · d121754 · d121754
1 parent 41f5c50
commit d121754
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/frontend/components/Board.js b/frontend/components/Board.js
@@ -1,15 +1,13 @@
 import React, {useEffect, useRef} from 'react';
 import { connect } from 'react-redux';
 import styles from '../styles/Board.module.css';
-import {createNewPic, addPointToLastPic} from '../store/board/actions'
+import {createNewPic, addPointToLastPic, __transformBrushToKey} from '../store/board/actions'
 
 export const Board = props => {
     const store_points = props.points;
     const currentBrushWidth = props.brushWidth;
     const currentBrushColor = props.brushColor;
 
-    const ws = props.websocket
-
     const canvas_ref = useRef(null);
 
     function createNewPicEvent(e) {
@@ -34,23 +32,46 @@ export const Board = props => {
     }
 
     function saveLastPic(e) {
+        if (!props.websocket || !props.url) return;
 
         console.log('event mouseup')
 
-        let key = currentBrushWidth + '.' + currentBrushColor;
+        let key = __transformBrushToKey({
+            width: currentBrushWidth,
+            color: currentBrushColor
+        })
 
         let lastPic = store_points[key][ store_points[key].length - 1 ]
 
         console.log(lastPic)
 
-        ws.send(JSON.stringify({
-            action: 'saveLastPic',
-            brush: {
-                width: currentBrushWidth,
-                color: currentBrushColor,
-            },
-            pic: lastPic
-        }));
+        fetch('http://192.168.0.100:8000/api/board', {
+                method:'PUT',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Accept': 'application/json'
+                },
+                body: new URLSearchParams({
+                    board_url: props.url,
+                    data_delta: JSON.stringify(lastPic),
+                    key: key
+                })
+            })
+            .then(r => r.json())
+            .then(response => {
+                if (response.success){
+                    props.websocket.send(JSON.stringify({
+                        action: 'saveLastPic',
+                        brush: {
+                            width: currentBrushWidth,
+                            color: currentBrushColor,
+                        },
+                        pic: lastPic
+                    }));
+                } else {
+                    console.log('error on fetch PUT /board: ', response.error.message)
+                }
+            })
     }
 
     useEffect(() => {

diff --git a/frontend/pages/b/[board_url].js b/frontend/pages/b/[board_url].js
@@ -63,7 +63,7 @@ export default function SyncBoard() {
           <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         </Head>
         <Toolbar websocket={websocket} />
-        <Board websocket={websocket}/>
+        <Board websocket={websocket} url={board_url}/>
       </>
     )
 }
diff --git a/frontend/store/board/actions.js b/frontend/store/board/actions.js
@@ -34,6 +34,6 @@ export const addPic = (pic, brush) => ({
     }
 })
 
-const __transformBrushToKey = (brush) => (
+export const __transformBrushToKey = (brush) => (
     [brush.width, brush.color].join('.')
 )
diff --git a/frontend/store/toolbar/constants.js b/frontend/store/toolbar/constants.js
@@ -4,4 +4,4 @@ export const TOOLBAR_BRUSH_WIDTH_BIG = 6
 
 export const TOOLBAR_BRUSH_COLOR_RED = "#C0392B"
 export const TOOLBAR_BRUSH_COLOR_BLUE = "#0056C5"
-export const TOOLBAR_BRUSH_COLOR_GREEN = "#83BE42"
+export const TOOLBAR_BRUSH_COLOR_GREEN = "#5BAC31"