From d45d13bbafb11c28c0832db73cb7d3da5f978cf4 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 17:00:15 +0530 Subject: [PATCH 01/18] install a client package for socket.io --- package.json | 1 + yarn.lock | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 8c89b6695..eeff792f9 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "react-webcam": "^7.0.0", "screenfull": "^6.0.1", "sentry-expo": "^4.0.0", + "socket.io-client": "^4.6.1", "webpack": "5.0.0", "webrtc-adapter": "^8.1.1", "xmldom": "^0.6.0", diff --git a/yarn.lock b/yarn.lock index b604adf99..d698856dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3738,6 +3738,11 @@ dependencies: "@sinonjs/commons" "^1.7.0" +"@socket.io/component-emitter@~3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553" + integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg== + "@svgr/babel-plugin-add-jsx-attribute@^6.0.0": version "6.0.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18" @@ -7046,7 +7051,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6. dependencies: ms "2.0.0" -debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: +debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -7605,6 +7610,22 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0: dependencies: once "^1.4.0" +engine.io-client@~6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.4.0.tgz#88cd3082609ca86d7d3c12f0e746d12db4f47c91" + integrity sha512-GyKPDyoEha+XZ7iEqam49vz6auPnNJ9ZBfy89f+rMMas8AuiMWOZ9PVzu8xb9ZC6rafUqiGHSCfu22ih66E+1g== + dependencies: + "@socket.io/component-emitter" "~3.1.0" + debug "~4.3.1" + engine.io-parser "~5.0.3" + ws "~8.11.0" + xmlhttprequest-ssl "~2.0.0" + +engine.io-parser@~5.0.3: + version "5.0.6" + resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.6.tgz#7811244af173e157295dec9b2718dfe42a64ef45" + integrity sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw== + enhanced-resolve@^4.1.0: version "4.5.0" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec" @@ -16455,6 +16476,24 @@ snapdragon@^0.8.1: source-map-resolve "^0.5.0" use "^3.1.0" +socket.io-client@^4.6.1: + version "4.6.1" + resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.6.1.tgz#80d97d5eb0feca448a0fb6d69a7b222d3d547eab" + integrity sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ== + dependencies: + "@socket.io/component-emitter" "~3.1.0" + debug "~4.3.2" + engine.io-client "~6.4.0" + socket.io-parser "~4.2.1" + +socket.io-parser@~4.2.1: + version "4.2.2" + resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.2.tgz#1dd384019e25b7a3d374877f492ab34f2ad0d206" + integrity sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw== + dependencies: + "@socket.io/component-emitter" "~3.1.0" + debug "~4.3.1" + sockjs-client@1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5" @@ -18404,6 +18443,11 @@ ws@^7.4.6: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591" integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q== +ws@~8.11.0: + version "8.11.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143" + integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg== + x-path@^0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/x-path/-/x-path-0.0.2.tgz#294d076bb97a7706cc070bbb2a6fd8c54df67b12" @@ -18494,6 +18538,11 @@ xmldom@^0.6.0: resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.6.0.tgz#43a96ecb8beece991cef382c08397d82d4d0c46f" integrity sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg== +xmlhttprequest-ssl@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67" + integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A== + xregexp@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943" From 9b4cf064221252f35f653a5df30d26892fb88166 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 17:00:44 +0530 Subject: [PATCH 02/18] create and configure a react-context for socket --- src/context/socket.js | 66 +++++++++++++++++++++++++++++++++++++++++++ src/main.js | 13 +++++++-- 2 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 src/context/socket.js diff --git a/src/context/socket.js b/src/context/socket.js new file mode 100644 index 000000000..82547b083 --- /dev/null +++ b/src/context/socket.js @@ -0,0 +1,66 @@ +import React, { createContext, useContext, useMemo } from 'react'; +import { io } from 'socket.io-client'; + +/** + * Creates a socket.io client that connects to the server. Replace url with your server URL + * Make sure to enable Cross-Origin Resource Sharing (CORS) on the server + * The options parameter is optional and can be used to configure the connection + */ +const socket = io('http://localhost:3000', {}); +socket.on('connect', () => { + console.log('Socket connected', socket.id); +}); +socket.on('disconnect', (reason) => { + console.log('Socket disconnected due to', reason); +}); +socket.on('connect_error', () => { + setTimeout(() => { + socket.connect(); + }, 1000); +}); + +// React context for socket +const SocketContext = createContext({ + onSocketEvent: () => {}, + emitSocketEvent: () => {}, +}); + +function SocketProvider({ children }) { + const onSocketEvent = (event, callback) => { + if (socket.connected) { + socket.on(event, () => { + socket.off(event); + callback(); + }); + } + }; + + const emitSocketEvent = (event, args = {}, callback = () => {}) => { + if (socket.connected) { + socket.emit(event, args, () => { + console.log('Successfully emitted an event named -', event); + callback(); + }); + } + }; + + const value = useMemo(() => ( + { + onSocketEvent, + emitSocketEvent, + } + ), []); + + return ( + + {children} + + ); +} + +const useWebSocket = () => useContext(SocketContext); + +export { + useWebSocket, + SocketProvider, +}; diff --git a/src/main.js b/src/main.js index ab4fade78..e91580151 100644 --- a/src/main.js +++ b/src/main.js @@ -4,10 +4,12 @@ import { registerRootComponent } from 'expo'; import Constants from 'expo-constants'; import { Platform } from 'react-native'; import * as Sentry from 'sentry-expo'; +import { MonitoringProvider } from '@monkvision/corejs'; + import { name, version } from '@package/json'; import App from 'components/App'; +import { SocketProvider } from './context/socket'; import './i18n'; -import { MonitoringProvider } from '@monkvision/corejs'; const config = { dsn: Constants.manifest.extra.SENTRY_DSN, @@ -20,7 +22,14 @@ const config = { if (Platform.OS === 'web') { const container = document.getElementById('root'); - render(, container); + render( + + + + + , + container, + ); } else { registerRootComponent(Sentry.Native.wrap(App)); } From f15dd9f2981ef403c0664df1a0417b709ad9991a Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 17:01:21 +0530 Subject: [PATCH 03/18] implement listening to socket event to get an update from server if pdf_url is ready --- src/screens/Landing/useGetPdfReport/index.js | 33 +++++++++++++++----- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/src/screens/Landing/useGetPdfReport/index.js b/src/screens/Landing/useGetPdfReport/index.js index 7c4643a05..8a9e61799 100644 --- a/src/screens/Landing/useGetPdfReport/index.js +++ b/src/screens/Landing/useGetPdfReport/index.js @@ -5,6 +5,8 @@ import { useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Platform } from 'react-native'; +import { useWebSocket } from '../../../context/socket'; + const webDownload = (url, inspectionId) => { const link = document.createElement('a'); link.href = url; @@ -28,6 +30,7 @@ export default function useGetPdfReport(inspectionId, onError) { const [reportUrl, setReportUrl] = useState(null); const [loading, setLoading] = useState(false); const { i18n } = useTranslation(); + const { onSocketEvent, emitSocketEvent } = useWebSocket(); const requestPdfPayload = useMemo(() => ({ pricing: false, @@ -56,16 +59,13 @@ export default function useGetPdfReport(inspectionId, onError) { async () => { setLoading(true); await requestPdfReport(); - let done = false; - while (!done) { + // Send/Listen an event from server + emitSocketEvent('get_inspection_pdf_url', { inspectionId }); + onSocketEvent('ready_inspection_pdf_url', async () => { try { - // eslint-disable-next-line no-await-in-loop - await timeout(2000); - // eslint-disable-next-line no-await-in-loop const res = await getPdfUrl(); if (res.axiosResponse?.data?.pdfUrl) { setReportUrl(res.axiosResponse.data.pdfUrl); - done = true; setLoading(false); } } catch (err) { @@ -74,7 +74,26 @@ export default function useGetPdfReport(inspectionId, onError) { if (onError) { onError(err); } } } - } + }); + // let done = false; + // while (!done) { + // try { + // // eslint-disable-next-line no-await-in-loop + // await timeout(2000); + // // eslint-disable-next-line no-await-in-loop + // const res = await getPdfUrl(); + // if (res.axiosResponse?.data?.pdfUrl) { + // setReportUrl(res.axiosResponse.data.pdfUrl); + // done = true; + // setLoading(false); + // } + // } catch (err) { + // if (err.status !== 422) { + // console.error('Error while trying to fetch the pdf url :', err); + // if (onError) { onError(err); } + // } + // } + // } }, [inspectionId, requestPdfReport, getPdfUrl, setReportUrl, setLoading], ); From d8465136f6f2ab9b4c52d06b2565560170ab8e2c Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 17:03:57 +0530 Subject: [PATCH 04/18] implement listening to socket event to get an update from server if pdf_url is ready --- src/screens/Landing/useGetPdfReport/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/Landing/useGetPdfReport/index.js b/src/screens/Landing/useGetPdfReport/index.js index 8a9e61799..9ee985cca 100644 --- a/src/screens/Landing/useGetPdfReport/index.js +++ b/src/screens/Landing/useGetPdfReport/index.js @@ -58,9 +58,7 @@ export default function useGetPdfReport(inspectionId, onError) { const preparePdf = useCallback( async () => { setLoading(true); - await requestPdfReport(); // Send/Listen an event from server - emitSocketEvent('get_inspection_pdf_url', { inspectionId }); onSocketEvent('ready_inspection_pdf_url', async () => { try { const res = await getPdfUrl(); @@ -75,6 +73,8 @@ export default function useGetPdfReport(inspectionId, onError) { } } }); + // api call for pdf report + await requestPdfReport(); // let done = false; // while (!done) { // try { From 6ff123d805594cf62e9dc102320080c3812b51cb Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 21:23:26 +0530 Subject: [PATCH 05/18] Refactor code in React context API for web-socket set up --- src/context/socket.js | 54 ++++++++++++++++++++++++++----------------- 1 file changed, 33 insertions(+), 21 deletions(-) diff --git a/src/context/socket.js b/src/context/socket.js index 82547b083..c93520de0 100644 --- a/src/context/socket.js +++ b/src/context/socket.js @@ -1,55 +1,67 @@ -import React, { createContext, useContext, useMemo } from 'react'; +import React, { createContext, useContext, useCallback, useMemo, useState, useEffect } from 'react'; import { io } from 'socket.io-client'; /** - * Creates a socket.io client that connects to the server. Replace url with your server URL + * Creates a socket.io client that connects to the server * Make sure to enable Cross-Origin Resource Sharing (CORS) on the server * The options parameter is optional and can be used to configure the connection */ -const socket = io('http://localhost:3000', {}); -socket.on('connect', () => { - console.log('Socket connected', socket.id); -}); -socket.on('disconnect', (reason) => { - console.log('Socket disconnected due to', reason); -}); -socket.on('connect_error', () => { - setTimeout(() => { - socket.connect(); - }, 1000); -}); +const socket = io('http://localhost:5000', {}); // Replace url with your server URL -// React context for socket +// React context for web socket data const SocketContext = createContext({ onSocketEvent: () => {}, emitSocketEvent: () => {}, }); function SocketProvider({ children }) { - const onSocketEvent = (event, callback) => { + const [socketID, setSocketID] = useState(''); + + const onSocketEvent = useCallback((event, callback) => { if (socket.connected) { socket.on(event, () => { socket.off(event); callback(); }); } - }; + }, []); - const emitSocketEvent = (event, args = {}, callback = () => {}) => { + const emitSocketEvent = useCallback((event, args = {}, callback = () => {}) => { if (socket.connected) { socket.emit(event, args, () => { - console.log('Successfully emitted an event named -', event); + console.log('[Socket] - emit event', event); callback(); }); } - }; + }, []); + + useEffect(() => { + socket.on('connect', () => { + console.log('[Socket] - connected', socket); + console.log('[Socket] - socket id', socket.id); + setSocketID(socket.id); + socket.on('post_inspection', (data) => { + console.log('[Socket] - listen post_inspection event from server', data); + }); + }); + socket.on('disconnect', (reason) => { + console.log('[Socket] - disconnected due to', reason); + }); + socket.on('connect_error', () => { + console.log('[Socket] - has a connection error'); + setTimeout(() => { + socket.connect(); + }, 1000); + }); + }, []); const value = useMemo(() => ( { + socketID, onSocketEvent, emitSocketEvent, } - ), []); + ), [socketID]); return ( From 494d2bd3bddc5ea32e58a3a488d8d6e1ccb8c61c Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 21:25:12 +0530 Subject: [PATCH 06/18] pass socketID in request payload when creating a new inspection to store it in database --- src/screens/InspectionCreate/index.js | 4 +++- src/screens/InspectionCreate/useCreateInspection/index.js | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/screens/InspectionCreate/index.js b/src/screens/InspectionCreate/index.js index 644d78f3f..6e58d1d62 100644 --- a/src/screens/InspectionCreate/index.js +++ b/src/screens/InspectionCreate/index.js @@ -15,6 +15,7 @@ import * as names from 'screens/names'; import useAuth from 'hooks/useAuth'; import useSignIn from 'hooks/useSignIn'; import useCreateInspection from './useCreateInspection'; +import { useWebSocket } from '../../context/socket'; const styles = StyleSheet.create({ root: { @@ -43,6 +44,7 @@ export default function InspectionCreate() { const { errorHandler } = useMonitoring(); const { t } = useTranslation(); const { colors, loaderDotsColors } = useTheme(); + const { socketID } = useWebSocket(); const route = useRoute(); @@ -63,7 +65,7 @@ export default function InspectionCreate() { }, }); - const createInspection = useCreateInspection({ ...vehicle, vin }); + const createInspection = useCreateInspection({ ...vehicle, vin, socketID }); const handleCreate = useCallback(async () => { if (isEmpty(inspectionId) && isAuthenticated && createInspection.state.count < 1) { utils.log(['[Click] Inspection task chosen: ', selected]); diff --git a/src/screens/InspectionCreate/useCreateInspection/index.js b/src/screens/InspectionCreate/useCreateInspection/index.js index 3723d6f11..70f5296d4 100644 --- a/src/screens/InspectionCreate/useCreateInspection/index.js +++ b/src/screens/InspectionCreate/useCreateInspection/index.js @@ -10,7 +10,10 @@ export default function useCreateInspection(vehicle) { const [inspectionId, setInspectionId] = useState(); const axiosRequest = useCallback(async () => { - const taskOptions = { status: monk.types.ProgressStatusUpdate.NOT_STARTED }; + const taskOptions = { + status: monk.types.ProgressStatusUpdate.NOT_STARTED, + web_socket_session_id: vehicle.socketID || null, + }; const tasks = { wheelAnalysis: { ...taskOptions, useLongshots: true }, damageDetection: taskOptions, From 289945a51d505dfcc70e027f0d28ce4616fadbec Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 21:26:40 +0530 Subject: [PATCH 07/18] listen ready_inspection_pdf_url event sent from server to get a notification when PDF file url is available --- src/screens/Landing/useGetPdfReport/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/Landing/useGetPdfReport/index.js b/src/screens/Landing/useGetPdfReport/index.js index 9ee985cca..5f3db9239 100644 --- a/src/screens/Landing/useGetPdfReport/index.js +++ b/src/screens/Landing/useGetPdfReport/index.js @@ -30,7 +30,7 @@ export default function useGetPdfReport(inspectionId, onError) { const [reportUrl, setReportUrl] = useState(null); const [loading, setLoading] = useState(false); const { i18n } = useTranslation(); - const { onSocketEvent, emitSocketEvent } = useWebSocket(); + const { onSocketEvent } = useWebSocket(); const requestPdfPayload = useMemo(() => ({ pricing: false, From ad567933468710504975d3a1628661fe63de2bcd Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 21:28:11 +0530 Subject: [PATCH 08/18] change local env configuration and point to local env when running app in localhost --- app.config.js | 2 +- eas.json | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app.config.js b/app.config.js index 554ab17fb..75248d028 100644 --- a/app.config.js +++ b/app.config.js @@ -280,6 +280,6 @@ export default { palette, }, ...app, - ...eas.build.development.env, + ...eas.build.local.env, }, }; diff --git a/eas.json b/eas.json index 8c015d7c8..c130af1f3 100644 --- a/eas.json +++ b/eas.json @@ -64,10 +64,10 @@ "distribution": "internal", "env": { "ENV": "local", - "IRA_DOMAIN": "localhost:3000", - "API_DOMAIN": "api.dev.monk.ai/v1", + "IRA_DOMAIN": "localhost:5000", + "API_DOMAIN": "localhost:5000/v1", "AUTH_AUDIENCE": "https://api.monk.ai/v1/", - "AUTH_CLIENT_ID": "ZH7GK6zgjyVDiHN0A6kY98PBWVeJfKvX", + "AUTH_CLIENT_ID": "WMx8ejAeCbtWN4i5woxEV45AZhWRMMUZ", "AUTH_DOMAIN": "idp.dev.monk.ai", "SENTRY_DSN": "https://b883345bef184d588d038ed18a563170@sentry.dev.monk.ai/3", "PDF_REPORT_CUSTOMER": "monk_QSBtYXJ0aW5pLiBTaGFrZW4sIG5vdCBzdGlycmVkLgo=", From b4bd2fb487adb78b5d82d081a2ca681cd20ecda4 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 5 Apr 2023 21:32:50 +0530 Subject: [PATCH 09/18] set default value null to socketID --- src/context/socket.js | 3 ++- src/screens/InspectionCreate/useCreateInspection/index.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/context/socket.js b/src/context/socket.js index c93520de0..e9d4ce1ab 100644 --- a/src/context/socket.js +++ b/src/context/socket.js @@ -10,12 +10,13 @@ const socket = io('http://localhost:5000', {}); // Replace url with your server // React context for web socket data const SocketContext = createContext({ + socketID: null, onSocketEvent: () => {}, emitSocketEvent: () => {}, }); function SocketProvider({ children }) { - const [socketID, setSocketID] = useState(''); + const [socketID, setSocketID] = useState(null); const onSocketEvent = useCallback((event, callback) => { if (socket.connected) { diff --git a/src/screens/InspectionCreate/useCreateInspection/index.js b/src/screens/InspectionCreate/useCreateInspection/index.js index 70f5296d4..66becfcf7 100644 --- a/src/screens/InspectionCreate/useCreateInspection/index.js +++ b/src/screens/InspectionCreate/useCreateInspection/index.js @@ -12,7 +12,7 @@ export default function useCreateInspection(vehicle) { const axiosRequest = useCallback(async () => { const taskOptions = { status: monk.types.ProgressStatusUpdate.NOT_STARTED, - web_socket_session_id: vehicle.socketID || null, + web_socket_session_id: vehicle.socketID, }; const tasks = { wheelAnalysis: { ...taskOptions, useLongshots: true }, From 175729da2ce1c8140969505c0e97e90d61f7a2f3 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Thu, 6 Apr 2023 17:43:47 +0530 Subject: [PATCH 10/18] fix an issue as socket_id field isn't in schema --- src/screens/InspectionCreate/useCreateInspection/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/InspectionCreate/useCreateInspection/index.js b/src/screens/InspectionCreate/useCreateInspection/index.js index 66becfcf7..41d59ba2f 100644 --- a/src/screens/InspectionCreate/useCreateInspection/index.js +++ b/src/screens/InspectionCreate/useCreateInspection/index.js @@ -4,7 +4,7 @@ import useAuth from 'hooks/useAuth'; import { useCallback, useState } from 'react'; import { useDispatch } from 'react-redux'; -export default function useCreateInspection(vehicle) { +export default function useCreateInspection({ socketID, ...vehicle }) { const dispatch = useDispatch(); const { isAuthenticated } = useAuth(); const [inspectionId, setInspectionId] = useState(); From 5ecf02a3b468fbb38bf8f97033a3ad602a903d37 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Thu, 6 Apr 2023 18:57:41 +0530 Subject: [PATCH 11/18] change environment configuration to log in the app and point to local running server service --- eas.json | 2 +- src/config/corejs.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/eas.json b/eas.json index c130af1f3..33641b005 100644 --- a/eas.json +++ b/eas.json @@ -67,7 +67,7 @@ "IRA_DOMAIN": "localhost:5000", "API_DOMAIN": "localhost:5000/v1", "AUTH_AUDIENCE": "https://api.monk.ai/v1/", - "AUTH_CLIENT_ID": "WMx8ejAeCbtWN4i5woxEV45AZhWRMMUZ", + "AUTH_CLIENT_ID": "rq1PDCY20CYLlW0TqDUH8zAvSjyscUjf", "AUTH_DOMAIN": "idp.dev.monk.ai", "SENTRY_DSN": "https://b883345bef184d588d038ed18a563170@sentry.dev.monk.ai/3", "PDF_REPORT_CUSTOMER": "monk_QSBtYXJ0aW5pLiBTaGFrZW4sIG5vdCBzdGlycmVkLgo=", diff --git a/src/config/corejs.js b/src/config/corejs.js index b1d0ca503..bf5eb58fd 100644 --- a/src/config/corejs.js +++ b/src/config/corejs.js @@ -2,7 +2,7 @@ import Constants from 'expo-constants'; import monk from '@monkvision/corejs'; const axiosConfig = { - baseURL: `https://${Constants.manifest.extra.API_DOMAIN}`, + baseURL: `http://${Constants.manifest.extra.API_DOMAIN}`, headers: { 'Access-Control-Allow-Origin': '*' }, }; From b1da4c4a0761801899f311fdf6b16a7944d2afd0 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Thu, 6 Apr 2023 18:59:33 +0530 Subject: [PATCH 12/18] make the change in the request payload to send the socket_id while creating a new inspection --- src/screens/InspectionCreate/useCreateInspection/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/InspectionCreate/useCreateInspection/index.js b/src/screens/InspectionCreate/useCreateInspection/index.js index 41d59ba2f..41c9fecad 100644 --- a/src/screens/InspectionCreate/useCreateInspection/index.js +++ b/src/screens/InspectionCreate/useCreateInspection/index.js @@ -12,7 +12,6 @@ export default function useCreateInspection({ socketID, ...vehicle }) { const axiosRequest = useCallback(async () => { const taskOptions = { status: monk.types.ProgressStatusUpdate.NOT_STARTED, - web_socket_session_id: vehicle.socketID, }; const tasks = { wheelAnalysis: { ...taskOptions, useLongshots: true }, @@ -20,7 +19,7 @@ export default function useCreateInspection({ socketID, ...vehicle }) { ...(vehicle?.vin ? {} : { imagesOcr: taskOptions }), }; - return monk.entity.inspection.createOne({ tasks, vehicle }); + return monk.entity.inspection.createOne({ tasks, vehicle, websocket_id: socketID }); }, []); const handleRequestSuccess = useCallback(({ entities, result }) => { From eee042ba84a7c8bce133f160aa6e431fe5e37e40 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Fri, 7 Apr 2023 13:54:53 +0530 Subject: [PATCH 13/18] listen server events to get an updated status for each task and then take a call to update the UI by making an API call --- src/screens/Landing/index.js | 29 ++++++++++++++------ src/screens/Landing/useGetPdfReport/index.js | 19 ------------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/screens/Landing/index.js b/src/screens/Landing/index.js index 0b9344076..241be46a1 100644 --- a/src/screens/Landing/index.js +++ b/src/screens/Landing/index.js @@ -1,8 +1,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import monk, { useMonitoring } from '@monkvision/corejs'; -import { useInterval, utils } from '@monkvision/toolkit'; +import { utils } from '@monkvision/toolkit'; import { Container } from '@monkvision/ui'; -import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native'; +import { useNavigation, useRoute } from '@react-navigation/native'; import Inspection from 'components/Inspection'; import Modal from 'components/Modal'; import ExpoConstants from 'expo-constants'; @@ -27,6 +27,7 @@ import useUpdateOneTask from './useUpdateOneTask'; import useVinModal from './useVinModal'; import VehicleType from './VehicleType'; import useUpdateInspectionVehicle from './useUpdateInspectionVehicle'; +import { useWebSocket } from '../../context/socket'; const ICON_BY_STATUS = { NOT_STARTED: 'chevron-right', @@ -42,6 +43,7 @@ export default function Landing() { const { errorHandler } = useMonitoring(); const { t, i18n } = useTranslation(); const { setShowTranslatedMessage, Notice } = useSnackbar(true); + const { onSocketEvent } = useWebSocket(); const [vehicleType, setVehicleType] = useState(''); const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }); @@ -172,14 +174,23 @@ export default function Landing() { errorHandler(err); }); } - }, [inspectionId, getInspection]); + }, [inspectionId]); - const intervalId = useInterval(start, 1000); - - useFocusEffect(useCallback(() => { - start(); - return () => clearInterval(intervalId); - }, [navigation, start, intervalId])); + useEffect(() => { + console.log('[Landing page] - [Use Effect]'); + onSocketEvent('task_progress_update', (data) => { + console.log('[Socket] - [task_progress_update]', data); + if (data.inspection_id === inspectionId) { + console.log('[Socket] - [task_progress_update]', data.progress); + } + }); + onSocketEvent('update_task_status', (data) => { + console.log('[Socket] - [update_task_status]', data); + if (data.inspection_id === inspectionId) { + start(); + } + }); + }, []); useEffect(() => { if (inspectionId && !allTasksAreCompleted) { diff --git a/src/screens/Landing/useGetPdfReport/index.js b/src/screens/Landing/useGetPdfReport/index.js index 5f3db9239..8a1b64d51 100644 --- a/src/screens/Landing/useGetPdfReport/index.js +++ b/src/screens/Landing/useGetPdfReport/index.js @@ -75,25 +75,6 @@ export default function useGetPdfReport(inspectionId, onError) { }); // api call for pdf report await requestPdfReport(); - // let done = false; - // while (!done) { - // try { - // // eslint-disable-next-line no-await-in-loop - // await timeout(2000); - // // eslint-disable-next-line no-await-in-loop - // const res = await getPdfUrl(); - // if (res.axiosResponse?.data?.pdfUrl) { - // setReportUrl(res.axiosResponse.data.pdfUrl); - // done = true; - // setLoading(false); - // } - // } catch (err) { - // if (err.status !== 422) { - // console.error('Error while trying to fetch the pdf url :', err); - // if (onError) { onError(err); } - // } - // } - // } }, [inspectionId, requestPdfReport, getPdfUrl, setReportUrl, setLoading], ); From 173f636dd7b16642956a5b6771dbc7c0433634bc Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Fri, 7 Apr 2023 14:10:40 +0530 Subject: [PATCH 14/18] fix an issue to pass the event data to callback function when listen from server --- src/context/socket.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/context/socket.js b/src/context/socket.js index e9d4ce1ab..5c8d54641 100644 --- a/src/context/socket.js +++ b/src/context/socket.js @@ -20,9 +20,9 @@ function SocketProvider({ children }) { const onSocketEvent = useCallback((event, callback) => { if (socket.connected) { - socket.on(event, () => { + socket.on(event, (data) => { socket.off(event); - callback(); + callback(data); }); } }, []); From b9d1404a2faca7f5d22e2b9e65ea0f9280c4b73d Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Fri, 7 Apr 2023 14:45:59 +0530 Subject: [PATCH 15/18] made a fix to listen server event for each task update when starting that specific task --- src/context/socket.js | 6 +++-- src/screens/Landing/index.js | 52 +++++++++++++++++++++--------------- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/context/socket.js b/src/context/socket.js index 5c8d54641..9b36e7f5b 100644 --- a/src/context/socket.js +++ b/src/context/socket.js @@ -18,10 +18,12 @@ const SocketContext = createContext({ function SocketProvider({ children }) { const [socketID, setSocketID] = useState(null); - const onSocketEvent = useCallback((event, callback) => { + const onSocketEvent = useCallback((event, callback, off = true) => { if (socket.connected) { socket.on(event, (data) => { - socket.off(event); + if (off) { + socket.off(event); + } callback(data); }); } diff --git a/src/screens/Landing/index.js b/src/screens/Landing/index.js index 241be46a1..26c80e571 100644 --- a/src/screens/Landing/index.js +++ b/src/screens/Landing/index.js @@ -95,6 +95,14 @@ export default function Landing() { } }, [inspection?.vehicle?.vin, inspection?.tasks]); + const start = useCallback(() => { + if (inspectionId && getInspection.state.loading !== true) { + getInspection.start().catch((err) => { + errorHandler(err); + }); + } + }, [inspectionId]); + const handleReset = useCallback(() => { utils.log(['[Click] Resetting the inspection: ', inspectionId]); // TODO: Add Monitoring code for setTag in MN-182 @@ -108,8 +116,17 @@ export default function Landing() { const shouldSignIn = !isAuthenticated; const to = shouldSignIn ? names.SIGN_IN : names.INSPECTION_CREATE; + // Listen websocket server event to get the updated status for task + onSocketEvent('update_task_status', (data) => { + console.log('[Socket] - [update_task_status]', data); + console.log('[Socket] - [update_task_status]', inspectionId); + if (data.inspection_id === inspectionId) { + console.log('[Socket] - [update_task_status] in the if!'); + start(); + } + }); navigation.navigate(to, { selectedMod: value, inspectionId, vehicle: { vehicleType } }); - }, [inspectionId, navigation, isAuthenticated, vehicleType]); + }, [inspectionId, navigation, isAuthenticated, vehicleType, start]); const renderListItem = useCallback(({ item, index }) => { const { title, icon, value, description } = item; @@ -168,29 +185,20 @@ export default function Landing() { ); }, [handleListItemPress, inspection]); - const start = useCallback(() => { - if (inspectionId && getInspection.state.loading !== true) { - getInspection.start().catch((err) => { - errorHandler(err); - }); - } - }, [inspectionId]); - useEffect(() => { console.log('[Landing page] - [Use Effect]'); - onSocketEvent('task_progress_update', (data) => { - console.log('[Socket] - [task_progress_update]', data); - if (data.inspection_id === inspectionId) { - console.log('[Socket] - [task_progress_update]', data.progress); - } - }); - onSocketEvent('update_task_status', (data) => { - console.log('[Socket] - [update_task_status]', data); - if (data.inspection_id === inspectionId) { - start(); - } - }); - }, []); + if (inspectionId) { + // Listen websocket server event to get the updated progress for damage_detection task + onSocketEvent('task_progress_update', (data) => { + console.log('[Socket] - [task_progress_update]', data); + console.log('[Socket] - [task_progress_update]', inspectionId); + if (data.inspection_id === inspectionId) { + console.log('[Socket] - [task_progress_update] in the if!'); + console.log('[Socket] - [task_progress_update]', data.progress); + } + }, false); + } + }, [inspectionId]); useEffect(() => { if (inspectionId && !allTasksAreCompleted) { From 9dd0b4b845701d2b13cdbb866876809e675ec984 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Fri, 7 Apr 2023 14:53:16 +0530 Subject: [PATCH 16/18] fix an issue as client was not listening to server event --- src/screens/Landing/index.js | 38 ++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/screens/Landing/index.js b/src/screens/Landing/index.js index 26c80e571..c1c8528d6 100644 --- a/src/screens/Landing/index.js +++ b/src/screens/Landing/index.js @@ -95,14 +95,6 @@ export default function Landing() { } }, [inspection?.vehicle?.vin, inspection?.tasks]); - const start = useCallback(() => { - if (inspectionId && getInspection.state.loading !== true) { - getInspection.start().catch((err) => { - errorHandler(err); - }); - } - }, [inspectionId]); - const handleReset = useCallback(() => { utils.log(['[Click] Resetting the inspection: ', inspectionId]); // TODO: Add Monitoring code for setTag in MN-182 @@ -113,20 +105,10 @@ export default function Landing() { const isVin = value === 'vinNumber'; const vinOption = ExpoConstants.manifest.extra.options.find((option) => option.value === 'vinNumber'); if (isVin && vinOption?.mode.includes('manually')) { vinOptionsRef.current?.open(); return; } - const shouldSignIn = !isAuthenticated; const to = shouldSignIn ? names.SIGN_IN : names.INSPECTION_CREATE; - // Listen websocket server event to get the updated status for task - onSocketEvent('update_task_status', (data) => { - console.log('[Socket] - [update_task_status]', data); - console.log('[Socket] - [update_task_status]', inspectionId); - if (data.inspection_id === inspectionId) { - console.log('[Socket] - [update_task_status] in the if!'); - start(); - } - }); navigation.navigate(to, { selectedMod: value, inspectionId, vehicle: { vehicleType } }); - }, [inspectionId, navigation, isAuthenticated, vehicleType, start]); + }, [inspectionId, navigation, isAuthenticated, vehicleType]); const renderListItem = useCallback(({ item, index }) => { const { title, icon, value, description } = item; @@ -185,6 +167,14 @@ export default function Landing() { ); }, [handleListItemPress, inspection]); + const start = useCallback(() => { + if (inspectionId && getInspection.state.loading !== true) { + getInspection.start().catch((err) => { + errorHandler(err); + }); + } + }, [inspectionId]); + useEffect(() => { console.log('[Landing page] - [Use Effect]'); if (inspectionId) { @@ -197,6 +187,16 @@ export default function Landing() { console.log('[Socket] - [task_progress_update]', data.progress); } }, false); + + // Listen websocket server event to get the updated status for each task + onSocketEvent('update_task_status', (data) => { + console.log('[Socket] - [update_task_status]', data); + console.log('[Socket] - [update_task_status]', inspectionId); + if (data.inspection_id === inspectionId) { + console.log('[Socket] - [update_task_status] in the if!'); + start(); + } + }, false); } }, [inspectionId]); From 46605def56aa1d4a577e6dee792c5bf85d10cfe6 Mon Sep 17 00:00:00 2001 From: deepakglobant Date: Mon, 10 Apr 2023 14:35:52 +0530 Subject: [PATCH 17/18] feat: add progress bar --- src/screens/Landing/index.js | 7 ++++++- src/screens/Landing/styles.js | 5 +++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/screens/Landing/index.js b/src/screens/Landing/index.js index c1c8528d6..e006dc26e 100644 --- a/src/screens/Landing/index.js +++ b/src/screens/Landing/index.js @@ -46,6 +46,7 @@ export default function Landing() { const { onSocketEvent } = useWebSocket(); const [vehicleType, setVehicleType] = useState(''); + const [currentPercentage, setCurrentPercentage] = useState(0); const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }); const route = useRoute(); @@ -163,9 +164,12 @@ export default function Landing() { onPress={handlePress} disabled={disabled} /> + { + item.taskName === 'damage_detection' && + } ); - }, [handleListItemPress, inspection]); + }, [handleListItemPress, currentPercentage, inspection]); const start = useCallback(() => { if (inspectionId && getInspection.state.loading !== true) { @@ -185,6 +189,7 @@ export default function Landing() { if (data.inspection_id === inspectionId) { console.log('[Socket] - [task_progress_update] in the if!'); console.log('[Socket] - [task_progress_update]', data.progress); + setCurrentPercentage(parseFloat(data.progress) * 100); } }, false); diff --git a/src/screens/Landing/styles.js b/src/screens/Landing/styles.js index bffa36c0e..a379d5db4 100644 --- a/src/screens/Landing/styles.js +++ b/src/screens/Landing/styles.js @@ -97,4 +97,9 @@ export default StyleSheet.create({ textAlignRight: { alignItems: 'flex-end', }, + progress: { + backgroundColor: '#305ebf', + height: 3, + transition: 'width ease .4s', + }, }); From 1bd4f6d07980f0e2add0573c5b33fbadb39a358f Mon Sep 17 00:00:00 2001 From: Julien Oiknine Date: Wed, 12 Apr 2023 06:57:08 +0000 Subject: [PATCH 18/18] Filtering `damage_detection` updates --- src/screens/Landing/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/screens/Landing/index.js b/src/screens/Landing/index.js index e006dc26e..925d98ecd 100644 --- a/src/screens/Landing/index.js +++ b/src/screens/Landing/index.js @@ -43,7 +43,7 @@ export default function Landing() { const { errorHandler } = useMonitoring(); const { t, i18n } = useTranslation(); const { setShowTranslatedMessage, Notice } = useSnackbar(true); - const { onSocketEvent } = useWebSocket(); + const { onSocketEvent, emitSocketEvent } = useWebSocket(); const [vehicleType, setVehicleType] = useState(''); const [currentPercentage, setCurrentPercentage] = useState(0); @@ -183,10 +183,11 @@ export default function Landing() { console.log('[Landing page] - [Use Effect]'); if (inspectionId) { // Listen websocket server event to get the updated progress for damage_detection task + emitSocketEvent('join', {"room": inspectionId}) onSocketEvent('task_progress_update', (data) => { console.log('[Socket] - [task_progress_update]', data); console.log('[Socket] - [task_progress_update]', inspectionId); - if (data.inspection_id === inspectionId) { + if (data.task_name === 'damage_detection') { console.log('[Socket] - [task_progress_update] in the if!'); console.log('[Socket] - [task_progress_update]', data.progress); setCurrentPercentage(parseFloat(data.progress) * 100);