From 39b100c7ce10feb9d8a5e0549cc578f3e2850cf7 Mon Sep 17 00:00:00 2001
From: Kianoosh Soleimani <kianooshsoleimani@gmail.com>
Date: Tue, 17 Jan 2023 08:58:00 +0330
Subject: [PATCH] fix deprecated app listener

---
 index.js | 167 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 95 insertions(+), 72 deletions(-)

diff --git a/index.js b/index.js
index b546b82..54591aa 100644
--- a/index.js
+++ b/index.js
@@ -1,20 +1,20 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
+import _ from 'lodash';
 import {
+  AppState,
   StyleSheet,
-  View,
   Text,
   TouchableOpacity,
-  AppState
+  View,
 } from 'react-native';
-import _ from 'lodash';
-import {sprintf} from 'sprintf-js';
+import { sprintf } from 'sprintf-js';
 
-const DEFAULT_DIGIT_STYLE = {backgroundColor: '#FAB913'};
-const DEFAULT_DIGIT_TXT_STYLE = {color: '#000'};
-const DEFAULT_TIME_LABEL_STYLE = {color: '#000'};
-const DEFAULT_SEPARATOR_STYLE = {color: '#000'};
+const DEFAULT_DIGIT_STYLE = { backgroundColor: '#FAB913' };
+const DEFAULT_DIGIT_TXT_STYLE = { color: '#000' };
+const DEFAULT_TIME_LABEL_STYLE = { color: '#000' };
+const DEFAULT_SEPARATOR_STYLE = { color: '#000' };
 const DEFAULT_TIME_TO_SHOW = ['D', 'H', 'M', 'S'];
 const DEFAULT_TIME_LABELS = {
   d: 'Days',
@@ -48,22 +48,29 @@ class CountDown extends React.Component {
   constructor(props) {
     super(props);
     this.timer = setInterval(this.updateTimer, 1000);
+    this.appListener = null;
   }
 
   componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
+    this.appListener = AppState.addEventListener(
+      'change',
+      this._handleAppStateChange
+    );
   }
 
   componentWillUnmount() {
     clearInterval(this.timer);
-    AppState.removeEventListener('change', this._handleAppStateChange);
+    this.appListener && this.appListener.remove();
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.props.until !== prevProps.until || this.props.id !== prevProps.id) {
+    if (
+      this.props.until !== prevProps.until ||
+      this.props.id !== prevProps.id
+    ) {
       this.setState({
         lastUntil: prevState.until,
-        until: Math.max(prevProps.until, 0)
+        until: Math.max(prevProps.until, 0),
       });
     }
   }
@@ -76,22 +83,26 @@ class CountDown extends React.Component {
   //   }
   // }
 
-  _handleAppStateChange = currentAppState => {
-    const {until, wentBackgroundAt} = this.state;
-    if (currentAppState === 'active' && wentBackgroundAt && this.props.running) {
+  _handleAppStateChange = (currentAppState) => {
+    const { until, wentBackgroundAt } = this.state;
+    if (
+      currentAppState === 'active' &&
+      wentBackgroundAt &&
+      this.props.running
+    ) {
       const diff = (Date.now() - wentBackgroundAt) / 1000.0;
       this.setState({
         lastUntil: until,
-        until: Math.max(0, until - diff)
+        until: Math.max(0, until - diff),
       });
     }
     if (currentAppState === 'background') {
-      this.setState({wentBackgroundAt: Date.now()});
+      this.setState({ wentBackgroundAt: Date.now() });
     }
-  }
+  };
 
   getTimeLeft = () => {
-    const {until} = this.state;
+    const { until } = this.state;
     return {
       seconds: until % 60,
       minutes: parseInt(until / 60, 10) % 60,
@@ -108,7 +119,10 @@ class CountDown extends React.Component {
     if (this.state.lastUntil === this.state.until || !this.props.running) {
       return;
     }
-    if (this.state.until === 1 || (this.state.until === 0 && this.state.lastUntil !== 1)) {
+    if (
+      this.state.until === 1 ||
+      (this.state.until === 0 && this.state.lastUntil !== 1)
+    ) {
       if (this.props.onFinish) {
         this.props.onFinish();
       }
@@ -118,46 +132,42 @@ class CountDown extends React.Component {
     }
 
     if (this.state.until === 0) {
-      this.setState({lastUntil: 0, until: 0});
+      this.setState({ lastUntil: 0, until: 0 });
     } else {
       if (this.props.onChange) {
         this.props.onChange(this.state.until);
       }
       this.setState({
         lastUntil: this.state.until,
-        until: Math.max(0, this.state.until - 1)
+        until: Math.max(0, this.state.until - 1),
       });
     }
   };
 
   renderDigit = (d) => {
-    const {digitStyle, digitTxtStyle, size} = this.props;
+    const { digitStyle, digitTxtStyle, size } = this.props;
     return (
-      <View style={[
-        styles.digitCont,        
-        {width: size * 2.3, height: size * 2.6},
-        digitStyle,
-      ]}>
-        <Text style={[
-          styles.digitTxt,
-          {fontSize: size},
-          digitTxtStyle,
-        ]}>
+      <View
+        style={[
+          styles.digitCont,
+          { width: size * 2.3, height: size * 2.6 },
+          digitStyle,
+        ]}
+      >
+        <Text style={[styles.digitTxt, { fontSize: size }, digitTxtStyle]}>
           {d}
         </Text>
       </View>
     );
   };
 
-  renderLabel = label => {
-    const {timeLabelStyle, size} = this.props;
+  renderLabel = (label) => {
+    const { timeLabelStyle, size } = this.props;
     if (label) {
       return (
-        <Text style={[
-          styles.timeTxt,
-          {fontSize: size / 1.8},
-          timeLabelStyle,
-        ]}>
+        <Text
+          style={[styles.timeTxt, { fontSize: size / 1.8 }, timeLabelStyle]}
+        >
           {label}
         </Text>
       );
@@ -167,23 +177,23 @@ class CountDown extends React.Component {
   renderDoubleDigits = (label, digits) => {
     return (
       <View style={styles.doubleDigitCont}>
-        <View style={styles.timeInnerCont}>
-          {this.renderDigit(digits)}
-        </View>
+        <View style={styles.timeInnerCont}>{this.renderDigit(digits)}</View>
         {this.renderLabel(label)}
       </View>
     );
   };
 
   renderSeparator = () => {
-    const {separatorStyle, size} = this.props;
+    const { separatorStyle, size } = this.props;
     return (
-      <View style={{justifyContent: 'center', alignItems: 'center'}}>
-        <Text style={[
-          styles.separatorTxt,
-          {fontSize: size * 1.2},
-          separatorStyle,
-        ]}>
+      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <Text
+          style={[
+            styles.separatorTxt,
+            { fontSize: size * 1.2 },
+            separatorStyle,
+          ]}
+        >
           {':'}
         </Text>
       </View>
@@ -191,34 +201,47 @@ class CountDown extends React.Component {
   };
 
   renderCountDown = () => {
-    const {timeToShow, timeLabels, showSeparator} = this.props;
-    const {until} = this.state;
-    const {days, hours, minutes, seconds} = this.getTimeLeft();
-    const newTime = sprintf('%02d:%02d:%02d:%02d', days, hours, minutes, seconds).split(':');
+    const { timeToShow, timeLabels, showSeparator } = this.props;
+    const { until } = this.state;
+    const { days, hours, minutes, seconds } = this.getTimeLeft();
+    const newTime = sprintf(
+      '%02d:%02d:%02d:%02d',
+      days,
+      hours,
+      minutes,
+      seconds
+    ).split(':');
     const Component = this.props.onPress ? TouchableOpacity : View;
 
     return (
-      <Component
-        style={styles.timeCont}
-        onPress={this.props.onPress}
-      >
-        {timeToShow.includes('D') ? this.renderDoubleDigits(timeLabels.d, newTime[0]) : null}
-        {showSeparator && timeToShow.includes('D') && timeToShow.includes('H') ? this.renderSeparator() : null}
-        {timeToShow.includes('H') ? this.renderDoubleDigits(timeLabels.h, newTime[1]) : null}
-        {showSeparator && timeToShow.includes('H') && timeToShow.includes('M') ? this.renderSeparator() : null}
-        {timeToShow.includes('M') ? this.renderDoubleDigits(timeLabels.m, newTime[2]) : null}
-        {showSeparator && timeToShow.includes('M') && timeToShow.includes('S') ? this.renderSeparator() : null}
-        {timeToShow.includes('S') ? this.renderDoubleDigits(timeLabels.s, newTime[3]) : null}
+      <Component style={styles.timeCont} onPress={this.props.onPress}>
+        {timeToShow.includes('D')
+          ? this.renderDoubleDigits(timeLabels.d, newTime[0])
+          : null}
+        {showSeparator && timeToShow.includes('D') && timeToShow.includes('H')
+          ? this.renderSeparator()
+          : null}
+        {timeToShow.includes('H')
+          ? this.renderDoubleDigits(timeLabels.h, newTime[1])
+          : null}
+        {showSeparator && timeToShow.includes('H') && timeToShow.includes('M')
+          ? this.renderSeparator()
+          : null}
+        {timeToShow.includes('M')
+          ? this.renderDoubleDigits(timeLabels.m, newTime[2])
+          : null}
+        {showSeparator && timeToShow.includes('M') && timeToShow.includes('S')
+          ? this.renderSeparator()
+          : null}
+        {timeToShow.includes('S')
+          ? this.renderDoubleDigits(timeLabels.s, newTime[3])
+          : null}
       </Component>
     );
   };
 
   render() {
-    return (
-      <View style={this.props.style}>
-        {this.renderCountDown()}
-      </View>
-    );
+    return <View style={this.props.style}>{this.renderCountDown()}</View>;
   }
 }
 
@@ -263,7 +286,7 @@ const styles = StyleSheet.create({
   digitTxt: {
     color: 'white',
     fontWeight: 'bold',
-    fontVariant: ['tabular-nums']
+    fontVariant: ['tabular-nums'],
   },
   separatorTxt: {
     backgroundColor: 'transparent',