From 611dac558d37ce8153dfbef00964833fd976cc31 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 17 Aug 2020 15:23:39 -0700 Subject: [TMA-25] Search Functionality (#33) * Create tabs gradient component * Add endpoint constant and types for search * Create search functionality * [TMA-19*] Abstracted out Social Icon logic (#32) * Basic mostly functional implementation Need to figure out why API is being called so much * Hey it works now! Without a million API calls! * Fixed bug where app would crash upon login Also updated property names to be more appropriate * Added post datetime and social icon * Updated error message * Fixed typecheck errors I don't know that these fixes are the best since I don't think they're generalizable * Formatted datetime in PostHeader * Abstracted out social icon switching logic * Basic mostly functional implementation Need to figure out why API is being called so much * Hey it works now! Without a million API calls! * Fixed bug where app would crash upon login Also updated property names to be more appropriate * Added post datetime and social icon * Updated error message * Fixed typecheck errors I don't know that these fixes are the best since I don't think they're generalizable * Abstracted out social icon switching logic * Change View to TouchableOpacity * Create tabs gradient component * Add endpoint constant and types for search * Create search functionality * Change View to TouchableOpacity Co-authored-by: Justin Shillingford --- src/screens/profile/ProfileScreen.tsx | 3 +- src/screens/search/SearchScreen.tsx | 143 ++++++++++++++++++++-------------- 2 files changed, 88 insertions(+), 58 deletions(-) (limited to 'src/screens') diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx index 3d1ef2a8..9da9a3d8 100644 --- a/src/screens/profile/ProfileScreen.tsx +++ b/src/screens/profile/ProfileScreen.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Cover, Content} from '../../components'; +import {Cover, Content, TabsGradient} from '../../components'; import Animated from 'react-native-reanimated'; import {AuthContext} from '../../routes/authentication'; import {StatusBar} from 'react-native'; @@ -19,6 +19,7 @@ const ProfileScreen: React.FC = () => { + ); }; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 8ef56b73..94b9ab41 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -1,83 +1,112 @@ -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; +import {StatusBar, StyleSheet, ScrollView, Keyboard} from 'react-native'; import { - StatusBar, - SafeAreaView, - StyleSheet, - Text, - View, - ScrollView, -} from 'react-native'; -import {SearchBar, SuggestedSection, SearchBackground} from '../../components'; -import {SCREEN_HEIGHT} from '../../utils'; + SearchBackground, + SearchHeader, + SearchBar, + Explore, + SearchResultsBackground, + SearchResults, + TabsGradient, +} from '../../components'; +import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils'; +import Animated, {Easing, timing} from 'react-native-reanimated'; +import {ProfilePreviewType} from '../../types'; +import {SEARCH_ENDPOINT} from '../../constants'; +const {Value} = Animated; /** * Search Screen for user recommendations and a search * tool to allow user to find other users */ +const top: Animated.Value = new Value(-SCREEN_HEIGHT); const SearchScreen: React.FC = () => { - const sections: Array = [ - 'People you follow', - 'People you may know', - 'Trending in sports', - 'Trending on Tagg', - 'Trending in music', - ]; - // dummy user data - const users: Array = [ - 'Sam Davis', - 'Becca Smith', - 'Ann Taylor', - 'Clara Johnson', - 'Sarah Jung', - 'Lila Hernandez', - ]; - const [isSearching, setIsSearching] = useState(false); + const [query, setQuery] = useState(''); + const [results, setResults] = useState>([]); + useEffect(() => { + if (query.length < 3) { + setResults([]); + return; + } + const loadResults = async (q: string) => { + try { + const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, { + method: 'GET', + }); + const status = response.status; + if (status === 200) { + let searchResults = await response.json(); + setResults(searchResults); + return; + } + setResults([]); + } catch (error) { + console.log(error); + setResults([]); + } + }; + loadResults(query); + }, [query]); + const handleFocus = () => { - setIsSearching(true); + const topInConfig = { + duration: 180, + toValue: 0, + easing: Easing.bezier(0.31, 0.14, 0.66, 0.82), + }; + timing(top, topInConfig).start(); }; const handleBlur = () => { - setIsSearching(false); + Keyboard.dismiss(); + const topOutConfig = { + duration: 180, + toValue: -SCREEN_HEIGHT, + easing: Easing.inOut(Easing.ease), + }; + timing(top, topOutConfig).start(); }; + return ( - + - - - Explore - - {!isSearching && ( - - {sections.map((title) => ( - - ))} - - )} - - + + + + + + + + + ); }; const styles = StyleSheet.create({ - screen: { - paddingTop: 50, - paddingBottom: SCREEN_HEIGHT / 10, + contentContainer: { + paddingTop: StatusBarHeight, + paddingBottom: SCREEN_HEIGHT / 15, paddingHorizontal: 15, }, - content: { - paddingVertical: 20, + searchBar: { + marginBottom: 20, }, header: { - fontWeight: 'bold', - fontSize: 24, - color: '#fff', - marginBottom: 20, - textAlign: 'center', + marginVertical: 20, + zIndex: 1, }, }); export default SearchScreen; -- cgit v1.2.3-70-g09d2