@dronedeploy/rocos-js-sdk 1.0.0-alpha-2 → 2.6.1

package/demo/react/src/components/CommandForm.tsx

@@ -0,0 +1,98 @@
+import React, { ChangeEventHandler, useCallback, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { getCallsigns, isSDKCreated, getProjectId, getCommand } from '../selectors/sdkSelector'
+import { setCommand } from '../reducers/sdkReducer'
+import config from '../config.json'
+import { CommandBox } from './CommandBox'
+
+export const CommandForm = (): JSX.Element => {
+    const [radioData, setRadioData] = useState<string | undefined>()
+    const [commandId, setCommandId] = useState<string>(config.commandId)
+    const [parameters, setParameters] = useState<string>(config.commandParameters)
+    const sdkExists = useSelector(isSDKCreated)
+    const callsigns = useSelector(getCallsigns)
+    const projectId = useSelector(getProjectId)
+    const command = useSelector(getCommand)
+
+    const dispatch = useDispatch()
+
+    const sendCommandCall: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            if (callsigns) {
+                let selectedCallsign = ''
+                for (const callsign of callsigns) {
+                    if (radioData === undefined || radioData === callsign) {
+                        selectedCallsign = callsign
+                        break
+                    }
+                }
+
+                if (selectedCallsign && commandId && parameters && projectId) {
+                    dispatch(
+                        setCommand({
+                            projectId,
+                            callsign: selectedCallsign,
+                            commandId: commandId,
+                            parameters: parameters,
+                        })
+                    )
+                }
+            }
+        },
+        [callsigns, commandId, parameters, projectId, radioData, dispatch]
+    )
+
+    const handleRadioChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLInputElement
+        setRadioData(target.value)
+    }, [])
+
+    const handleCommandChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLInputElement
+        const value = target.value
+
+        setCommandId(value || '')
+    }, [])
+
+    const handleParametersChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLInputElement
+        const value = target.value
+
+        setParameters(value || '{}')
+    }, [])
+
+    if (!sdkExists || !callsigns) {
+        return <></>
+    }
+
+    return (
+        <div className="boxColumn">
+            <div className="box">
+                <div className="boxContent">
+                    <h3>Send Robot Command</h3>
+                    {callsigns.map((item, index) => (
+                        <label key={index}>
+                            <input
+                                value={item}
+                                type="radio"
+                                name="command-callsign"
+                                checked={radioData === undefined || radioData === item}
+                                onChange={handleRadioChange}
+                            />{' '}
+                            {item}
+                        </label>
+                    ))}
+                    <label>
+                        <input type="text" name="command" value={commandId} onChange={handleCommandChange} />
+                    </label>
+                    <label>
+                        <textarea name="parameters" value={parameters} onChange={handleParametersChange} />
+                    </label>
+                    <button onClick={sendCommandCall}>Send Command</button>
+                </div>
+            </div>
+            {command && <CommandBox commandParams={command} />}
+        </div>
+    )
+}

package/demo/react/src/components/RobotsForm.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { getRobotsFromState, isSDKCreated } from '../selectors/sdkSelector'
+import { getRobotsResponse, getTokenResponse } from '../actions/sdkActions'
+import { useInput } from '../hooks/useInput'
+import config from '../config.json'
+
+export const RobotsForm = (): JSX.Element => {
+    const { value: projectId, bind: bindProjectId } = useInput(config.projectId, 'Project ID')
+
+    const sdkExists = useSelector(isSDKCreated)
+    const robots = useSelector(getRobotsFromState)
+
+    const dispatch = useDispatch<any>()
+
+    const fetchRobots: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            if (projectId) {
+                dispatch(getRobotsResponse(projectId))
+                // This is not required by SDK, token management is automatic.
+                // Only reason we are ccalling a token here is to populate the UI.
+                dispatch(getTokenResponse())
+            }
+        },
+        [dispatch, projectId]
+    )
+
+    if (!sdkExists) {
+        return <></>
+    }
+
+    return (
+        <div className="boxColumn">
+            <div className="box">
+                <div className="boxContent">
+                    <h3>Request A List Of Robots</h3>
+                    <label>
+                        <input type="text" {...bindProjectId} />
+                    </label>
+                    <button onClick={fetchRobots}>Get All Robots</button>
+                </div>
+            </div>
+            {robots && (
+                <div className="box">
+                    <pre>{robots}</pre>
+                </div>
+            )}
+        </div>
+    )
+}

package/demo/react/src/components/SubscriptionBox.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { Subscription } from 'rxjs'
+import { IRocosTelemetryMessage } from '@team-rocos/rocos-js-sdk'
+import RocosSDKController from '../controllers/RocosSDKController'
+import { useDispatch } from 'react-redux'
+import { removeSubscription, SubscriptionPayload } from '../reducers/sdkReducer'
+
+type TSubscriptionParams = {
+    subscriptionParams: SubscriptionPayload
+}
+
+export const SubscriptionBox = ({ subscriptionParams }: TSubscriptionParams): JSX.Element => {
+    const [message, setMessage] = useState<IRocosTelemetryMessage | undefined>(undefined)
+
+    const dispatch = useDispatch()
+
+    useEffect(() => {
+        const rocosSdk = RocosSDKController.getInstance()
+        let subscription$: Subscription
+        if (rocosSdk) {
+            try {
+                const messageObservable = rocosSdk.getTelemetryService().subscribe(subscriptionParams.params)
+                subscription$ = messageObservable.subscribe((msg: IRocosTelemetryMessage) => {
+                    setMessage(msg)
+                })
+                // setSubscription$(subscription$)
+            } catch (e) {
+                console.log('error', e)
+            }
+        }
+        return () => {
+            // the unsubscribe action happens when the component gets unmounted
+            subscription$?.unsubscribe()
+        }
+    }, [subscriptionParams])
+
+    const unsubscribe: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            dispatch(removeSubscription(subscriptionParams.id))
+            // subscription$?.unsubscribe()
+            // setSubscription$(undefined)
+        },
+        [dispatch, subscriptionParams]
+    )
+
+    return (
+        <div className="box">
+            <pre>{JSON.stringify(message, null, 2)}</pre>
+            <div className="boxContent">
+                <button onClick={unsubscribe}>Unsubscribe</button>
+            </div>
+        </div>
+    )
+}

package/demo/react/src/components/TelemetryForm.tsx

@@ -0,0 +1,98 @@
+import React, { ChangeEventHandler, useCallback, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { getCallsigns, isSDKCreated, getProjectId, getSubscriptions } from '../selectors/sdkSelector'
+import { SubscriptionBox } from './SubscriptionBox'
+import { addSubscription } from '../reducers/sdkReducer'
+import { v4 as uuid4 } from 'uuid'
+import config from '../config.json'
+
+export const TelemetryForm = (): JSX.Element => {
+    const [checkboxData, setCheckboxData] = useState<Record<string, boolean | string>>({})
+    const [sources, setSources] = useState<string[]>(config.telemetrySources)
+    const sdkExists = useSelector(isSDKCreated)
+    const callsigns = useSelector(getCallsigns)
+    const projectId = useSelector(getProjectId)
+    const subscriptions2 = useSelector(getSubscriptions)
+
+    const dispatch = useDispatch()
+
+    const subscribeToTelemetry: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            if (callsigns) {
+                const newCallsigns = []
+                for (const callsign of callsigns) {
+                    if (checkboxData[callsign] === undefined || checkboxData[callsign]) {
+                        newCallsigns.push(callsign)
+                    }
+                }
+
+                if (newCallsigns.length && sources.length && projectId) {
+                    dispatch(
+                        addSubscription({
+                            id: uuid4(),
+                            params: {
+                                projectId: projectId,
+                                sources: sources,
+                                callsigns: newCallsigns,
+                            },
+                        })
+                    )
+                }
+            }
+        },
+        [callsigns, sources, projectId, checkboxData, dispatch]
+    )
+
+    const handleCheckboxChange: ChangeEventHandler = useCallback(
+        (evt) => {
+            const target = evt.target as HTMLInputElement
+            const value = target.type === 'checkbox' ? target.checked : target.value
+            const name = target.name
+
+            const data = { ...checkboxData, [name]: value }
+            setCheckboxData(data)
+        },
+        [checkboxData]
+    )
+
+    const handleSourceChange: ChangeEventHandler = useCallback((evt) => {
+        const target = evt.target as HTMLInputElement
+        const value = target.value
+
+        const data = value ? value.split(',') : []
+        setSources(data)
+    }, [])
+
+    if (!sdkExists || !callsigns) {
+        return <></>
+    }
+
+    return (
+        <div className="boxColumn">
+            <div className="box">
+                <div className="boxContent">
+                    <h3>Subscribe To Telemetry</h3>
+                    {callsigns.map((item, index) => (
+                        <label key={index}>
+                            <input
+                                name={item}
+                                type="checkbox"
+                                checked={checkboxData?.[item] === undefined ? true : (checkboxData[item] as boolean)}
+                                onChange={handleCheckboxChange}
+                            />{' '}
+                            {item}
+                        </label>
+                    ))}
+                    <label>
+                        <textarea name="source" value={sources.join(',')} onChange={handleSourceChange} />
+                    </label>
+                    <button onClick={subscribeToTelemetry}>Subscribe</button>
+                </div>
+            </div>
+            {subscriptions2.map((item) => (
+                <SubscriptionBox key={item.id} subscriptionParams={item} />
+            ))}
+        </div>
+    )
+}

package/demo/react/src/components/TokenForm.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { isSDKCreated, getTokenFromState } from '../selectors/sdkSelector'
+import { getTokenResponse } from '../actions/sdkActions'
+
+export const TokenForm = (): JSX.Element => {
+    const sdkExists = useSelector(isSDKCreated)
+    const token = useSelector(getTokenFromState)
+
+    const dispatch = useDispatch<any>()
+
+    const fetchToken: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+        (evt) => {
+            evt.preventDefault()
+            dispatch(getTokenResponse())
+        },
+        [dispatch]
+    )
+
+    if (!sdkExists) {
+        return <></>
+    }
+
+    return (
+        <div className="boxColumn">
+            <div className="box">
+                <div className="boxContent">
+                    <h3>Request A Token</h3>
+                    <button onClick={fetchToken}>Get Token</button>
+                </div>
+            </div>
+            {token && (
+                <div className="box">
+                    <pre>{token}</pre>
+                </div>
+            )}
+        </div>
+    )
+}

package/demo/react/src/config.json

@@ -0,0 +1,14 @@
+{
+  "url": "",
+  "appId": "",
+  "appKey": "",
+  "projectId": "",
+  "telemetrySources": [
+    "/rocos/agent/telemetry/sources",
+    "/rocos/agent/telemetry/heartbeat"
+  ],
+  "callerTopic": "getServices",
+  "callerPayload": "{\"query\":{\"type\":0,\"data\":{\"depth\":0,\"path\":\"*\",\"showHidden\":false}}}",
+  "commandId": "turnLeft",
+  "commandParameters": "{}"
+}

package/demo/react/src/controllers/RocosSDKController.ts

@@ -0,0 +1,48 @@
+import { RocosSDK, IRocosSDK, IRocosSDKConfig } from '@team-rocos/rocos-js-sdk'
+import { deepEqual } from '../helpers/deepEqual'
+
+class RocosSDKController {
+    private static instance?: IRocosSDK
+    private static params?: IRocosSDKConfig
+
+    static removeInstance = (): void => {
+        if (RocosSDKController.instance) {
+            console.log('removing instance')
+            RocosSDKController.params = undefined
+            RocosSDKController.instance.cleanup()
+            RocosSDKController.instance = undefined
+        }
+    }
+
+    static getInstance = (): IRocosSDK | undefined => {
+        return RocosSDKController.instance
+    }
+
+    static createInstance = (params: IRocosSDKConfig): void => {
+        if (!RocosSDKController.instance) {
+            RocosSDKController.params = params
+            RocosSDKController.instance = new RocosSDK(params)
+            RocosSDKController.instance.setDebugLevel('trace')
+            RocosSDKController.instance.enableDebugMode(true)
+        } else if (!deepEqual(RocosSDKController.params, params)) {
+            console.log('creating new instance')
+            RocosSDKController.params = params
+            RocosSDKController.instance.cleanup()
+            RocosSDKController.instance = new RocosSDK(params)
+            RocosSDKController.instance.setDebugLevel('trace')
+            RocosSDKController.instance.enableDebugMode(true)
+        }
+    }
+
+    static checkIfInstanceExists = (params: IRocosSDKConfig): boolean => {
+        if (!RocosSDKController.instance) {
+            return false
+        }
+        if (!deepEqual(RocosSDKController.params, params)) {
+            return false
+        }
+        return true
+    }
+}
+
+export default RocosSDKController

package/demo/react/src/helpers/deepEqual.ts

@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export const deepEqual = (object1: any, object2: any): boolean => {
+    if (!object1 || !object2) {
+        return false
+    }
+    const keys1 = Object.keys(object1)
+    const keys2 = Object.keys(object2)
+
+    if (keys1.length !== keys2.length) {
+        return false
+    }
+
+    for (const key of keys1) {
+        const val1 = object1[key]
+        const val2 = object2[key]
+        const areObjects = isObject(val1) && isObject(val2)
+        if ((areObjects && !deepEqual(val1, val2)) || (!areObjects && val1 !== val2)) {
+            return false
+        }
+    }
+
+    return true
+}
+
+const isObject = (object: Record<string, never>): boolean => {
+    return object != null && typeof object === 'object'
+}

package/demo/react/src/hooks/useInput.ts

@@ -0,0 +1,29 @@
+import React, { ChangeEvent, useState } from 'react'
+
+type IUseInputReturn = {
+    value: string
+    setValue: React.Dispatch<React.SetStateAction<string>>
+    reset: () => void
+    bind: {
+        placeholder: string
+        value: string
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void
+    }
+}
+
+export const useInput = (initialValue: string, placeholder: string): IUseInputReturn => {
+    const [value, setValue] = useState(initialValue)
+
+    return {
+        value,
+        setValue,
+        reset: () => setValue(''),
+        bind: {
+            value,
+            placeholder,
+            onChange: (event: ChangeEvent<HTMLInputElement>) => {
+                setValue(event.target.value)
+            },
+        },
+    }
+}

package/demo/react/src/index.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  font-family: HKGrotesk;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #F4F4F4;
+}
+
+code {
+  font-family: 'Roboto Mono', monospace;
+}

package/demo/react/src/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import store from './store'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+import { createRoot } from 'react-dom/client'
+
+const container = document.getElementById('root')
+if (!container) {
+    throw new Error('Could not find root element')
+}
+
+const root = createRoot(container)
+root.render(
+    <React.StrictMode>
+        <Provider store={store}>
+            <App />
+        </Provider>
+    </React.StrictMode>
+)
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()

package/demo/react/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/demo/react/src/reducers/sdkReducer.ts

@@ -0,0 +1,133 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { getTokenResponse, getRobotsResponse } from '../actions/sdkActions'
+import { ITelemetrySubscriptionParams } from '@team-rocos/rocos-js-sdk'
+
+export type SubscriptionPayload = {
+    id: string
+    params: ITelemetrySubscriptionParams
+}
+
+export type CallerPayload = {
+    projectId: string
+    callsign: string
+    topic: string
+    payload: string
+}
+
+export type CommandPayload = {
+    projectId: string
+    callsign: string
+    commandId: string
+    parameters: string
+}
+
+export type SDKState = {
+    sdkCreated: boolean
+    tokenResponse?: string
+    token?: string
+    robotsResponse?: string
+    callsigns?: string[]
+    projectId?: string
+    subscriptions: SubscriptionPayload[]
+    caller?: CallerPayload
+    command?: CommandPayload
+    loading: 'idle' | 'pending' | 'fulfilled'
+    error: string | null
+}
+
+const initialState: SDKState = {
+    sdkCreated: false,
+    loading: 'idle',
+    error: null,
+    subscriptions: [],
+}
+
+const sdkSlice = createSlice({
+    name: 'sdk',
+    initialState,
+    reducers: {
+        createSdk: (state, action: PayloadAction<boolean>) => {
+            state.sdkCreated = action.payload
+            if (!state.sdkCreated) {
+                state.tokenResponse = undefined
+                state.token = undefined
+                state.robotsResponse = undefined
+                state.callsigns = undefined
+                state.projectId = undefined
+                state.subscriptions = []
+            }
+        },
+        addSubscription: (state, action: PayloadAction<SubscriptionPayload>) => {
+            state.subscriptions = [...state.subscriptions, action.payload]
+        },
+        removeSubscription: (state, action: PayloadAction<string>) => {
+            state.subscriptions = state.subscriptions.filter((item) => item.id !== action.payload)
+        },
+        setCaller: (state, action: PayloadAction<CallerPayload>) => {
+            state.caller = action.payload
+        },
+        setCommand: (state, action: PayloadAction<CommandPayload>) => {
+            state.command = action.payload
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(getTokenResponse.fulfilled, (state, { payload }) => {
+                // return the fulfilled result even if the payload is empty
+                return {
+                    ...state,
+                    tokenResponse: payload?.tokenResponse,
+                    token: payload?.token,
+                    loading: 'fulfilled',
+                    error: null,
+                }
+            })
+            .addCase(getTokenResponse.rejected, (state, { payload }) => {
+                return {
+                    ...state,
+                    error: payload ?? 'Unable to fetch token',
+                    loading: 'fulfilled',
+                }
+            })
+            .addCase(getTokenResponse.pending, (state) => {
+                return {
+                    ...state,
+                    error: null,
+                    loading: 'pending',
+                }
+            })
+            .addCase(getRobotsResponse.fulfilled, (state, { payload }) => {
+                // return the fulfilled result even if the payload is empty
+                return {
+                    ...state,
+                    robotsResponse: payload?.robotsResponse,
+                    callsigns: payload?.callsigns,
+                    projectId: payload?.projectId,
+                    loading: 'fulfilled',
+                    error: null,
+                }
+            })
+            .addCase(getRobotsResponse.rejected, (state, { payload }) => {
+                return {
+                    ...state,
+                    error: payload ?? 'Unable to fetch token',
+                    loading: 'fulfilled',
+                }
+            })
+            .addCase(getRobotsResponse.pending, (state) => {
+                return {
+                    ...state,
+                    error: null,
+                    loading: 'pending',
+                }
+            })
+    },
+})
+
+const { actions, reducer } = sdkSlice
+
+// Extract and export each action creator by name
+export const { createSdk, addSubscription, removeSubscription, setCaller, setCommand } = actions
+
+// Export the reducer, either as a default or named export
+export default reducer

package/demo/react/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals'
+
+const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry)
+            getFID(onPerfEntry)
+            getFCP(onPerfEntry)
+            getLCP(onPerfEntry)
+            getTTFB(onPerfEntry)
+        })
+    }
+}
+
+export default reportWebVitals

package/demo/react/src/selectors/sdkSelector.ts

@@ -0,0 +1,11 @@
+import { RootState } from '../store'
+import { CallerPayload, CommandPayload, SubscriptionPayload } from '../reducers/sdkReducer'
+
+export const isSDKCreated = (state: RootState): boolean => state.sdk.sdkCreated
+export const getTokenFromState = (state: RootState): string | undefined => state.sdk.tokenResponse
+export const getRobotsFromState = (state: RootState): string | undefined => state.sdk.robotsResponse
+export const getCallsigns = (state: RootState): string[] | undefined => state.sdk.callsigns
+export const getProjectId = (state: RootState): string | undefined => state.sdk.projectId
+export const getSubscriptions = (state: RootState): SubscriptionPayload[] => state.sdk.subscriptions
+export const getCaller = (state: RootState): CallerPayload | undefined => state.sdk.caller
+export const getCommand = (state: RootState): CommandPayload | undefined => state.sdk.command

package/demo/react/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'