Skip to content

Commit

Permalink
categories screen
Browse files Browse the repository at this point in the history
  • Loading branch information
syuraj committed Jan 23, 2022
1 parent 612fd1d commit ab0e4d9
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 52 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@react-native-firebase/crashlytics": "^14.2.3",
"@react-native-firebase/messaging": "^14.2.3",
"@react-navigation/material-bottom-tabs": "^6.0.9",
"@react-navigation/material-top-tabs": "^6.0.6",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"color": "^4.2.0",
Expand All @@ -33,10 +34,12 @@
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-linear-gradient": "^2.5.6",
"react-native-pager-view": "^5.4.9",
"react-native-paper": "^4.11.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.2",
"react-native-shimmer-placeholder": "^2.0.8",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.0.0",
"react-native-webview": "^11.17.0",
"tailwind-react-native-classnames": "^1.5.1"
Expand Down
2 changes: 1 addition & 1 deletion src/screens/ArticleDetail/Index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Avatar, Button, Card, Paragraph } from 'react-native-paper'
import { useTheme } from 'react-native-paper'
import { SafeAreaView } from 'react-native-safe-area-context'
import tw from 'tailwind-react-native-classnames'
import { getRelativeTime } from '../Home/ArticleListItem'
import { getRelativeTime } from '../Common/ArticleListItem'

const ArticleDetail = (props) => {
const { navigation } = props
Expand Down
20 changes: 20 additions & 0 deletions src/screens/Categories/ArticleList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { useCallback, useState } from 'react'
import { FlatList } from 'react-native'
import ArticleListItem from '../Common/ArticleListItem'

const ArticleList = ({ articles, refetch, navigation }) => {
const [refreshing, setRefreshing] = useState(false)

const handleRefresh = useCallback(() => {
setRefreshing(true)
refetch().then(() => setRefreshing(false))
}, [])

const renderItem = useCallback((info) => {
return <ArticleListItem navigation={navigation} article={info.item} />
}, [])

return <FlatList data={articles} renderItem={renderItem} keyExtractor={(item) => item._id} refreshing={refreshing} onRefresh={handleRefresh} />
}

export default ArticleList
23 changes: 23 additions & 0 deletions src/screens/Categories/GET_CATEGORIES_QUERY.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import gql from 'graphql-tag'

export const GET_CATEGORIES_QUERY = gql`
query headlineScreenQuery {
getArticles {
_id
title
shortDescription
content
link
imageLink
createdDate
modifiedDate
category
tags
totalWeight
source {
name
logoLink
}
}
}
`
31 changes: 23 additions & 8 deletions src/screens/Categories/Index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,30 @@
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import MainScreen from './MainScreen'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import { useQuery } from '@apollo/client'
import ArticleList from './ArticleList'
import { GET_CATEGORIES_QUERY } from './GET_CATEGORIES_QUERY'

const Stack = createNativeStackNavigator()
const Tab = createMaterialTopTabNavigator()

const categoryTabs = ({ navigation }) => {
const { loading, error, refetch, data } = useQuery(GET_CATEGORIES_QUERY)

const articles = data?.getArticles

const tabNames = ['news', 'entertainment', 'sports', 'cartoon', 'business', 'social', 'health', 'technology', 'share', 'agriculture']

const Home = () => {
return (
<Stack.Navigator initialRouteName="Main" screenOptions={{ headerShown: false }}>
<Stack.Screen name="MainScreen" component={MainScreen} />
</Stack.Navigator>
<Tab.Navigator>
{tabNames.map((tabname, index) => {
const categoryArricles = articles?.filter((a) => a.category === tabname)
return (
<Tab.Screen name={tabname} options={{ tabBarScrollEnabled: true, tabBarBounces: true }} key={index}>
{() => <ArticleList articles={categoryArricles} refetch={refetch} navigation={navigation} />}
</Tab.Screen>
)
})}
</Tab.Navigator>
)
}

export default Home
export default categoryTabs
40 changes: 0 additions & 40 deletions src/screens/Categories/MainScreen.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import moment from 'moment'
import React from 'react'
import moment from 'moment'
import { View } from 'react-native'
import { TouchableRipple, Avatar, Card, Paragraph } from 'react-native-paper'
import tw from 'tailwind-react-native-classnames'
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Home/Index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useLazyQuery, useQuery } from '@apollo/client'
import { firebase } from '@react-native-firebase/messaging'
import React, { useCallback, useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import ArticleListItem from './ArticleListItem'
import ArticleListItem from '../Common/ArticleListItem'
import { GET_ARTICLES_QUERY } from './GET_ARTICLES_QUERY'
import ShimmerCard from './ShimmerCard'

Expand Down
20 changes: 19 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1351,6 +1351,14 @@
dependencies:
"@react-navigation/elements" "^1.2.1"

"@react-navigation/material-top-tabs@^6.0.6":
version "6.0.6"
resolved "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz#efabd409e970c76cac4b9c61ac4d9bf735cf6d39"
integrity sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g==
dependencies:
color "^3.1.3"
warn-once "^0.1.0"

"@react-navigation/native-stack@^6.2.5":
version "6.2.5"
resolved "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.2.5.tgz#bfa19516cf434f831e6d4ba28d32b9bc5436d181"
Expand Down Expand Up @@ -2540,7 +2548,7 @@ color-string@^1.6.0, color-string@^1.9.0:
color-name "^1.0.0"
simple-swizzle "^0.2.2"

color@^3.1.2:
color@^3.1.2, color@^3.1.3:
version "3.2.1"
resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
Expand Down Expand Up @@ -6268,6 +6276,11 @@ react-native-linear-gradient@^2.5.6:
resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==

react-native-pager-view@^5.4.9:
version "5.4.9"
resolved "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz#c0d40847cfeda5a4e729b53271b0ee0fedff3eb5"
integrity sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA==

react-native-paper@^4.11.2:
version "4.11.2"
resolved "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.11.2.tgz#4ae73282da9be3bf20760c609d3273643d1dd4a9"
Expand Down Expand Up @@ -6295,6 +6308,11 @@ react-native-shimmer-placeholder@^2.0.8:
resolved "https://registry.npmjs.org/react-native-shimmer-placeholder/-/react-native-shimmer-placeholder-2.0.8.tgz#1b6deadc49319a4e46cd6ed7eac32d34355de3d5"
integrity sha512-I9Fn7f/dAPSQK+Aj0DXC1PG302iE3HXCsRJu5ic6CldJaAzkynEXHVGOTcW+mEcgXM+GvviITjS8TsYrxKvX5Q==

react-native-tab-view@^3.1.1:
version "3.1.1"
resolved "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz#1f8d7a835ab4f5b1b1407ec8dddc1053b53fa3c6"
integrity sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==

react-native-vector-icons@^9.0.0:
version "9.0.0"
resolved "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz#ab38ec6941f3f340d39846f1e8300e59863e2fb1"
Expand Down

0 comments on commit ab0e4d9

Please sign in to comment.