diff --git a/package.json b/package.json index 8285c57..1bb5f20 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ ] }, "devDependencies": { - "gh-pages": "^3.2.0" + "gh-pages": "^3.2.0", + "husky": "^6.0.0" } } diff --git a/src/script/components/Dashboard/internetCarRemote/internetCarRemote.jsx b/src/script/components/Dashboard/internetCarRemote/internetCarRemote.jsx index 9c91707..774e071 100644 --- a/src/script/components/Dashboard/internetCarRemote/internetCarRemote.jsx +++ b/src/script/components/Dashboard/internetCarRemote/internetCarRemote.jsx @@ -16,6 +16,16 @@ import PointStatus from '../../../common/pointStatus/pointStatus'; import RoundButton from '../../../common/button/roundButton'; import Button from '../../../common/button/button'; import ARROW from '../../../../images/arrow.svg'; +import { + BASE_BROKER_URL, + PORT_NUMBER, + PROTOCOL_TYPE, + BASE_PUBLISH_EVENT, + ARROW_WIDTH, + BUTTON_KEY, + MOUSE_EVENT, + PUBLISH_EVENT, +} from '../../../utility'; let MqttClient = null; const InternetCarRemote = () => { @@ -32,43 +42,37 @@ const InternetCarRemote = () => { // eslint-disable-next-line const [infoMsg, setInfoMsg] = useRecoilState(infoAlert); - const ARROW_WIDTH = '40px'; - const BUTTON_KEY = { - up: 'button_up', - down: 'button_down', - right: 'button_right', - left: 'button_left', - }; - const MOUSE_EVENT = { - up: 'mouse_up', - down: 'mouse_down', - }; - const triggerCar = (buttonKey, mouseEvent) => { if (isConnected) { if (buttonKey === BUTTON_KEY.up) { if (mouseEvent === MOUSE_EVENT.up) { - MqttClient.publish('car/remote/up', '0'); + MqttClient.publish(`${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.up}`, '0'); } else if (mouseEvent === MOUSE_EVENT.down) { - MqttClient.publish('car/remote/up', '1'); + MqttClient.publish(`${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.up}`, '1'); } } else if (buttonKey === BUTTON_KEY.left) { if (mouseEvent === MOUSE_EVENT.up) { - MqttClient.publish('car/remote/left', '0'); + MqttClient.publish(`${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.left}`, '0'); } else if (mouseEvent === MOUSE_EVENT.down) { - MqttClient.publish('car/remote/left', '1'); + MqttClient.publish(`${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.left}`, '1'); } } else if (buttonKey === BUTTON_KEY.right) { if (mouseEvent === MOUSE_EVENT.up) { - MqttClient.publish('car/remote/right', '0'); + MqttClient.publish( + `${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.right}`, + '0' + ); } else if (mouseEvent === MOUSE_EVENT.down) { - MqttClient.publish('car/remote/right', '1'); + MqttClient.publish( + `${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.right}`, + '1' + ); } } else if (buttonKey === BUTTON_KEY.down) { if (mouseEvent === MOUSE_EVENT.up) { - MqttClient.publish('car/remote/down', '0'); + MqttClient.publish(`${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.down}`, '0'); } else if (mouseEvent === MOUSE_EVENT.down) { - MqttClient.publish('car/remote/down', '1'); + MqttClient.publish(`${BASE_PUBLISH_EVENT}${PUBLISH_EVENT.down}`, '1'); } } } @@ -78,15 +82,11 @@ const InternetCarRemote = () => { setWarningMsg('Connecting to Car...'); if (credentials.username && credentials.password) { setIsLoading(true); - const protocolType = - process.env.NODE_ENV === 'development' ? 'ws' : 'wss'; - const portNumber = - process.env.NODE_ENV === 'development' ? '3033' : '8083'; - MqttClient = mqtt.connect(`${protocolType}://mqtt.raghavdhingra.com`, { + MqttClient = mqtt.connect(`${PROTOCOL_TYPE}://${BASE_BROKER_URL}`, { username: credentials.username, password: credentials.password, - protocol: protocolType, - port: portNumber, + protocol: PROTOCOL_TYPE, + port: PORT_NUMBER, }); MqttClient.on('connect', () => { setIsConnected(true); diff --git a/src/script/components/Login/Login.jsx b/src/script/components/Login/Login.jsx index d171f84..a65dab6 100644 --- a/src/script/components/Login/Login.jsx +++ b/src/script/components/Login/Login.jsx @@ -19,6 +19,7 @@ import { } from '../../RecoilAtom/state'; import './Login.scss'; +import { BASE_BROKER_URL, PORT_NUMBER, PROTOCOL_TYPE } from '../../utility'; const Login = () => { const [credentials, setCredentials] = useRecoilState(credentialAtom); @@ -48,17 +49,13 @@ const Login = () => { setWarningMsg('Connection is Progress...'); if (credentials.username && credentials.password) { - const protocolType = - process.env.NODE_ENV === 'development' ? 'ws' : 'wss'; - const portNumber = - process.env.NODE_ENV === 'development' ? '3033' : '8083'; const mqttValidation = mqtt.connect( - `${protocolType}://mqtt.raghavdhingra.com`, + `${PROTOCOL_TYPE}://${BASE_BROKER_URL}`, { username: credentials.username, password: credentials.password, - protocol: protocolType, - port: portNumber, + protocol: PROTOCOL_TYPE, + port: PORT_NUMBER, } ); mqttValidation.on('error', () => { diff --git a/src/script/utility.js b/src/script/utility.js new file mode 100644 index 0000000..aa6cf26 --- /dev/null +++ b/src/script/utility.js @@ -0,0 +1,30 @@ +export const BASE_BROKER_URL = 'mqtt.raghavdhingra.com'; + +export const PROTOCOL_TYPE = + process.env.NODE_ENV === 'development' ? 'ws' : 'wss'; + +export const PORT_NUMBER = + process.env.NODE_ENV === 'development' ? '3033' : '8083'; + +export const PUBLISH_EVENT = { + up: 'up', + down: 'down', + right: 'right', + left: 'left', +}; + +export const BASE_PUBLISH_EVENT = 'car/remote/'; + +export const ARROW_WIDTH = '40px'; + +export const BUTTON_KEY = { + up: 'button_up', + down: 'button_down', + right: 'button_right', + left: 'button_left', +}; + +export const MOUSE_EVENT = { + up: 'mouse_up', + down: 'mouse_down', +}; diff --git a/yarn.lock b/yarn.lock index 4a4abd2..497f517 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5892,6 +5892,11 @@ humanize-url@^1.0.0: normalize-url "^1.0.0" strip-url-auth "^1.0.0" +husky@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e" + integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ== + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"