From 300558ac56438a60312ed9e73abf0634f7ce1d75 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <arnaud.vergnet@mailo.com>
Date: Tue, 22 Sep 2020 19:55:41 +0200
Subject: [PATCH] Update image gallery screen to use TypeScript

---
 ...alleryScreen.js => ImageGalleryScreen.tsx} | 63 +++++++++++--------
 1 file changed, 38 insertions(+), 25 deletions(-)
 rename src/screens/Media/{ImageGalleryScreen.js => ImageGalleryScreen.tsx} (70%)

diff --git a/src/screens/Media/ImageGalleryScreen.js b/src/screens/Media/ImageGalleryScreen.tsx
similarity index 70%
rename from src/screens/Media/ImageGalleryScreen.js
rename to src/screens/Media/ImageGalleryScreen.tsx
index 0cea27e..b77ecec 100644
--- a/src/screens/Media/ImageGalleryScreen.js
+++ b/src/screens/Media/ImageGalleryScreen.tsx
@@ -17,34 +17,42 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {IconButton, Text} from 'react-native-paper';
 import ImageViewer from 'react-native-image-zoom-viewer';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {StackNavigationProp, StackScreenProps} from '@react-navigation/stack';
 import * as Animatable from 'react-native-animatable';
+import {View} from 'react-native';
+import {MainStackParamsList} from '../../navigation/MainNavigator';
 
-type PropsType = {
-  navigation: StackNavigationProp,
-  route: {params: {images: Array<{url: string}>}},
+type ImageGalleryScreenNavigationProp = StackScreenProps<
+  MainStackParamsList,
+  'gallery'
+>;
+
+type Props = ImageGalleryScreenNavigationProp & {
+  navigation: StackNavigationProp<any>;
 };
 
-class ImageGalleryScreen extends React.Component<PropsType> {
+class ImageGalleryScreen extends React.Component<Props> {
   images: Array<{url: string}>;
 
-  closeButtonRef: {current: null | Animatable.View};
+  closeButtonRef: {current: null | (Animatable.View & View)};
 
-  indicatorRef: {current: null | Animatable.View};
+  indicatorRef: {current: null | (Animatable.View & View)};
 
   controlsShown: boolean;
 
-  constructor(props: PropsType) {
+  constructor(props: Props) {
     super(props);
     this.closeButtonRef = React.createRef();
     this.indicatorRef = React.createRef();
     this.controlsShown = true;
-    if (props.route.params != null) this.images = props.route.params.images;
+    if (props.route.params) {
+      this.images = props.route.params.images;
+    } else {
+      this.images = [];
+    }
   }
 
   goBack = () => {
@@ -52,7 +60,7 @@ class ImageGalleryScreen extends React.Component<PropsType> {
     navigation.goBack();
   };
 
-  getRenderHeader = (): React.Node => {
+  getRenderHeader = () => {
     return (
       <Animatable.View
         ref={this.closeButtonRef}
@@ -73,11 +81,8 @@ class ImageGalleryScreen extends React.Component<PropsType> {
     );
   };
 
-  getRenderIndicator = (
-    currentIndex?: number,
-    allSize?: number,
-  ): React.Node => {
-    if (currentIndex != null && allSize != null && allSize !== 1)
+  getRenderIndicator = (currentIndex?: number, allSize?: number) => {
+    if (currentIndex != null && allSize != null && allSize !== 1) {
       return (
         <Animatable.View
           ref={this.indicatorRef}
@@ -102,30 +107,38 @@ class ImageGalleryScreen extends React.Component<PropsType> {
           </Text>
         </Animatable.View>
       );
-    return null;
+    }
+    return <View />;
   };
 
   onImageClick = () => {
-    if (this.controlsShown) this.hideControls();
-    else this.showControls();
+    if (this.controlsShown) {
+      this.hideControls();
+    } else {
+      this.showControls();
+    }
     this.controlsShown = !this.controlsShown;
   };
 
   hideControls() {
-    if (this.closeButtonRef.current != null)
+    if (this.closeButtonRef.current && this.closeButtonRef.current.fadeOutUp) {
       this.closeButtonRef.current.fadeOutUp(200);
-    if (this.indicatorRef.current != null)
+    }
+    if (this.indicatorRef.current && this.indicatorRef.current.fadeOutUp) {
       this.indicatorRef.current.fadeOutUp(300);
+    }
   }
 
   showControls() {
-    if (this.closeButtonRef.current != null)
+    if (this.closeButtonRef.current && this.closeButtonRef.current.fadeInDown) {
       this.closeButtonRef.current.fadeInDown(300);
-    if (this.indicatorRef.current != null)
+    }
+    if (this.indicatorRef.current && this.indicatorRef.current.fadeInDown) {
       this.indicatorRef.current.fadeInDown(400);
+    }
   }
 
-  render(): React.Node {
+  render() {
     return (
       <ImageViewer
         useNativeDriver