made sync clear with db through api

backend/api/controllers/board.py

@@ -36,51 +36,88 @@ def get_board():
     return send_success_response(board)
 
 
-def update_board_with_delta():
+def update_board():
 
     data = get_request_data()
 
-    for required_field in ["board_url", "data_delta", "key"]:
-        if required_field not in data.keys():
-            err = "No '{field}' specified".format(field=required_field)
+    if "action" not in data.keys():
+        err = "No 'action' specified"
+        return send_error_response(400, err)
+
+    action = data["action"]
+
+    if action == "BOARD_ADD_PIC":
+        for required_field in ["board_url", "data_delta", "key"]:
+            if required_field not in data.keys():
+                err = "No '{field}' specified".format(field=required_field)
+                return send_error_response(400, err)
+
+        try:
+            board_url = str(data["board_url"])
+            data_delta = loads(data["data_delta"])
+            key = str(data["key"])
+        except Exception as err:
+            return send_error_response(400, str(err))
+
+        # todo: could add regex for check key correct or no
+        if len(key) != 9:
+            err = "Invalid key given"
             return send_error_response(400, err)
 
-    try:
-        board_url = str(data["board_url"])
-        data_delta = loads(data["data_delta"])
-        key = str(data["key"])
-    except Exception as err:
-        return send_error_response(400, str(err))
+        if not data_delta:
+            err = "No empty delta allowed"
+            return send_error_response(400, err)
 
-    # todo: could add regex for check key correct or no
-    if len(key) != 9:
-        err = "Invalid key given"
-        return send_error_response(400, err)
+        # todo: how to validate input delta for correct structure?
 
-    if not data_delta:
-        err = "No empty delta allowed"
-        return send_error_response(400, err)
+        try:
+            board_obj = Board.query.filter_by(url=board_url).one()
+        except NoResultFound:
+            err = "Didn't found board with url '{}'".format(board_url)
+            return send_error_response(404, err)
 
-    # todo: how to validate input delta for correct structure?
+        new_data: dict = deepcopy(board_obj.data)
 
-    try:
-        board_obj = Board.query.filter_by(url=board_url).one()
-    except NoResultFound:
-        err = "Didn't found board with url '{}'".format(board_url)
-        return send_error_response(404, err)
+        # assume key is correct
+        if key not in new_data:
+            new_data[key] = []
 
-    new_data: dict = deepcopy(board_obj.data)
+        new_data[key].append(data_delta)
 
-    # assume key is correct
-    if key not in new_data:
-        new_data[key] = []
+        try:
+            updated_obj = Board.update({"url": board_url}, **{"data": new_data})
+        except Exception as err:
+            return send_error_response(400, str(err))
 
-    new_data[key].append(data_delta)
+    elif action == "BOARD_CLEAR":
 
-    try:
-        updated_obj = Board.update({"url": board_url}, **{"data": new_data})
-    except Exception as err:
-        return send_error_response(400, str(err))
+        for required_field in ["board_url"]:
+            if required_field not in data.keys():
+                err = "No '{field}' specified".format(field=required_field)
+                return send_error_response(400, err)
+
+        try:
+            board_url = str(data["board_url"])
+        except Exception as err:
+            return send_error_response(400, str(err))
+
+        try:
+            Board.query.filter_by(url=board_url).one()
+        except NoResultFound:
+            err = "Didn't found board with url '{}'".format(board_url)
+            return send_error_response(404, err)
+
+        try:
+            updated_obj = Board.update({"url": board_url}, **{"data": {}})
+        except Exception as err:
+            return send_error_response(400, str(err))
+
+    elif action == "BOARD_INIT_POINTS":
+        pass
+
+    else:
+        err = "Invalid action type, choose from ['BOARD_ADD_PIC', 'BOARD_CLEAR', 'BOARD_INIT_POINTS']"
+        return send_error_response(400, err)
 
     updated_record = {
         k: v for k, v in updated_obj.__dict__.items() if k in ["url", "data"]

backend/api/controllers/parse_request.py

@@ -1,11 +1,16 @@
 from flask import request
+import logging
+
+logging.basicConfig(level=logging.INFO)
 
 
 def get_request_data() -> dict:
     """
     Get keys & values from request (Note that this method should parse requests with content type "application/x-www-form-urlencoded")
     """
 
+    logging.info("received request: {}".format(dict(request.values)))
+
     data = dict(request.values)
 
     return data

backend/api/core/routes.py

@@ -9,4 +9,4 @@ def board_methods():
     if request.method == "GET":
         return board.get_board()
     elif request.method == "PUT":
-        return board.update_board_with_delta()
+        return board.update_board()

frontend/components/Board.js

@@ -54,7 +54,8 @@ export const Board = props => {
                 body: new URLSearchParams({
                     board_url: props.url,
                     data_delta: JSON.stringify(lastPic),
-                    key: key
+                    key: key,
+                    action: "BOARD_ADD_PIC"
                 })
             })
             .then(r => r.json())

frontend/components/Toolbar.js

@@ -13,9 +13,29 @@ class Toolbar extends React.Component{
     clearBoard = (event) => {
         this.props.clearBoard();
 
-        this.props.websocket.send(JSON.stringify({
-            action: 'clearBoard'
-        }))
+        if (!this.props.websocket || !this.props.url) return;
+
+        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: this.props.url,
+                    action: "BOARD_CLEAR"
+                })
+            })
+            .then(r => r.json())
+            .then(response => {
+                if (response.success){
+                    this.props.websocket.send(JSON.stringify({
+                        action: 'clearBoard'
+                    }))
+                } else {
+                    console.log('error on fetch PUT /board: ', response.error.message)
+                }
+            })
     }
 
     render(){

frontend/pages/b/[board_url].js

@@ -62,7 +62,7 @@ export default function SyncBoard() {
           <title>Online Whiteboard</title>
           <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         </Head>
-        <Toolbar websocket={websocket} />
+        <Toolbar websocket={websocket} url={board_url}/>
         <Board websocket={websocket} url={board_url}/>
       </>
     )

frontend/store/board/actions.js

@@ -2,7 +2,7 @@ export const BOARD_CREATE_NEW_PIC = "BOARD_CREATE_NEW_PIC"
 export const BOARD_ADD_POINT_TO_LAST_PIC = "BOARD_ADD_POINT_TO_LAST_PIC"
 export const BOARD_CLEAR = "BOARD_CLEAR"
 export const BOARD_INIT_POINTS = "BOARD_INIT_POINTS"
-export const BOARD_ADD_PIC = "BOARD_ADD_PIC" 
+export const BOARD_ADD_PIC = "BOARD_ADD_PIC"
 
 export const createNewPic = (brush) => ({
     type: BOARD_CREATE_NEW_PIC,