From 9c6ebad502bce023e53e100350f2a9989af97a76 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Thu, 16 Apr 2020 19:26:40 +0200
Subject: [PATCH] Show attention seeker when no group selected

---
 package.json                               |  1 +
 src/components/Custom/AnimatedBottomBar.js | 13 ++++++++++---
 src/screens/Websites/PlanexScreen.js       |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index b7a5c17..d3f686d 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
+    "react-native-animatable": "^1.3.3",
     "react-native-app-intro-slider": "^4.0.0",
     "react-native-appearance": "~0.3.3",
     "react-native-autolink": "^3.0.0",
diff --git a/src/components/Custom/AnimatedBottomBar.js b/src/components/Custom/AnimatedBottomBar.js
index 5dc78ac..03afd9d 100644
--- a/src/components/Custom/AnimatedBottomBar.js
+++ b/src/components/Custom/AnimatedBottomBar.js
@@ -4,12 +4,15 @@ import * as React from 'react';
 import {StyleSheet, View} from "react-native";
 import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
 import AutoHideComponent from "./AutoHideComponent";
+import * as Animatable from 'react-native-animatable';
+
+const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
 
 type Props = {
     navigation: Object,
     theme: Object,
     onPress: Function,
-    currentGroup: string,
+    seekAttention: boolean,
 }
 
 type State = {
@@ -42,7 +45,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
     }
 
     shouldComponentUpdate(nextProps: Props, nextState: State) {
-        return (nextProps.currentGroup !== this.props.currentGroup)
+        return (nextProps.seekAttention !== this.props.seekAttention)
             || (nextState.currentMode !== this.state.currentMode);
     }
 
@@ -76,7 +79,11 @@ class AnimatedBottomBar extends React.Component<Props, State> {
                 style={styles.container}>
                 <Surface style={styles.surface}>
                     <View style={styles.fabContainer}>
-                        <FAB
+                        <AnimatedFAB
+                            animation={this.props.seekAttention ? "jello" : undefined}
+                            easing="ease-out"
+                            iterationCount="infinite"
+                            // useNativeDriver={true}
                             style={styles.fab}
                             icon="account-clock"
                             onPress={() => this.props.navigation.navigate('group-select')}
diff --git a/src/screens/Websites/PlanexScreen.js b/src/screens/Websites/PlanexScreen.js
index 64ceb06..72fbb9a 100644
--- a/src/screens/Websites/PlanexScreen.js
+++ b/src/screens/Websites/PlanexScreen.js
@@ -336,7 +336,7 @@ class PlanexScreen extends React.Component<Props, State> {
                     {...this.props}
                     ref={this.barRef}
                     onPress={this.sendMessage}
-                    currentGroup={this.state.currentGroup.name}
+                    seekAttention={this.state.currentGroup.id === -1}
                 />
             </View>
         );