Added ability to edit preferences from debug menu

components/CustomIntroSlider.js

@@ -89,6 +89,13 @@ export default class CustomIntroSlider extends React.Component<Props> {
                 key: '6',
                 title: i18n.t('intro.slide6.title'),
                 text: i18n.t('intro.slide6.text'),
+                icon: 'silverware-fork-knife',
+                colors: ['#ec1213', '#ff372f'],
+            },
+            {
+                key: '7',
+                title: i18n.t('intro.slide7.title'),
+                text: i18n.t('intro.slide7.text'),
                 icon: 'cogs',
                 colors: ['#37c13e', '#26852b'],
             },
@@ -135,8 +142,16 @@ export default class CustomIntroSlider extends React.Component<Props> {
 
     render() {
         return (
-            <AppIntroSlider renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
-                            slides={this.props.isUpdate ? this.updateSlides : this.introSlides} onDone={() => this.props.onDone()} bottomButton showSkipButton/>
+            <AppIntroSlider
+                renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
+                slides={this.props.isUpdate ? this.updateSlides : this.introSlides}
+                onDone={() => this.props.onDone()}
+                bottomButton
+                showSkipButton
+                skipLabel={i18n.t('intro.buttons.skip')}
+                doneLabel={i18n.t('intro.buttons.done')}
+                nextLabel={i18n.t('intro.buttons.next')}
+            />
         );
     }
 

screens/DebugScreen.js

@@ -1,24 +1,61 @@
 // @flow
 
 import * as React from 'react';
-import {Body, Card, CardItem, Container, Content, Left, List, ListItem, Right, Text,} from "native-base";
+import {
+    Body,
+    Card,
+    CardItem,
+    Container,
+    Content,
+    H1,
+    H3,
+    Left,
+    List,
+    ListItem,
+    Right,
+    Text,
+    Form,
+    Item,
+    Label,
+    Input,
+    Button
+} from "native-base";
 import CustomHeader from "../components/CustomHeader";
 import ThemeManager from '../utils/ThemeManager';
 import i18n from "i18n-js";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import Touchable from "react-native-platform-touchable";
-import {Alert, Platform, Clipboard} from "react-native";
+import {Alert, View, Clipboard, Image} from "react-native";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 import NotificationsManager from "../utils/NotificationsManager";
+import Modalize from "react-native-modalize";
 
 type Props = {
     navigation: Object,
 };
 
+type State = {
+    modalCurrentDisplayItem: Object,
+    currentPreferences: Object,
+}
+
 /**
  * Class defining the Debug screen. This screen allows the user to get detailed information on the app/device.
  */
-export default class DebugScreen extends React.Component<Props> {
+export default class DebugScreen extends React.Component<Props, State> {
+
+    modalRef: { current: null | Modalize };
+    modalInputValue = '';
+
+    constructor(props: any) {
+        super(props);
+        this.modalRef = React.createRef();
+    }
+
+    state = {
+        modalCurrentDisplayItem: {},
+        currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
+    };
 
     alertCurrentExpoToken() {
         let token = AsyncStorageManager.getInstance().preferences.expoToken.current;
@@ -39,15 +76,19 @@ export default class DebugScreen extends React.Component<Props> {
     }
 
 
-    static getGeneralItem(onPressCallback: Function, icon: string, title: string, subtitle: string) {
+    static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
         return (
-            <CardItem
+            <ListItem
                 button
+                thumbnail
                 onPress={onPressCallback}
             >
-                <Left>
-                    <CustomMaterialIcon icon={icon}/>
-                </Left>
+                {icon !== undefined ?
+                    <Left>
+                        <CustomMaterialIcon icon={icon}/>
+                    </Left>
+                    : <View/>
+                }
                 <Body>
                     <Text>
                         {title}
@@ -57,14 +98,71 @@ export default class DebugScreen extends React.Component<Props> {
                     </Text>
                 </Body>
                 <Right/>
-            </CardItem>
+            </ListItem>
         );
     }
 
+    showEditModal(item: Object) {
+        this.setState({
+            modalCurrentDisplayItem: item
+        });
+        if (this.modalRef.current) {
+            this.modalRef.current.open();
+        }
+    }
+
+    getModalContent() {
+        return (
+            <View style={{
+                flex: 1,
+                padding: 20
+            }}>
+                <H1>{this.state.modalCurrentDisplayItem.key}</H1>
+                <H3>Default: {this.state.modalCurrentDisplayItem.default}</H3>
+                <H3>Current: {this.state.modalCurrentDisplayItem.current}</H3>
+                <Form>
+                    <Item floatingLabel>
+                        <Label>New Value</Label>
+                        <Input onChangeText={(text) => this.modalInputValue = text}/>
+                    </Item>
+                </Form>
+                <View style={{
+                    flexDirection: 'row',
+                    marginTop: 10,
+                }}>
+                    <Button success
+                            onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
+                        <Text>Save new value</Text>
+                    </Button>
+                    <Button
+                        onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
+                        <Text>Reset to default</Text>
+                    </Button>
+                </View>
+
+            </View>
+        );
+    }
+
+    saveNewPrefs(key: string, value: string) {
+        this.setState((prevState) => {
+            let currentPreferences = {...prevState.currentPreferences};
+            currentPreferences[key].current = value;
+            return {currentPreferences};
+        });
+        AsyncStorageManager.getInstance().savePref(key, value);
+    }
+
     render() {
         const nav = this.props.navigation;
         return (
             <Container>
+                <Modalize
+                    ref={this.modalRef}
+                    adjustToContentHeight
+                    modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
+                    {this.getModalContent()}
+                </Modalize>
                 <CustomHeader navigation={nav} title={i18n.t('screens.debug')} hasBackButton={true}/>
                 <Content padder>
                     <Card>
@@ -75,7 +173,21 @@ export default class DebugScreen extends React.Component<Props> {
                         </CardItem>
                         <List>
                             {DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')}
-                            {DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(),'bell-ring', 'Force Expo token update', '')}
+                            {DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')}
+                        </List>
+                    </Card>
+                    <Card>
+                        <CardItem header>
+                            <Text>
+                                Preferences
+                            </Text>
+                        </CardItem>
+                        <List>
+                            {Object.values(this.state.currentPreferences).map((object) =>
+                                <View>
+                                    {DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')}
+                                </View>
+                            )}
                         </List>
                     </Card>
                 </Content>

translations/en.json

@@ -16,7 +16,7 @@
     },
     "slide2": {
       "title": "Stay up to date",
-      "text": "CAMPUS will soon allow you to be aware of any event occurring on the campus, from pancake sales to Enfoiros concerts!"
+      "text": "CAMPUS allows you to be aware of any event occurring on the campus, from pancake sales to Enfoiros concerts!"
     },
     "slide3": {
       "title": "Never forget your laundry",
@@ -31,12 +31,21 @@
       "text": "Lookup your timetable on CAMPUS"
     },
     "slide6": {
+      "title": "RU Menu",
+      "text": "For the hungry, check this week's menu!"
+    },
+    "slide7": {
       "title": "More to come...",
       "text": "New features are coming soon, do not hesitate to give us feedback to improve the app"
     },
     "updateSlide": {
       "title": "New in this update!",
       "text": "The RU menu is now working!\nAvailable in the left side menu!"
+    },
+    "buttons": {
+      "next": "Next",
+      "skip": "Skip",
+      "done": "Done"
     }
   },
   "settingsScreen": {

translations/fr.json

@@ -31,12 +31,21 @@
       "text": "Consultez votre emploi du temps sur CAMPUS"
     },
     "slide6": {
+      "title": "Menu du RU",
+      "text": "Pour ceux qui ont faim, vérifiez le menu du RU de la semaine!"
+    },
+    "slide7": {
       "title": "Plus à venir...",
       "text": "D'autres fonctionnalités arrivent bientôt, n'hésitez pas à nous donner votre avis pour améliorer l'appli"
     },
     "updateSlide": {
       "title": "Nouveau dans cette mise à jour !",
       "text": "Le menu du RU marche enfin !\nAccessible depuis le menu à gauche"
+    },
+    "buttons": {
+      "next": "Suivant",
+      "skip": "Passer",
+      "done": "Commencer"
     }
   },
   "settingsScreen": {