Repositoires

index.js

import React from 'react'
import { Text, SafeAreaView, View, FlatList, ActivityIndicator } from 'react-native'
import { useQuery, gql } from '@apollo/client'
import RepositoryItem from './components/RepositoryItem'
import styles from './styles'

const REPOSITORIES_QUERY = gql`
 query($first: Int!) {
   organization(login: "facebook") {
     repositories(first: $first) {
       pageInfo {
         endCursor
         hasNextPage
       }
       nodes {
        id
         name
         updatedAt
         forkCount
         description
         url
       }
     }
   }
 }
`
const RepositoriesScreen = () => {
 const { data, error, loading } = useQuery(REPOSITORIES_QUERY, { variables: { first: 15 } })

 let repositories = []
 if (data && data.organization && data.organization.repositories)
   repositories = data.organization.repositories.nodes

 const renderItem = (props: any) => <RepositoryItem {...props} />
 // first time loading
 if (loading && repositories.length === 0)
   return (
     <View style={styles.loading}>
       <ActivityIndicator size="large" color="rgb(0, 122, 255)" />
     </View>
   )
 if (error)
   return (
     <View style={styles.loading}>
       <Text style={styles.errorText}>Something went wrong</Text>
     </View>
   )

 return (
   <SafeAreaView style={styles.container}>
     <FlatList
       data={repositories}
       renderItem={renderItem}
       keyExtractor={(item) => item.id}
       contentContainerStyle={{ flexGrow: 1 }}
     />
   </SafeAreaView>
 )
}

export default RepositoriesScreen