Reorganize

backend/index.mjs

@@ -11,5 +11,10 @@ const server = app.listen(PORT, () => console.log(`Example app listening on port
 const io = socketIO(server);
 
 io.on('connection', socket => {
-    console.log('a user connected');
+    console.log('a user connected', socket.id);
+
+    setInterval(() => {
+        console.log('send :)')
+        socket.emit("SENDING_NEW_TIME", "ASD")
+    }, 1500)
 });

backend/package.json

@@ -14,7 +14,6 @@
     "socket.io": "^2.3.0"
   },
   "devDependencies": {
-    "@types/express": "^4.17.2",
     "@types/socket.io": "^2.1.4"
   }
 }

frontend/config-overrides.js

@@ -0,0 +1,4 @@
+module.exports = function override(config, env) {
+    // do stuff with the webpack config...
+    return config;
+};

frontend/package-lock.json

@@ -3929,6 +3929,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz",
       "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA=="
     },
+    "customize-cra": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-0.9.1.tgz",
+      "integrity": "sha512-LISruJ6ak6u+HVQ2vPI+HE4inpPugB73KB9YIpE2J1TW5L1Vrjzm3l2Yupyy+1alJGwAd5GAb5Hfc9qmSUuHow==",
+      "dev": true,
+      "requires": {
+        "lodash.flow": "^3.5.0"
+      }
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -8207,6 +8216,12 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=",
+      "dev": true
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11220,6 +11235,23 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-app-rewired": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.1.5.tgz",
+      "integrity": "sha512-Gr8KfCeL9/PTQs8Vvxc7v8wQ9vCFMnYPhcAkrMlzkLiMFXS+BgSwm11MoERjZm7dpA2WjTi+Pvbu/w7rujAV+A==",
+      "dev": true,
+      "requires": {
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "react-dev-utils": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.1.0.tgz",
@@ -13609,6 +13641,14 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-socketio": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/use-socketio/-/use-socketio-2.0.0.tgz",
+      "integrity": "sha512-VeCmyA8SI1hPA4WQJBy8sKJ0Yb6UbAAyC7c4jiXTvzGGE6SmDgXF4LBMVr8l3kTjgM21EBIY+eV/IY3uSwWVjA==",
+      "requires": {
+        "socket.io-client": "^2.3.0"
+      }
+    },
     "util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
@@ -15526,6 +15566,15 @@
         "microevent.ts": "~0.1.1"
       }
     },
+    "workerize-loader": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/workerize-loader/-/workerize-loader-1.1.0.tgz",
+      "integrity": "sha512-cU2jPVE3AzzVxOonBe9lCCO//qwE9s/K4a9njFVRLueznzNDNND5vGHVorGuzK6xvamdDOZ9+g7CPIc7QKzucQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3"
+      }
+    },
     "wrap-ansi": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",

frontend/package.json

@@ -17,12 +17,13 @@
     "react-scripts": "3.3.1",
     "socket.io-client": "^2.3.0",
     "sscaffold-css": "^0.1.0",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "use-socketio": "^2.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -42,6 +43,9 @@
   },
   "devDependencies": {
     "@types/socket.io-client": "^1.4.32",
-    "eslint-plugin-react-hooks": "^2.3.0"
+    "customize-cra": "^0.9.1",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "react-app-rewired": "^2.1.5",
+    "workerize-loader": "^1.1.0"
   }
 }

frontend/src/App.tsx

@@ -1,76 +1,39 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import './App.css';
 import logo from "./via-logo.svg"
-import {Col, Progress, Row} from "antd"
+import {Row} from "antd"
-import io from 'socket.io-client';
+import socket from "./util/socket";
+import NextShot from "./components/NextShot";
+import ShotsTaken from "./components/ShotsTaken";
+import Feed from "./components/Feed";
 
 
 const App = () => {
-    const feedItems = [
-        {title: "Ha1", body: "Doei", key: 1},
-        // {title: "Ha2", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-        // {title: "Ha3", body: "Doei"},
-    ];
 
-    // useEffect(() => {
+    useEffect(() => {
-    //     socket.on("SENDING_NEW_TIME", data => {
+        socket.on('connected', () => {
-    //         setTime(data);
+            console.log('connected :)')
-    //     });
+        });
-    //     return () => {
-    //         socket.off("SENDING_NEW_TIME");
-    //     };
-    // }, []);
 
+        return () => {
+            socket.off("SENDING_NEW_TIME");
+            socket.off("connection");
+        }
+    });
 
     return (
-        <div className="app">
+        <>
             <section className="content">
                 <Row>
-                    <Col className="sider" span={4}>
+                    <NextShot/>
-                        <h1>Tijd tot volgende shot:</h1>
+                    <Feed/>
-                        <Progress type="circle"
+                    <ShotsTaken/>
-                                  percent={75}
-                                  strokeColor={"#304ba3"}
-                                  strokeWidth={10}/>
-                    </Col>
-                    <Col className="feed" span={16}>
-                        {feedItems.map(o =>
-                            <Row key={o.key} className="feed-item">
-                                <Col span={4}>Tijd</Col>
-                                <Col span={3} offset={5}>{o.title}</Col>
-                                <Col span={3}>Icoon</Col>
-                                <Col span={3}>{o.body}</Col>
-                            </Row>
-                        )}
-                    </Col>
-                    <Col className="sider" span={4}>
-                        <h1>Shots genomen:</h1>
-                        <Progress type="circle"
-                                  percent={25}
-                                  strokeColor={"#304ba3"}
-                                  strokeWidth={10}/>
-                    </Col>
                 </Row>
             </section>
             <footer>
                 <img src={logo} className="via-logo" alt="logo"/>
             </footer>
-        </div>
+        </>
     );
 };
 

frontend/src/components/Feed.tsx

@@ -0,0 +1,44 @@
+import React, {useEffect, useState} from 'react';
+import {Col, Row} from "antd"
+import socket from "../util/socket";
+
+
+const Feed = () => {
+    const [count, setCount] = useState(0);
+    const [feedItems, setFeedItems] = useState([{
+        title: "Ha1", body: "Doei", key: -1
+    }]);
+
+    useEffect(() => {
+        socket.on("SENDING_NEW_TIME", (data: string) => {
+            console.log(data);
+
+            setCount(c => c + 1);
+            const newItems = feedItems;
+            newItems.push({
+                title: "Ha1", body: "Doei", key: count
+            });
+
+            setFeedItems(newItems);
+        });
+
+        return () => {
+            socket.off("SENDING_NEW_TIME");
+        }
+    });
+
+    return (
+        <Col className="feed" span={16}>
+            {feedItems.map(o =>
+                <Row key={o.key} className="feed-item">
+                    <Col span={4}>Tijd</Col>
+                    <Col span={3} offset={5}>{o.title}</Col>
+                    <Col span={3}>Icoon</Col>
+                    <Col span={3}>{o.body}</Col>
+                </Row>
+            )}
+        </Col>
+    );
+};
+
+export default Feed;

frontend/src/components/NextShot.tsx

@@ -0,0 +1,29 @@
+import React, {useEffect} from 'react';
+import {Col, Progress} from "antd"
+import socket from "../util/socket";
+
+
+const NextShot = () => {
+    useEffect(() => {
+        socket.on("SENDING_NEW_TIME", (data: string) => {
+
+        });
+
+        return () => {
+            socket.off("SENDING_NEW_TIME");
+        }
+    });
+
+    return (
+        <Col className="sider" span={4}>
+            <h1>Tijd tot volgende shot:</h1>
+            <Progress type="circle"
+                      percent={75}
+                      strokeColor={"#304ba3"}
+                      strokeWidth={10}/>
+        </Col>
+
+    );
+};
+
+export default NextShot;

frontend/src/components/ShotsTaken.tsx

@@ -0,0 +1,28 @@
+import React, {useEffect} from 'react';
+import {Col, Progress} from "antd"
+import socket from "../util/socket";
+
+
+const ShotsTaken = () => {
+    useEffect(() => {
+        socket.on("SENDING_NEW_TIME", (data: string) => {
+
+        });
+
+        return () => {
+            socket.off("SENDING_NEW_TIME");
+        }
+    });
+
+    return (
+        <Col className="sider" span={4}>
+            <h1>Shots genomen:</h1>
+            <Progress type="circle"
+                      percent={25}
+                      strokeColor={"#304ba3"}
+                      strokeWidth={10}/>
+        </Col>
+    );
+};
+
+export default ShotsTaken;

frontend/src/index.css

@@ -11,11 +11,8 @@
 }
 
 body {
-    background-color: #e5e5e5;
-}
-
-.app {
     font-family: 'SourceSansPro', sans-serif;
+    background-color: #e5e5e5;
 }
 
 .feed {

frontend/src/index.tsx

@@ -3,20 +3,5 @@ import ReactDOM from 'react-dom';
 import './index.css';
 
 import App from './App';
-import WebWorkerHelper from "./util/WebWorkerHelper";
-import WebWorker from "./worker/WebWorker";
-
-// web worker ?
-// https://stackoverflow.com/questions/47475360/creating-a-web-worker-inside-react
-
-const worker: Worker = new WebWorkerHelper(WebWorker) as Worker;
-worker.addEventListener("message", e => {
-    console.log("Received response:");
-    console.log(e.data);
-}, false);
-worker.postMessage("bar");
-
-console.log(worker);
-
 
 ReactDOM.render(<App/>, document.getElementById('root'));

frontend/src/util/WebWorkerHelper.ts

@@ -1,9 +0,0 @@
-export default class WebWorkerHelper {
-    constructor(worker: any) {
-         let code = worker.toString();
-         code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));
-
-         const blob = new Blob([code], { type: "application/javascript" });
-         return new Worker(URL.createObjectURL(blob));
-    }
-}

frontend/src/util/socket.ts

@@ -0,0 +1,3 @@
+import io from "socket.io-client";
+
+export default io("http://localhost:3001");

frontend/src/util/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2015",
-    "lib": [
-      "es2015",
-      "webworker"
-    ]
-  }
-}

frontend/src/worker/WebWorker.ts

@@ -1,10 +0,0 @@
-export default function WebWorker() {
-    // @ts-ignore
-    const ctx: Worker = this as any;
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const onmessage = (e: MessageEvent) => {
-        console.log("ww got message")
-         ctx.postMessage("Response");
-    };
-}