karaolidis/terminally-online
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add searchbar to home screen

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2023-07-12 16:55:48 +03:00
parent ce8ef46c20
commit 5bf066ac98
13 changed files with 358 additions and 1560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/screens/home.tsx
View File

@@ -6,6 +6,7 @@ import {
IconButton,
Divider,
useTheme,
Searchbar,
} from 'react-native-paper';
import { useDispatch, useSelector } from 'react-redux';
import { PaddedView } from '../components';
@@ -19,7 +20,9 @@ import {
setSortDirection,
toggleFavoritesOnly,
setSort,
setFilter,
} from '../state';
import { MEME_TYPE, memeTypePlural } from '../database';
const Home = () => {
const theme = useTheme();
@@ -32,9 +35,11 @@ const Home = () => {
const favoritesOnly = useSelector(
(state: RootState) => state.home.favoritesOnly,
);
const filter = useSelector((state: RootState) => state.home.filter);
const dispatch = useDispatch();
const [sortMenuVisible, setSortMenuVisible] = useState(false);
const [filterMenuVisible, setFilterMenuVisible] = useState(false);
const handleSortModeChange = (newSort: SORT) => {
if (newSort === sort) {
@@ -50,45 +55,86 @@ const Home = () => {
setSortMenuVisible(false);
};
const handleFilterChange = (newFilter: MEME_TYPE | undefined) => {
dispatch(setFilter(newFilter));
setFilterMenuVisible(false);
};
const [search, setSearch] = useState('');
return (
<PaddedView>
<Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
<View style={[styles.flexRowSpaceBetween, styles.centeredVertical]}>
<Menu
visible={sortMenuVisible}
onDismiss={() => setSortMenuVisible(false)}
anchor={
<Button
onPress={() => setSortMenuVisible(true)}
icon={getSortIcon(sort, sortDirection)}
contentStyle={styles.flexRowReverse}>
Sort By: {sort}
</Button>
}>
{Object.keys(SORT).map(key => {
return (
<Menu.Item
key={key}
onPress={() =>
handleSortModeChange(SORT[key as keyof typeof SORT])
}
title={SORT[key as keyof typeof SORT]}
/>
);
})}
</Menu>
<View style={[styles.flexRow, styles.centeredVertical]}>
<Menu
visible={sortMenuVisible}
onDismiss={() => setSortMenuVisible(false)}
anchor={
<Button
onPress={() => setSortMenuVisible(true)}
icon={getSortIcon(sort, sortDirection)}
contentStyle={styles.flexRowReverse}
compact>
Sort By: {sort}
</Button>
}>
{Object.keys(SORT).map(key => {
return (
<Menu.Item
key={key}
onPress={() =>
handleSortModeChange(SORT[key as keyof typeof SORT])
}
title={SORT[key as keyof typeof SORT]}
/>
);
})}
</Menu>
</View>
<View style={styles.flexRow}>
<IconButton
icon={favoritesOnly ? 'heart' : 'heart-outline'}
iconColor={theme.colors.primary}
size={verticalScale(16)}
onPress={() => dispatch(toggleFavoritesOnly())}
/>
<IconButton
icon={getViewIcon(view)}
iconColor={theme.colors.primary}
size={verticalScale(16)}
onPress={() => dispatch(cycleView())}
/>
<IconButton
icon={favoritesOnly ? 'heart' : 'heart-outline'}
iconColor={theme.colors.primary}
size={verticalScale(16)}
onPress={() => dispatch(toggleFavoritesOnly())}
/>
<Menu
visible={filterMenuVisible}
onDismiss={() => setFilterMenuVisible(false)}
anchor={
<IconButton
onPress={() => setFilterMenuVisible(true)}
icon={filter ? 'filter' : 'filter-outline'}
iconColor={theme.colors.primary}
size={verticalScale(16)}
/>
}>
<Menu.Item
// eslint-disable-next-line unicorn/no-useless-undefined
onPress={() => handleFilterChange(undefined)}
title="All"
/>
{Object.keys(MEME_TYPE).map(key => {
return (
<Menu.Item
key={key}
onPress={() =>
handleFilterChange(MEME_TYPE[key as keyof typeof MEME_TYPE])
}
title={
memeTypePlural[MEME_TYPE[key as keyof typeof MEME_TYPE]]
}
/>
);
})}
</Menu>
</View>
</View>
<Divider />