Display device data in ui

app/(tabs)/index.tsx

@@ -20,7 +20,9 @@ export default function HomeScreen() {
   const { t } = useTranslation();
   const navigation = useNavigation();
   const [isSupportModalVisible, setIsSupportModalVisible] = useState(false);
-  const { SoC, SoH } = useSelector((state: RootState) => state.telemetry);
+  const { SoC, SoH, chargingState } = useSelector(
+    (state: RootState) => state.telemetry
+  );
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -54,11 +56,11 @@ export default function HomeScreen() {
           subMessage="Service Reminder"
         />
         <View style={styles.iconContainer}>
-          <SemiCircleProgress progress={SoC} status={1} />
+          <SemiCircleProgress progress={SoC} status={chargingState} />
         </View>
         <View style={styles.metrics}>
-          <MetricCard heading="SoH" value={`${SoH}%`} />
+          <MetricCard heading="SoH" value={SoH} unit="%" />
-          <MetricCard heading="Total Distance" value="20009 km" />
+          <MetricCard heading="Total Distance" value={20009} unit="km" />
         </View>
         <PaymentDueCard
           label="Payment Due"

app/auth/login.tsx

@@ -18,7 +18,7 @@ import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../store";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store";
-import { AUTH_STATUSES } from "@/constants/config";
+import { AUTH_STATUSES } from "@/constants/types";
 
 // type VerifyOTPNavigationProp = StackNavigationProp<
 //   RootStackParamList,

app/auth/verifyOtp.tsx

@@ -6,7 +6,7 @@ import { clearVerifyOTPError, sendOTP, verifyOTP } from "../../store/authSlice";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { OtpInput } from "react-native-otp-entry";
 import { useRouter } from "expo-router";
-import { AUTH_STATUSES } from "@/constants/config";
+import { AUTH_STATUSES } from "@/constants/types";
 
 export default function VerifyOTP() {
   const { phone, otpId, verifyOTPError, sendOTPError, status } = useSelector(
@@ -14,7 +14,7 @@ export default function VerifyOTP() {
   );
   const router = useRouter();
   const dispatch = useDispatch<AppDispatch>();
-
+  const { isLoggedIn } = useSelector((state: RootState) => state.auth);
   const [seconds, setSeconds] = useState(30);
   const [isTimerActive, setIsTimerActive] = useState(true);
   const [resendAttempts, setResendAttempts] = useState(0);
@@ -49,6 +49,12 @@ export default function VerifyOTP() {
 
   const formattedSeconds = seconds.toString().padStart(2, "0");
 
+  useEffect(() => {
+    if (status === AUTH_STATUSES.SUCCESS && isLoggedIn) {
+      router.replace("/"); // This assumes "/" leads to your `TabLayout`
+    }
+  }, [status, isLoggedIn]);
+
   return (
     <View style={styles.container}>
       <Text style={styles.heading}>Verify Code</Text>

components/home/MetricCard.tsx

@@ -3,15 +3,18 @@ import { View, Text, StyleSheet } from "react-native";
 
 interface MetricCardProps {
   heading: string;
-  value: string | number;
+  value: number | null;
+  unit: string;
 }
 
-const MetricCard: React.FC<MetricCardProps> = ({ heading, value }) => {
+const MetricCard: React.FC<MetricCardProps> = ({ heading, value, unit }) => {
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
         <Text style={styles.heading}>{heading}</Text>
-        <Text style={styles.value}>{value}</Text>
+        <Text style={styles.value}>
+          {value ?? "---"} {unit}
+        </Text>
       </View>
     </View>
   );

components/home/SemiCircleProgress.tsx

@@ -1,3 +1,5 @@
+import { BMS_STATE_LABELS } from "@/constants/config";
+import { BmsState } from "@/constants/types";
 import React, { useEffect, useRef, useState } from "react";
 import { View, StyleSheet, Text, Animated } from "react-native";
 import Svg, { Circle, Defs, LinearGradient, Stop } from "react-native-svg";
@@ -8,8 +10,8 @@ const CircleProgressBar = ({
   progress,
   status,
 }: {
-  progress: number;
+  progress: number | null;
-  status: number;
+  status: number | null;
 }) => {
   const radius = 20;
   const strokeWidth = 5;
@@ -27,7 +29,7 @@ const CircleProgressBar = ({
       setDisplayProgress(0);
     } else {
       Animated.timing(animatedValue, {
-        toValue: progress,
+        toValue: progress ?? 0,
         duration: 500,
         useNativeDriver: false,
       }).start();
@@ -97,7 +99,7 @@ const CircleProgressBar = ({
       </Svg>
       <View style={styles.batteryPercent}>
         <Text style={{ fontSize: 60, fontWeight: "bold", fontFamily: "Inter" }}>
-          {progress === undefined ? "---" : displayProgress}
+          {progress ? displayProgress : "--"}
         </Text>
         <Text style={{ fontSize: 20, fontWeight: "bold" }}>
           {progress === undefined ? null : "%"}
@@ -105,7 +107,7 @@ const CircleProgressBar = ({
       </View>
       <View style={styles.batterySoc}>
         <Text style={{ fontSize: 14, fontWeight: "bold", color: "#565F70" }}>
-          {status === 1 ? "Charging" : "Discharging"}
+          {status ? BMS_STATE_LABELS[status as BmsState] : "Unknown"}
         </Text>
       </View>
     </View>

constants/config.ts

@@ -10,6 +10,7 @@ import { BASE_URL, ENV } from "@env";
 import InfoIcon from "../assets/icons/error.svg";
 import WarningIcon from "../assets/icons/warning.svg";
 import DangerIcon from "../assets/icons/danger.svg";
+import type { BmsState } from "./types";
 
 export default {
   ENV,
@@ -66,13 +67,6 @@ export const MESSAGES = {
   },
 };
 
-export const AUTH_STATUSES = {
-  IDLE: "Idle",
-  LOADING: "Loading",
-  SUCCESS: "Success",
-  FAILED: "Failed",
-} as const;
-
 export const ALERT_STYLES = {
   info: {
     backgroundColor: "#E5EBFD",
@@ -97,4 +91,8 @@ export const SUPPORT = {
   EMAIL_BODY: "Hello,\n\nI need assistance with...",
 };
 
-export type StatusType = (typeof AUTH_STATUSES)[keyof typeof AUTH_STATUSES];
+export const BMS_STATE_LABELS: Record<BmsState, string> = {
+  0: "Idle",
+  1: "Charging",
+  [-1]: "Discharging",
+};

constants/types.ts

@@ -0,0 +1,12 @@
+export const BMS_STATES = [0, 1, -1] as const;
+
+export type BmsState = (typeof BMS_STATES)[number];
+
+export const AUTH_STATUSES = {
+  IDLE: "Idle",
+  LOADING: "Loading",
+  SUCCESS: "Success",
+  FAILED: "Failed",
+} as const;
+
+export type StatusType = (typeof AUTH_STATUSES)[keyof typeof AUTH_STATUSES];

services/socket.ts

@@ -1,6 +1,7 @@
 import { io, Socket } from "socket.io-client";
 import { store } from "../store";
 import { updateTelemetry } from "../store/telemetrySlice";
+import { BmsState } from "@/constants/types";
 
 const SERVER_URL =
   "http://dev.vec-tr.ai:8089/?dashboardId=deviceDashboardSocket&assetId=V16000868651064644504";
@@ -42,12 +43,26 @@ export const disconnectSocket = () => {
 };
 
 const handleSocketData = (data: any) => {
+  console.log("...");
   try {
     const SoH =
       data.dataSeries.assetData[0].bms[0].bmsSpecific.ivecSpecific.soh;
     const SoC = data?.dataSeries?.assetData?.[0]?.bms?.[0]?.batterySoc;
-    // console.log(SoC, SoH);
+    const currentMode =
-    store.dispatch(updateTelemetry({ SoH, SoC }));
+      data?.dataSeries?.assetData?.[0]?.bms?.[0]?.bmsSpecific?.ivecSpecific
+        ?.ivecStatus?.currentMode;
+
+    let bms_state: BmsState | null = null;
+
+    if (currentMode === 0) {
+      bms_state = 0;
+    } else if (currentMode === 1) {
+      bms_state = -1;
+    } else if (currentMode === 2) {
+      bms_state = 1;
+    }
+
+    store.dispatch(updateTelemetry({ SoH, SoC, chargingState: bms_state }));
   } catch (err) {
     console.error("Error handling socket data:", err);
   }