Merge pull request #279 from ankit-thanekar007/tma-663-updated-search-results

TMA-663-Updated Search Results

2 files changed, 160 insertions, 30 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 84efa931..70733d7e 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -16,19 +16,16 @@ import {
   SearchBackground,
   SearchBar,
   SearchHeader,
-  SearchResults,
+  SearchResultList,
   SearchResultsBackground,
   TabsGradient,
 } from '../../components';
 import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
+import {loadSearchResults} from '../../services';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType, ScreenType, UserType} from '../../types';
+import {ProfilePreviewType, ScreenType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-const NO_USER: UserType = {
-  userId: '',
-  username: '',
-};
 
 /**
  * Search Screen for user recommendations and a search
@@ -38,14 +35,27 @@ const NO_USER: UserType = {
 const SearchScreen: React.FC = () => {
   const {recentSearches} = useSelector((state: RootState) => state.taggUsers);
   const [query, setQuery] = useState<string>('');
-  const [results, setResults] = useState<Array<ProfilePreviewType>>([]);
+  const [results, setResults] = useState<Array<any> | undefined>(undefined);
   const [recents, setRecents] = useState<Array<ProfilePreviewType>>(
     recentSearches ?? [],
   );
   const [searching, setSearching] = useState(false);
   const top = Animated.useValue(-SCREEN_HEIGHT);
   const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [keyboardVisible, setKeyboardVisible] = React.useState(
+    'keyboardVisible',
+  );
+  useEffect(() => {
+    const showKeyboard = () => setKeyboardVisible('keyboardVisibleTrue');
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
+    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+  }, []);
 
+  useEffect(() => {
+    const hideKeyboard = () => setKeyboardVisible('keyboardVisibleFalse');
+    Keyboard.addListener('keyboardWillHide', hideKeyboard);
+    return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+  }, []);
   const dispatch = useDispatch();
 
   const onRefresh = useCallback(() => {
@@ -60,31 +70,31 @@ const SearchScreen: React.FC = () => {
 
   useEffect(() => {
     if (query.length < 3) {
-      setResults([]);
+      setResults(undefined);
       return;
     }
-    const loadResults = async (q: string) => {
-      try {
-        const token = await AsyncStorage.getItem('token');
-        const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, {
-          method: 'GET',
-          headers: {
-            Authorization: 'Token ' + token,
+    (async () => {
+      const searchResults = await loadSearchResults(
+        `${SEARCH_ENDPOINT}?query=${query}`,
+      );
+      if (query.length > 2) {
+        const categories = searchResults?.categories;
+        const users = searchResults?.users;
+        const sanitizedResult = [
+          {
+            title: 'categories',
+            data: categories,
+          },
+          {
+            title: 'users',
+            data: users,
           },
-        });
-        const status = response.status;
-        if (status === 200) {
-          let searchResults = await response.json();
-          setResults(searchResults);
-          return;
-        }
-        setResults([]);
-      } catch (error) {
-        console.log(error);
-        setResults([]);
+        ];
+        setResults(sanitizedResult);
+      } else {
+        setResults(undefined);
       }
-    };
-    loadResults(query);
+    })();
   }, [query]);
 
   /**
@@ -160,8 +170,9 @@ const SearchScreen: React.FC = () => {
           {...{top, searching}}
         />
         <Explore />
+
         <SearchResultsBackground {...{top}}>
-          {results.length === 0 && recents.length !== 0 ? (
+          {results === undefined && recents.length !== 0 ? (
             <RecentSearches
               sectionTitle="Recent"
               sectionButtonTitle="Clear all"
@@ -170,8 +181,9 @@ const SearchScreen: React.FC = () => {
               screenType={ScreenType.Search}
             />
           ) : (
-            <SearchResults
+            <SearchResultList
               {...{results}}
+              keyboardVisible={keyboardVisible === 'keyboardVisibleTrue'}
               previewType={'Search'}
               screenType={ScreenType.Search}
             />
diff --git a/src/screens/search/mock.ts b/src/screens/search/mock.ts
new file mode 100644
index 00000000..d9909b22
--- /dev/null
+++ b/src/screens/search/mock.ts
@@ -0,0 +1,118 @@
+const MockResults = () => {
+  return {
+    categories: [
+      {
+        id: 11,
+        name: "Brown '21",
+        category: 'Brown',
+      },
+      {
+        id: 12,
+        name: "Brown '22",
+        category: 'Brown',
+      },
+      {
+        id: 13,
+        name: "Brown '23",
+        category: null,
+      },
+      {
+        id: 14,
+        name: "Brown '24",
+        category: null,
+      },
+    ],
+    users: [
+      {
+        id: 'd5295557-59ce-49fc-aa8a-442874dbffc3',
+        username: 'foobar',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-d5295557-59ce-49fc-aa8a-442874dbffc3-thumbnail.jpg',
+      },
+      {
+        id: '31e93eb5-ccc9-4743-b053-eff368e23fa8',
+        username: 'foobar2',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-31e93eb5-ccc9-4743-b053-eff368e23fa8-thumbnail.jpg',
+      },
+      {
+        id: 'b1b68df9-97ac-48de-b00d-eab10a6a644a',
+        username: 'foobar3',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b1b68df9-97ac-48de-b00d-eab10a6a644a-thumbnail.jpg',
+      },
+      {
+        id: 'b89c88b3-6b2f-4b6c-85d9-a03ff5396113',
+        username: 'foobar4',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b89c88b3-6b2f-4b6c-85d9-a03ff5396113-thumbnail.jpg',
+      },
+      {
+        id: '73b4496a-0aa8-4115-98da-2070bf326134',
+        username: 'foobar5',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-73b4496a-0aa8-4115-98da-2070bf326134-thumbnail.jpg',
+      },
+      {
+        id: '329763b8-931e-4d4d-8a07-003374d38497',
+        username: 'foobar6',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-329763b8-931e-4d4d-8a07-003374d38497-thumbnail.jpg',
+      },
+      {
+        id: '9e82fea2-cddc-41e1-be05-6873f58138ca',
+        username: 'foobar7',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-9e82fea2-cddc-41e1-be05-6873f58138ca-thumbnail.jpg',
+      },
+      {
+        id: '6e5b8892-4384-45a1-bc0a-8f2c9d614fbc',
+        username: 'foobar8',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-6e5b8892-4384-45a1-bc0a-8f2c9d614fbc-thumbnail.jpg',
+      },
+      {
+        id: 'c49b01c6-9151-4654-8fae-834adfa15727',
+        username: 'foobar9',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-c49b01c6-9151-4654-8fae-834adfa15727-thumbnail.jpg',
+      },
+      {
+        id: '5b394d5b-62e3-405e-8ecd-7433517ef688',
+        username: 'foobar10',
+        first_name: 'Foo',
+        last_name: 'Bar',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-5b394d5b-62e3-405e-8ecd-7433517ef688-thumbnail.jpg',
+      },
+      {
+        id: '698e38f0-24ed-404c-9f0c-6a24e43af576',
+        username: 'fooo',
+        first_name: 'wefwef',
+        last_name: 'wefwef',
+        thumbnail_url:
+          'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-698e38f0-24ed-404c-9f0c-6a24e43af576-thumbnail.jpg',
+      },
+    ],
+  };
+};
+
+export default MockResults;