KeplerAppState

import {
  IKeplerAppStateManager,
  KeplerAppDisplayStatus,
  KeplerAppStateChangeData,
  KeplerAppStateStatus,
  KeplerAppStateWithReplay,
  KeplerReconfigureReasonData,
  useKeplerAppStateManager,
} from '@amazon-devices/react-native-kepler';
import React, { useEffect, useState } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  displayText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  commentText: {
    fontSize: 16,
    color: 'white',
  },
});
const KeplerAppStateApp = () => {
  const keplerAppStateManager: IKeplerAppStateManager =
    useKeplerAppStateManager();
  const [appStateData, setAppState] = useState<KeplerAppStateStatus>(
    keplerAppStateManager.getCurrentState,
  );
  const [homePressedCounter, setHomePressedCounter] = useState(0);
  const [displayDisconnectCounter, setDisplayDisconnectCounter] = useState(0);
  const [displayConnectCounter, setDisplayConnectCounter] = useState(0);
  const [appFocusState, setAppFocusState] = useState('FOCUSED');

  useEffect(() => {
    console.log('KeplerAppState demo: Adding event listeners');

    // Keeping the event handler as part of useEffect to avoid re-render when this event is fired
    const handleAppStateChange = (nextAppState: KeplerAppStateChangeData) => {
      if (
        appStateData.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        console.log('KeplerAppState demo has come to the foreground');
      }
      setAppState(nextAppState as KeplerAppStateStatus);
      console.log(`KeplerAppState change: ${nextAppState}`);
    };

    const handleAppStateChangeWithReplayedEvents = (
      keplerAppStateData: KeplerAppStateWithReplay,
    ) => {
      if (keplerAppStateData.isReplayed) {
        console.log(
          `KeplerAppState demo has received replayed change event : ${JSON.stringify(
            keplerAppStateData,
          )}`,
        );
      } else {
        console.log(
          `KeplerAppState demo has received change event: ${JSON.stringify(
            keplerAppStateData,
          )}`,
        );
      }

      if (
        appStateData.match(/inactive|background/) &&
        keplerAppStateData.appState === 'active'
      ) {
        console.log('KeplerAppState demo has come to the foreground');
      }
      setAppState(keplerAppStateData.appState as KeplerAppStateStatus);
    };

    const changeSubscription = keplerAppStateManager.addAppStateListener(
      'change',
      handleAppStateChange,
    );
    const memoryWarningSubscription = keplerAppStateManager.addAppStateListener(
      'memoryWarning',
      handleMemoryWarning,
    );
    const reconfigureSubscription = keplerAppStateManager.addAppStateListener(
      'reconfigure',
      handleReconfigure,
    );
    const focusSubscription = keplerAppStateManager.addAppStateListener(
      'focus',
      handleFocus,
    );
    const blurSubscription = keplerAppStateManager.addAppStateListener(
      'blur',
      handleBlur,
    );
    const displayChangeSubscription = keplerAppStateManager.addAppStateListener(
      'displayChange',
      handleDisplayChange,
    );
    // Handle replayed events with addEventListenerWithReplay method from useKeplerAppStateManager hook
    const changeWithReplaySubscription =
      keplerAppStateManager.addEventListenerWithReplay(
        'change',
        handleAppStateChangeWithReplayedEvents,
      );
    const reconfigureWithReplaySubscription =
      keplerAppStateManager.addEventListenerWithReplay(
        'reconfigure',
        handleReconfigureWithReplayedEvents,
      );
    const memoryWarningWithReplaySubscription =
      keplerAppStateManager.addEventListenerWithReplay(
        'memoryWarning',
        handleMemoryWarningWithReplayedEvents,
      );
    const focusWithReplaySubscription =
      keplerAppStateManager.addEventListenerWithReplay(
        'focus',
        handleFocusWithReplayedEvents,
      );
    const blurWithReplaySubscription =
      keplerAppStateManager.addEventListenerWithReplay(
        'blur',
        handleBlurWithReplayedEvents,
      );
    const displayChangeWithReplaySubscription =
      keplerAppStateManager.addEventListenerWithReplay(
        'displayChange',
        handleDisplayChangeWithReplayedEvents,
      );
    // Cleanup subscriptions on unmount
    return () => {
      console.log('KeplerAppState demo: Removing event listeners');

      // Individually remove each listener
      changeSubscription.remove();
      memoryWarningSubscription.remove();
      reconfigureSubscription.remove();
      focusSubscription.remove();
      blurSubscription.remove();
      displayChangeSubscription.remove();
      changeWithReplaySubscription.remove();
      reconfigureWithReplaySubscription.remove();
      memoryWarningWithReplaySubscription.remove();
      focusWithReplaySubscription.remove();
      blurWithReplaySubscription.remove();
      displayChangeWithReplaySubscription.remove();
    };
  }, [keplerAppStateManager, appStateData]);
  // The empty dependency array means this effect runs once when the component mounts and
  // cleans up when it unmounts

  const handleMemoryWarning = () => {
    console.log('KeplerAppState demo has received memory warning');
  };

  const handleReconfigure = (reason: KeplerAppStateChangeData) => {
    const reconfigureReasonData = reason as KeplerReconfigureReasonData;
    console.log(
      `KeplerAppState demo has received reconfigure : ${JSON.stringify(
        reconfigureReasonData,
      )}`,
    );
    if (reconfigureReasonData.reconfigureReason === 'homePressed') {
      setHomePressedCounter(prevCounter => prevCounter + 1);
    }
  };

  const handleFocus = () => {
    setAppFocusState('FOCUSED');
    console.log('KeplerAppState demo has received Focus Event');
  };

  const handleBlur = () => {
    setAppFocusState('BLURRED');
    console.log('KeplerAppState demo has received Blur Event');
  };

  const handleDisplayChange = (reason: KeplerAppStateChangeData) => {
    const displayChangeData = reason as KeplerAppDisplayStatus;
    console.log(
      `KeplerAppState demo has received display event : ${JSON.stringify(
        displayChangeData,
      )}`,
    );
    if (displayChangeData === 'displayConnected') {
      setDisplayConnectCounter(prevCounter => prevCounter + 1);
    }
    if (displayChangeData === 'displayDisconnected') {
      setDisplayDisconnectCounter(prevCounter => prevCounter + 1);
    }
  };

  const handleReconfigureWithReplayedEvents = (
    keplerAppStateData: KeplerAppStateWithReplay,
  ) => {
    if (keplerAppStateData.isReplayed) {
      console.log(
        `KeplerAppState demo has received replayed reconfigure event : ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    } else {
      console.log(
        `KeplerAppState demo has received reconfigure event: ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    }

    const reconfigureReasonData =
      keplerAppStateData.appState as KeplerReconfigureReasonData;
    if (reconfigureReasonData.reconfigureReason === 'homePressed') {
      setHomePressedCounter(prevCounter => prevCounter + 1);
    }
  };

  const handleMemoryWarningWithReplayedEvents = (
    keplerAppStateData: KeplerAppStateWithReplay,
  ) => {
    if (keplerAppStateData.isReplayed) {
      console.log(
        `KeplerAppState demo has received replayed memory warning event : ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    } else {
      console.log(
        `KeplerAppState demo has received memory warning event: ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    }
  };

  const handleFocusWithReplayedEvents = (
    keplerAppStateData: KeplerAppStateWithReplay,
  ) => {
    if (keplerAppStateData.isReplayed) {
      console.log(
        `KeplerAppState demo has received replayed Focus event : ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    } else {
      console.log(
        `KeplerAppState demo has received Focus event: ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    }

    setAppFocusState('FOCUSED');
  };

  const handleBlurWithReplayedEvents = (
    keplerAppStateData: KeplerAppStateWithReplay,
  ) => {
    if (keplerAppStateData.isReplayed) {
      console.log(
        `KeplerAppState demo has received replayed Blur event : ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    } else {
      console.log(
        `KeplerAppState demo has received Blur event: ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    }
    setAppFocusState('BLURRED');
  };

  const handleDisplayChangeWithReplayedEvents = (
    keplerAppStateData: KeplerAppStateWithReplay,
  ) => {
    if (keplerAppStateData.isReplayed) {
      console.log(
        `KeplerAppState demo has received replayed display event : ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    } else {
      console.log(
        `KeplerAppState demo has received display event: ${JSON.stringify(
          keplerAppStateData,
        )}`,
      );
    }

    if (keplerAppStateData.appState === 'displayConnected') {
      console.log('KeplerAppState demo has received displayConnected event');
    } else if (keplerAppStateData.appState === 'displayDisconnected') {
      console.log('KeplerAppState demo has received displayDisconnected event');
    }
    setAppState(keplerAppStateData.appState as KeplerAppStateStatus);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.displayText}>Current state is: {appStateData}</Text>
      <Text style={styles.commentText}>
        (When UI is displaying, the state will always be active
      </Text>
      <Text style={styles.commentText}>in KeplerScript applications)</Text>
      <Text style={styles.displayText}>
        HomeButton Counter: {homePressedCounter}
      </Text>
      <Text style={styles.displayText}>
        Display Connection Counter: {displayConnectCounter}
      </Text>
      <Text style={styles.displayText}>
        Display Disconnection Counter: {displayDisconnectCounter}
      </Text>
      <Text style={styles.displayText}>
        Current Focus state is: {appFocusState}
      </Text>
    </View>
  );
};

export default KeplerAppStateApp;
AppRegistry.registerComponent('KeplerAppStateApp', () => KeplerAppStateApp);

import {
  IKeplerAppStateManager,
  KeplerAppStateEvent,
  KeplerAppStateStatus,
  KeplerAppStateWithReplay,
  useKeplerAppStateManager,
} from '@amazon-devices/react-native-kepler';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  stateText: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  eventText: {
    fontSize: 16,
    marginBottom: 5,
  },
});

const AppStateMonitor = () => {
  const keplerAppStateManager: IKeplerAppStateManager =
    useKeplerAppStateManager();
  const [currentState, setCurrentState] = useState<KeplerAppStateStatus>(
    keplerAppStateManager.getCurrentState,
  );
  const [lastEvent, setLastEvent] = useState<string>('');

  useEffect(() => {
    // Monitor app state changes
    const subscriptions = [
      keplerAppStateManager.addEventListenerWithReplay(
        'change' as KeplerAppStateEvent,
        (event: KeplerAppStateWithReplay) => {
          const state = event.appState as KeplerAppStateStatus;
          setCurrentState(state);
          setLastEvent(
            `State change: ${state} (${event.isReplayed ? 'Replayed' : 'New'})`,
          );
        },
      ),

      // Monitor focus events
      keplerAppStateManager.addEventListenerWithReplay(
        'focus' as KeplerAppStateEvent,
        (event: KeplerAppStateWithReplay) => {
          setLastEvent(
            `Focus event (${event.isReplayed ? 'Replayed' : 'New'})`,
          );
        },
      ),

      // Monitor display changes
      keplerAppStateManager.addEventListenerWithReplay(
        'displayChange' as KeplerAppStateEvent,
        (event: KeplerAppStateWithReplay) => {
          setLastEvent(
            `Display change: ${event.appState} (${
              event.isReplayed ? 'Replayed' : 'New'
            })`,
          );
        },
      ),
    ];

    // Cleanup function
    return () => {
      subscriptions.forEach(subscription => subscription.remove());
    };
  }, [keplerAppStateManager]);

  return (
    <View style={styles.container}>
      <Text style={styles.stateText}>Current App State: {currentState}</Text>
      <Text style={styles.eventText}>Last Event: {lastEvent}</Text>
    </View>
  );
};

export default AppStateMonitor;