From 1979a2b55ebe560b9d20862bd835343516b40379 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Mon, 10 Aug 2020 15:14:26 -0700
Subject: [TMA-160] Search Page Suggestions ("Explore") UI (#30)

* Fix require cycle in Checkpoint.tsx

* Create file structure for search

* Add react-native-vector-icons to project

* Create search page UI

* Create search page UI

* [TMA-65] Onboarding Link Social Media UI (#29)

* Basic setup for SocialMediaLinker component

* Added social media icons

* Displayed 3 main social components

* Layout components in a row

* Added base Show More/Less button

* Display all 9 socials with Show More button

* Added different font colors for each linker

* Realized that the check doesn't replace the text

* Added type-checking to some constants

* Updated state name

* Fixed Checkpoint.tsx merge issue

* Removed unnecessary path element

* Fixed type issues on Verification.tsx

* Create file structure for search

* Add react-native-vector-icons to project

* Create search page UI

* Replace avatars with image placeholder

* Add search bar placeholder

Co-authored-by: Justin Shillingford <jgs272@cornell.edu>
---
 src/screens/search/SearchScreen.tsx | 83 +++++++++++++++++++++++++++++++++++++
 src/screens/search/index.ts         |  1 +
 2 files changed, 84 insertions(+)
 create mode 100644 src/screens/search/SearchScreen.tsx
 create mode 100644 src/screens/search/index.ts

(limited to 'src/screens/search')

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
new file mode 100644
index 00000000..8ef56b73
--- /dev/null
+++ b/src/screens/search/SearchScreen.tsx
@@ -0,0 +1,83 @@
+import React, {useState} from 'react';
+import {
+  StatusBar,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+} from 'react-native';
+import {SearchBar, SuggestedSection, SearchBackground} from '../../components';
+import {SCREEN_HEIGHT} from '../../utils';
+
+/**
+ * Search Screen for user recommendations and a search
+ * tool to allow user to find other users
+ */
+
+const SearchScreen: React.FC = () => {
+  const sections: Array<string> = [
+    'People you follow',
+    'People you may know',
+    'Trending in sports',
+    'Trending on Tagg',
+    'Trending in music',
+  ];
+  // dummy user data
+  const users: Array<string> = [
+    'Sam Davis',
+    'Becca Smith',
+    'Ann Taylor',
+    'Clara Johnson',
+    'Sarah Jung',
+    'Lila Hernandez',
+  ];
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const handleFocus = () => {
+    setIsSearching(true);
+  };
+  const handleBlur = () => {
+    setIsSearching(false);
+  };
+  return (
+    <SearchBackground style={styles.screen}>
+      <StatusBar />
+      <SafeAreaView>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <Text style={styles.header}>Explore</Text>
+          <SearchBar
+            active={isSearching}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+          {!isSearching && (
+            <View style={styles.content}>
+              {sections.map((title) => (
+                <SuggestedSection key={title} title={title} users={users} />
+              ))}
+            </View>
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </SearchBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    paddingTop: 50,
+    paddingBottom: SCREEN_HEIGHT / 10,
+    paddingHorizontal: 15,
+  },
+  content: {
+    paddingVertical: 20,
+  },
+  header: {
+    fontWeight: 'bold',
+    fontSize: 24,
+    color: '#fff',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+});
+export default SearchScreen;
diff --git a/src/screens/search/index.ts b/src/screens/search/index.ts
new file mode 100644
index 00000000..b6680aa4
--- /dev/null
+++ b/src/screens/search/index.ts
@@ -0,0 +1 @@
+export {default as SearchScreen} from './SearchScreen';
-- 
cgit v1.2.3-70-g09d2