fixed crash when running app for the first time and no include text i…

…s set
josippapez · May 11, 2022 · 9696996 · 9696996
1 parent d6e38f6
commit 9696996
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 84 deletions.
diff --git a/App.tsx b/App.tsx
@@ -34,7 +34,7 @@ import {setBody, setIncludes, setPhoneNumber} from './store/reducers/settings';
 import Images from './Styles/Images/index';
 
 type SectionProps = {
-  children?: String;
+  children?: string;
   title: string;
   boldedTitle?: boolean;
   sectionStyle?: ViewStyle;
@@ -61,7 +61,7 @@ export const Section = (props: SectionProps): JSX.Element => {
         ]}>
         {title}
       </Text>
-      {children && (
+      {children ? (
         <Text
           style={[
             styles.sectionDescription,
@@ -71,7 +71,7 @@ export const Section = (props: SectionProps): JSX.Element => {
           ]}>
           {children}
         </Text>
-      )}
+      ) : null}
     </View>
   );
 };
@@ -188,57 +188,57 @@ const App: () => JSX.Element = () => {
             title="Message includes...">
             Includes any of the inputs
           </Section>
-          {filterInput.includes &&
-            filterInput.includes.length > 0 &&
-            filterInput.includes.map((item, index) => (
-              <View
-                key={index}
-                style={{
-                  flexDirection: 'row',
-                  marginTop: index > 0 ? 10 : 0,
-                }}>
-                <TextInput
-                  style={inputBackgroundStyle}
-                  value={item}
-                  onChangeText={text =>
-                    setFilterInput({
-                      ...filterInput,
-                      includes: [
-                        ...filterInput.includes.slice(0, index),
-                        text,
-                        ...filterInput.includes.slice(index + 1),
-                      ],
-                    })
-                  }
-                />
-                <CustomButton
-                  cb={() =>
-                    setFilterInput(
-                      filterInput.includes.length > 0
-                        ? {
-                            ...filterInput,
-                            includes: [
-                              ...filterInput.includes.slice(0, index),
-                              ...filterInput.includes.slice(index + 1),
-                            ],
-                          }
-                        : filterInput,
-                    )
-                  }
-                  backgroundimage={{
-                    image: isDarkMode ? Images.minusWhite : Images.minus,
-                    style: {
-                      width: 30,
-                      height: 30,
-                    },
-                  }}
-                  buttonStyle={{
-                    marginLeft: 15,
-                  }}
-                />
-              </View>
-            ))}
-          {filterInput.includes && filterInput.includes.length < 7 && (
+          {filterInput.includes && filterInput.includes.length > 0
+            ? filterInput.includes.map((item, index) => (
+                <View
+                  key={index}
+                  style={{
+                    flexDirection: 'row',
+                    marginTop: index > 0 ? 10 : 0,
+                  }}>
+                  <TextInput
+                    style={inputBackgroundStyle}
+                    value={item}
+                    onChangeText={text =>
+                      setFilterInput({
+                        ...filterInput,
+                        includes: [
+                          ...filterInput.includes.slice(0, index),
+                          text,
+                          ...filterInput.includes.slice(index + 1),
+                        ],
+                      })
+                    }
+                  />
+                  <CustomButton
+                    cb={() =>
+                      setFilterInput(
+                        filterInput.includes.length > 0
+                          ? {
+                              ...filterInput,
+                              includes: [
+                                ...filterInput.includes.slice(0, index),
+                                ...filterInput.includes.slice(index + 1),
+                              ],
+                            }
+                          : filterInput,
+                      )
+                    }
+                    backgroundimage={{
+                      image: isDarkMode ? Images.minusWhite : Images.minus,
+                      style: {
+                        width: 30,
+                        height: 30,
+                      },
+                    }}
+                    buttonStyle={{
+                      marginLeft: 15,
+                    }}
+                  />
+                </View>
+              ))
+            : null}
+          {filterInput.includes && filterInput.includes.length < 7 ? (
             <CustomButton
               buttonStyle={{
                 marginTop: 20,
@@ -264,7 +264,7 @@ const App: () => JSX.Element = () => {
                 },
               }}
             />
-          )}
+          ) : null}
         </View>
         <View
           style={{

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,6 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@reduxjs/toolkit": "^1.8.1",
-    "@types/react-native": "^0.67.3",
-    "@types/react-redux": "^7.1.23",
     "react": "17.0.2",
     "react-native": "0.68.0",
     "react-native-android-sms-listener": "^0.8.0",
@@ -27,6 +25,9 @@
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@types/react": "^18.0.9",
+    "@types/react-native": "^0.67.6",
+    "@types/react-redux": "^7.1.24",
     "babel-jest": "^26.6.3",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",

diff --git a/store/reducers/settings.ts b/store/reducers/settings.ts
@@ -7,7 +7,7 @@ export interface SettingsState {
 }
 
 const initialState: SettingsState = {
-  includes: [],
+  includes: [''],
   phoneNumber: '',
   body: '',
 };