aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/search/RecentSearches.tsx27
-rw-r--r--src/components/search/SearchResults.tsx52
-rw-r--r--src/screens/search/SearchScreen.tsx49
3 files changed, 94 insertions, 34 deletions
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 5db1342c..89379596 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,7 +7,12 @@ import {
TouchableOpacityProps,
ScrollView,
} from 'react-native';
-import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
+import {
+ PreviewType,
+ ProfilePreviewType,
+ ScreenType,
+ CategoryPreviewType,
+} from '../../types';
import {TAGG_LIGHT_BLUE} from '../../constants';
import SearchResults from './SearchResults';
import {SCREEN_HEIGHT} from '../../utils';
@@ -16,26 +21,35 @@ interface RecentSearchesProps extends TouchableOpacityProps {
sectionTitle: PreviewType;
sectionButtonTitle: string;
recents: Array<ProfilePreviewType>;
+ recentCategories: CategoryPreviewType[];
screenType: ScreenType;
}
const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
+ const {
+ sectionTitle,
+ sectionButtonTitle,
+ recents,
+ recentCategories,
+ screenType,
+ } = props;
return (
<ScrollView
style={styles.mainContainer}
contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
<View style={styles.container}>
- <Text style={styles.title}>{props.sectionTitle}</Text>
- {props.sectionButtonTitle && (
+ <Text style={styles.title}>{sectionTitle}</Text>
+ {sectionButtonTitle && (
<TouchableOpacity {...props}>
<Text style={styles.clear}>Clear all</Text>
</TouchableOpacity>
)}
</View>
<SearchResults
- results={props.recents}
- previewType={props.sectionTitle}
- screenType={props.screenType}
+ results={recents}
+ categories={recentCategories}
+ previewType={sectionTitle}
+ screenType={screenType}
/>
</ScrollView>
);
@@ -44,7 +58,6 @@ const RecentSearches: React.FC<RecentSearchesProps> = (props) => {
const styles = StyleSheet.create({
mainContainer: {
marginLeft: '3%',
- padding: 20,
},
container: {
flexDirection: 'row',
diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
index bf355220..798d3251 100644
--- a/src/components/search/SearchResults.tsx
+++ b/src/components/search/SearchResults.tsx
@@ -1,22 +1,33 @@
import React from 'react';
-import {ProfilePreviewType, PreviewType, ScreenType} from '../../types';
+import {
+ ProfilePreviewType,
+ PreviewType,
+ ScreenType,
+ CategoryPreviewType,
+} from '../../types';
import ProfilePreview from '../profile/ProfilePreview';
import {StyleSheet, View} from 'react-native';
+import SearchResultsCell from './SearchResultCell';
+import {useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
interface SearchResultsProps {
- results: Array<ProfilePreviewType>;
+ results: ProfilePreviewType[];
previewType: PreviewType;
screenType: ScreenType;
+ categories: CategoryPreviewType[];
}
const SearchResults: React.FC<SearchResultsProps> = ({
results,
previewType,
screenType,
+ categories,
}) => {
/**
* Added the following swicth case to make Results on Search and Recents screen a list
* Flex is love
*/
- var containerStyle;
+ const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+ let containerStyle;
switch (previewType) {
case 'Search':
containerStyle = styles.containerSearch;
@@ -29,25 +40,32 @@ const SearchResults: React.FC<SearchResultsProps> = ({
}
return (
<View style={containerStyle}>
- {results &&
- results.map((profilePreview) => (
- <ProfilePreview
- style={styles.result}
- key={profilePreview.id}
- {...{profilePreview}}
- previewType={previewType}
- screenType={screenType}
- />
- ))}
+ {categories.map((category: CategoryPreviewType) => (
+ <SearchResultsCell
+ key={category.name}
+ profileData={category}
+ {...{loggedInUser}}
+ />
+ ))}
+ {results.map((profile: ProfilePreviewType) => (
+ <SearchResultsCell
+ key={profile.id}
+ profileData={profile}
+ {...{loggedInUser}}
+ />
+ ))}
</View>
);
};
const styles = StyleSheet.create({
- containerSearch: {flexDirection: 'column', flexWrap: 'wrap'},
- container: {flexDirection: 'row', flexWrap: 'wrap'},
- result: {
- marginVertical: 10,
+ containerSearch: {
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ },
+ container: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
},
});
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 223fc2b2..f9ad7711 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -17,7 +17,7 @@ import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
import {loadSearchResults} from '../../services';
import {resetScreenType} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
/**
@@ -32,6 +32,9 @@ const SearchScreen: React.FC = () => {
const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
recentSearches ?? [],
);
+ const [recentCategories, setRecentCategories] = useState<
+ CategoryPreviewType[]
+ >([]);
const [searching, setSearching] = useState(false);
const top = Animated.useValue(-SCREEN_HEIGHT);
const [keyboardVisible, setKeyboardVisible] = React.useState(
@@ -50,7 +53,18 @@ const SearchScreen: React.FC = () => {
}, []);
const dispatch = useDispatch();
+ /*
+ * If user begins actively searching, refresh recently-searched list.
+ */
+ useEffect(() => {
+ if (searching) loadRecentSearches();
+ }, [searching]);
+
+ /*
+ * Main handler for changes in query.
+ */
useEffect(() => {
+ if (!query.length) loadRecentSearches();
if (query.length < 3) {
setResults(undefined);
return;
@@ -97,7 +111,7 @@ const SearchScreen: React.FC = () => {
timing(top, topInConfig).start();
setSearching(true);
};
- const handleBlur = () => {
+ const handleCancel = () => {
setQuery('');
Keyboard.dismiss();
const topOutConfig = {
@@ -108,6 +122,7 @@ const SearchScreen: React.FC = () => {
timing(top, topOutConfig).start();
setSearching(false);
};
+
const loadRecentlySearchedUsers = async () => {
try {
const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -116,17 +131,31 @@ const SearchScreen: React.FC = () => {
console.log(e);
}
};
- const clearRecentlySearched = async () => {
+ const loadRecentlySearchedCategories = async () => {
try {
- await AsyncStorage.removeItem('@recently_searched_users');
- loadRecentlySearchedUsers();
+ const recentCategoriesJSON = await AsyncStorage.getItem(
+ '@recently_searched_categories',
+ );
+ setRecentCategories(
+ recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [],
+ );
} catch (e) {
console.log(e);
}
};
- const handleUpdate = async (val: string) => {
- setQuery(val);
+ const loadRecentSearches = () => {
loadRecentlySearchedUsers();
+ loadRecentlySearchedCategories();
+ };
+ const clearRecentlySearched = async () => {
+ try {
+ AsyncStorage.removeItem('@recently_searched_users');
+ AsyncStorage.removeItem('@recently_searched_categories');
+ loadRecentlySearchedUsers();
+ loadRecentlySearchedCategories();
+ } catch (e) {
+ console.log(e);
+ }
};
return (
@@ -141,8 +170,8 @@ const SearchScreen: React.FC = () => {
showsVerticalScrollIndicator={false}>
<SearchBar
style={styles.searchBar}
- onCancel={handleBlur}
- onChangeText={handleUpdate}
+ onCancel={handleCancel}
+ onChangeText={setQuery}
onBlur={Keyboard.dismiss}
onFocus={handleFocus}
value={query}
@@ -155,8 +184,8 @@ const SearchScreen: React.FC = () => {
sectionTitle="Recent"
sectionButtonTitle="Clear all"
onPress={clearRecentlySearched}
- recents={recents}
screenType={ScreenType.Search}
+ {...{recents, recentCategories}}
/>
) : (
<SearchResultList
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 12:31:36 +0000