refactor: split app into modular src architecture

2026-04-18 12:56:12 +02:00
parent 3323d09dda
commit bdea52b7c6
17 changed files with 1493 additions and 1343 deletions
--- a/src/modals/ItemModal.js
+++ b/src/modals/ItemModal.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
+import ChipGroup from '../components/ChipGroup';
+import Field from '../components/Field';
+import { styles } from '../styles';
+
+export default function ItemModal({
+  visible,
+  itemForm,
+  setItemModalVisible,
+  updateItemForm,
+  pickItemImage,
+  saveItemFromModal,
+}) {
+  return (
+    <Modal visible={visible} animationType="slide" transparent>
+      <View style={styles.modalBackdrop}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.modalKeyboardWrap}>
+          <View style={styles.modalCard}>
+            <View style={styles.sectionRow}>
+              <Text style={styles.sectionTitle}>{itemForm.id ? 'Update Item' : 'Add Item'}</Text>
+              <Pressable onPress={() => setItemModalVisible(false)}>
+                <Text style={styles.closeText}>Close</Text>
+              </Pressable>
+            </View>
+
+            <ScrollView keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+              <Field label="Name">
+                <TextInput
+                  style={styles.input}
+                  value={itemForm.name}
+                  onChangeText={(v) => updateItemForm('name', v)}
+                  placeholder="Toothbrush"
+                  placeholderTextColor="#6b7280"
+                />
+              </Field>
+
+              <Field label="Description">
+                <TextInput
+                  style={styles.input}
+                  value={itemForm.description}
+                  onChangeText={(v) => updateItemForm('description', v)}
+                  placeholder="Optional"
+                  placeholderTextColor="#6b7280"
+                />
+              </Field>
+
+              <Field label="Category">
+                <TextInput
+                  style={styles.input}
+                  value={itemForm.category}
+                  onChangeText={(v) => updateItemForm('category', v)}
+                  placeholder="toiletries"
+                  placeholderTextColor="#6b7280"
+                />
+              </Field>
+
+              <Field label="Status">
+                <ChipGroup options={ITEM_STATUSES} value={itemForm.status} onChange={(v) => updateItemForm('status', v)} />
+              </Field>
+
+              <Field label="Placement">
+                <ChipGroup options={ITEM_PLACEMENTS} value={itemForm.placement} onChange={(v) => updateItemForm('placement', v)} />
+              </Field>
+
+              {itemForm.status === 'lent-to' ? (
+                <Field label="Lent to">
+                  <TextInput
+                    style={styles.input}
+                    value={itemForm.lentTo}
+                    onChangeText={(v) => updateItemForm('lentTo', v)}
+                    placeholder="Person name"
+                    placeholderTextColor="#6b7280"
+                  />
+                </Field>
+              ) : null}
+
+              <Pressable style={styles.secondaryBtn} onPress={pickItemImage}>
+                <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'Change image' : 'Add image'}</Text>
+              </Pressable>
+              {!!itemForm.imageUri && <Image source={{ uri: itemForm.imageUri }} style={styles.previewImageSmall} />}
+
+              <Pressable style={styles.primaryBtn} onPress={saveItemFromModal}>
+                <Text style={styles.primaryBtnText}>{itemForm.id ? 'Save Changes' : 'Add Item'}</Text>
+              </Pressable>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}