diff --git a/src/components/Cars/CANSignals/index.jsx b/src/components/Cars/CANSignals/index.jsx index 37febbc..5832b99 100644 --- a/src/components/Cars/CANSignals/index.jsx +++ b/src/components/Cars/CANSignals/index.jsx @@ -13,7 +13,7 @@ import { } from "../../Contexts/CANSignalsContext"; const Main = ({ vin }) => { - const { signals, setVIN } = useCANSignalContext(); + const { signals, setVIN, duration } = useCANSignalContext(); useEffect(() => { setVIN(vin); @@ -26,24 +26,27 @@ const Main = ({ vin }) => { if (!signals || signals.length === 0) return

Loading...

; return ( - - - - Timestamp - Signal - Value - - - - {signals.map((signal, i) => ( - - {signal.timestamp} - {signal.signal} - {signal.value} + <> + (Received within the last {duration} seconds) +
+ + + Timestamp + Signal + Value - ))} - -
+ + + {signals.map((signal, i) => ( + + {signal.timestamp} + {signal.signal} + {signal.value} + + ))} + + + ); }; diff --git a/src/components/Contexts/CANSignalsContext.jsx b/src/components/Contexts/CANSignalsContext.jsx index 30c49b8..4324b4c 100644 --- a/src/components/Contexts/CANSignalsContext.jsx +++ b/src/components/Contexts/CANSignalsContext.jsx @@ -1,8 +1,8 @@ -import React, {useContext, useState} from "react"; +import React, { useContext, useState } from "react"; import api from "../../services/vehiclesAPI"; import { LocalDateTimeString } from "../../utils/dates"; -import {useInterval} from "usehooks-ts"; +import { useInterval } from "usehooks-ts"; const CANSignalContext = React.createContext(); @@ -26,31 +26,44 @@ const transformSignals = (signals) => .flat(); export const CANSignalProvider = ({ token, children }) => { + // auto scale polling if not getting response + const durations = [10000, 30000, 60000, 120000]; + const delays = [500, 1500, 3000, 6000]; const [vin, setVIN] = useState(null); const [signals, setSignals] = useState([]); - const [delay, setDelay] = useState(500); + const [delayIndex, setDelayIndex] = useState(0); useInterval( () => { getCANSignals() - }, vin?delay:null + }, vin ? delays[delayIndex] : null ) const getCANSignals = async () => { try { if (!vin) return; - const result = await api.getCANSignals(vin, token); + const date = new Date(); + date.setUTCSeconds(date.getUTCSeconds() - durations[delayIndex]); + + const result = await api.getCANSignals(vin, { + after_utc: date, + }, token); if (result.error) throw new Error(`Get CAN signals error. ${result.message}`); const items = transformSignals(result.data); if (items.length > 0) { - setDelay(500); + setDelayIndex(0); setSignals(items); } else { - setDelay(1000); + setDelayIndex((index) => { + if (index < delays.length - 1) { + return index += 1; + } + return index; + }); setSignals([BlankSignal("No signals")]); } } catch (e) { @@ -61,6 +74,7 @@ export const CANSignalProvider = ({ token, children }) => { return ( - fetch(`${API_ENDPOINT}/cansignals/${vin}`, { + /** + * + * @param {String} vin The VIN of the car + * @param {Object} filter + * @param {Date} filter.after_utc Point in time to begin signal response + * @param {Integer} filter.limit Max number of CAN Signals to return + * @param {String} token + * @returns {Array} + */ + getCANSignals: async (vin, filter = {}, token) => { + if (filter.after_utc instanceof Date && !isNaN(filter.after_utc)) { + filter.after_utc = filter.after_utc.getTime(); + } + + const url = addQueryParams(`${API_ENDPOINT}/cansignals/${vin}`, filter); + console.log(url) + return fetch(url, { method: "GET", headers: Object.assign( { "Content-Type": "application/json" }, @@ -222,7 +237,8 @@ const vehiclesAPI = { ), }) .then(fetchRespHandler) - .catch(errorHandler), + .catch(errorHandler); + }, getTRexLogs: async (vin, date, offset, count, direction, token, controller) => fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}`, {