5 files changed, 50 insertions, 30 deletions
diff --git a/src/components/search/DiscoverUsers.tsx b/src/components/search/DiscoverUsers.tsx
index ec0a8daa..93fcb02d 100644
--- a/src/components/search/DiscoverUsers.tsx
+++ b/src/components/search/DiscoverUsers.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  TouchableOpacityProps,
-} from 'react-native';
+import {View, Text, StyleSheet, TouchableOpacityProps} from 'react-native';
 import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import SearchResults from './SearchResults';
 
diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
index 30de7e2c..b674c963 100644
--- a/src/components/search/SearchCategories.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -1,35 +1,29 @@
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
+import {getButtons} from '../../services/ExploreService';
+import {SearchCategoryType} from 'src/types';
 import {TAGG_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
 const SearchCategories: React.FC = () => {
-  const categories = [
-    {
-      id: 4,
-      name: "Brown '21",
-    },
-    {
-      id: 5,
-      name: "Brown '22",
-    },
-    {
-      id: 6,
-      name: "Brown '23",
-    },
-    {
-      id: 7,
-      name: "Brown '24",
-    },
-  ];
+  const [buttons, setButtons] = useState<SearchCategoryType[]>([]);
+  useEffect(() => {
+    const loadButtons = async () => {
+      const localButtons = await getButtons();
+      console.log('localButtons: ', localButtons);
+      await setButtons(localButtons);
+    };
+    loadButtons();
+  }, []);
+
   const navigation = useNavigation();
   return (
     <View style={styles.container}>
-      {categories &&
-        categories.map((searchCategory) => (
+      {buttons &&
+        buttons.map((searchCategory) => (
           <LinearGradient
             colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}
             start={{x: 0.0, y: 1.0}}
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 0fc846c3..7ab47a3f 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -30,6 +30,7 @@ export const PASSWORD_RESET_ENDPOINT: string = API_URL + 'password-reset/';
 export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/';
 export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/';
 export const DISCOVER_ENDPOINT: string = API_URL + 'discover/';
+export const SEARCH_BUTTONS_ENDPOPINT: string = DISCOVER_ENDPOINT + 'search_buttons/';
 export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/';
 export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
 export const ADD_USER_BADGES: string = API_URL + 'suggested_people/add_badges/';
diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts
index 43c2a96a..33b79b4a 100644
--- a/src/services/ExploreService.ts
+++ b/src/services/ExploreService.ts
@@ -1,7 +1,15 @@
 import AsyncStorage from '@react-native-community/async-storage';
-import {ALL_USERS_ENDPOINT, DISCOVER_ENDPOINT} from '../constants';
+import {
+  ALL_USERS_ENDPOINT,
+  DISCOVER_ENDPOINT,
+  SEARCH_BUTTONS_ENDPOPINT,
+} from '../constants';
 import {EMPTY_PROFILE_PREVIEW_LIST} from '../store/initialStates';
-import {ExploreSectionType, ProfilePreviewType} from '../types';
+import {
+  ExploreSectionType,
+  ProfilePreviewType,
+  SearchCategoryType,
+} from '../types';
 
 export const getAllTaggUsers = async (token: string) => {
   try {
@@ -80,3 +88,20 @@ export const getDiscoverUsers = async (id: number) => {
     return [];
   }
 };
+
+export const getButtons = async () => {
+  const token = await AsyncStorage.getItem('token');
+  const response = await fetch(SEARCH_BUTTONS_ENDPOPINT, {
+    method: 'GET',
+    headers: {
+      Authorization: 'Token ' + token,
+    },
+  });
+
+  if (response.status !== 200) {
+    return [];
+  }
+
+  const data: SearchCategoryType[] = await response.json();
+  return data;
+};
diff --git a/src/types/types.ts b/src/types/types.ts
index 7cd11f7a..8adeb9c1 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -245,3 +245,9 @@ export type FriendshipType = {
   status: FriendshipStatusType;
   requester_id: string;
 };
+
+export type SearchCategoryType = {
+  id: number;
+  name: string;
+  category: string;
+}
+\ No newline at end of file