Add repos tab displaying thoughtbot repos

BoilerplateApp/package.json

@@ -34,6 +34,7 @@
     "react-native-svg": "^12.1.1",
     "react-native-typography": "^1.4.1",
     "react-native-vector-icons": "^8.1.0",
+    "swr": "^0.5.6",
     "yup": "^0.32.9"
   },
   "devDependencies": {

BoilerplateApp/src/GithubRepos.tsx

@@ -0,0 +1,149 @@
+import React, { FC } from "react"
+import { FlatList } from "react-native-gesture-handler"
+import { StyleSheet, Text, SafeAreaView, View, Pressable, Linking } from "react-native"
+import Icon from "react-native-vector-icons/Feather"
+import useSWR from "swr"
+
+import LoadingIndicator from "./LoadingIndicator"
+
+import { Buttons, Colors, Outlines, Sizing, Typography } from "./styles"
+
+const GithubRepos: FC = () => {
+  const githubData = {
+    "organization": {
+      "name": "thoughtbot, inc.",
+      "repositories": {
+        "nodes": [
+          {
+            "name": "react-native-code-input-example",
+            "stargazerCount": 8,
+            "url": "https://github.com/thoughtbot/react-native-code-input-example"
+          },
+          {
+            "name": "bamboo_phoenix",
+            "stargazerCount": 3,
+            "url": "https://github.com/thoughtbot/bamboo_phoenix"
+          },
+          {
+            "name": "react-native-media-controls",
+            "stargazerCount": 0,
+            "url": "https://github.com/thoughtbot/react-native-media-controls"
+          },
+          {
+            "name": "react-native-liftoff",
+            "stargazerCount": 48,
+            "url": "https://github.com/thoughtbot/react-native-liftoff"
+          },
+          {
+            "name": "props_template",
+            "stargazerCount": 1,
+            "url": "https://github.com/thoughtbot/props_template"
+          },
+          {
+            "name": "terraform-route-53-delegated-subdomain",
+            "stargazerCount": 0,
+            "url": "https://github.com/thoughtbot/terraform-route-53-delegated-subdomain"
+          },
+          {
+            "name": "react-rails",
+            "stargazerCount": 0,
+            "url": "https://github.com/thoughtbot/react-rails"
+          },
+          {
+            "name": "humid",
+            "stargazerCount": 0,
+            "url": "https://github.com/thoughtbot/humid"
+          },
+          {
+            "name": "prometheus_exporter",
+            "stargazerCount": 0,
+            "url": "https://github.com/thoughtbot/prometheus_exporter"
+          },
+          {
+            "name": "cloudformation-terraform-state-backend",
+            "stargazerCount": 0,
+            "url": "https://github.com/thoughtbot/cloudformation-terraform-state-backend"
+          }
+        ]
+      }
+    }
+  }
+
+  const fetcher = (_key: string) => Promise.resolve(githubData)
+  const { data } = useSWR(
+    'put your query here',
+    fetcher
+  )
+
+  if (data === undefined) {
+    return <LoadingIndicator />
+  }
+
+  const { nodes } = data.organization.repositories;
+
+  return (
+    <SafeAreaView style={style.container}>
+      <Text style={style.title}>thoughtbot repositories</Text>
+      <FlatList
+        contentContainerStyle={style.listContainer}
+        data={nodes}
+        renderItem={({ item }) => (
+          <Pressable
+            style={Buttons.applyOpacity(style.item)}
+            onPress={() => Linking.openURL(item.url)}
+            accessibilityRole="button"
+          >
+            <Text>{item.name}</Text>
+            <View style={style.itemDetail}>
+              <View style={style.itemDetailCount}>
+                <Icon name="star" size={Sizing.icons.x10} color={Colors.neutral.black} />
+                <Text style={style.itemDetailCountNumber}>{item.stargazerCount}</Text>
+              </View>
+              <Icon name="external-link" size={Sizing.icons.x10} color={Colors.neutral.black} />
+            </View>
+          </Pressable>
+        )}
+      />
+    </SafeAreaView>
+  )
+}
+
+const style = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.neutral.white,
+    flex: 1,
+  },
+  title: {
+    ...Typography.fontSize.x30,
+    ...Typography.fontWeight.semibold,
+    marginVertical: Sizing.x10,
+    paddingHorizontal: Sizing.x20,
+  },
+  listContainer: {
+    paddingHorizontal: Sizing.x20,
+  },
+  item: {
+    borderColor: Colors.neutral.s200,
+    borderRadius: Outlines.borderRadius.small,
+    borderWidth: Outlines.borderWidth.thin,
+    flex: 1,
+    marginVertical: Sizing.x7,
+    paddingHorizontal: Sizing.x20,
+    paddingVertical: Sizing.x20,
+  },
+  itemDetail: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: Sizing.x7,
+  },
+  itemDetailCount: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  itemDetailCountNumber: {
+    marginLeft: Sizing.x2,
+  }
+})
+
+export default GithubRepos

BoilerplateApp/src/navigation/TabNavigator.tsx

@@ -13,6 +13,7 @@ import Placeholder from "../Placeholder"
 
 import Icon from "react-native-vector-icons/Feather"
 import { Colors, Sizing, Outlines, Typography, Buttons } from "../styles"
+import GithubRepos from "../GithubRepos"
 
 type TabButtonConfig = {
   label: string
@@ -50,7 +51,7 @@ type Tab = {
 const TabNavigator: FC = () => {
   const documentsTab = {
     name: TabRoutes.Tab1,
-    component: Placeholder,
+    component: GithubRepos,
   }
   const shareTab = {
     name: TabRoutes.Tab2,

BoilerplateApp/src/navigation/routes.ts

@@ -9,7 +9,7 @@ export const NavigatorRoutes: Routes<NavigatorRoute> = {
 export type TabRoute = "Tab1" | "Tab2" | "Tab3"
 
 export const TabLabels: Record<TabRoute, string> = {
-  Tab1: "Tab 1",
+  Tab1: "Repos",
   Tab2: "Tab 2",
   Tab3: "Tab 3",
 }

BoilerplateApp/yarn.lock

@@ -2537,6 +2537,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
@@ -6703,6 +6708,13 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+swr@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"
+  integrity sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"