Hackathon/stop pressing f5

app.config.js

@@ -280,6 +280,6 @@ export default {
       palette,
     },
     ...app,
-    ...eas.build.development.env,
+    ...eas.build.local.env,
   },
 };

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": "rq1PDCY20CYLlW0TqDUH8zAvSjyscUjf",
         "AUTH_DOMAIN": "idp.dev.monk.ai",
         "SENTRY_DSN": "https://[email protected]/3",
         "PDF_REPORT_CUSTOMER": "monk_QSBtYXJ0aW5pLiBTaGFrZW4sIG5vdCBzdGlycmVkLgo=",

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",

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': '*' },
 };
 

src/context/socket.js

@@ -0,0 +1,81 @@
+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
+ * 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:5000', {}); // Replace url with your server URL
+
+// React context for web socket data
+const SocketContext = createContext({
+  socketID: null,
+  onSocketEvent: () => {},
+  emitSocketEvent: () => {},
+});
+
+function SocketProvider({ children }) {
+  const [socketID, setSocketID] = useState(null);
+
+  const onSocketEvent = useCallback((event, callback, off = true) => {
+    if (socket.connected) {
+      socket.on(event, (data) => {
+        if (off) {
+          socket.off(event);
+        }
+        callback(data);
+      });
+    }
+  }, []);
+
+  const emitSocketEvent = useCallback((event, args = {}, callback = () => {}) => {
+    if (socket.connected) {
+      socket.emit(event, args, () => {
+        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 (
+    <SocketContext.Provider value={value}>
+      {children}
+    </SocketContext.Provider>
+  );
+}
+
+const useWebSocket = () => useContext(SocketContext);
+
+export {
+  useWebSocket,
+  SocketProvider,
+};

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(<MonitoringProvider config={config}><App /></MonitoringProvider>, container);
+  render(
+    <MonitoringProvider config={config}>
+      <SocketProvider>
+        <App />
+      </SocketProvider>
+    </MonitoringProvider>,
+    container,
+  );
 } else {
   registerRootComponent(Sentry.Native.wrap(App));
 }

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]);

src/screens/InspectionCreate/useCreateInspection/index.js

@@ -4,20 +4,22 @@ 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();
 
   const axiosRequest = useCallback(async () => {
-    const taskOptions = { status: monk.types.ProgressStatusUpdate.NOT_STARTED };
+    const taskOptions = {
+      status: monk.types.ProgressStatusUpdate.NOT_STARTED,
+    };
     const tasks = {
       wheelAnalysis: { ...taskOptions, useLongshots: true },
       damageDetection: taskOptions,
       ...(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 }) => {

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,8 +43,10 @@ export default function Landing() {
   const { errorHandler } = useMonitoring();
   const { t, i18n } = useTranslation();
   const { setShowTranslatedMessage, Notice } = useSnackbar(true);
+  const { onSocketEvent, emitSocketEvent } = useWebSocket();
 
   const [vehicleType, setVehicleType] = useState('');
+  const [currentPercentage, setCurrentPercentage] = useState(0);
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });
 
   const route = useRoute();
@@ -103,7 +106,6 @@ 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;
     navigation.navigate(to, { selectedMod: value, inspectionId, vehicle: { vehicleType } });
@@ -162,24 +164,47 @@ export default function Landing() {
           onPress={handlePress}
           disabled={disabled}
         />
+        {
+          item.taskName === 'damage_detection' && <View style={[{ width: `${currentPercentage}%` }, styles.progress]} />
+        }
       </Surface>
     );
-  }, [handleListItemPress, inspection]);
+  }, [handleListItemPress, currentPercentage, inspection]);
 
   const start = useCallback(() => {
     if (inspectionId && getInspection.state.loading !== true) {
       getInspection.start().catch((err) => {
         errorHandler(err);
       });
     }
-  }, [inspectionId, getInspection]);
-
-  const intervalId = useInterval(start, 1000);
+  }, [inspectionId]);
 
-  useFocusEffect(useCallback(() => {
-    start();
-    return () => clearInterval(intervalId);
-  }, [navigation, start, intervalId]));
+  useEffect(() => {
+    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.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);
+        }
+      }, 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]);
 
   useEffect(() => {
     if (inspectionId && !allTasksAreCompleted) {

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',
+  },
 });

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 } = useWebSocket();
 
   const requestPdfPayload = useMemo(() => ({
     pricing: false,
@@ -55,17 +58,12 @@ export default function useGetPdfReport(inspectionId, onError) {
   const preparePdf = useCallback(
     async () => {
       setLoading(true);
-      await requestPdfReport();
-      let done = false;
-      while (!done) {
+      // Send/Listen an event from server
+      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 +72,9 @@ export default function useGetPdfReport(inspectionId, onError) {
             if (onError) { onError(err); }
           }
         }
-      }
+      });
+      // api call for pdf report
+      await requestPdfReport();
     },
     [inspectionId, requestPdfReport, getPdfUrl, setReportUrl, setLoading],
   );