Skip to content

Commit

Permalink
Updated packages to work with latest version of npm and expo
Browse files Browse the repository at this point in the history 
Communications now shows payload data, communcation data request now requests form a different endpoint
Split useFetch to individual hooks for devices, applications and comms
  • Loading branch information
@kebab01
kebab01 committed Dec 6, 2023
1 parent deba5e7 commit 96d2e48
Show file tree
Hide file tree
Showing 18 changed files with 10,646 additions and 24,381 deletions.
Binary file added assets/arrowBlueDown.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/arrowBlueUp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34,244 changes: 10,063 additions & 24,181 deletions package-lock.json
View file

Large diffs are not rendered by default.

63 changes: 24 additions & 39 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,49 +11,34 @@
},
"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/netinfo": "8.2.0",
"@react-native-picker/picker": "2.4.0",
"@react-navigation/native": "^5.9.8",
"@react-navigation/stack": "^5.14.5",
"dotenv": "^16.0.3",
"expo": "^45.0.0",
"expo-barcode-scanner": "~11.3.0",
"expo-linking": "~3.1.0",
"expo-location": "~14.2.2",
"expo-media-library": "~14.1.0",
"expo-splash-screen": "~0.15.1",
"moment": "^2.29.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"@react-native-async-storage/async-storage": "^1.21.0",
"@react-native-community/netinfo": "^11.1.1",
"@react-native-picker/picker": "^2.6.1",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "^6.3.20",
"dotenv": "^16.3.1",
"expo": "~49.0.15",
"expo-barcode-scanner": "^12.7.0",
"expo-linking": "^6.0.0",
"expo-location": "^16.3.0",
"expo-media-library": "~15.4.1",
"expo-splash-screen": "^0.22.0",
"expo-status-bar": "~1.6.0",
"moment": "^2.29.4",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-easy-grid": "^0.2.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-maps": "0.30.2",
"react-native-pager-view": "5.4.15",
"react-native-qrcode-svg": "^6.1.2",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-svg": "12.3.0",
"react-native-elements": "^3.4.3",
"react-native-maps": "^1.8.0",
"react-native-qrcode-svg": "^6.2.0",
"react-native-swipe-list-view": "^3.2.9",
"react-native-tab-view": "^3.1.1",
"react-native-view-shot": "3.1.2",
"react-native-web": "0.17.7",
"react-native-webview": "11.18.1",
"yarn": "^1.22.19"
"react-native-tab-view": "^3.5.2",
"react-native-view-shot": "^3.8.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@testing-library/jest-native": "^4.0.1",
"@testing-library/react-native": "^7.2.0",
"@types/react": "~17.0.21",
"jest": "^26.6.3",
"jest-expo": "^45.0.0",
"metro": "^0.70.3",
"react-test-renderer": "^16.13.1",
"typescript": "~4.3.5"
"@babel/core": "^7.20.0",
"@types/react": "~18.2.14",
"typescript": "^5.1.3"
},
"jest": {
"preset": "jest-expo",
Expand Down
6 changes: 4 additions & 2 deletions screens/ApplicationsScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import globalStyles from "../styles";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { RowMap, SwipeListView } from "react-native-swipe-list-view";
import { getFavs } from "../shared/functions/ManageLocStorage";
import { useFetch } from "../shared/hooks/useFetch";
import { useFetch, useFetchResponse } from "../shared/hooks/useFetch";
import { GlobalContext } from "../shared/context/GlobalContext";
import { Application, Store_Tokens } from "../shared/types/CustomTypes";
import { APIApplicationsResponse } from "../shared/types/APIResponseTypes";
Expand All @@ -14,13 +14,15 @@ import SearchIcon from "../shared/components/atoms/SearchIcon";
import SearchBox from "../shared/components/atoms/SearchBox";
import CardRow from "../shared/components/molecules/CardRow";
import HiddenCardRow from "../shared/components/molecules/HiddenCardRow";
import { useApplications } from "../shared/hooks/useApplications";

export default function ApplicationsScreen({ navigation }): JSX.Element {
const [state, dispatch] = useContext(GlobalContext);
const insets = useSafeAreaInsets();

const [listData, changeData] = useState<Application[]>([]);
const { response, isLoading, error, retry } = useFetch(`${state.application_server}/api/v3/applications?field=description`);

const {response, isLoading, error, retry} = useApplications()

const [searchText, setSearchText] = useState<string>("");
const [showSearch, setShow] = useState<boolean>(false);
Expand Down
9 changes: 5 additions & 4 deletions screens/DevicesScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,24 @@ import { getFavs } from "../shared/functions/ManageLocStorage";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { GlobalContext } from "../shared/context/GlobalContext";
import { Device, Store_Tokens } from "../shared/types/CustomTypes";
import { useFetch } from "../shared/hooks/useFetch";
import { APIDeviceResponse } from "../shared/types/APIResponseTypes";
import { ConvertToDevice } from "../shared/functions/ConvertFromAPI";
import SearchBox from "../shared/components/atoms/SearchBox";
import SearchIcon from "../shared/components/atoms/SearchIcon";
import CardRow from "../shared/components/molecules/CardRow";
import HiddenCardRow from "../shared/components/molecules/HiddenCardRow";
import { useDevices } from "../shared/hooks/useDevices";

export default function DevicesScreen({ route, navigation }) {

const [state, dispatch] = useContext(GlobalContext);
const insets = useSafeAreaInsets();

const [listData, changeData] = useState<Device[]>([]);
const { response, isLoading, error, retry } = useFetch(
`${state.application_server}/api/v3/applications/${route.params.application.id}/devices?field_mask=attributes,locations,description,name`
);
// const { response, isLoading, error, retry }:useFetchResponse = useFetch(
// `${state.application_server}/api/v3/applications/${route.params.application.id}/devices?field_mask=attributes,locations,description,name`
// );
const {response, isLoading, error, retry} = useDevices(route.params.application.id)

const [searchText, setSearchText] = useState<string>("");
const [showSearch, setShow] = useState<boolean>(false);
Expand Down
30 changes: 16 additions & 14 deletions screens/ManageDeviceScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,39 @@ import { DeviceCard } from "../shared/components/organisms/cards/DeviceCard";
import { ManageDeviceContextProvider } from "../shared/context/ManageDeviceContext";
import LastSeenCard from "../shared/components/organisms/cards/LastSeenCard";
import { CommCard } from "../shared/components/organisms/cards/CommCard";
import { useFetch } from "../shared/hooks/useFetch";
import { ConvertToComm, ConvertToDevice } from "../shared/functions/ConvertFromAPI";
import { useFetch, useFetchResponse } from "../shared/hooks/useFetch";
import { ConvertToDevice } from "../shared/functions/ConvertFromAPI";
import { APICommResponse, APIDeviceResponse } from "../shared/types/APIResponseTypes";
import { LocationCard } from "../shared/components/organisms/cards/LocationCard";
import { NotesCard } from "../shared/components/organisms/cards/NotesCard";
import { useKeyboardHeight } from "../shared/hooks/useKeyboardHeight";
import globalStyles from "../styles";
import { useDevice } from "../shared/hooks/useDevice";
import { useCommunications } from "../shared/hooks/useCommunications";

export const ManageDeviceScreen = ({ route, navigation }): JSX.Element => {
const [state, dispatch] = useContext(GlobalContext);
const keyboardHeight = useKeyboardHeight();
const scrollViewRef = useRef();

const [device_state, set_device_state] = useState<Device>(route.params.device);
const [device_comm_data, set_device_comm_data] = useState<CommMessage[]>([]);
const [device_comm_data, set_device_comm_data] = useState<APICommResponse[]>([]);
const [scrollToEnd, set_scrollToEnd]=useState<boolean>(false);

const {
response: dev_response,
isLoading: dev_isLoading,
error: dev_error,
retry: dev_retry,
} = useFetch(
`${state.application_server}/api/v3/applications/${route.params.device.applications_id}/devices/${route.params.device.id}?field_mask=attributes,locations,description,name`
);

} = useDevice(route.params.device.applications_id, route.params.device.id)

//Data on communication data
const {
response: comm_response,
isLoading: comm_isLoading,
error: comm_error,
retry: comm_retry,
} = useFetch(
`${state.communication_server}/api/v3/ns/applications/${route.params.device.applications_id}/devices/${route.params.device.id}?field_mask=mac_state.recent_uplinks,pending_mac_state.recent_uplinks,session.started_at,pending_session`
);
} = useCommunications(route.params.device.applications_id, route.params.device.id)

useLayoutEffect(() => {
//Settings icon
Expand All @@ -51,10 +50,13 @@ export const ManageDeviceScreen = ({ route, navigation }): JSX.Element => {
useEffect(() => {
if (!comm_response || comm_isLoading) return;

const comm_data = comm_response as APICommResponse;

const formatted: CommMessage[] = ConvertToComm(comm_data);
set_device_comm_data(formatted.reverse());
set_device_comm_data(comm_response.sort((a,b) => {
//Sort most recent at top of list
if (new Date(a.result.received_at) < new Date(b.result.received_at)){
return 1
}
return -1;
} ))
}, [comm_isLoading]);

useEffect(() => {
Expand Down
100 changes: 70 additions & 30 deletions shared/components/organisms/cards/CommCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,89 @@
import React, { useContext, useEffect, useState } from "react";
import { Col, Row, Grid } from "react-native-easy-grid";
import { Text, View, ScrollView, StyleSheet, Image } from "react-native";
import { Text, View, ScrollView, StyleSheet, Image, TouchableOpacity } from "react-native";
import { formatTime } from "../../../functions/FormatTime";
import { ManageDeviceContext } from "../../../context/ManageDeviceContext";
import Card from "../../atoms/Card";
import { LoadingComponent } from "../../atoms/LoadingComponent";
import MngDeviceCard from "../../molecules/MngDeviceCard";
import { CommMessage } from "../../../types/CustomTypes";
import { APICommResponse } from "../../../types/APIResponseTypes";

export function CommCard():JSX.Element {
export function CommCard(): JSX.Element {

const {device_state, set_device_state, device_comm_data} = useContext(ManageDeviceContext);
const { device_state, set_device_state, device_comm_data } = useContext(ManageDeviceContext);
const [expanded_id, setExpanded_id] = useState<number>()

return (
<MngDeviceCard title="Communications">
<ScrollView style={{height:device_comm_data.data==0?70:200}} showsVerticalScrollIndicator={false}>

<ScrollView style={{ height: device_comm_data.data == 0 ? 70 : 300 }} showsVerticalScrollIndicator={false}>
<Grid>
<Row style={styles.cardRow}>
<Row style={[styles.cardRow, { paddingLeft: 10, paddingRight: 10 }]}>
<Col size={1}>
<Text style={styles.title}>Date</Text>
</Col>
<Col size={1}>
<Text style={styles.title}>Time</Text>
</Col>
<Col size={1}>
<Text style={styles.title}>RSSI</Text>
</Col>
<Col size={1}>
<Text style={styles.title}>SNR</Text>
<Col size={2}>
<Text style={styles.title}>Fields</Text>
</Col>
<Col>
<Text style={styles.title}>M_Type</Text>
<Col size={0.5}>
</Col>
</Row>

<LoadingComponent isLoading={device_comm_data.isLoading} />
{device_comm_data.data.length==0&&

{device_comm_data.data.length == 0 &&
<Text style={styles.noComms}>No communication data to display</Text>
}
{device_comm_data.data?.map((msg) => {
{device_comm_data.data.map((msg: APICommResponse, index: number) => {

return (
<Row style={styles.cardRow} key={msg.time}>
<Col>
<Text>{formatTime(msg.time).time}</Text>
</Col>
<Col>
<Text>{msg.rssi}</Text>
</Col>
<Col>
<Text>{msg.snr}</Text>
</Col>
<Col>
<Text numberOfLines={1} adjustsFontSizeToFit>
{msg.m_type}
</Text>
</Col>
</Row>
<TouchableOpacity key={msg.result.received_at} onPress={() => setExpanded_id(prev => prev === index ? undefined : index)}>
<Card color="#f2f3f3" style={styles.card}>
<>
<Row style={styles.cardRow}>
<Col>
<Text>{formatTime(msg.result.received_at).dayMonth}</Text>
</Col>
<Col>
<Text>{formatTime(msg.result.received_at).time}</Text>
</Col>
<Col>
<Text>{msg.result.uplink_message.rx_metadata[0].rssi}</Text>
</Col>
<Col size={0.5}>
<Text>{Object.keys(msg.result.uplink_message.decoded_payload).length}</Text>
</Col>
<Col>
<Image source={expanded_id === index ? require("../../../../assets/arrowBlueUp.png"):require("../../../../assets/arrowBlueDown.png")} resizeMode="contain" style={styles.arrowDown} />
</Col>
</Row>
{expanded_id == index &&
<>
{Object.keys(msg.result.uplink_message.decoded_payload).map((item, index) => {
return (
<Row key={item} style={{marginTop:5}}>
<Col size={2}>
<Text>{item}:</Text>
</Col>
<Col size={1}>
<Text>{msg.result.uplink_message.decoded_payload[item]}</Text>
</Col>
</Row>
)
})
}
</>
}
</>
</Card>
</TouchableOpacity>
);
})}
</Grid>
Expand Down Expand Up @@ -81,14 +113,22 @@ const styles = StyleSheet.create({
height: 20,
},
cardRow: {
marginTop: 10,
alignItems: "center",
justifyContent: "center",
width: "100%",
},
noComms: {
alignSelf: "center",
fontWeight: "bold",
fontSize: 15,
marginTop:10
marginTop: 10
},
card: {
marginTop: 10
},
arrowDown: {
width: 20,
height: 20,
alignSelf: 'flex-end',
}
});
2 changes: 1 addition & 1 deletion shared/components/organisms/cards/LastSeenCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function LastSeenCard() {
*/

if (device_comm_data.data.length != 0) {
const recent = new Date(device_comm_data.data[0].time);
const recent = new Date(device_comm_data.data[0].result.received_at);
const now = new Date();
const diff = (now.getTime() - recent.getTime()) / 1000 / 60;

Expand Down
13 changes: 1 addition & 12 deletions shared/functions/ConvertFromAPI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,4 @@ export function ConvertToApp(APIApp: APIApplicationsResponse, isFav: boolean): A
description: APIApp.description,
isFav: isFav,
};
}

export function ConvertToComm(APIComm: APICommResponse): CommMessage[] {
return APIComm.mac_state.recent_uplinks.map((msg) =>{
return {
m_type:msg.payload?.m_hdr?.m_type,
rssi:msg.rx_metadata[0]?.channel_rssi,
snr:msg.rx_metadata[0]?.snr,
time:msg.received_at
}
})
}
}
2 changes: 1 addition & 1 deletion shared/functions/ManageLocStorage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const delete_update_from_storage = async (index: number): Promise<void> =

export const get_req_from_storage = async (
key: string
): Promise<APIApplicationsResponse[] | APIDeviceResponse[] | APIDeviceResponse | APIGatewayResponse[] | APICommResponse | null> => {
): Promise<any> => {
/*
return a stored request from storage. key=url path
*/
Expand Down
Loading

0 comments on commit 96d2e48

Please sign in to comment.