From 0bfb70af8bb9e70c1e36d59149075b2039da52cb Mon Sep 17 00:00:00 2001
From: Maarten <maarten@suiteseven.nl>
Date: Tue, 13 Aug 2024 09:17:19 +0200
Subject: [PATCH] Refactor to new ThemedInput component

---
 app/(onboarding)/start.tsx     | 36 +++++++------------
 app/(tabs)/settings.tsx        |  1 +
 app/index.tsx                  |  4 +--
 assets/languages/en.json       |  1 +
 assets/languages/nl.json       |  1 +
 lib/components/EditModal.tsx   | 19 +++++-----
 lib/components/ThemedInput.tsx | 64 ++++++++++++++++++++++++++++++++++
 7 files changed, 90 insertions(+), 36 deletions(-)
 create mode 100644 lib/components/ThemedInput.tsx

diff --git a/app/(onboarding)/start.tsx b/app/(onboarding)/start.tsx
index a04542c..186619f 100644
--- a/app/(onboarding)/start.tsx
+++ b/app/(onboarding)/start.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack } from 'expo-router';
-import { StyleSheet, TextInput, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { router } from 'expo-router';
 import DeviceInfo from 'react-native-device-info';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +15,7 @@ import { Message } from '@/lib/services/message';
 import { Request } from '@/lib/services/request';
 import { store } from '@/lib/store/store';
 import { setSession } from '@/lib/store/dataStore';
+import ThemedInput from '@/lib/components/ThemedInput';
 
 export default function OnboardStartScreen() {
     const colorScheme = useColorScheme() ?? 'light';
@@ -67,33 +68,30 @@ export default function OnboardStartScreen() {
                 </ThemedView>
 
                 <ThemedView style={styles.inputContainer}>
-                    <ThemedText>{t( "onboarding.your-name" )}</ThemedText>
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={setName}
+                    <ThemedInput
+                        label={t( "onboarding.your-name" )}
                         placeholder={t( "onboarding.name" )}
+                        onChangeText={setName}
                         value={name}
+                        style={{paddingTop: 20}}
                     />
-                </ThemedView>
 
-                <ThemedView style={styles.inputContainer}>
-                    <ThemedText>{t( "onboarding.your-address" )}</ThemedText>
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={setZipcode}
+                    <ThemedInput
+                        label={t( "onboarding.your-address" )}
                         placeholder={t( "onboarding.zipcode" )}
+                        onChangeText={setZipcode}
                         value={zipcode}
+                        style={{paddingTop: 20}}
                     />
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={setHouseNumber}
+
+                    <ThemedInput
                         placeholder={t( "onboarding.house-number" )}
+                        onChangeText={setHouseNumber}
                         value={houseNumber}
                         keyboardType="numeric"
                     />
                 </ThemedView>
 
-
                 <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
                     <ThemedText style={{ color: Colors.white }}>
                         {t( "onboarding.start" )}
@@ -118,15 +116,7 @@ const styles = StyleSheet.create( {
         justifyContent: 'center',
     },
     inputContainer: {
-        paddingTop: 20,
-    },
-    input: {
         width: 250,
-        borderWidth: 1,
-        padding: 10,
-        paddingLeft: 20,
-        borderRadius: 3,
-        marginBottom: 10,
     },
     button: {
         borderRadius: 5,
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index 19680a9..684f4e3 100644
--- a/app/(tabs)/settings.tsx
+++ b/app/(tabs)/settings.tsx
@@ -223,6 +223,7 @@ export default function SettingsScreen() {
                 fields={[
                     {
                         name: 'name',
+                        title: t( "modal.name.name" ),
                         placeholder: t( "modal.name.your-name" ),
                         defaultValue: name,
                     },
diff --git a/app/index.tsx b/app/index.tsx
index 0c5e1f5..c9317c3 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -2,14 +2,14 @@ import React, { useEffect } from 'react';
 import { Redirect, useRouter } from 'expo-router';
 import { useTranslation } from 'react-i18next';
 
+import '@/lib/localization/i18n';
+
 import { ThemedText } from '@/lib/components/ThemedText';
 import { ThemedView } from '@/lib/components/ThemedView';
 import { useToken } from '@/lib/context/AppProvider';
 import { Request } from '@/lib/services/request';
 import { store } from '@/lib/store/store';
 import { setSession } from '@/lib/store/dataStore';
-import '@/lib/localization/i18n';
-
 
 export default function OnboardStartScreen() {
     const { token, isLoading } = useToken();
diff --git a/assets/languages/en.json b/assets/languages/en.json
index 4c9cea9..1c41e24 100644
--- a/assets/languages/en.json
+++ b/assets/languages/en.json
@@ -68,6 +68,7 @@
   "modal": {
     "name": {
       "title": "Change name",
+      "name": "Name",
       "your-name": "Your name"
     },
     "address": {
diff --git a/assets/languages/nl.json b/assets/languages/nl.json
index 281680a..fe6de5f 100644
--- a/assets/languages/nl.json
+++ b/assets/languages/nl.json
@@ -68,6 +68,7 @@
   "modal": {
     "name": {
       "title": "Naam wijzigen",
+      "name": "Naam",
       "your-name": "Je naam"
     },
     "address": {
diff --git a/lib/components/EditModal.tsx b/lib/components/EditModal.tsx
index bb2a7a7..95f4048 100644
--- a/lib/components/EditModal.tsx
+++ b/lib/components/EditModal.tsx
@@ -11,6 +11,7 @@ import { Colors } from '@/lib/constants/Colors';
 import { ThemedView } from '@/lib/components/ThemedView';
 import { ThemedText } from '@/lib/components/ThemedText';
 import { useColorScheme } from '@/lib/hooks/useColorScheme';
+import ThemedInput from '@/lib/components/ThemedInput';
 
 interface Field {
     name: string;
@@ -59,17 +60,13 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
                 <ThemedText style={styles.text}>{title ? title : t( "modal.default.title" )}</ThemedText>
 
                 {fields.map( (field, index) => (
-                    <ThemedView key={index} style={styles.inputContainer}>
-                        {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
-                        <TextInput
-                            style={[ styles.input, { color: Colors[ colorScheme ].text } ]}
-                            placeholder={field.placeholder}
-                            onChangeText={(text) => handleInputChange( field.name, text )}
-                            value={inputValues[ field.name ] || ''}
-                            placeholderTextColor={Colors[ colorScheme ].text}
-                        />
-                    </ThemedView>
-
+                    <ThemedInput
+                        key={index}
+                        label={field.title}
+                        onChangeText={(text) => handleInputChange( field.name, text )}
+                        value={inputValues[ field.name ] || ''}
+                        placeholder={field.placeholder}
+                    />
                 ) )}
 
                 <ThemedView style={styles.buttonContainer}>
diff --git a/lib/components/ThemedInput.tsx b/lib/components/ThemedInput.tsx
new file mode 100644
index 0000000..0060747
--- /dev/null
+++ b/lib/components/ThemedInput.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { TextInput, StyleSheet, TextInputProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { ThemedView } from '@/lib/components/ThemedView';
+import { ThemedText } from '@/lib/components/ThemedText';
+import { Colors } from '@/lib/constants/Colors';
+import { useColorScheme } from '@/lib/hooks/useColorScheme';
+
+interface InputComponentProps extends TextInputProps {
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+}
+
+const ThemedInput: React.FC<InputComponentProps> = ({
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    secureTextEntry = false,
+    keyboardType = 'default',
+    style,
+    inputStyle,
+    ...props
+}) => {
+    const colorScheme = useColorScheme() ?? 'light';
+
+    return (
+        <ThemedView style={[ styles.container, style ]}>
+            {label && <ThemedText style={styles.label}>{label}</ThemedText>}
+            <TextInput
+                style={[ styles.input, inputStyle, {
+                    color: Colors[ colorScheme ].text,
+                    borderColor: Colors[ colorScheme ].text
+                } ]}
+                placeholderTextColor={Colors[ colorScheme ].text}
+                placeholder={placeholder}
+                value={value}
+                onChangeText={onChangeText}
+                secureTextEntry={secureTextEntry}
+                keyboardType={keyboardType}
+                {...props}
+            />
+        </ThemedView>
+    );
+};
+
+const styles = StyleSheet.create( {
+    container: {
+        width: '100%',
+    },
+    label: {
+        marginBottom: 4,
+    },
+    input: {
+        width: '100%',
+        borderWidth: 1,
+        padding: 10,
+        paddingLeft: 20,
+        borderRadius: 3,
+        marginBottom: 10,
+    },
+} );
+
+export default ThemedInput;
\ No newline at end of file