From 795a408dd0ee991196ac88c2a1e1cdf7f97256e7 Mon Sep 17 00:00:00 2001
From: Faraz Patankar <farazpatankar@gmail.com>
Date: Sat, 9 May 2020 12:03:03 -0400
Subject: [PATCH 1/2] add topics + search by topic

---
 components/Library/index.tsx |  5 +++
 components/Search.tsx        |  2 +-
 components/Topics.tsx        | 59 ++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 components/Topics.tsx

diff --git a/components/Library/index.tsx b/components/Library/index.tsx
index ba5e2e0e..f92df739 100644
--- a/components/Library/index.tsx
+++ b/components/Library/index.tsx
@@ -5,6 +5,7 @@ import { isEmptyOrNull } from '../../util/strings';
 import { colors, layout, A, Label, Caption } from '../../common/styleguide';
 import { Badge } from '../Icons';
 import { CompatibilityTags } from '../CompatibilityTags';
+import { Topics } from '../Topics';
 import { MetaData } from './MetaData';
 
 type Props = {
@@ -21,6 +22,7 @@ export default function Library(props: Props) {
           <A href={library.github.urls.repo} style={styles.name} hoverStyle={styles.nameHovered}>
             {library.github.name}
           </A>
+
           {library.goldstar && (
             <View style={[styles.displayHorizontal, styles.recommendedContainer]}>
               <Badge width={11} height={16} />
@@ -31,6 +33,9 @@ export default function Library(props: Props) {
         <View style={styles.verticalMargin}>
           <CompatibilityTags library={library} />
         </View>
+        <View style={styles.verticalMargin}>
+          <Topics library={library} />
+        </View>
         {!isEmptyOrNull(library.github.description) && (
           <View style={styles.verticalMargin}>
             <Caption>{library.github.description}</Caption>
diff --git a/components/Search.tsx b/components/Search.tsx
index fcb5c568..a662f3b3 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -30,7 +30,7 @@ export default function Search(props: Props) {
               onChangeText={debouncedCallback}
               placeholder="Search libraries..."
               style={styles.textInput}
-              defaultValue={query && query.search}
+              value={query && query.search ? query.search : ''}
               placeholderTextColor={colors.gray4}
             />
             <View style={styles.searchIcon}>
diff --git a/components/Topics.tsx b/components/Topics.tsx
new file mode 100644
index 00000000..c45a6b71
--- /dev/null
+++ b/components/Topics.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import Link from 'next/link';
+import Router, { useRouter } from 'next/router';
+import { useDebouncedCallback } from 'use-debounce';
+import { Library } from '../types';
+import { colors, Label } from '../common/styleguide';
+import urlWithQuery from '../util/urlWithQuery';
+
+type Props = {
+  library: Library;
+};
+
+export function Topics(props: Props) {
+  const { library } = props;
+  const { topics } = library.github;
+  const router = useRouter();
+  const [debouncedCallback] = useDebouncedCallback(text => {
+    Router.replace(urlWithQuery('/', { ...router.query, search: text, offset: null }));
+  }, 150);
+  return (
+    <View style={styles.container}>
+      {topics.map(topic => (
+        // <Link
+        //   key={topic}
+        //   href={urlWithQuery('/', {
+        //     ...router.query,
+        //     search: topic,
+        //   })}>
+        <TouchableOpacity key={topic} style={styles.tag} onPress={() => debouncedCallback(topic)}>
+          <Label style={styles.text}>{topic}</Label>
+        </TouchableOpacity>
+        // </Link>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    marginBottom: -4,
+  },
+  tag: {
+    alignItems: 'center',
+    backgroundColor: colors.primaryDark,
+    marginRight: 8,
+    borderRadius: 2,
+    paddingHorizontal: 5,
+    paddingVertical: 5,
+    marginBottom: 4,
+    cursor: 'pointer',
+  },
+  text: {
+    color: colors.white,
+  },
+});

From 8ffe939f9c614139791758c1561e08bc3f307a8a Mon Sep 17 00:00:00 2001
From: Faraz Patankar <farazpatankar@gmail.com>
Date: Sat, 9 May 2020 12:05:29 -0400
Subject: [PATCH 2/2] remove unused code

---
 components/Topics.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/components/Topics.tsx b/components/Topics.tsx
index c45a6b71..82679aae 100644
--- a/components/Topics.tsx
+++ b/components/Topics.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import Link from 'next/link';
 import Router, { useRouter } from 'next/router';
 import { useDebouncedCallback } from 'use-debounce';
 import { Library } from '../types';
@@ -21,16 +20,9 @@ export function Topics(props: Props) {
   return (
     <View style={styles.container}>
       {topics.map(topic => (
-        // <Link
-        //   key={topic}
-        //   href={urlWithQuery('/', {
-        //     ...router.query,
-        //     search: topic,
-        //   })}>
         <TouchableOpacity key={topic} style={styles.tag} onPress={() => debouncedCallback(topic)}>
           <Label style={styles.text}>{topic}</Label>
         </TouchableOpacity>
-        // </Link>
       ))}
     </View>
   );