From 18f8c64302e54f72c86cc1434c63fa0e240c3d96 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <arnaud.vergnet@mailo.com>
Date: Tue, 22 Sep 2020 11:52:17 +0200
Subject: [PATCH] Update image gallery button to use TypeScript

---
 ...alleryButton.js => ImageGalleryButton.tsx} | 47 +++++++++----------
 1 file changed, 21 insertions(+), 26 deletions(-)
 rename src/components/Media/{ImageGalleryButton.js => ImageGalleryButton.tsx} (54%)

diff --git a/src/components/Media/ImageGalleryButton.js b/src/components/Media/ImageGalleryButton.tsx
similarity index 54%
rename from src/components/Media/ImageGalleryButton.js
rename to src/components/Media/ImageGalleryButton.tsx
index 236df8b..7075bfa 100644
--- a/src/components/Media/ImageGalleryButton.js
+++ b/src/components/Media/ImageGalleryButton.tsx
@@ -17,41 +17,36 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {TouchableRipple} from 'react-native-paper';
-import {StackNavigationProp} from '@react-navigation/stack';
 import {Image} from 'react-native-animatable';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import {useNavigation} from '@react-navigation/native';
+import {ViewStyle} from 'react-native';
 
 type PropsType = {
-  navigation: StackNavigationProp,
-  images: Array<{url: string}>,
-  style: ViewStyleProp,
+  images: Array<{url: string}>;
+  style: ViewStyle;
 };
 
-class ImageGalleryButton extends React.Component<PropsType> {
-  onPress = () => {
-    const {navigation, images} = this.props;
-    navigation.navigate('gallery', {images});
+function ImageGalleryButton(props: PropsType) {
+  const navigation = useNavigation();
+
+  const onPress = () => {
+    navigation.navigate('gallery', {images: props.images});
   };
 
-  render(): React.Node {
-    const {style, images} = this.props;
-    return (
-      <TouchableRipple onPress={this.onPress} style={style}>
-        <Image
-          resizeMode="contain"
-          source={{uri: images[0].url}}
-          style={{
-            width: '100%',
-            height: '100%',
-          }}
-        />
-      </TouchableRipple>
-    );
-  }
+  return (
+    <TouchableRipple onPress={onPress} style={props.style}>
+      <Image
+        resizeMode="contain"
+        source={{uri: props.images[0].url}}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    </TouchableRipple>
+  );
 }
 
 export default ImageGalleryButton;