Redirect to login screen if not logged in

src/components/Amicale/Profile/ProfileWelcomeCard.tsx

@@ -51,7 +51,7 @@ function ProfileWelcomeCard(props: Props) {
         <Divider />
         <Paragraph>{i18n.t('screens.profile.welcomeDescription')}</Paragraph>
         <CardList
-          dataset={getAmicaleServices(navigation.navigate, [
+          dataset={getAmicaleServices(navigation.navigate, true, [
             SERVICES_KEY.PROFILE,
           ])}
           isHorizontal={true}

src/context/preferencesContext.tsx

@@ -25,6 +25,7 @@ import {
   getSpecialServices,
   getStudentServices,
 } from '../utils/Services';
+import { useLoginState } from './loginContext';
 
 const colorScheme = Appearance.getColorScheme();
 
@@ -135,6 +136,7 @@ export function useDarkTheme() {
 export function useCurrentDashboard() {
   const { preferences, updatePreferences } = usePreferences();
   const navigation = useNavigation();
+  const isLoggedIn = useLoginState();
   const dashboardIdList = getPreferenceObject(
     GeneralPreferenceKeys.dashboardItems,
     preferences
@@ -145,7 +147,7 @@ export function useCurrentDashboard() {
   };
 
   const allDatasets = [
-    ...getAmicaleServices(navigation.navigate),
+    ...getAmicaleServices(navigation.navigate, isLoggedIn),
     ...getStudentServices(navigation.navigate),
     ...getINSAServices(navigation.navigate),
     ...getSpecialServices(navigation.navigate),

src/navigation/MainNavigator.tsx

@@ -52,6 +52,7 @@ import {
   GeneralPreferenceKeys,
 } from '../utils/asyncStorage';
 import IntroScreen from '../screens/Intro/IntroScreen';
+import { useLoginState } from '../context/loginContext';
 
 export enum MainRoutes {
   Main = 'main',
@@ -118,6 +119,62 @@ function getIntroScreens() {
   );
 }
 
+function getAmicaleScreens() {
+  return (
+    <>
+      <MainStack.Screen
+        name={MainRoutes.Profile}
+        component={ProfileScreen}
+        options={{
+          title: i18n.t('screens.profile.title'),
+        }}
+      />
+      <MainStack.Screen
+        name={MainRoutes.ClubList}
+        component={ClubListScreen}
+        options={{
+          title: i18n.t('screens.clubs.title'),
+        }}
+      />
+      <MainStack.Screen
+        name={MainRoutes.ClubInformation}
+        component={ClubDisplayScreen}
+        options={{
+          title: i18n.t('screens.clubs.details'),
+        }}
+      />
+      <MainStack.Screen
+        name={MainRoutes.ClubAbout}
+        component={ClubAboutScreen}
+        options={{
+          title: i18n.t('screens.clubs.title'),
+        }}
+      />
+      <MainStack.Screen
+        name={MainRoutes.EquipmentList}
+        component={EquipmentScreen}
+        options={{
+          title: i18n.t('screens.equipment.title'),
+        }}
+      />
+      <MainStack.Screen
+        name={MainRoutes.EquipmentRent}
+        component={EquipmentLendScreen}
+        options={{
+          title: i18n.t('screens.equipment.book'),
+        }}
+      />
+      <MainStack.Screen
+        name={MainRoutes.EquipmentConfirm}
+        component={EquipmentConfirmScreen}
+        options={{
+          title: i18n.t('screens.equipment.confirm'),
+        }}
+      />
+    </>
+  );
+}
+
 function getRegularScreens(createTabNavigator: () => React.ReactElement) {
   return (
     <>
@@ -233,55 +290,6 @@ function getRegularScreens(createTabNavigator: () => React.ReactElement) {
           title: i18n.t('screens.proximo.title'),
         }}
       />
-      <MainStack.Screen
-        name={MainRoutes.Profile}
-        component={ProfileScreen}
-        options={{
-          title: i18n.t('screens.profile.title'),
-        }}
-      />
-      <MainStack.Screen
-        name={MainRoutes.ClubList}
-        component={ClubListScreen}
-        options={{
-          title: i18n.t('screens.clubs.title'),
-        }}
-      />
-      <MainStack.Screen
-        name={MainRoutes.ClubInformation}
-        component={ClubDisplayScreen}
-        options={{
-          title: i18n.t('screens.clubs.details'),
-        }}
-      />
-      <MainStack.Screen
-        name={MainRoutes.ClubAbout}
-        component={ClubAboutScreen}
-        options={{
-          title: i18n.t('screens.clubs.title'),
-        }}
-      />
-      <MainStack.Screen
-        name={MainRoutes.EquipmentList}
-        component={EquipmentScreen}
-        options={{
-          title: i18n.t('screens.equipment.title'),
-        }}
-      />
-      <MainStack.Screen
-        name={MainRoutes.EquipmentRent}
-        component={EquipmentLendScreen}
-        options={{
-          title: i18n.t('screens.equipment.book'),
-        }}
-      />
-      <MainStack.Screen
-        name={MainRoutes.EquipmentConfirm}
-        component={EquipmentConfirmScreen}
-        options={{
-          title: i18n.t('screens.equipment.confirm'),
-        }}
-      />
       <MainStack.Screen
         name={MainRoutes.Vote}
         component={VoteScreen}
@@ -302,15 +310,17 @@ function getRegularScreens(createTabNavigator: () => React.ReactElement) {
 
 function MainStackComponent(props: {
   showIntro: boolean;
+  isloggedIn: boolean;
   createTabNavigator: () => React.ReactElement;
 }) {
-  const { showIntro, createTabNavigator } = props;
+  const { showIntro, isloggedIn, createTabNavigator } = props;
   return (
     <MainStack.Navigator
       initialRouteName={showIntro ? MainRoutes.Intro : MainRoutes.Main}
       headerMode={'screen'}
     >
       {showIntro ? getIntroScreens() : getRegularScreens(createTabNavigator)}
+      {isloggedIn ? getAmicaleScreens() : null}
     </MainStack.Navigator>
   );
 }
@@ -322,6 +332,7 @@ type PropsType = {
 
 function MainNavigator(props: PropsType) {
   const { preferences } = usePreferences();
+  const isloggedIn = useLoginState();
   const showIntro = getPreferenceBool(
     GeneralPreferenceKeys.showIntro,
     preferences
@@ -330,6 +341,7 @@ function MainNavigator(props: PropsType) {
   return (
     <MainStackComponent
       showIntro={showIntro !== false}
+      isloggedIn={isloggedIn}
       createTabNavigator={createTabNavigator}
     />
   );

src/screens/Other/Settings/DashboardEditScreen.tsx

@@ -32,6 +32,7 @@ import {
 } from '../../../utils/Services';
 import { useNavigation } from '@react-navigation/core';
 import { useCurrentDashboard } from '../../../context/preferencesContext';
+import { useLoginState } from '../../../context/loginContext';
 
 const styles = StyleSheet.create({
   dashboardContainer: {
@@ -63,6 +64,7 @@ const styles = StyleSheet.create({
  */
 function DashboardEditScreen() {
   const navigation = useNavigation();
+  const isLoggedIn = useLoginState();
 
   const {
     currentDashboard,
@@ -150,7 +152,7 @@ function DashboardEditScreen() {
 
   return (
     <CollapsibleFlatList
-      data={getCategories(navigation.navigate)}
+      data={getCategories(navigation.navigate, isLoggedIn)}
       renderItem={getRenderItem}
       ListHeaderComponent={getListHeader()}
       style={{}}

src/screens/Services/ServicesScreen.tsx

@@ -17,7 +17,7 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import {
   Avatar,
@@ -25,10 +25,9 @@ import {
   Divider,
   List,
   TouchableRipple,
-  withTheme,
+  useTheme,
 } from 'react-native-paper';
 import i18n from 'i18n-js';
-import { StackNavigationProp } from '@react-navigation/stack';
 import CardList from '../../components/Lists/CardList/CardList';
 import MaterialHeaderButtons, {
   Item,
@@ -41,11 +40,8 @@ import {
   ServiceCategoryType,
   SERVICES_CATEGORIES_KEY,
 } from '../../utils/Services';
-
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-  theme: ReactNativePaper.Theme;
-};
+import { useNavigation } from '@react-navigation/native';
+import { useLoginState } from '../../context/loginContext';
 
 const styles = StyleSheet.create({
   container: {
@@ -61,37 +57,29 @@ const styles = StyleSheet.create({
   },
 });
 
-class ServicesScreen extends React.Component<PropsType> {
-  finalDataset: Array<ServiceCategoryType>;
+function ServicesScreen() {
+  const navigation = useNavigation();
+  const theme = useTheme();
+  const isLoggedIn = useLoginState();
 
-  constructor(props: PropsType) {
-    super(props);
-    this.finalDataset = getCategories(props.navigation.navigate, [
-      SERVICES_CATEGORIES_KEY.SPECIAL,
-    ]);
-  }
+  const finalDataset = getCategories(navigation.navigate, isLoggedIn, [
+    SERVICES_CATEGORIES_KEY.SPECIAL,
+  ]);
 
-  componentDidMount() {
-    const { props } = this;
-    props.navigation.setOptions({
-      headerRight: this.getAboutButton,
+  useLayoutEffect(() => {
+    const getAboutButton = () => (
+      <MaterialHeaderButtons>
+        <Item
+          title="information"
+          iconName="information"
+          onPress={() => navigation.navigate('amicale-contact')}
+        />
+      </MaterialHeaderButtons>
+    );
+    navigation.setOptions({
+      headerRight: getAboutButton,
     });
-  }
-
-  getAboutButton = () => (
-    <MaterialHeaderButtons>
-      <Item
-        title="information"
-        iconName="information"
-        onPress={this.onAboutPress}
-      />
-    </MaterialHeaderButtons>
-  );
-
-  onAboutPress = () => {
-    const { props } = this;
-    props.navigation.navigate('amicale-contact');
-  };
+  }, [navigation]);
 
   /**
    * Gets the list title image for the list.
@@ -102,8 +90,7 @@ class ServicesScreen extends React.Component<PropsType> {
    * @param source The source image to display. Can be a string for icons or a number for local images
    * @returns {*}
    */
-  getListTitleImage(source: string | number) {
-    const { props } = this;
+  const getListTitleImage = (source: string | number) => {
     if (typeof source === 'number') {
       return <Image source={source} style={styles.image} />;
     }
@@ -111,11 +98,11 @@ class ServicesScreen extends React.Component<PropsType> {
       <Avatar.Icon
         size={48}
         icon={source}
-        color={props.theme.colors.primary}
+        color={theme.colors.primary}
         style={styles.icon}
       />
     );
-  }
+  };
 
   /**
    * A list item showing a list of available services for the current category
@@ -123,20 +110,17 @@ class ServicesScreen extends React.Component<PropsType> {
    * @param item
    * @returns {*}
    */
-  getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
-    const { props } = this;
+  const getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
     return (
       <TouchableRipple
         style={styles.container}
-        onPress={() => {
-          props.navigation.navigate('services-section', { data: item });
-        }}
+        onPress={() => navigation.navigate('services-section', { data: item })}
       >
         <View>
           <Card.Title
             title={item.title}
             subtitle={item.subtitle}
-            left={() => this.getListTitleImage(item.image)}
+            left={() => getListTitleImage(item.image)}
             right={() => <List.Icon icon="chevron-right" />}
           />
           <CardList dataset={item.content} isHorizontal />
@@ -145,33 +129,31 @@ class ServicesScreen extends React.Component<PropsType> {
     );
   };
 
-  keyExtractor = (item: ServiceCategoryType): string => item.title;
+  const keyExtractor = (item: ServiceCategoryType): string => item.title;
 
-  render() {
-    return (
-      <View>
-        <CollapsibleFlatList
-          data={this.finalDataset}
-          renderItem={this.getRenderItem}
-          keyExtractor={this.keyExtractor}
-          ItemSeparatorComponent={() => <Divider />}
-          hasTab
-        />
-        <MascotPopup
-          title={i18n.t('screens.services.mascotDialog.title')}
-          message={i18n.t('screens.services.mascotDialog.message')}
-          icon="cloud-question"
-          buttons={{
-            cancel: {
-              message: i18n.t('screens.services.mascotDialog.button'),
-              icon: 'check',
-            },
-          }}
-          emotion={MASCOT_STYLE.WINK}
-        />
-      </View>
-    );
-  }
+  return (
+    <View>
+      <CollapsibleFlatList
+        data={finalDataset}
+        renderItem={getRenderItem}
+        keyExtractor={keyExtractor}
+        ItemSeparatorComponent={() => <Divider />}
+        hasTab
+      />
+      <MascotPopup
+        title={i18n.t('screens.services.mascotDialog.title')}
+        message={i18n.t('screens.services.mascotDialog.message')}
+        icon="cloud-question"
+        buttons={{
+          cancel: {
+            message: i18n.t('screens.services.mascotDialog.button'),
+            icon: 'check',
+          },
+        }}
+        emotion={MASCOT_STYLE.WINK}
+      />
+    </View>
+  );
 }
 
-export default withTheme(ServicesScreen);
+export default ServicesScreen;

src/utils/Services.ts

@@ -86,8 +86,21 @@ export type ServiceCategoryType = {
   content: Array<ServiceItemType>;
 };
 
+function getAmicaleOnPress(
+  route: string,
+  onPress: (route: string, params?: { [key: string]: any }) => void,
+  isLoggedIn: boolean
+) {
+  if (isLoggedIn) {
+    return () => onPress(route);
+  } else {
+    return () => onPress(MainRoutes.Login, { nextScreen: route });
+  }
+}
+
 export function getAmicaleServices(
   onPress: (route: string, params?: { [key: string]: any }) => void,
+  isLoggedIn: boolean,
   excludedItems?: Array<string>
 ): Array<ServiceItemType> {
   const amicaleDataset = [
@@ -96,21 +109,21 @@ export function getAmicaleServices(
       title: i18n.t('screens.clubs.title'),
       subtitle: i18n.t('screens.services.descriptions.clubs'),
       image: Urls.images.clubs,
-      onPress: () => onPress(MainRoutes.ClubList),
+      onPress: getAmicaleOnPress(MainRoutes.ClubList, onPress, isLoggedIn),
     },
     {
       key: SERVICES_KEY.PROFILE,
       title: i18n.t('screens.profile.title'),
       subtitle: i18n.t('screens.services.descriptions.profile'),
       image: Urls.images.profile,
-      onPress: () => onPress(MainRoutes.Profile),
+      onPress: getAmicaleOnPress(MainRoutes.Profile, onPress, isLoggedIn),
     },
     {
       key: SERVICES_KEY.EQUIPMENT,
       title: i18n.t('screens.equipment.title'),
       subtitle: i18n.t('screens.services.descriptions.equipment'),
       image: Urls.images.equipment,
-      onPress: () => onPress(MainRoutes.EquipmentList),
+      onPress: getAmicaleOnPress(MainRoutes.EquipmentList, onPress, isLoggedIn),
     },
     {
       key: SERVICES_KEY.AMICALE_WEBSITE,
@@ -289,6 +302,7 @@ export function getSpecialServices(
 
 export function getCategories(
   onPress: (route: string, params?: { [key: string]: any }) => void,
+  isLoggedIn: boolean,
   excludedItems?: Array<string>
 ): Array<ServiceCategoryType> {
   const categoriesDataset = [
@@ -297,7 +311,7 @@ export function getCategories(
       title: i18n.t('screens.services.categories.amicale'),
       subtitle: i18n.t('screens.services.more'),
       image: AMICALE_LOGO,
-      content: getAmicaleServices(onPress),
+      content: getAmicaleServices(onPress, isLoggedIn),
     },
     {
       key: SERVICES_CATEGORIES_KEY.STUDENTS,