📱 Device Manager Screen

A practical implementation of the DeviceSessions component that enables users to securely view and manage all active device sessions within the Zezo OTT app.

📸 Preview

🧹 Key Components & Libraries Used

Component / Library	Purpose
`DeviceSessions`	Renders and manages the list of active sessions
`SafeAreaWrapper`	Ensures UI stays within safe viewable area
`react-query`	Handles fetching and mutating session data
`useAuthStore`	Retrieves the current session token
`Alert` (React Native)	Confirms logout actions with the user

📡 API Call Methods

⚙️ First, set up the getZezoOtt API client: API Client Setup

🧪 The following API methods are used to manage device sessions:

🔗 getZezoOtt().auth.whoami() — Fetch all active sessions for the user Returns sessions array inside the user object, along with other profile data.
🔗 getZezoOtt().auth.removeSession() — Revoke/terminate a session by refresh token

📲 Usage Example

DeviceManagerScreen.tsx


import React from "react";
import {
  DeviceSessions,
  SafeAreaWrapper,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
import { Alert } from "react-native";
import { goBack } from "src/navigation";
 
const DeviceManagerScreen = () => {
  return (
    <SafeAreaWrapper>
      <DeviceSessions
        title="Manage Devices"
        sessions={[]} // your API response array of sessions
        activeSessionId={"session-1"}
        onLogout={({ session }) =>
          Alert.alert(`Logout from ${session.deviceType}?`)
        }
        onBackPress={() => {}}
      />
    </SafeAreaWrapper>
  );
};
 
export default DeviceManagerScreen;

🔗 See related route definition: Route enum from @navigation/routes.ts

⚙️ DeviceSessions Props

Prop	Type	Description
`title`	`string`	Title shown at the top of the screen
`sessions`	`ISession[]`	Array of active session objects
`activeSessionId`	`string`	ID of the current session (to prevent logout)
`isLoading`	`boolean`	Show a loading skeleton
`error`	`string`	Error message for fetch failure
`isLoadingLogout`	`boolean`	Shows loader when logging out a session
`onLogout`	`function`	Called when user taps logout
`onBackPress`	`function`	Handles back navigation
`theme`	`AppTheme`	Optional theme override

👤 Identifying the Current Session


const activeSessionId = sessions.find(
  (session) => session.refreshToken === currentRefreshToken
)?.id;

Matches the current session using refreshToken.
Prevents users from accidentally logging out of their own session.

🔁 Logout Flow

User taps Logout on a session.
Confirmation dialog appears.
If confirmed:
- Calls removeSession({ token_id }) via backend
- Removes the session remotely
Displays error alert if something goes wrong.

✅ Summary

🔐 Displays all active device sessions securely
🧠 Smart handling to prevent logging out of the current session
💡 Clear UI with support for loading and error states
🎨 Themeable and highly customizable