Improved documentation and fixed debug mode

screens/About/AboutDependenciesScreen.js

@@ -10,6 +10,12 @@ type listItem = {
     version: string
 };
 
+/**
+ * Generates the dependencies list from the raw json
+ *
+ * @param object The raw json
+ * @return {Array<listItem>}
+ */
 function generateListFromObject(object: { [string]: string }): Array<listItem> {
     let list = [];
     let keys = Object.keys(object);

screens/About/AboutScreen.js

@@ -105,7 +105,7 @@ class AboutScreen extends React.Component<Props, State> {
             icon: 'bug-check',
             text: i18n.t('aboutScreen.debug'),
             showChevron: true,
-            showOnlyDebug: true
+            showOnlyInDebug: true
         },
     ];
     /**
@@ -171,6 +171,9 @@ class AboutScreen extends React.Component<Props, State> {
             showChevron: true
         },
     ];
+    /**
+     * Order of information cards
+     */
     dataOrder: Array<Object> = [
         {
             id: 'app',
@@ -201,6 +204,11 @@ class AboutScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
+    /**
+     * Gets the app icon
+     * @param props
+     * @return {*}
+     */
     getAppIcon(props) {
         return (
             <Avatar.Image
@@ -211,10 +219,21 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
-    keyExtractor(item: Object) {
+    /**
+     * Extracts a key from the given item
+     *
+     * @param item The item to extract the key from
+     * @return {string} The extracted key
+     */
+    keyExtractor(item: Object): string {
         return item.icon;
     }
 
+    /**
+     * Gets the app card showing information and links about the app.
+     *
+     * @return {*}
+     */
     getAppCard() {
         return (
             <Card style={{marginBottom: 10}}>
@@ -235,6 +254,11 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
+    /**
+     * Gets the team card showing information and links about the team
+     *
+     * @return {*}
+     */
     getTeamCard() {
         return (
             <Card style={{marginBottom: 10}}>
@@ -263,6 +287,11 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
+    /**
+     * Gets the techno card showing information and links about the technologies used in the app
+     *
+     * @return {*}
+     */
     getTechnoCard() {
         return (
             <Card style={{marginBottom: 10}}>
@@ -280,12 +309,25 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
+    /**
+     * Gets a chevron icon
+     *
+     * @param props
+     * @return {*}
+     */
     getChevronIcon(props: Object) {
         return (
             <List.Icon {...props} icon={'chevron-right'}/>
         );
     }
 
+    /**
+     * Gets a custom list item icon
+     *
+     * @param item The item to show the icon for
+     * @param props
+     * @return {*}
+     */
     getItemIcon(item: Object, props: Object) {
         return (
             <List.Icon {...props} icon={item.icon}/>
@@ -295,10 +337,12 @@ class AboutScreen extends React.Component<Props, State> {
     /**
      * Get a clickable card item to be rendered inside a card.
      *
-     * @returns {React.Node}
+     * @returns {*}
      */
     getCardItem({item}: Object) {
-        let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
+        let shouldShow = item === undefined
+            || !item.showOnlyInDebug
+            || (item.showOnlyInDebug && this.state.isDebugUnlocked);
         const getItemIcon = this.getItemIcon.bind(this, item);
         if (shouldShow) {
             if (item.showChevron) {
@@ -323,6 +367,9 @@ class AboutScreen extends React.Component<Props, State> {
             return null;
     }
 
+    /**
+     * Tries to unlock debug mode
+     */
     tryUnlockDebugMode() {
         this.debugTapCounter = this.debugTapCounter + 1;
         if (this.debugTapCounter >= 4) {
@@ -330,12 +377,20 @@ class AboutScreen extends React.Component<Props, State> {
         }
     }
 
+    /**
+     * Unlocks debug mode
+     */
     unlockDebugMode() {
         this.setState({isDebugUnlocked: true});
         let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
         AsyncStorageManager.getInstance().savePref(key, '1');
     }
 
+    /**
+     * Gets the bug report modal's content
+     *
+     * @return {*}
+     */
     getBugReportModal() {
         return (
             <View style={{
@@ -376,12 +431,21 @@ class AboutScreen extends React.Component<Props, State> {
         );
     }
 
+    /**
+     * opens the bug report modal
+     */
     openBugReportModal() {
         if (this.modalRef) {
             this.modalRef.open();
         }
     }
 
+    /**
+     * Gets a card, depending on the given item's id
+     *
+     * @param item The item to show
+     * @return {*}
+     */
     getMainCard({item}: Object) {
         switch (item.id) {
             case 'app':
@@ -394,6 +458,11 @@ class AboutScreen extends React.Component<Props, State> {
         return <View/>;
     }
 
+    /**
+     * Callback used when receiving the modal ref
+     *
+     * @param ref
+     */
     onModalRef(ref: Object) {
         this.modalRef = ref;
     }

screens/About/DebugScreen.js

@@ -16,7 +16,8 @@ type State = {
 }
 
 /**
- * Class defining the Debug screen. This screen allows the user to get detailed information on the app/device.
+ * Class defining the Debug screen.
+ * This screen allows the user to get and modify information on the app/device.
  */
 class DebugScreen extends React.Component<Props, State> {
 
@@ -37,6 +38,15 @@ class DebugScreen extends React.Component<Props, State> {
         this.colors = props.theme.colors;
     }
 
+    /**
+     * Gets a clickable list item
+     *
+     * @param onPressCallback The function to call when clicking on the item
+     * @param icon The item's icon
+     * @param title The item's title
+     * @param subtitle The item's subtitle
+     * @return {*}
+     */
     static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
         if (icon !== undefined) {
             return (
@@ -58,6 +68,10 @@ class DebugScreen extends React.Component<Props, State> {
         }
     }
 
+    /**
+     * Show the
+     * @param item
+     */
     showEditModal(item: Object) {
         this.setState({
             modalCurrentDisplayItem: item
@@ -67,6 +81,11 @@ class DebugScreen extends React.Component<Props, State> {
         }
     }
 
+    /**
+     * Gets the edit modal content
+     *
+     * @return {*}
+     */
     getModalContent() {
         return (
             <View style={{
@@ -104,6 +123,12 @@ class DebugScreen extends React.Component<Props, State> {
         );
     }
 
+    /**
+     * Saves the new value of the given preference
+     *
+     * @param key The pref key
+     * @param value The pref value
+     */
     saveNewPrefs(key: string, value: string) {
         this.setState((prevState) => {
             let currentPreferences = {...prevState.currentPreferences};
@@ -113,6 +138,11 @@ class DebugScreen extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(key, value);
     }
 
+    /**
+     * Callback used when receiving the modal ref
+     *
+     * @param ref
+     */
     onModalRef(ref: Object) {
         this.modalRef = ref;
     }