Skip to content

Commit

Permalink
feat: added name search to character list, removed default showing tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vali-98
Vali-98 committed Sep 22, 2024
1 parent 9dba26f commit b368a4a
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 20 deletions.
109 changes: 94 additions & 15 deletions app/components/CharacterMenu/CharacterList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -21,8 +38,10 @@ type CharInfo = {
}

enum SortType {
RECENT,
ALPHABETICAL,
RECENT_DESC,
RECENT_ASC,
ALPHABETICAL_ASC,
ALPHABETICAL_DESC,
}

const sortModified = (item1: CharInfo, item2: CharInfo) => {
Expand All @@ -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
}

Expand Down Expand Up @@ -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
Expand All @@ -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 }}>
Expand Down Expand Up @@ -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 }) => (
Expand Down Expand Up @@ -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'),
},
})
11 changes: 6 additions & 5 deletions app/components/CharacterMenu/CharacterListing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit b368a4a

Please sign in to comment.