Add topics and make searching by topics simpler

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>

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}>

components/Topics.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+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 => (
+        <TouchableOpacity key={topic} style={styles.tag} onPress={() => debouncedCallback(topic)}>
+          <Label style={styles.text}>{topic}</Label>
+        </TouchableOpacity>
+      ))}
+    </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,
+  },
+});