diff --git a/backend/index.mjs b/backend/index.mjs index c8fd844..b31b947 100644 --- a/backend/index.mjs +++ b/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) }); diff --git a/backend/package.json b/backend/package.json index 1ae3c9b..6d2108c 100644 --- a/backend/package.json +++ b/backend/package.json @@ -14,7 +14,6 @@ "socket.io": "^2.3.0" }, "devDependencies": { - "@types/express": "^4.17.2", "@types/socket.io": "^2.1.4" } } diff --git a/frontend/config-overrides.js b/frontend/config-overrides.js new file mode 100644 index 0000000..e9b672a --- /dev/null +++ b/frontend/config-overrides.js @@ -0,0 +1,4 @@ +module.exports = function override(config, env) { + // do stuff with the webpack config... + return config; +}; \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8bbe341..95e4afe 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index ed3cbf4..6971dc2 100644 --- a/frontend/package.json +++ b/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", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "react-app-rewired start", + "build": "react-app-rewired build", + "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" } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ebf0c0e..8b7e2aa 100644 --- a/frontend/src/App.tsx +++ b/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 io from 'socket.io-client'; +import {Row} from "antd" +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(() => { - // socket.on("SENDING_NEW_TIME", data => { - // setTime(data); - // }); - // return () => { - // socket.off("SENDING_NEW_TIME"); - // }; - // }, []); + useEffect(() => { + socket.on('connected', () => { + console.log('connected :)') + }); + return () => { + socket.off("SENDING_NEW_TIME"); + socket.off("connection"); + } + }); return ( -