getting buttons from backend for search page

2 files changed, 16 insertions, 28 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}}