[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 <jgs272@cornell.edu>

1 files changed, 94 insertions, 0 deletions

diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
new file mode 100644
index 00000000..60c22d41
--- /dev/null
+++ b/src/components/search/SearchResult.tsx
@@ -0,0 +1,94 @@
+import React, {useEffect, useState} from 'react';
+import {ProfilePreviewType} from '../../types';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  ViewProps,
+  TouchableOpacity,
+} from 'react-native';
+import RNFetchBlob from 'rn-fetch-blob';
+import {AVATAR_PHOTO_ENDPOINT} from '../../constants';
+
+interface SearchResultProps extends ViewProps {
+  profilePreview: ProfilePreviewType;
+}
+const SearchResult: React.FC<SearchResultProps> = ({
+  profilePreview: {username, first_name, last_name, id},
+  style,
+}) => {
+  const [avatarURI, setAvatarURI] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    const loadAvatar = async () => {
+      try {
+        const response = await RNFetchBlob.config({
+          fileCache: true,
+          appendExt: 'jpg',
+        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${id}`);
+        const status = response.info().status;
+        if (status === 200) {
+          if (mounted) {
+            setAvatarURI(response.path());
+          }
+          return;
+        }
+        if (mounted) {
+          setAvatarURI('');
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    loadAvatar();
+    return () => {
+      mounted = false;
+    };
+  }, [id]);
+
+  return (
+    <TouchableOpacity style={[styles.container, style]}>
+      <Image
+        style={styles.avatar}
+        source={
+          avatarURI
+            ? {uri: avatarURI}
+            : require('../../assets/images/avatar-placeholder.png')
+        }
+      />
+      <View style={styles.nameContainer}>
+        <Text style={styles.username}>@{username}</Text>
+        <Text style={styles.name}>{first_name.concat(' ', last_name)}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatar: {
+    height: 60,
+    width: 60,
+    borderRadius: 30,
+    marginRight: 15,
+  },
+  nameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+  },
+  username: {
+    fontSize: 18,
+    fontWeight: '500',
+  },
+  name: {
+    fontSize: 16,
+    color: '#333',
+  },
+});
+
+export default SearchResult;