feat: moved User list to drawer

Vali-98 · Oct 13, 2024 · 60f234b · 60f234b
1 parent 08cc344
commit 60f234b
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 96 deletions.
diff --git a/app/components/Avatar.tsx b/app/components/Avatar.tsx
@@ -17,15 +17,7 @@ const Avatar: React.FC<FallbackImageProps> = ({ targetImage, ...rest }) => {
         setImageSource(fallbackImage)
     }
 
-    return (
-        <Image
-            source={imageSource}
-            onError={handleError}
-            {...rest}
-            defaultSource={fallbackImage}
-            resizeMode="cover"
-        />
-    )
+    return <Image source={imageSource} onError={handleError} {...rest} />
 }
 
 export default Avatar
diff --git a/app/components/ChatMenu/ChatMenu.tsx b/app/components/ChatMenu/ChatMenu.tsx
@@ -6,7 +6,7 @@ import { useCallback, useRef, useState } from 'react'
 import { View, SafeAreaView, TouchableOpacity, StyleSheet, BackHandler } from 'react-native'
 import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { Menu } from 'react-native-popup-menu'
-import Animated, { runOnJS, ZoomIn, ZoomOut } from 'react-native-reanimated'
+import Animated, { runOnJS, ZoomIn } from 'react-native-reanimated'
 import { useShallow } from 'zustand/react/shallow'
 
 import ChatInput from './ChatInput'

diff --git a/app/components/ChatMenu/SettingsDrawer.tsx b/app/components/ChatMenu/SettingsDrawer.tsx
@@ -282,7 +282,7 @@ const styles = StyleSheet.create({
     userContainer: {
         alignItems: 'center',
         columnGap: 12,
-        paddingBottom: 12,
+        paddingBottom: 24,
         paddingTop: 24,
         padding: 16,
     },
@@ -369,7 +369,8 @@ const styles = StyleSheet.create({
     },
 
     appModeText: {
-        color: Style.getColor('primary-text1'),
+        marginLeft: 8,
+        color: Style.getColor('primary-text2'),
         marginBottom: 8,
     },
 })
diff --git a/app/components/UserEditor/UserCardEditor.tsx b/app/components/UserEditor/UserCardEditor.tsx
@@ -44,9 +44,8 @@ const UserCardEditor = () => {
         <View style={styles.userContainer}>
             <View style={styles.optionsBar}>
                 <Avatar targetImage={Characters.getImageDir(imageID)} style={styles.userImage} />
-
-                <View>
-                    <Text style={{ color: Style.getColor('primary-text2') }}>Name</Text>
+                <View style={{ flex: 1 }}>
+                    <Text style={styles.inputDescription}>Name</Text>
                     <TextInput
                         style={styles.inputName}
                         textAlignVertical="center"
@@ -65,46 +64,42 @@ const UserCardEditor = () => {
                 </View>
             </View>
 
-            <View style={styles.inputArea}>
-                <Text style={{ color: Style.getColor('primary-text2'), marginTop: 8 }}>
-                    Description
-                </Text>
-                <TextInput
-                    style={styles.input}
-                    multiline
-                    value={currentCard?.data.description ?? ''}
-                    onChangeText={(text) => {
-                        if (currentCard)
-                            setCurrentCard({
-                                ...currentCard,
-                                data: { ...currentCard.data, description: text },
-                            })
-                    }}
-                    placeholder="Describe this user..."
-                    placeholderTextColor={Style.getColor('primary-text2')}
+            <Text style={styles.inputDescription}>Description</Text>
+            <TextInput
+                style={styles.input}
+                multiline
+                numberOfLines={10}
+                value={currentCard?.data.description ?? ''}
+                onChangeText={(text) => {
+                    if (currentCard)
+                        setCurrentCard({
+                            ...currentCard,
+                            data: { ...currentCard.data, description: text },
+                        })
+                }}
+                placeholder="Describe this user..."
+                placeholderTextColor={Style.getColor('primary-text2')}
+            />
+
+            <TouchableOpacity style={styles.button} onPress={handleUploadImage}>
+                <AntDesign
+                    style={styles.buttonIcon}
+                    size={20}
+                    name="picture"
+                    color={Style.getColor('primary-text2')}
                 />
-            </View>
-            <View style={styles.buttonContainer}>
-                <TouchableOpacity style={styles.button} onPress={handleUploadImage}>
-                    <AntDesign
-                        style={styles.buttonIcon}
-                        size={20}
-                        name="picture"
-                        color={Style.getColor('primary-text2')}
-                    />
-                    <Text style={{ color: Style.getColor('primary-text1') }}>Change Image</Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity style={styles.buttonApprove} onPress={saveCard}>
-                    <AntDesign
-                        style={styles.buttonIcon}
-                        size={20}
-                        name="save"
-                        color={Style.getColor('primary-text2')}
-                    />
-                    <Text style={{ color: Style.getColor('primary-text1') }}>Save</Text>
-                </TouchableOpacity>
-            </View>
+                <Text style={{ color: Style.getColor('primary-text1') }}>Change Image</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.buttonApprove} onPress={saveCard}>
+                <AntDesign
+                    style={styles.buttonIcon}
+                    size={20}
+                    name="save"
+                    color={Style.getColor('primary-text2')}
+                />
+                <Text style={{ color: Style.getColor('primary-text1') }}>Save</Text>
+            </TouchableOpacity>
         </View>
     )
 }
@@ -113,49 +108,37 @@ export default UserCardEditor
 
 const styles = StyleSheet.create({
     userContainer: {
-        minHeight: Dimensions.get('screen').height / 3,
+        flex: 1,
         paddingTop: 16,
         paddingHorizontal: 16,
     },
 
     optionsBar: {
         flexDirection: 'row',
-        alignItems: 'center',
         columnGap: 24,
     },
 
     buttonContainer: {
-        marginTop: 12,
-        flexDirection: 'row',
+        marginTop: 32,
         columnGap: 8,
     },
 
     buttonIcon: {},
 
     button: {
+        marginTop: 12,
         flexDirection: 'row',
-        flex: 1,
         paddingVertical: 8,
         paddingHorizontal: 12,
         columnGap: 8,
         borderRadius: 8,
         backgroundColor: Style.getColor('primary-surface4'),
     },
 
-    buttonDestructive: {
-        flexDirection: 'row',
-        columnGap: 8,
-        flex: 1,
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        borderRadius: 8,
-        backgroundColor: Style.getColor('destructive-brand'),
-    },
-
     buttonApprove: {
+        marginTop: 12,
         flexDirection: 'row',
         columnGap: 8,
-        flex: 1,
         paddingVertical: 8,
         paddingHorizontal: 12,
         borderRadius: 8,
@@ -170,6 +153,12 @@ const styles = StyleSheet.create({
         borderWidth: 2,
     },
 
+    inputDescription: {
+        color: Style.getColor('primary-text2'),
+        marginTop: 8,
+        marginBottom: 4,
+    },
+
     inputName: {
         textAlign: 'center',
         color: Style.getColor('primary-text1'),
@@ -180,12 +169,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
     },
 
-    inputArea: {
-        flex: 1,
-    },
-
     input: {
-        flex: 1,
         color: Style.getColor('primary-text1'),
         textAlignVertical: 'top',
         borderColor: Style.getColor('primary-brand'),

diff --git a/app/components/UserEditor/UserDrawer.tsx b/app/components/UserEditor/UserDrawer.tsx
@@ -0,0 +1,66 @@
+import FadeBackrop from '@components/FadeBackdrop'
+import { Style } from '@globals'
+import { SetStateAction, useEffect } from 'react'
+import { BackHandler, GestureResponderEvent, StyleSheet, View } from 'react-native'
+import Animated, { Easing, SlideInRight, SlideOutRight } from 'react-native-reanimated'
+
+import UserList from './UserList'
+
+type UserDrawerProps = {
+    booleans: [boolean, (b: boolean | SetStateAction<boolean>) => void]
+}
+
+const UserDrawer: React.FC<UserDrawerProps> = ({ booleans: [showModal, setShowModal] }) => {
+    const handleOverlayClick = (e: GestureResponderEvent) => {
+        if (e.target === e.currentTarget) setShowModal(false)
+    }
+
+    useEffect(() => {
+        const backAction = () => {
+            if (showModal) {
+                setShowModal(false)
+                return true
+            }
+            return false
+        }
+        const handler = BackHandler.addEventListener('hardwareBackPress', backAction)
+        return () => handler.remove()
+    }, [showModal])
+
+    return (
+        <View style={styles.absolute}>
+            <FadeBackrop handleOverlayClick={handleOverlayClick}>
+                <Animated.View
+                    style={styles.drawer}
+                    entering={SlideInRight.duration(200).easing(Easing.out(Easing.quad))}
+                    exiting={SlideOutRight.duration(300).easing(Easing.out(Easing.quad))}>
+                    <UserList setShowModal={setShowModal} />
+                </Animated.View>
+            </FadeBackrop>
+        </View>
+    )
+}
+
+export default UserDrawer
+
+const styles = StyleSheet.create({
+    absolute: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    },
+
+    drawer: {
+        backgroundColor: Style.getColor('primary-surface1'),
+        width: '80%',
+        shadowColor: Style.getColor('primary-shadow'),
+        left: '20%',
+        borderTopWidth: 3,
+        elevation: 20,
+        position: 'absolute',
+        height: '100%',
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 32,
+    },
+})
diff --git a/app/components/UserEditor/UserList.tsx b/app/components/UserEditor/UserList.tsx
@@ -8,9 +8,13 @@ import { View, StyleSheet, Text, TouchableOpacity } from 'react-native'
 
 import UserListing from './UserListing'
 
-type CharacterData = Awaited<ReturnType<typeof Characters.db.query.cardListQuery>>
+// type CharacterData = Awaited<ReturnType<typeof Characters.db.query.cardListQuery>>
 
-const UserList = () => {
+type UserListProps = {
+    setShowModal: (b: boolean) => void
+}
+
+const UserList: React.FC<UserListProps> = ({ setShowModal }) => {
     const { data } = useLiveQuery(Characters.db.query.cardListQuery('user'))
 
     const [showNewUser, setShowNewUser] = useState(false)
@@ -45,14 +49,15 @@ const UserList = () => {
                             user={item}
                             nowLoading={nowLoading}
                             setNowLoading={setNowLoading}
+                            setShowModal={setShowModal}
                         />
                     )}
                     estimatedItemSize={100}
                     initialScrollIndex={Math.max(currentIndex, 0)}
                 />
                 <TouchableOpacity style={styles.newUserButton} onPress={() => setShowNewUser(true)}>
                     <AntDesign name="plus" size={18} color={Style.getColor('primary-text2')} />
-                    <Text style={styles.listTitle}>New User</Text>
+                    <Text style={styles.buttonText}>New User</Text>
                 </TouchableOpacity>
             </View>
         </View>
@@ -63,24 +68,30 @@ export default UserList
 
 const styles = StyleSheet.create({
     mainContainer: {
-        paddingHorizontal: 16,
         flex: 1,
     },
 
-    userListBorder: { flex: 1 },
+    userListBorder: {
+        flex: 1,
+    },
 
     userListContainer: {
         flex: 1,
     },
 
     listHeader: {
-        marginTop: 30,
+        paddingHorizontal: 16,
         marginBottom: 12,
         flexDirection: 'row',
         justifyContent: 'space-between',
     },
 
     listTitle: {
+        fontSize: 18,
+        color: Style.getColor('primary-text2'),
+    },
+
+    buttonText: {
         fontSize: 16,
         color: Style.getColor('primary-text1'),
     },
@@ -90,7 +101,6 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         flexDirection: 'row',
         paddingVertical: 8,
-        paddingHorizontal: 12,
         marginTop: 4,
         columnGap: 8,
         borderRadius: 8,

diff --git a/app/components/UserEditor/UserListing.tsx b/app/components/UserEditor/UserListing.tsx
@@ -11,6 +11,7 @@ type CharacterListingProps = {
     user: CharacterData
     nowLoading: boolean
     setNowLoading: (b: boolean) => void
+    setShowModal: (b: boolean) => void
 }
 
 const day_ms = 86400000
@@ -22,7 +23,12 @@ const getTimeStamp = (oldtime: number) => {
     return new Date(oldtime).toLocaleDateString()
 }
 
-const UserListing: React.FC<CharacterListingProps> = ({ user, nowLoading, setNowLoading }) => {
+const UserListing: React.FC<CharacterListingProps> = ({
+    user,
+    nowLoading,
+    setNowLoading,
+    setShowModal,
+}) => {
     const { userId, setCard } = Characters.useUserCard((state) => ({
         userId: state.id,
         setCard: state.setCard,
@@ -89,6 +95,7 @@ const UserListing: React.FC<CharacterListingProps> = ({ user, nowLoading, setNow
                 onPress={async () => {
                     setNowLoading(true)
                     await setCard(user.id)
+                    setShowModal(false)
                     setNowLoading(false)
                 }}>
                 <Avatar targetImage={Characters.getImageDir(user.image_id)} style={styles.avatar} />