convert connection manager to context

App.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { LogBox, Platform } from 'react-native';
 import { setSafeBounceHeight } from 'react-navigation-collapsible';
 import SplashScreen from 'react-native-splash-screen';
-import ConnectionManager from './src/managers/ConnectionManager';
 import type { ParsedUrlDataType } from './src/utils/URLHandler';
 import URLHandler from './src/utils/URLHandler';
 import initLocales from './src/utils/Locales';
@@ -48,6 +47,8 @@ import {
   ProxiwashPreferencesProvider,
 } from './src/components/providers/PreferencesProvider';
 import MainApp from './src/screens/MainApp';
+import LoginProvider from './src/components/providers/LoginProvider';
+import { retrieveLoginToken } from './src/utils/loginToken';
 
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
 // Crashes app when navigating away from webview on android 9+
@@ -67,6 +68,7 @@ type StateType = {
     proxiwash: ProxiwashPreferencesType;
     mascot: MascotPreferencesType;
   };
+  loginToken?: string;
 };
 
 export default class App extends React.Component<{}, StateType> {
@@ -88,6 +90,7 @@ export default class App extends React.Component<{}, StateType> {
         proxiwash: defaultProxiwashPreferences,
         mascot: defaultMascotPreferences,
       },
+      loginToken: undefined,
     };
     initLocales();
     this.navigatorRef = React.createRef();
@@ -136,10 +139,11 @@ export default class App extends React.Component<{}, StateType> {
       | PlanexPreferencesType
       | ProxiwashPreferencesType
       | MascotPreferencesType
-      | void
+      | string
+      | undefined
     >
   ) => {
-    const [general, planex, proxiwash, mascot] = values;
+    const [general, planex, proxiwash, mascot, token] = values;
     this.setState({
       isLoading: false,
       initialPreferences: {
@@ -148,6 +152,7 @@ export default class App extends React.Component<{}, StateType> {
         proxiwash: proxiwash as ProxiwashPreferencesType,
         mascot: mascot as MascotPreferencesType,
       },
+      loginToken: token as string | undefined,
     });
     SplashScreen.hide();
   };
@@ -175,7 +180,7 @@ export default class App extends React.Component<{}, StateType> {
         Object.values(MascotPreferenceKeys),
         defaultMascotPreferences
       ),
-      ConnectionManager.getInstance().recoverLogin(),
+      retrieveLoginToken(),
     ])
       .then(this.onLoadFinished)
       .catch(this.onLoadFinished);
@@ -202,11 +207,13 @@ export default class App extends React.Component<{}, StateType> {
             <MascotPreferencesProvider
               initialPreferences={this.state.initialPreferences.mascot}
             >
-              <MainApp
-                ref={this.navigatorRef}
-                defaultHomeData={this.defaultHomeData}
-                defaultHomeRoute={this.defaultHomeRoute}
-              />
+              <LoginProvider initialToken={this.state.loginToken}>
+                <MainApp
+                  ref={this.navigatorRef}
+                  defaultHomeData={this.defaultHomeData}
+                  defaultHomeRoute={this.defaultHomeRoute}
+                />
+              </LoginProvider>
             </MascotPreferencesProvider>
           </ProxiwashPreferencesProvider>
         </PlanexPreferencesProvider>

src/components/Amicale/Login/LoginForm.tsx

@@ -0,0 +1,231 @@
+import React, { useRef, useState } from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  TextInput as RNTextInput,
+} from 'react-native';
+import {
+  Button,
+  Card,
+  HelperText,
+  TextInput,
+  useTheme,
+} from 'react-native-paper';
+import i18n from 'i18n-js';
+import GENERAL_STYLES from '../../../constants/Styles';
+
+type Props = {
+  loading: boolean;
+  onSubmit: (email: string, password: string) => void;
+  onHelpPress: () => void;
+  onResetPasswordPress: () => void;
+};
+
+const ICON_AMICALE = require('../../../assets/amicale.png');
+
+const styles = StyleSheet.create({
+  card: {
+    marginTop: 'auto',
+    marginBottom: 'auto',
+  },
+  header: {
+    fontSize: 36,
+    marginBottom: 48,
+  },
+  text: {
+    color: '#ffffff',
+  },
+  buttonContainer: {
+    flexWrap: 'wrap',
+  },
+  lockButton: {
+    marginRight: 'auto',
+    marginBottom: 20,
+  },
+  sendButton: {
+    marginLeft: 'auto',
+  },
+});
+
+const emailRegex = /^.+@.+\..+$/;
+
+/**
+ * Checks if the entered email is valid (matches the regex)
+ *
+ * @returns {boolean}
+ */
+function isEmailValid(email: string): boolean {
+  return emailRegex.test(email);
+}
+
+/**
+ * Checks if the user has entered a password
+ *
+ * @returns {boolean}
+ */
+function isPasswordValid(password: string): boolean {
+  return password !== '';
+}
+
+export default function LoginForm(props: Props) {
+  const theme = useTheme();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isEmailValidated, setIsEmailValidated] = useState(false);
+  const [isPasswordValidated, setIsPasswordValidated] = useState(false);
+  const passwordRef = useRef<RNTextInput>(null);
+  /**
+   * Checks if we should tell the user his email is invalid.
+   * We should only show this if his email is invalid and has been checked when un-focusing the input
+   *
+   * @returns {boolean|boolean}
+   */
+  const shouldShowEmailError = () => {
+    return isEmailValidated && !isEmailValid(email);
+  };
+
+  /**
+   * Checks if we should tell the user his password is invalid.
+   * We should only show this if his password is invalid and has been checked when un-focusing the input
+   *
+   * @returns {boolean|boolean}
+   */
+  const shouldShowPasswordError = () => {
+    return isPasswordValidated && !isPasswordValid(password);
+  };
+
+  const onEmailSubmit = () => {
+    if (passwordRef.current) {
+      passwordRef.current.focus();
+    }
+  };
+
+  /**
+   * The user has unfocused the input, his email is ready to be validated
+   */
+  const validateEmail = () => setIsEmailValidated(true);
+
+  /**
+   * The user has unfocused the input, his password is ready to be validated
+   */
+  const validatePassword = () => setIsPasswordValidated(true);
+
+  const onEmailChange = (value: string) => {
+    if (isEmailValidated) {
+      setIsEmailValidated(false);
+    }
+    setEmail(value);
+  };
+
+  const onPasswordChange = (value: string) => {
+    if (isPasswordValidated) {
+      setIsPasswordValidated(false);
+    }
+    setPassword(value);
+  };
+
+  const shouldEnableLogin = () => {
+    return isEmailValid(email) && isPasswordValid(password) && !props.loading;
+  };
+
+  const onSubmit = () => {
+    if (shouldEnableLogin()) {
+      props.onSubmit(email, password);
+    }
+  };
+
+  return (
+    <View style={styles.card}>
+      <Card.Title
+        title={i18n.t('screens.login.title')}
+        titleStyle={styles.text}
+        subtitle={i18n.t('screens.login.subtitle')}
+        subtitleStyle={styles.text}
+        left={({ size }) => (
+          <Image
+            source={ICON_AMICALE}
+            style={{
+              width: size,
+              height: size,
+            }}
+          />
+        )}
+      />
+      <Card.Content>
+        <View>
+          <TextInput
+            label={i18n.t('screens.login.email')}
+            mode={'outlined'}
+            value={email}
+            onChangeText={onEmailChange}
+            onBlur={validateEmail}
+            onSubmitEditing={onEmailSubmit}
+            error={shouldShowEmailError()}
+            textContentType={'emailAddress'}
+            autoCapitalize={'none'}
+            autoCompleteType={'email'}
+            autoCorrect={false}
+            keyboardType={'email-address'}
+            returnKeyType={'next'}
+            secureTextEntry={false}
+          />
+          <HelperText type={'error'} visible={shouldShowEmailError()}>
+            {i18n.t('screens.login.emailError')}
+          </HelperText>
+          <TextInput
+            ref={passwordRef}
+            label={i18n.t('screens.login.password')}
+            mode={'outlined'}
+            value={password}
+            onChangeText={onPasswordChange}
+            onBlur={validatePassword}
+            onSubmitEditing={onSubmit}
+            error={shouldShowPasswordError()}
+            textContentType={'password'}
+            autoCapitalize={'none'}
+            autoCompleteType={'password'}
+            autoCorrect={false}
+            keyboardType={'default'}
+            returnKeyType={'done'}
+            secureTextEntry={true}
+          />
+          <HelperText type={'error'} visible={shouldShowPasswordError()}>
+            {i18n.t('screens.login.passwordError')}
+          </HelperText>
+        </View>
+        <Card.Actions style={styles.buttonContainer}>
+          <Button
+            icon="lock-question"
+            mode="contained"
+            onPress={props.onResetPasswordPress}
+            color={theme.colors.warning}
+            style={styles.lockButton}
+          >
+            {i18n.t('screens.login.resetPassword')}
+          </Button>
+          <Button
+            icon="send"
+            mode="contained"
+            disabled={!shouldEnableLogin()}
+            loading={props.loading}
+            onPress={onSubmit}
+            style={styles.sendButton}
+          >
+            {i18n.t('screens.login.title')}
+          </Button>
+        </Card.Actions>
+        <Card.Actions>
+          <Button
+            icon="help-circle"
+            mode="contained"
+            onPress={props.onHelpPress}
+            style={GENERAL_STYLES.centerHorizontal}
+          >
+            {i18n.t('screens.login.mascotDialog.title')}
+          </Button>
+        </Card.Actions>
+      </Card.Content>
+    </View>
+  );
+}

src/components/Amicale/LogoutDialog.tsx

@@ -20,8 +20,7 @@
 import * as React from 'react';
 import i18n from 'i18n-js';
 import LoadingConfirmDialog from '../Dialogs/LoadingConfirmDialog';
-import ConnectionManager from '../../managers/ConnectionManager';
-import { useNavigation } from '@react-navigation/native';
+import { useLogout } from '../../utils/logout';
 
 type PropsType = {
   visible: boolean;
@@ -29,19 +28,12 @@ type PropsType = {
 };
 
 function LogoutDialog(props: PropsType) {
-  const navigation = useNavigation();
+  const onLogout = useLogout();
+  // Use a loading dialog as it can take some time to update the context
   const onClickAccept = async (): Promise<void> => {
     return new Promise((resolve: () => void) => {
-      ConnectionManager.getInstance()
-        .disconnect()
-        .then(() => {
-          navigation.reset({
-            index: 0,
-            routes: [{ name: 'main' }],
-          });
-          props.onDismiss();
-          resolve();
-        });
+      onLogout();
+      resolve();
     });
   };
 

src/components/Amicale/Profile/ProfileClubCard.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Card, Avatar, Divider, useTheme, List } from 'react-native-paper';
+import i18n from 'i18n-js';
+import { FlatList, StyleSheet } from 'react-native';
+import { ProfileClubType } from '../../../screens/Amicale/ProfileScreen';
+import { useNavigation } from '@react-navigation/core';
+
+type Props = {
+  clubs?: Array<ProfileClubType>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 10,
+  },
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default function ProfileClubCard(props: Props) {
+  const theme = useTheme();
+  const navigation = useNavigation();
+
+  const clubKeyExtractor = (item: ProfileClubType) => item.name;
+
+  const getClubListItem = ({ item }: { item: ProfileClubType }) => {
+    const onPress = () =>
+      navigation.navigate('club-information', { clubId: item.id });
+    let description = i18n.t('screens.profile.isMember');
+    let icon = (leftProps: {
+      color: string;
+      style: {
+        marginLeft: number;
+        marginRight: number;
+        marginVertical?: number;
+      };
+    }) => (
+      <List.Icon
+        color={leftProps.color}
+        style={leftProps.style}
+        icon="chevron-right"
+      />
+    );
+    if (item.is_manager) {
+      description = i18n.t('screens.profile.isManager');
+      icon = (leftProps) => (
+        <List.Icon
+          style={leftProps.style}
+          icon="star"
+          color={theme.colors.primary}
+        />
+      );
+    }
+    return (
+      <List.Item
+        title={item.name}
+        description={description}
+        left={icon}
+        onPress={onPress}
+      />
+    );
+  };
+
+  function getClubList(list: Array<ProfileClubType> | undefined) {
+    if (!list) {
+      return null;
+    }
+
+    list.sort((a) => (a.is_manager ? -1 : 1));
+    return (
+      <FlatList
+        renderItem={getClubListItem}
+        keyExtractor={clubKeyExtractor}
+        data={list}
+      />
+    );
+  }
+
+  return (
+    <Card style={styles.card}>
+      <Card.Title
+        title={i18n.t('screens.profile.clubs')}
+        subtitle={i18n.t('screens.profile.clubsSubtitle')}
+        left={(iconProps) => (
+          <Avatar.Icon
+            size={iconProps.size}
+            icon="account-group"
+            color={theme.colors.primary}
+            style={styles.icon}
+          />
+        )}
+      />
+      <Card.Content>
+        <Divider />
+        {getClubList(props.clubs)}
+      </Card.Content>
+    </Card>
+  );
+}

src/components/Amicale/Profile/ProfileMembershipCard.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Avatar, Card, List, useTheme } from 'react-native-paper';
+import i18n from 'i18n-js';
+import { StyleSheet } from 'react-native';
+
+type Props = {
+  valid?: boolean;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 10,
+  },
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default function ProfileMembershipCard(props: Props) {
+  const theme = useTheme();
+  const state = props.valid === true;
+  return (
+    <Card style={styles.card}>
+      <Card.Title
+        title={i18n.t('screens.profile.membership')}
+        subtitle={i18n.t('screens.profile.membershipSubtitle')}
+        left={(iconProps) => (
+          <Avatar.Icon
+            size={iconProps.size}
+            icon="credit-card"
+            color={theme.colors.primary}
+            style={styles.icon}
+          />
+        )}
+      />
+      <Card.Content>
+        <List.Section>
+          <List.Item
+            title={
+              state
+                ? i18n.t('screens.profile.membershipPayed')
+                : i18n.t('screens.profile.membershipNotPayed')
+            }
+            left={(leftProps) => (
+              <List.Icon
+                style={leftProps.style}
+                color={state ? theme.colors.success : theme.colors.danger}
+                icon={state ? 'check' : 'close'}
+              />
+            )}
+          />
+        </List.Section>
+      </Card.Content>
+    </Card>
+  );
+}

src/components/Amicale/Profile/ProfilePersonalCard.tsx

@@ -0,0 +1,110 @@
+import { useNavigation } from '@react-navigation/core';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Avatar,
+  Button,
+  Card,
+  Divider,
+  List,
+  useTheme,
+} from 'react-native-paper';
+import Urls from '../../../constants/Urls';
+import { ProfileDataType } from '../../../screens/Amicale/ProfileScreen';
+import i18n from 'i18n-js';
+
+type Props = {
+  profile?: ProfileDataType;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 10,
+  },
+  icon: {
+    backgroundColor: 'transparent',
+  },
+  editButton: {
+    marginLeft: 'auto',
+  },
+  mascot: {
+    width: 60,
+  },
+  title: {
+    marginLeft: 10,
+  },
+});
+
+function getFieldValue(field?: string): string {
+  return field ? field : i18n.t('screens.profile.noData');
+}
+
+export default function ProfilePersonalCard(props: Props) {
+  const { profile } = props;
+  const theme = useTheme();
+  const navigation = useNavigation();
+
+  function getPersonalListItem(field: string | undefined, icon: string) {
+    const title = field != null ? getFieldValue(field) : ':(';
+    const subtitle = field != null ? '' : getFieldValue(field);
+    return (
+      <List.Item
+        title={title}
+        description={subtitle}
+        left={(leftProps) => (
+          <List.Icon
+            style={leftProps.style}
+            icon={icon}
+            color={field != null ? leftProps.color : theme.colors.textDisabled}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <Card style={styles.card}>
+      <Card.Title
+        title={`${profile?.first_name} ${profile?.last_name}`}
+        subtitle={profile?.email}
+        left={(iconProps) => (
+          <Avatar.Icon
+            size={iconProps.size}
+            icon="account"
+            color={theme.colors.primary}
+            style={styles.icon}
+          />
+        )}
+      />
+      <Card.Content>
+        <Divider />
+        <List.Section>
+          <List.Subheader>
+            {i18n.t('screens.profile.personalInformation')}
+          </List.Subheader>
+          {getPersonalListItem(profile?.birthday, 'cake-variant')}
+          {getPersonalListItem(profile?.phone, 'phone')}
+          {getPersonalListItem(profile?.email, 'email')}
+          {getPersonalListItem(profile?.branch, 'school')}
+        </List.Section>
+        <Divider />
+        <Card.Actions>
+          <Button
+            icon="account-edit"
+            mode="contained"
+            onPress={() => {
+              navigation.navigate('website', {
+                host: Urls.websites.amicale,
+                path: profile?.link,
+                title: i18n.t('screens.websites.amicale'),
+              });
+            }}
+            style={styles.editButton}
+          >
+            {i18n.t('screens.profile.editInformation')}
+          </Button>
+        </Card.Actions>
+      </Card.Content>
+    </Card>
+  );
+}

src/components/Amicale/Profile/ProfileWelcomeCard.tsx

@@ -0,0 +1,81 @@
+import { useNavigation } from '@react-navigation/core';
+import React from 'react';
+import { Button, Card, Divider, Paragraph } from 'react-native-paper';
+import Mascot, { MASCOT_STYLE } from '../../Mascot/Mascot';
+import i18n from 'i18n-js';
+import { StyleSheet } from 'react-native';
+import CardList from '../../Lists/CardList/CardList';
+import { getAmicaleServices, SERVICES_KEY } from '../../../utils/Services';
+
+type Props = {
+  firstname?: string;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 10,
+  },
+  editButton: {
+    marginLeft: 'auto',
+  },
+  mascot: {
+    width: 60,
+  },
+  title: {
+    marginLeft: 10,
+  },
+});
+
+function ProfileWelcomeCard(props: Props) {
+  const navigation = useNavigation();
+  return (
+    <Card style={styles.card}>
+      <Card.Title
+        title={i18n.t('screens.profile.welcomeTitle', {
+          name: props.firstname,
+        })}
+        left={() => (
+          <Mascot
+            style={styles.mascot}
+            emotion={MASCOT_STYLE.COOL}
+            animated
+            entryAnimation={{
+              animation: 'bounceIn',
+              duration: 1000,
+            }}
+          />
+        )}
+        titleStyle={styles.title}
+      />
+      <Card.Content>
+        <Divider />
+        <Paragraph>{i18n.t('screens.profile.welcomeDescription')}</Paragraph>
+        <CardList
+          dataset={getAmicaleServices(navigation.navigate, [
+            SERVICES_KEY.PROFILE,
+          ])}
+          isHorizontal={true}
+        />
+        <Paragraph>{i18n.t('screens.profile.welcomeFeedback')}</Paragraph>
+        <Divider />
+        <Card.Actions>
+          <Button
+            icon="bug"
+            mode="contained"
+            onPress={() => {
+              navigation.navigate('feedback');
+            }}
+            style={styles.editButton}
+          >
+            {i18n.t('screens.feedback.homeButtonTitle')}
+          </Button>
+        </Card.Actions>
+      </Card.Content>
+    </Card>
+  );
+}
+
+export default React.memo(
+  ProfileWelcomeCard,
+  (pp, np) => pp.firstname === np.firstname
+);

src/components/Amicale/Vote/VoteSelect.tsx

@@ -17,30 +17,23 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useState } from 'react';
 import { Avatar, Button, Card, RadioButton } from 'react-native-paper';
 import { FlatList, StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
-import ConnectionManager from '../../../managers/ConnectionManager';
 import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
 import ErrorDialog from '../../Dialogs/ErrorDialog';
 import type { VoteTeamType } from '../../../screens/Amicale/VoteScreen';
 import { ApiRejectType } from '../../../utils/WebData';
 import { REQUEST_STATUS } from '../../../utils/Requests';
+import { useAuthenticatedRequest } from '../../../context/loginContext';
 
-type PropsType = {
+type Props = {
   teams: Array<VoteTeamType>;
   onVoteSuccess: () => void;
   onVoteError: () => void;
 };
 
-type StateType = {
-  selectedTeam: string;
-  voteDialogVisible: boolean;
-  errorDialogVisible: boolean;
-  currentError: ApiRejectType;
-};
-
 const styles = StyleSheet.create({
   card: {
     margin: 10,
@@ -50,118 +43,98 @@ const styles = StyleSheet.create({
   },
 });
 
-export default class VoteSelect extends React.PureComponent<
-  PropsType,
-  StateType
-> {
-  constructor(props: PropsType) {
-    super(props);
-    this.state = {
-      selectedTeam: 'none',
-      voteDialogVisible: false,
-      errorDialogVisible: false,
-      currentError: { status: REQUEST_STATUS.SUCCESS },
-    };
-  }
-
-  onVoteSelectionChange = (teamName: string): void =>
-    this.setState({ selectedTeam: teamName });
+function VoteSelect(props: Props) {
+  const [selectedTeam, setSelectedTeam] = useState('none');
+  const [voteDialogVisible, setVoteDialogVisible] = useState(false);
+  const [currentError, setCurrentError] = useState<ApiRejectType>({
+    status: REQUEST_STATUS.SUCCESS,
+  });
+  const request = useAuthenticatedRequest('elections/vote', {
+    team: parseInt(selectedTeam, 10),
+  });
 
-  voteKeyExtractor = (item: VoteTeamType): string => item.id.toString();
+  const voteKeyExtractor = (item: VoteTeamType) => item.id.toString();
 
-  voteRenderItem = ({ item }: { item: VoteTeamType }) => (
+  const voteRenderItem = ({ item }: { item: VoteTeamType }) => (
     <RadioButton.Item label={item.name} value={item.id.toString()} />
   );
 
-  showVoteDialog = (): void => this.setState({ voteDialogVisible: true });
+  const showVoteDialog = () => setVoteDialogVisible(true);
 
-  onVoteDialogDismiss = (): void => this.setState({ voteDialogVisible: false });
+  const onVoteDialogDismiss = () => setVoteDialogVisible(false);
 
-  onVoteDialogAccept = async (): Promise<void> => {
+  const onVoteDialogAccept = async (): Promise<void> => {
     return new Promise((resolve: () => void) => {
-      const { state } = this;
-      ConnectionManager.getInstance()
-        .authenticatedRequest('elections/vote', {
-          team: parseInt(state.selectedTeam, 10),
-        })
+      request()
         .then(() => {
-          this.onVoteDialogDismiss();
-          const { props } = this;
+          onVoteDialogDismiss();
           props.onVoteSuccess();
           resolve();
         })
         .catch((error: ApiRejectType) => {
-          this.onVoteDialogDismiss();
-          this.showErrorDialog(error);
+          onVoteDialogDismiss();
+          setCurrentError(error);
           resolve();
         });
     });
   };
 
-  showErrorDialog = (error: ApiRejectType): void =>
-    this.setState({
-      errorDialogVisible: true,
-      currentError: error,
-    });
-
-  onErrorDialogDismiss = () => {
-    this.setState({ errorDialogVisible: false });
-    const { props } = this;
+  const onErrorDialogDismiss = () => {
+    setCurrentError({ status: REQUEST_STATUS.SUCCESS });
     props.onVoteError();
   };
 
-  render() {
-    const { state, props } = this;
-    return (
-      <View>
-        <Card style={styles.card}>
-          <Card.Title
-            title={i18n.t('screens.vote.select.title')}
-            subtitle={i18n.t('screens.vote.select.subtitle')}
-            left={(iconProps) => (
-              <Avatar.Icon size={iconProps.size} icon="alert-decagram" />
-            )}
-          />
-          <Card.Content>
-            <RadioButton.Group
-              onValueChange={this.onVoteSelectionChange}
-              value={state.selectedTeam}
-            >
-              <FlatList
-                data={props.teams}
-                keyExtractor={this.voteKeyExtractor}
-                extraData={state.selectedTeam}
-                renderItem={this.voteRenderItem}
-              />
-            </RadioButton.Group>
-          </Card.Content>
-          <Card.Actions>
-            <Button
-              icon="send"
-              mode="contained"
-              onPress={this.showVoteDialog}
-              style={styles.button}
-              disabled={state.selectedTeam === 'none'}
-            >
-              {i18n.t('screens.vote.select.sendButton')}
-            </Button>
-          </Card.Actions>
-        </Card>
-        <LoadingConfirmDialog
-          visible={state.voteDialogVisible}
-          onDismiss={this.onVoteDialogDismiss}
-          onAccept={this.onVoteDialogAccept}
-          title={i18n.t('screens.vote.select.dialogTitle')}
-          titleLoading={i18n.t('screens.vote.select.dialogTitleLoading')}
-          message={i18n.t('screens.vote.select.dialogMessage')}
-        />
-        <ErrorDialog
-          visible={state.errorDialogVisible}
-          onDismiss={this.onErrorDialogDismiss}
-          status={state.currentError.status}
-          code={state.currentError.code}
+  return (
+    <View>
+      <Card style={styles.card}>
+        <Card.Title
+          title={i18n.t('screens.vote.select.title')}
+          subtitle={i18n.t('screens.vote.select.subtitle')}
+          left={(iconProps) => (
+            <Avatar.Icon size={iconProps.size} icon="alert-decagram" />
+          )}
         />
-      </View>
-    );
-  }
+        <Card.Content>
+          <RadioButton.Group
+            onValueChange={setSelectedTeam}
+            value={selectedTeam}
+          >
+            <FlatList
+              data={props.teams}
+              keyExtractor={voteKeyExtractor}
+              extraData={selectedTeam}
+              renderItem={voteRenderItem}
+            />
+          </RadioButton.Group>
+        </Card.Content>
+        <Card.Actions>
+          <Button
+            icon={'send'}
+            mode={'contained'}
+            onPress={showVoteDialog}
+            style={styles.button}
+            disabled={selectedTeam === 'none'}
+          >
+            {i18n.t('screens.vote.select.sendButton')}
+          </Button>
+        </Card.Actions>
+      </Card>
+      <LoadingConfirmDialog
+        visible={voteDialogVisible}
+        onDismiss={onVoteDialogDismiss}
+        onAccept={onVoteDialogAccept}
+        title={i18n.t('screens.vote.select.dialogTitle')}
+        titleLoading={i18n.t('screens.vote.select.dialogTitleLoading')}
+        message={i18n.t('screens.vote.select.dialogMessage')}
+      />
+      <ErrorDialog
+        visible={currentError.status !== REQUEST_STATUS.SUCCESS}
+        onDismiss={onErrorDialogDismiss}
+        status={currentError.status}
+        code={currentError.code}
+      />
+    </View>
+  );
 }
+
+export default VoteSelect;

src/components/Lists/Equipment/EquipmentListItem.tsx

@@ -20,7 +20,6 @@
 import * as React from 'react';
 import { Avatar, List, useTheme } from 'react-native-paper';
 import i18n from 'i18n-js';
-import { StackNavigationProp } from '@react-navigation/stack';
 import type { DeviceType } from '../../../screens/Amicale/Equipment/EquipmentListScreen';
 import {
   getFirstEquipmentAvailability,
@@ -29,9 +28,9 @@ import {
 } from '../../../utils/EquipmentBooking';
 import { StyleSheet } from 'react-native';
 import GENERAL_STYLES from '../../../constants/Styles';
+import { useNavigation } from '@react-navigation/native';
 
 type PropsType = {
-  navigation: StackNavigationProp<any>;
   userDeviceRentDates: [string, string] | null;
   item: DeviceType;
   height: number;
@@ -48,7 +47,8 @@ const styles = StyleSheet.create({
 
 function EquipmentListItem(props: PropsType) {
   const theme = useTheme();
-  const { item, userDeviceRentDates, navigation, height } = props;
+  const navigation = useNavigation();
+  const { item, userDeviceRentDates, height } = props;
   const isRented = userDeviceRentDates != null;
   const isAvailable = isEquipmentAvailable(item);
   const firstAvailability = getFirstEquipmentAvailability(item);

src/components/Screens/RequestScreen.tsx

@@ -11,7 +11,7 @@ import i18n from 'i18n-js';
 import { API_REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { MainRoutes } from '../../navigation/MainNavigator';
-import ConnectionManager from '../../managers/ConnectionManager';
+import { useLogout } from '../../utils/logout';
 
 export type RequestScreenProps<T> = {
   request: () => Promise<T>;
@@ -44,6 +44,7 @@ type Props<T> = RequestScreenProps<T>;
 const MIN_REFRESH_TIME = 3 * 1000;
 
 export default function RequestScreen<T>(props: Props<T>) {
+  const onLogout = useLogout();
   const navigation = useNavigation<StackNavigationProp<any>>();
   const route = useRoute();
   const refreshInterval = useRef<number>();
@@ -103,13 +104,10 @@ export default function RequestScreen<T>(props: Props<T>) {
 
   useEffect(() => {
     if (isErrorCritical(code)) {
-      ConnectionManager.getInstance()
-        .disconnect()
-        .then(() => {
-          navigation.replace(MainRoutes.Login, { nextScreen: route.name });
-        });
+      onLogout();
+      navigation.replace(MainRoutes.Login, { nextScreen: route.name });
     }
-  }, [code, navigation, route]);
+  }, [code, navigation, route, onLogout]);
 
   if (data === undefined && loading && props.showLoading !== false) {
     return <BasicLoadingScreen />;

src/components/providers/LoginProvider.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { LoginContext, LoginContextType } from '../../context/loginContext';
+
+type Props = {
+  children: React.ReactChild;
+  initialToken: string | undefined;
+};
+
+export default function LoginProvider(props: Props) {
+  const setLogin = (token: string | undefined) => {
+    setLoginState((prevState) => ({
+      ...prevState,
+      token,
+    }));
+  };
+
+  const [loginState, setLoginState] = useState<LoginContextType>({
+    token: props.initialToken,
+    setLogin: setLogin,
+  });
+
+  return (
+    <LoginContext.Provider value={loginState}>
+      {props.children}
+    </LoginContext.Provider>
+  );
+}

src/context/loginContext.ts

@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import { apiRequest } from '../utils/WebData';
+
+export type LoginContextType = {
+  token: string | undefined;
+  setLogin: (token: string | undefined) => void;
+};
+
+export const LoginContext = React.createContext<LoginContextType>({
+  token: undefined,
+  setLogin: () => undefined,
+});
+
+/**
+ * Hook used to retrieve the user token and puid.
+ * @returns Login context with token and puid to undefined if user is not logged in
+ */
+export function useLogin() {
+  return useContext(LoginContext);
+}
+
+/**
+ * Checks if the user is connected
+ * @returns True if the user is connected
+ */
+export function useLoginState() {
+  const { token } = useLogin();
+  return token !== undefined;
+}
+
+/**
+ * Gets the current user token.
+ * @returns The token, or empty string if the user is not logged in
+ */
+export function useLoginToken() {
+  const { token } = useLogin();
+  return token ? token : '';
+}
+
+export function useAuthenticatedRequest<T>(
+  path: string,
+  params?: { [key: string]: any }
+) {
+  const token = useLoginToken();
+  return () => apiRequest<T>(path, 'POST', params, token);
+}

src/managers/ConnectionManager.ts

@@ -1,205 +0,0 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import * as Keychain from 'react-native-keychain';
-import { REQUEST_STATUS } from '../utils/Requests';
-import type { ApiDataLoginType, ApiRejectType } from '../utils/WebData';
-import { apiRequest } from '../utils/WebData';
-
-/**
- * champ: error
- *
- * 0 : SUCCESS -> pas d'erreurs
- * 1 : BAD_CREDENTIALS -> email ou mdp invalide
- * 2 : BAD_TOKEN -> session expirée
- * 3 : NO_CONSENT
- * 403 : FORBIDDEN -> accès a la ressource interdit
- * 500 : SERVER_ERROR -> pb coté serveur
- */
-
-const AUTH_PATH = 'password';
-
-export default class ConnectionManager {
-  static instance: ConnectionManager | null = null;
-
-  private token: string | null;
-
-  constructor() {
-    this.token = null;
-  }
-
-  /**
-   * Gets this class instance or create one if none is found
-   *
-   * @returns {ConnectionManager}
-   */
-  static getInstance(): ConnectionManager {
-    if (ConnectionManager.instance == null) {
-      ConnectionManager.instance = new ConnectionManager();
-    }
-    return ConnectionManager.instance;
-  }
-
-  /**
-   * Gets the current token
-   *
-   * @returns {string | null}
-   */
-  getToken(): string | null {
-    return this.token;
-  }
-
-  /**
-   * Tries to recover login token from the secure keychain
-   *
-   * @returns Promise<void>
-   */
-  async recoverLogin(): Promise<void> {
-    return new Promise((resolve: () => void) => {
-      const token = this.getToken();
-      if (token != null) {
-        resolve();
-      } else {
-        Keychain.getGenericPassword()
-          .then((data: Keychain.UserCredentials | false) => {
-            if (data && data.password != null) {
-              this.token = data.password;
-            }
-            resolve();
-          })
-          .catch(() => resolve());
-      }
-    });
-  }
-
-  /**
-   * Check if the user has a valid token
-   *
-   * @returns {boolean}
-   */
-  isLoggedIn(): boolean {
-    return this.getToken() !== null;
-  }
-
-  /**
-   * Saves the login token in the secure keychain
-   *
-   * @param email
-   * @param token
-   * @returns Promise<void>
-   */
-  async saveLogin(_email: string, token: string): Promise<void> {
-    return new Promise((resolve: () => void, reject: () => void) => {
-      Keychain.setGenericPassword('token', token)
-        .then(() => {
-          this.token = token;
-          resolve();
-        })
-        .catch((): void => reject());
-    });
-  }
-
-  /**
-   * Deletes the login token from the keychain
-   *
-   * @returns Promise<void>
-   */
-  async disconnect(): Promise<void> {
-    return new Promise((resolve: () => void, reject: () => void) => {
-      Keychain.resetGenericPassword()
-        .then(() => {
-          this.token = null;
-          resolve();
-        })
-        .catch((): void => reject());
-    });
-  }
-
-  /**
-   * Sends the given login and password to the api.
-   * If the combination is valid, the login token is received and saved in the secure keychain.
-   * If not, the promise is rejected with the corresponding error code.
-   *
-   * @param email
-   * @param password
-   * @returns Promise<void>
-   */
-  async connect(email: string, password: string): Promise<void> {
-    return new Promise(
-      (resolve: () => void, reject: (error: ApiRejectType) => void) => {
-        const data = {
-          email,
-          password,
-        };
-        apiRequest<ApiDataLoginType>(AUTH_PATH, 'POST', data)
-          .then((response: ApiDataLoginType) => {
-            if (response.token != null) {
-              this.saveLogin(email, response.token)
-                .then(() => resolve())
-                .catch(() =>
-                  reject({
-                    status: REQUEST_STATUS.TOKEN_SAVE,
-                  })
-                );
-            } else {
-              reject({
-                status: REQUEST_STATUS.SERVER_ERROR,
-              });
-            }
-          })
-          .catch((err) => {
-            reject(err);
-          });
-      }
-    );
-  }
-
-  /**
-   * Sends an authenticated request with the login token to the API
-   *
-   * @param path
-   * @param params
-   * @returns Promise<ApiGenericDataType>
-   */
-  async authenticatedRequest<T>(
-    path: string,
-    params?: { [key: string]: any }
-  ): Promise<T> {
-    return new Promise(
-      (
-        resolve: (response: T) => void,
-        reject: (error: ApiRejectType) => void
-      ) => {
-        if (this.getToken() !== null) {
-          const data = {
-            ...params,
-            token: this.getToken(),
-          };
-          apiRequest<T>(path, 'POST', data)
-            .then((response: T) => resolve(response))
-            .catch(reject);
-        } else {
-          reject({
-            status: REQUEST_STATUS.TOKEN_RETRIEVE,
-          });
-        }
-      }
-    );
-  }
-}

src/screens/Amicale/Clubs/ClubDisplayScreen.tsx

@@ -17,7 +17,7 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useState } from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
 import {
   Avatar,
@@ -25,20 +25,21 @@ import {
   Card,
   Chip,
   Paragraph,
-  withTheme,
+  useTheme,
 } from 'react-native-paper';
 import i18n from 'i18n-js';
-import { StackNavigationProp } from '@react-navigation/stack';
 import CustomHTML from '../../../components/Overrides/CustomHTML';
 import { TAB_BAR_HEIGHT } from '../../../components/Tabbar/CustomTabBar';
 import type { ClubCategoryType, ClubType } from './ClubListScreen';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import ImageGalleryButton from '../../../components/Media/ImageGalleryButton';
 import RequestScreen from '../../../components/Screens/RequestScreen';
-import ConnectionManager from '../../../managers/ConnectionManager';
+import { useFocusEffect } from '@react-navigation/core';
+import { useCallback } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { useAuthenticatedRequest } from '../../../context/loginContext';
 
-type PropsType = {
-  navigation: StackNavigationProp<any>;
+type Props = {
   route: {
     params?: {
       data?: ClubType;
@@ -46,7 +47,6 @@ type PropsType = {
       clubId?: number;
     };
   };
-  theme: ReactNativePaper.Theme;
 };
 
 type ResponseType = ClubType;
@@ -89,33 +89,28 @@ const styles = StyleSheet.create({
  * If called with data and categories navigation parameters, will use those to display the data.
  * If called with clubId parameter, will fetch the information on the server
  */
-class ClubDisplayScreen extends React.Component<PropsType> {
-  displayData: ClubType | undefined;
+function ClubDisplayScreen(props: Props) {
+  const navigation = useNavigation();
+  const theme = useTheme();
 
-  categories: Array<ClubCategoryType> | null;
+  const [displayData, setDisplayData] = useState<ClubType | undefined>();
+  const [categories, setCategories] = useState<
+    Array<ClubCategoryType> | undefined
+  >();
+  const [clubId, setClubId] = useState<number | undefined>();
 
-  clubId: number;
-
-  shouldFetchData: boolean;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.displayData = undefined;
-    this.categories = null;
-    this.clubId = props.route.params?.clubId ? props.route.params.clubId : 0;
-    this.shouldFetchData = true;
-
-    if (
-      props.route.params &&
-      props.route.params.data &&
-      props.route.params.categories
-    ) {
-      this.displayData = props.route.params.data;
-      this.categories = props.route.params.categories;
-      this.clubId = props.route.params.data.id;
-      this.shouldFetchData = false;
-    }
-  }
+  useFocusEffect(
+    useCallback(() => {
+      if (props.route.params?.data && props.route.params?.categories) {
+        setDisplayData(props.route.params.data);
+        setCategories(props.route.params.categories);
+        setClubId(props.route.params.data.id);
+      } else {
+        const id = props.route.params?.clubId;
+        setClubId(id ? id : 0);
+      }
+    }, [props.route.params])
+  );
 
   /**
    * Gets the name of the category with the given ID
@@ -123,17 +118,17 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param id The category's ID
    * @returns {string|*}
    */
-  getCategoryName(id: number): string {
+  const getCategoryName = (id: number): string => {
     let categoryName = '';
-    if (this.categories !== null) {
-      this.categories.forEach((item: ClubCategoryType) => {
+    if (categories) {
+      categories.forEach((item: ClubCategoryType) => {
         if (id === item.id) {
           categoryName = item.name;
         }
       });
     }
     return categoryName;
-  }
+  };
 
   /**
    * Gets the view for rendering categories
@@ -141,23 +136,23 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param categories The categories to display (max 2)
    * @returns {null|*}
    */
-  getCategoriesRender(categories: Array<number | null>) {
-    if (this.categories == null) {
+  const getCategoriesRender = (c: Array<number | null>) => {
+    if (!categories) {
       return null;
     }
 
     const final: Array<React.ReactNode> = [];
-    categories.forEach((cat: number | null) => {
+    c.forEach((cat: number | null) => {
       if (cat != null) {
         final.push(
           <Chip style={styles.category} key={cat}>
-            {this.getCategoryName(cat)}
+            {getCategoryName(cat)}
           </Chip>
         );
       }
     });
     return <View style={styles.categoryContainer}>{final}</View>;
-  }
+  };
 
   /**
    * Gets the view for rendering club managers if any
@@ -166,8 +161,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param email The club contact email
    * @returns {*}
    */
-  getManagersRender(managers: Array<string>, email: string | null) {
-    const { props } = this;
+  const getManagersRender = (managers: Array<string>, email: string | null) => {
     const managersListView: Array<React.ReactNode> = [];
     managers.forEach((item: string) => {
       managersListView.push(<Paragraph key={item}>{item}</Paragraph>);
@@ -191,22 +185,18 @@ class ClubDisplayScreen extends React.Component<PropsType> {
             <Avatar.Icon
               size={iconProps.size}
               style={styles.icon}
-              color={
-                hasManagers
-                  ? props.theme.colors.success
-                  : props.theme.colors.primary
-              }
+              color={hasManagers ? theme.colors.success : theme.colors.primary}
               icon="account-tie"
             />
           )}
         />
         <Card.Content>
           {managersListView}
-          {ClubDisplayScreen.getEmailButton(email, hasManagers)}
+          {getEmailButton(email, hasManagers)}
         </Card.Content>
       </Card>
     );
-  }
+  };
 
   /**
    * Gets the email button to contact the club, or the amicale if the club does not have any managers
@@ -215,7 +205,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param hasManagers True if the club has managers
    * @returns {*}
    */
-  static getEmailButton(email: string | null, hasManagers: boolean) {
+  const getEmailButton = (email: string | null, hasManagers: boolean) => {
     const destinationEmail =
       email != null && hasManagers ? email : AMICALE_MAIL;
     const text =
@@ -236,14 +226,14 @@ class ClubDisplayScreen extends React.Component<PropsType> {
         </Button>
       </Card.Actions>
     );
-  }
+  };
 
-  getScreen = (data: ResponseType | undefined) => {
+  const getScreen = (data: ResponseType | undefined) => {
     if (data) {
-      this.updateHeaderTitle(data);
+      updateHeaderTitle(data);
       return (
         <CollapsibleScrollView style={styles.scroll} hasTab>
-          {this.getCategoriesRender(data.category)}
+          {getCategoriesRender(data.category)}
           {data.logo !== null ? (
             <ImageGalleryButton
               images={[{ url: data.logo }]}
@@ -261,7 +251,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
           ) : (
             <View />
           )}
-          {this.getManagersRender(data.responsibles, data.email)}
+          {getManagersRender(data.responsibles, data.email)}
         </CollapsibleScrollView>
       );
     }
@@ -273,27 +263,22 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    *
    * @param data The club data
    */
-  updateHeaderTitle(data: ClubType) {
-    const { props } = this;
-    props.navigation.setOptions({ title: data.name });
-  }
+  const updateHeaderTitle = (data: ClubType) => {
+    navigation.setOptions({ title: data.name });
+  };
 
-  render() {
-    if (this.shouldFetchData) {
-      return (
-        <RequestScreen
-          request={() =>
-            ConnectionManager.getInstance().authenticatedRequest<ResponseType>(
-              'clubs/info',
-              { id: this.clubId }
-            )
-          }
-          render={this.getScreen}
-        />
-      );
-    }
-    return this.getScreen(this.displayData);
-  }
+  const request = useAuthenticatedRequest<ClubType>('clubs/info', {
+    id: clubId,
+  });
+
+  return (
+    <RequestScreen
+      request={request}
+      render={getScreen}
+      cache={displayData}
+      onCacheUpdate={setDisplayData}
+    />
+  );
 }
 
-export default withTheme(ClubDisplayScreen);
+export default ClubDisplayScreen;

src/screens/Amicale/Clubs/ClubListScreen.tsx

@@ -17,11 +17,10 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { Searchbar } from 'react-native-paper';
 import i18n from 'i18n-js';
-import { StackNavigationProp } from '@react-navigation/stack';
 import ClubListItem from '../../../components/Lists/Clubs/ClubListItem';
 import {
   isItemInCategoryFilter,
@@ -31,8 +30,9 @@ import ClubListHeader from '../../../components/Lists/Clubs/ClubListHeader';
 import MaterialHeaderButtons, {
   Item,
 } from '../../../components/Overrides/CustomHeaderButton';
-import ConnectionManager from '../../../managers/ConnectionManager';
 import WebSectionList from '../../../components/Screens/WebSectionList';
+import { useNavigation } from '@react-navigation/native';
+import { useAuthenticatedRequest } from '../../../context/loginContext';
 
 export type ClubCategoryType = {
   id: number;
@@ -49,15 +49,6 @@ export type ClubType = {
   responsibles: Array<string>;
 };
 
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-};
-
-type StateType = {
-  currentlySelectedCategories: Array<number>;
-  currentSearchString: string;
-};
-
 type ResponseType = {
   categories: Array<ClubCategoryType>;
   clubs: Array<ClubType>;
@@ -65,33 +56,52 @@ type ResponseType = {
 
 const LIST_ITEM_HEIGHT = 96;
 
-class ClubListScreen extends React.Component<PropsType, StateType> {
-  categories: Array<ClubCategoryType>;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.categories = [];
-    this.state = {
-      currentlySelectedCategories: [],
-      currentSearchString: '',
+function ClubListScreen() {
+  const navigation = useNavigation();
+  const request = useAuthenticatedRequest<ResponseType>('clubs/list');
+  const [
+    currentlySelectedCategories,
+    setCurrentlySelectedCategories,
+  ] = useState<Array<number>>([]);
+  const [currentSearchString, setCurrentSearchString] = useState('');
+  const categories = useRef<Array<ClubCategoryType>>([]);
+
+  useLayoutEffect(() => {
+    const getSearchBar = () => {
+      return (
+        // @ts-ignore
+        <Searchbar
+          placeholder={i18n.t('screens.proximo.search')}
+          onChangeText={onSearchStringChange}
+        />
+      );
     };
-  }
-
-  /**
-   * Creates the header content
-   */
-  componentDidMount() {
-    const { props } = this;
-    props.navigation.setOptions({
-      headerTitle: this.getSearchBar,
-      headerRight: this.getHeaderButtons,
+    const getHeaderButtons = () => {
+      return (
+        <MaterialHeaderButtons>
+          <Item
+            title="main"
+            iconName="information"
+            onPress={() => navigation.navigate('club-about')}
+          />
+        </MaterialHeaderButtons>
+      );
+    };
+    navigation.setOptions({
+      headerTitle: getSearchBar,
+      headerRight: getHeaderButtons,
       headerBackTitleVisible: false,
       headerTitleContainerStyle:
         Platform.OS === 'ios'
           ? { marginHorizontal: 0, width: '70%' }
           : { marginHorizontal: 0, right: 50, left: 50 },
     });
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation]);
+
+  const onSearchStringChange = (str: string) => {
+    updateFilteredData(str, null);
+  };
 
   /**
    * Callback used when clicking an article in the list.
@@ -99,61 +109,20 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    *
    * @param item The article pressed
    */
-  onListItemPress(item: ClubType) {
-    const { props } = this;
-    props.navigation.navigate('club-information', {
+  const onListItemPress = (item: ClubType) => {
+    navigation.navigate('club-information', {
       data: item,
-      categories: this.categories,
+      categories: categories.current,
     });
-  }
-
-  /**
-   * Callback used when the search changes
-   *
-   * @param str The new search string
-   */
-  onSearchStringChange = (str: string) => {
-    this.updateFilteredData(str, null);
-  };
-
-  /**
-   * Gets the header search bar
-   *
-   * @return {*}
-   */
-  getSearchBar = () => {
-    return (
-      // @ts-ignore
-      <Searchbar
-        placeholder={i18n.t('screens.proximo.search')}
-        onChangeText={this.onSearchStringChange}
-      />
-    );
   };
 
-  onChipSelect = (id: number) => {
-    this.updateFilteredData(null, id);
+  const onChipSelect = (id: number) => {
+    updateFilteredData(null, id);
   };
 
-  /**
-   * Gets the header button
-   * @return {*}
-   */
-  getHeaderButtons = () => {
-    const onPress = () => {
-      const { props } = this;
-      props.navigation.navigate('club-about');
-    };
-    return (
-      <MaterialHeaderButtons>
-        <Item title="main" iconName="information" onPress={onPress} />
-      </MaterialHeaderButtons>
-    );
-  };
-
-  createDataset = (data: ResponseType | undefined) => {
+  const createDataset = (data: ResponseType | undefined) => {
     if (data) {
-      this.categories = data?.categories;
+      categories.current = data.categories;
       return [{ title: '', data: data.clubs }];
     } else {
       return [];
@@ -165,30 +134,23 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getListHeader(data: ResponseType | undefined) {
-    const { state } = this;
+  const getListHeader = (data: ResponseType | undefined) => {
     if (data) {
       return (
         <ClubListHeader
-          categories={this.categories}
-          selectedCategories={state.currentlySelectedCategories}
-          onChipSelect={this.onChipSelect}
+          categories={categories.current}
+          selectedCategories={currentlySelectedCategories}
+          onChipSelect={onChipSelect}
         />
       );
     } else {
       return null;
     }
-  }
+  };
 
-  /**
-   * Gets the category object of the given ID
-   *
-   * @param id The ID of the category to find
-   * @returns {*}
-   */
-  getCategoryOfId = (id: number): ClubCategoryType | null => {
+  const getCategoryOfId = (id: number): ClubCategoryType | null => {
     let cat = null;
-    this.categories.forEach((item: ClubCategoryType) => {
+    categories.current.forEach((item: ClubCategoryType) => {
       if (id === item.id) {
         cat = item;
       }
@@ -196,14 +158,14 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
     return cat;
   };
 
-  getRenderItem = ({ item }: { item: ClubType }) => {
+  const getRenderItem = ({ item }: { item: ClubType }) => {
     const onPress = () => {
-      this.onListItemPress(item);
+      onListItemPress(item);
     };
-    if (this.shouldRenderItem(item)) {
+    if (shouldRenderItem(item)) {
       return (
         <ClubListItem
-          categoryTranslator={this.getCategoryOfId}
+          categoryTranslator={getCategoryOfId}
           item={item}
           onPress={onPress}
           height={LIST_ITEM_HEIGHT}
@@ -213,7 +175,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
     return null;
   };
 
-  keyExtractor = (item: ClubType): string => item.id.toString();
+  const keyExtractor = (item: ClubType): string => item.id.toString();
 
   /**
    * Updates the search string and category filter, saving them to the State.
@@ -224,10 +186,12 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    * @param filterStr The new filter string to use
    * @param categoryId The category to add/remove from the filter
    */
-  updateFilteredData(filterStr: string | null, categoryId: number | null) {
-    const { state } = this;
-    const newCategoriesState = [...state.currentlySelectedCategories];
-    let newStrState = state.currentSearchString;
+  const updateFilteredData = (
+    filterStr: string | null,
+    categoryId: number | null
+  ) => {
+    const newCategoriesState = [...currentlySelectedCategories];
+    let newStrState = currentSearchString;
     if (filterStr !== null) {
       newStrState = filterStr;
     }
@@ -240,12 +204,10 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
       }
     }
     if (filterStr !== null || categoryId !== null) {
-      this.setState({
-        currentSearchString: newStrState,
-        currentlySelectedCategories: newCategoriesState,
-      });
+      setCurrentSearchString(newStrState);
+      setCurrentlySelectedCategories(newCategoriesState);
     }
-  }
+  };
 
   /**
    * Checks if the given item should be rendered according to current name and category filters
@@ -253,35 +215,28 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    * @param item The club to check
    * @returns {boolean}
    */
-  shouldRenderItem(item: ClubType): boolean {
-    const { state } = this;
+  const shouldRenderItem = (item: ClubType): boolean => {
     let shouldRender =
-      state.currentlySelectedCategories.length === 0 ||
-      isItemInCategoryFilter(state.currentlySelectedCategories, item.category);
+      currentlySelectedCategories.length === 0 ||
+      isItemInCategoryFilter(currentlySelectedCategories, item.category);
     if (shouldRender) {
-      shouldRender = stringMatchQuery(item.name, state.currentSearchString);
+      shouldRender = stringMatchQuery(item.name, currentSearchString);
     }
     return shouldRender;
-  }
+  };
 
-  render() {
-    return (
-      <WebSectionList
-        request={() =>
-          ConnectionManager.getInstance().authenticatedRequest<ResponseType>(
-            'clubs/list'
-          )
-        }
-        createDataset={this.createDataset}
-        keyExtractor={this.keyExtractor}
-        renderItem={this.getRenderItem}
-        renderListHeaderComponent={(data) => this.getListHeader(data)}
-        // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-        removeClippedSubviews={true}
-        itemHeight={LIST_ITEM_HEIGHT}
-      />
-    );
-  }
+  return (
+    <WebSectionList
+      request={request}
+      createDataset={createDataset}
+      keyExtractor={keyExtractor}
+      renderItem={getRenderItem}
+      renderListHeaderComponent={getListHeader}
+      // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+      removeClippedSubviews={true}
+      itemHeight={LIST_ITEM_HEIGHT}
+    />
+  );
 }
 
 export default ClubListScreen;

src/screens/Amicale/Equipment/EquipmentListScreen.tsx

@@ -17,26 +17,17 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Button } from 'react-native-paper';
-import { StackNavigationProp } from '@react-navigation/stack';
 import i18n from 'i18n-js';
 import EquipmentListItem from '../../../components/Lists/Equipment/EquipmentListItem';
 import MascotPopup from '../../../components/Mascot/MascotPopup';
 import { MASCOT_STYLE } from '../../../components/Mascot/Mascot';
 import GENERAL_STYLES from '../../../constants/Styles';
-import ConnectionManager from '../../../managers/ConnectionManager';
 import { ApiRejectType } from '../../../utils/WebData';
 import WebSectionList from '../../../components/Screens/WebSectionList';
-
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-};
-
-type StateType = {
-  mascotDialogVisible: boolean | undefined;
-};
+import { useAuthenticatedRequest } from '../../../context/loginContext';
 
 export type DeviceType = {
   id: number;
@@ -67,69 +58,62 @@ const styles = StyleSheet.create({
   },
 });
 
-class EquipmentListScreen extends React.Component<PropsType, StateType> {
-  userRents: null | Array<RentedDeviceType>;
+function EquipmentListScreen() {
+  const userRents = useRef<undefined | Array<RentedDeviceType>>();
+  const [mascotDialogVisible, setMascotDialogVisible] = useState(false);
 
-  constructor(props: PropsType) {
-    super(props);
-    this.userRents = null;
-    this.state = {
-      mascotDialogVisible: undefined,
-    };
-  }
+  const requestAll = useAuthenticatedRequest<{ devices: Array<DeviceType> }>(
+    'location/all'
+  );
+  const requestOwn = useAuthenticatedRequest<{
+    locations: Array<RentedDeviceType>;
+  }>('location/my');
 
-  getRenderItem = ({ item }: { item: DeviceType }) => {
-    const { navigation } = this.props;
+  const getRenderItem = ({ item }: { item: DeviceType }) => {
     return (
       <EquipmentListItem
-        navigation={navigation}
         item={item}
-        userDeviceRentDates={this.getUserDeviceRentDates(item)}
+        userDeviceRentDates={getUserDeviceRentDates(item)}
         height={LIST_ITEM_HEIGHT}
       />
     );
   };
 
-  getUserDeviceRentDates(item: DeviceType): [string, string] | null {
+  const getUserDeviceRentDates = (
+    item: DeviceType
+  ): [string, string] | null => {
     let dates = null;
-    if (this.userRents != null) {
-      this.userRents.forEach((device: RentedDeviceType) => {
+    if (userRents.current) {
+      userRents.current.forEach((device: RentedDeviceType) => {
         if (item.id === device.device_id) {
           dates = [device.begin, device.end];
         }
       });
     }
     return dates;
-  }
-
-  /**
-   * Gets the list header, with explains this screen's purpose
-   *
-   * @returns {*}
-   */
-  getListHeader() {
+  };
+
+  const getListHeader = () => {
     return (
       <View style={styles.headerContainer}>
         <Button
           mode="contained"
           icon="help-circle"
-          onPress={this.showMascotDialog}
+          onPress={showMascotDialog}
           style={GENERAL_STYLES.centerHorizontal}
         >
           {i18n.t('screens.equipment.mascotDialog.title')}
         </Button>
       </View>
     );
-  }
+  };
 
-  keyExtractor = (item: DeviceType): string => item.id.toString();
+  const keyExtractor = (item: DeviceType): string => item.id.toString();
 
-  createDataset = (data: ResponseType | undefined) => {
+  const createDataset = (data: ResponseType | undefined) => {
     if (data) {
-      const userRents = data.locations;
-
-      if (userRents) {
-        this.userRents = userRents;
+      if (data.locations) {
+        userRents.current = data.locations;
       }
       return [{ title: '', data: data.devices }];
     } else {
@@ -137,27 +121,19 @@ class EquipmentListScreen extends React.Component<PropsType, StateType> {
     }
   };
 
-  showMascotDialog = () => {
-    this.setState({ mascotDialogVisible: true });
-  };
+  const showMascotDialog = () => setMascotDialogVisible(true);
 
-  hideMascotDialog = () => {
-    this.setState({ mascotDialogVisible: false });
-  };
+  const hideMascotDialog = () => setMascotDialogVisible(false);
 
-  request = () => {
+  const request = () => {
     return new Promise(
       (
         resolve: (data: ResponseType) => void,
         reject: (error: ApiRejectType) => void
       ) => {
-        ConnectionManager.getInstance()
-          .authenticatedRequest<{ devices: Array<DeviceType> }>('location/all')
+        requestAll()
           .then((devicesData) => {
-            ConnectionManager.getInstance()
-              .authenticatedRequest<{
-                locations: Array<RentedDeviceType>;
-              }>('location/my')
+            requestOwn()
               .then((rentsData) => {
                 resolve({
                   devices: devicesData.devices,
@@ -175,34 +151,31 @@ class EquipmentListScreen extends React.Component<PropsType, StateType> {
     );
   };
 
-  render() {
-    const { state } = this;
-    return (
-      <View style={GENERAL_STYLES.flex}>
-        <WebSectionList
-          request={this.request}
-          createDataset={this.createDataset}
-          keyExtractor={this.keyExtractor}
-          renderItem={this.getRenderItem}
-          renderListHeaderComponent={() => this.getListHeader()}
-        />
-        <MascotPopup
-          visible={state.mascotDialogVisible}
-          title={i18n.t('screens.equipment.mascotDialog.title')}
-          message={i18n.t('screens.equipment.mascotDialog.message')}
-          icon="vote"
-          buttons={{
-            cancel: {
-              message: i18n.t('screens.equipment.mascotDialog.button'),
-              icon: 'check',
-              onPress: this.hideMascotDialog,
-            },
-          }}
-          emotion={MASCOT_STYLE.WINK}
-        />
-      </View>
-    );
-  }
+  return (
+    <View style={GENERAL_STYLES.flex}>
+      <WebSectionList
+        request={request}
+        createDataset={createDataset}
+        keyExtractor={keyExtractor}
+        renderItem={getRenderItem}
+        renderListHeaderComponent={getListHeader}
+      />
+      <MascotPopup
+        visible={mascotDialogVisible}
+        title={i18n.t('screens.equipment.mascotDialog.title')}
+        message={i18n.t('screens.equipment.mascotDialog.message')}
+        icon="vote"
+        buttons={{
+          cancel: {
+            message: i18n.t('screens.equipment.mascotDialog.button'),
+            icon: 'check',
+            onPress: hideMascotDialog,
+          },
+        }}
+        emotion={MASCOT_STYLE.WINK}
+      />
+    </View>
+  );
 }
 
 export default EquipmentListScreen;

src/screens/Amicale/Equipment/EquipmentRentScreen.tsx

@@ -17,21 +17,20 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import {
   Button,
   Caption,
   Card,
   Headline,
   Subheading,
-  withTheme,
+  useTheme,
 } from 'react-native-paper';
 import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack';
 import { BackHandler, StyleSheet, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import i18n from 'i18n-js';
 import { CalendarList, PeriodMarking } from 'react-native-calendars';
-import type { DeviceType } from './EquipmentListScreen';
 import LoadingConfirmDialog from '../../../components/Dialogs/LoadingConfirmDialog';
 import ErrorDialog from '../../../components/Dialogs/ErrorDialog';
 import {
@@ -42,34 +41,21 @@ import {
   getValidRange,
   isEquipmentAvailable,
 } from '../../../utils/EquipmentBooking';
-import ConnectionManager from '../../../managers/ConnectionManager';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import { MainStackParamsList } from '../../../navigation/MainNavigator';
 import GENERAL_STYLES from '../../../constants/Styles';
 import { ApiRejectType } from '../../../utils/WebData';
 import { REQUEST_STATUS } from '../../../utils/Requests';
+import { useFocusEffect } from '@react-navigation/core';
+import { useNavigation } from '@react-navigation/native';
+import { useAuthenticatedRequest } from '../../../context/loginContext';
 
-type EquipmentRentScreenNavigationProp = StackScreenProps<
-  MainStackParamsList,
-  'equipment-rent'
->;
-
-type Props = EquipmentRentScreenNavigationProp & {
-  navigation: StackNavigationProp<any>;
-  theme: ReactNativePaper.Theme;
-};
+type Props = StackScreenProps<MainStackParamsList, 'equipment-rent'>;
 
 export type MarkedDatesObjectType = {
   [key: string]: PeriodMarking;
 };
 
-type StateType = {
-  dialogVisible: boolean;
-  errorDialogVisible: boolean;
-  markedDates: MarkedDatesObjectType;
-  currentError: ApiRejectType;
-};
-
 const styles = StyleSheet.create({
   titleContainer: {
     marginLeft: 'auto',
@@ -114,98 +100,101 @@ const styles = StyleSheet.create({
   },
 });
 
-class EquipmentRentScreen extends React.Component<Props, StateType> {
-  item: DeviceType | null;
+function EquipmentRentScreen(props: Props) {
+  const theme = useTheme();
+  const navigation = useNavigation<StackNavigationProp<any>>();
+  const [currentError, setCurrentError] = useState<ApiRejectType>({
+    status: REQUEST_STATUS.SUCCESS,
+  });
+  const [markedDates, setMarkedDates] = useState<MarkedDatesObjectType>({});
+  const [dialogVisible, setDialogVisible] = useState(false);
 
-  bookedDates: Array<string>;
+  const item = props.route.params.item;
 
-  bookRef: { current: null | (Animatable.View & View) };
+  const bookedDates = useRef<Array<string>>([]);
+  const canBookEquipment = useRef(false);
 
-  canBookEquipment: boolean;
+  const bookRef = useRef<Animatable.View & View>(null);
 
-  lockedDates: {
+  let lockedDates: {
     [key: string]: PeriodMarking;
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.item = null;
-    this.lockedDates = {};
-    this.state = {
-      dialogVisible: false,
-      errorDialogVisible: false,
-      markedDates: {},
-      currentError: { status: REQUEST_STATUS.SUCCESS },
-    };
-    this.resetSelection();
-    this.bookRef = React.createRef();
-    this.canBookEquipment = false;
-    this.bookedDates = [];
-    if (props.route.params != null) {
-      if (props.route.params.item != null) {
-        this.item = props.route.params.item;
-      } else {
-        this.item = null;
-      }
-    }
-    const { item } = this;
-    if (item != null) {
-      this.lockedDates = {};
-      item.booked_at.forEach((date: { begin: string; end: string }) => {
-        const range = getValidRange(
-          new Date(date.begin),
-          new Date(date.end),
-          null
-        );
-        this.lockedDates = {
-          ...this.lockedDates,
-          ...generateMarkedDates(false, props.theme, range),
-        };
-      });
-    }
+  } = {};
+
+  if (item) {
+    item.booked_at.forEach((date: { begin: string; end: string }) => {
+      const range = getValidRange(
+        new Date(date.begin),
+        new Date(date.end),
+        null
+      );
+      lockedDates = {
+        ...lockedDates,
+        ...generateMarkedDates(false, theme, range),
+      };
+    });
   }
 
-  /**
-   * Captures focus and blur events to hook on android back button
-   */
-  componentDidMount() {
-    const { navigation } = this.props;
-    navigation.addListener('focus', () => {
+  useFocusEffect(
+    useCallback(() => {
       BackHandler.addEventListener(
         'hardwareBackPress',
-        this.onBackButtonPressAndroid
-      );
-    });
-    navigation.addListener('blur', () => {
-      BackHandler.removeEventListener(
-        'hardwareBackPress',
-        this.onBackButtonPressAndroid
+        onBackButtonPressAndroid
       );
-    });
-  }
+      return () => {
+        BackHandler.removeEventListener(
+          'hardwareBackPress',
+          onBackButtonPressAndroid
+        );
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
 
   /**
    * Overrides default android back button behaviour to deselect date if any is selected.
    *
    * @return {boolean}
    */
-  onBackButtonPressAndroid = (): boolean => {
-    if (this.bookedDates.length > 0) {
-      this.resetSelection();
-      this.updateMarkedSelection();
+  const onBackButtonPressAndroid = (): boolean => {
+    if (bookedDates.current.length > 0) {
+      resetSelection();
+      updateMarkedSelection();
       return true;
     }
     return false;
   };
 
-  onDialogDismiss = () => {
-    this.setState({ dialogVisible: false });
+  const showDialog = () => setDialogVisible(true);
+
+  const onDialogDismiss = () => setDialogVisible(false);
+
+  const onErrorDialogDismiss = () =>
+    setCurrentError({ status: REQUEST_STATUS.SUCCESS });
+
+  const getBookStartDate = (): Date | null => {
+    return bookedDates.current.length > 0
+      ? new Date(bookedDates.current[0])
+      : null;
   };
 
-  onErrorDialogDismiss = () => {
-    this.setState({ errorDialogVisible: false });
+  const getBookEndDate = (): Date | null => {
+    const { length } = bookedDates.current;
+    return length > 0 ? new Date(bookedDates.current[length - 1]) : null;
   };
 
+  const start = getBookStartDate();
+  const end = getBookEndDate();
+  const request = useAuthenticatedRequest(
+    'location/booking',
+    item && start && end
+      ? {
+          device: item.id,
+          begin: getISODate(start),
+          end: getISODate(end),
+        }
+      : undefined
+  );
+
   /**
    * Sends the selected data to the server and waits for a response.
    * If the request is a success, navigate to the recap screen.
@@ -213,54 +202,37 @@ class EquipmentRentScreen extends React.Component<Props, StateType> {
    *
    * @returns {Promise<void>}
    */
-  onDialogAccept = (): Promise<void> => {
+  const onDialogAccept = (): Promise<void> => {
     return new Promise((resolve: () => void) => {
-      const { item, props } = this;
-      const start = this.getBookStartDate();
-      const end = this.getBookEndDate();
       if (item != null && start != null && end != null) {
-        ConnectionManager.getInstance()
-          .authenticatedRequest('location/booking', {
-            device: item.id,
-            begin: getISODate(start),
-            end: getISODate(end),
-          })
+        request()
           .then(() => {
-            this.onDialogDismiss();
-            props.navigation.replace('equipment-confirm', {
-              item: this.item,
+            onDialogDismiss();
+            navigation.replace('equipment-confirm', {
+              item: item,
               dates: [getISODate(start), getISODate(end)],
             });
             resolve();
           })
           .catch((error: ApiRejectType) => {
-            this.onDialogDismiss();
-            this.showErrorDialog(error);
+            onDialogDismiss();
+            setCurrentError(error);
             resolve();
           });
       } else {
-        this.onDialogDismiss();
+        onDialogDismiss();
         resolve();
       }
     });
   };
 
-  getBookStartDate(): Date | null {
-    return this.bookedDates.length > 0 ? new Date(this.bookedDates[0]) : null;
-  }
-
-  getBookEndDate(): Date | null {
-    const { length } = this.bookedDates;
-    return length > 0 ? new Date(this.bookedDates[length - 1]) : null;
-  }
-
   /**
    * Selects a new date on the calendar.
    * If both start and end dates are already selected, unselect all.
    *
    * @param day The day selected
    */
-  selectNewDate = (day: {
+  const selectNewDate = (day: {
     dateString: string;
     day: number;
     month: number;
@@ -268,222 +240,196 @@ class EquipmentRentScreen extends React.Component<Props, StateType> {
     year: number;
   }) => {
     const selected = new Date(day.dateString);
-    const start = this.getBookStartDate();
 
-    if (!this.lockedDates[day.dateString] != null) {
+    if (!lockedDates[day.dateString] != null) {
       if (start === null) {
-        this.updateSelectionRange(selected, selected);
-        this.enableBooking();
+        updateSelectionRange(selected, selected);
+        enableBooking();
       } else if (start.getTime() === selected.getTime()) {
-        this.resetSelection();
-      } else if (this.bookedDates.length === 1) {
-        this.updateSelectionRange(start, selected);
-        this.enableBooking();
+        resetSelection();
+      } else if (bookedDates.current.length === 1) {
+        updateSelectionRange(start, selected);
+        enableBooking();
       } else {
-        this.resetSelection();
+        resetSelection();
       }
-      this.updateMarkedSelection();
+      updateMarkedSelection();
     }
   };
 
-  showErrorDialog = (error: ApiRejectType) => {
-    this.setState({
-      errorDialogVisible: true,
-      currentError: error,
-    });
+  const showBookButton = () => {
+    if (bookRef.current && bookRef.current.fadeInUp) {
+      bookRef.current.fadeInUp(500);
+    }
   };
 
-  showDialog = () => {
-    this.setState({ dialogVisible: true });
+  const hideBookButton = () => {
+    if (bookRef.current && bookRef.current.fadeOutDown) {
+      bookRef.current.fadeOutDown(500);
+    }
   };
 
-  /**
-   * Shows the book button by plying a fade animation
-   */
-  showBookButton() {
-    if (this.bookRef.current && this.bookRef.current.fadeInUp) {
-      this.bookRef.current.fadeInUp(500);
+  const enableBooking = () => {
+    if (!canBookEquipment.current) {
+      showBookButton();
+      canBookEquipment.current = true;
     }
-  }
+  };
 
-  /**
-   * Hides the book button by plying a fade animation
-   */
-  hideBookButton() {
-    if (this.bookRef.current && this.bookRef.current.fadeOutDown) {
-      this.bookRef.current.fadeOutDown(500);
+  const resetSelection = () => {
+    if (canBookEquipment.current) {
+      hideBookButton();
     }
-  }
+    canBookEquipment.current = false;
+    bookedDates.current = [];
+  };
 
-  enableBooking() {
-    if (!this.canBookEquipment) {
-      this.showBookButton();
-      this.canBookEquipment = true;
+  const updateSelectionRange = (s: Date, e: Date) => {
+    if (item) {
+      bookedDates.current = getValidRange(s, e, item);
+    } else {
+      bookedDates.current = [];
     }
-  }
+  };
 
-  resetSelection() {
-    if (this.canBookEquipment) {
-      this.hideBookButton();
-    }
-    this.canBookEquipment = false;
-    this.bookedDates = [];
-  }
+  const updateMarkedSelection = () => {
+    setMarkedDates(generateMarkedDates(true, theme, bookedDates.current));
+  };
 
-  updateSelectionRange(start: Date, end: Date) {
-    this.bookedDates = getValidRange(start, end, this.item);
-  }
+  let subHeadingText;
 
-  updateMarkedSelection() {
-    const { theme } = this.props;
-    this.setState({
-      markedDates: generateMarkedDates(true, theme, this.bookedDates),
+  if (start == null) {
+    subHeadingText = i18n.t('screens.equipment.booking');
+  } else if (end != null && start.getTime() !== end.getTime()) {
+    subHeadingText = i18n.t('screens.equipment.bookingPeriod', {
+      begin: getRelativeDateString(start),
+      end: getRelativeDateString(end),
+    });
+  } else {
+    subHeadingText = i18n.t('screens.equipment.bookingDay', {
+      date: getRelativeDateString(start),
     });
   }
 
-  render() {
-    const { item, props, state } = this;
-    const start = this.getBookStartDate();
-    const end = this.getBookEndDate();
-    let subHeadingText;
-    if (start == null) {
-      subHeadingText = i18n.t('screens.equipment.booking');
-    } else if (end != null && start.getTime() !== end.getTime()) {
-      subHeadingText = i18n.t('screens.equipment.bookingPeriod', {
-        begin: getRelativeDateString(start),
-        end: getRelativeDateString(end),
-      });
-    } else {
-      subHeadingText = i18n.t('screens.equipment.bookingDay', {
-        date: getRelativeDateString(start),
-      });
-    }
-    if (item != null) {
-      const isAvailable = isEquipmentAvailable(item);
-      const firstAvailability = getFirstEquipmentAvailability(item);
-      return (
-        <View style={GENERAL_STYLES.flex}>
-          <CollapsibleScrollView>
-            <Card style={styles.card}>
-              <Card.Content>
-                <View style={GENERAL_STYLES.flex}>
-