From b368a4ac3aff8218e61b5adf8da2f0c1efc2e06b Mon Sep 17 00:00:00 2001
From: Vali98 <al244098@gmail.com>
Date: Mon, 23 Sep 2024 00:17:21 +0800
Subject: [PATCH] feat: added name search to character list, removed default
 showing tags

---
 .../CharacterMenu/CharacterList.tsx           | 109 +++++++++++++++---
 .../CharacterMenu/CharacterListing.tsx        |  11 +-
 2 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/app/components/CharacterMenu/CharacterList.tsx b/app/components/CharacterMenu/CharacterList.tsx
index 610453e..c42f8e6 100644
--- a/app/components/CharacterMenu/CharacterList.tsx
+++ b/app/components/CharacterMenu/CharacterList.tsx
@@ -3,7 +3,24 @@ import { Characters, Style } from '@globals'
 import { useLiveQuery } from 'drizzle-orm/expo-sqlite'
 import { Stack } from 'expo-router'
 import { useState } from 'react'
-import { SafeAreaView, View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native'
+import {
+    SafeAreaView,
+    View,
+    Text,
+    StyleSheet,
+    FlatList,
+    TouchableOpacity,
+    TextInput,
+} from 'react-native'
+import Animated, {
+    FadeInUp,
+    FadeOutUp,
+    SlideInRight,
+    ZoomIn,
+    ZoomInDown,
+    ZoomInUp,
+    ZoomOut,
+} from 'react-native-reanimated'
 
 import CharacterListing from './CharacterListing'
 import CharacterNewMenu from './CharacterNewMenu'
@@ -21,8 +38,10 @@ type CharInfo = {
 }
 
 enum SortType {
-    RECENT,
-    ALPHABETICAL,
+    RECENT_DESC,
+    RECENT_ASC,
+    ALPHABETICAL_ASC,
+    ALPHABETICAL_DESC,
 }
 
 const sortModified = (item1: CharInfo, item2: CharInfo) => {
@@ -34,7 +53,7 @@ const sortAlphabetical = (item1: CharInfo, item2: CharInfo) => {
 }
 
 const sortList = (sortType: SortType) => {
-    if (sortType === SortType.ALPHABETICAL) return sortAlphabetical
+    if (sortType === SortType.ALPHABETICAL_ASC) return sortAlphabetical
     else return sortModified
 }
 
@@ -70,8 +89,10 @@ const CharacterList: React.FC<CharacterListProps> = ({ showHeader }) => {
     'use no memo'
     // const [characterList, setCharacterList] = useState<CharInfo[]>([])
     const [nowLoading, setNowLoading] = useState(false)
+    const [showSearch, setShowSearch] = useState(false)
+    const [textFilter, setTextFilter] = useState('')
 
-    const [sortType, setSortType] = useState<SortType>(SortType.RECENT)
+    const [sortType, setSortType] = useState<SortType>(SortType.RECENT_DESC)
     const { data } = useLiveQuery(Characters.db.query.cardListQuery('character', 'modified'))
 
     const characterList: CharInfo[] = data
@@ -83,7 +104,8 @@ const CharacterList: React.FC<CharacterListProps> = ({ showHeader }) => {
             last_modified: item.last_modified ?? 0,
             tags: item.tags.map((item) => item.tag.tag),
         }))
-        .sort(sortList(sortType ?? SortType.RECENT))
+        .sort(sortList(sortType ?? SortType.RECENT_DESC))
+        .filter((item) => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()))
 
     return (
         <SafeAreaView style={{ paddingVertical: 16, paddingHorizontal: 8, flex: 1 }}>
@@ -120,33 +142,81 @@ const CharacterList: React.FC<CharacterListProps> = ({ showHeader }) => {
                         Sort By
                     </Text>
                     <SortButton
-                        sortType={SortType.RECENT}
+                        sortType={SortType.RECENT_DESC}
                         currentSortType={sortType}
                         label="Recent"
                         onPress={() => {
-                            setSortType(SortType.RECENT)
+                            setSortType(SortType.RECENT_DESC)
                         }}
                     />
                     <SortButton
-                        sortType={SortType.ALPHABETICAL}
+                        sortType={SortType.ALPHABETICAL_ASC}
                         currentSortType={sortType}
                         label="A-z"
                         onPress={() => {
-                            setSortType(SortType.ALPHABETICAL)
+                            setSortType(SortType.ALPHABETICAL_ASC)
                         }}
                     />
                 </View>
-
-                <TouchableOpacity>
-                    <FontAwesome name="search" color={Style.getColor('primary-text2')} size={26} />
-                </TouchableOpacity>
+                {showSearch && (
+                    <Animated.View entering={ZoomIn} exiting={ZoomOut}>
+                        <TouchableOpacity>
+                            <FontAwesome
+                                name={showSearch ? 'close' : 'search'}
+                                color={Style.getColor('primary-text2')}
+                                size={26}
+                                onPress={() => {
+                                    if (showSearch) setTextFilter('')
+                                    setShowSearch(!showSearch)
+                                }}
+                            />
+                        </TouchableOpacity>
+                    </Animated.View>
+                )}
+                {!showSearch && (
+                    <Animated.View entering={ZoomIn} exiting={ZoomOut}>
+                        <TouchableOpacity>
+                            <FontAwesome
+                                name={showSearch ? 'close' : 'search'}
+                                color={Style.getColor('primary-text2')}
+                                size={26}
+                                onPress={() => {
+                                    if (showSearch) setTextFilter('')
+                                    setShowSearch(!showSearch)
+                                }}
+                            />
+                        </TouchableOpacity>
+                    </Animated.View>
+                )}
             </View>
+            {showSearch && (
+                <Animated.View
+                    style={{ paddingHorizontal: 12, paddingVertical: 8 }}
+                    entering={FadeInUp.duration(150).withInitialValues({
+                        transform: [{ translateY: -20 }],
+                    })}
+                    exiting={FadeOutUp.duration(100)}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Text style={{ color: Style.getColor('primary-text2') }}>Name: </Text>
+                        <TextInput
+                            value={textFilter}
+                            style={{
+                                ...styles.searchInput,
+                                color: Style.getColor(
+                                    characterList.length === 0 ? 'primary-text2' : 'primary-text1'
+                                ),
+                            }}
+                            onChangeText={setTextFilter}
+                        />
+                    </View>
+                </Animated.View>
+            )}
 
             {characterList.length === 0 && <CharactersEmpty />}
 
             {characterList.length !== 0 && (
                 <FlatList
-                    // itemLayoutAnimation={SequencedTransition}
+                    showsHorizontalScrollIndicator={false}
                     data={characterList}
                     keyExtractor={(item) => item.id.toString()}
                     renderItem={({ item, index }) => (
@@ -188,4 +258,13 @@ const styles = StyleSheet.create({
     sortButtonTextActive: {
         color: Style.getColor('primary-text1'),
     },
+
+    searchInput: {
+        borderRadius: 8,
+        marginLeft: 8,
+        flex: 1,
+        paddingVertical: 2,
+        paddingHorizontal: 12,
+        backgroundColor: Style.getColor('primary-surface3'),
+    },
 })
diff --git a/app/components/CharacterMenu/CharacterListing.tsx b/app/components/CharacterMenu/CharacterListing.tsx
index c86b6cd..be9eeb8 100644
--- a/app/components/CharacterMenu/CharacterListing.tsx
+++ b/app/components/CharacterMenu/CharacterListing.tsx
@@ -117,11 +117,12 @@ const CharacterListing: React.FC<CharacterListingProps> = ({
                             columnGap: 2,
                             rowGap: 2,
                         }}>
-                        {character.tags.map((item, index) => (
-                            <Text style={styles.tag} key={index}>
-                                {item}
-                            </Text>
-                        ))}
+                        {showTags &&
+                            character.tags.map((item, index) => (
+                                <Text style={styles.tag} key={index}>
+                                    {item}
+                                </Text>
+                            ))}
                     </View>
                 </View>
             </TouchableOpacity>