Topic機能を追加しました

expo install firebase

import * as firebase from 'firebase';

//import "firebase/auth";
//import "firebase/database";
import "firebase/firestore";
//import "firebase/functions";
//import "firebase/storage";

const firebaseKey = {
  apiKey: "取得したkey",
  authDomain: "取得したkey",
  projectId: "取得したkey",
  storageBucket: "取得したkey",
  messagingSenderId: "取得したkey",
  appId: "取得したkey",
  measurementId: "取得したkey"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseKey);
  }

const dbh = firebase.firestore();

export default dbh

import dbh from '../../../firebase'

render() {
  const defaultStyle = this.state.largeFont
  const defaultClass = this.state.largeFont
  const content = this.props.route.params.content
  const url = this.props.route.params.url
  const title = this.props.route.params.title
  const arrival = this.props.route.params.from
  const date = this.props.route.params.date

  const domain = url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1]
  const site = sites.find((v) => v.domain === domain);

  const date1 = new Date(); // ここに追加
  const formatedTitle = title.replace("/", " ") // ここに追加

<Button
  onlyIcon
  icon="inbox"
  iconFamily="Feather"
  iconSize={30}
  color="#dda0dd"
  iconColor="black"
  style={{ width: 45, height: 45 }}
  onPress={() => {
    var archiveData = {
      title: title,
      url: url,
      date: date,
      content: content
    }
    global.storage.save({
      key: 'archive',
      id: title,
      data: archiveData,
    });
    {/* ここから */}
    dbh.collection("article").doc(formatedTitle).set({
      title:title,
      url: url,
      date: date,
      content: content,
      date1: date1
    })
    {/* ここまで追加 */}
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
  }}
/>

import Topic from './topic'

export default Topic

import React from 'react'
import { Text, View, StatusBar, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native'
import { List, ListItem } from 'native-base'
import { sites } from '../sites/list'
import dbh from '../../../firebase'

class WPPost {
	constructor(post) {
		this.post = post;
		this.title = post.title;
		this.content = post.content;
		this.date = post.date;
		this.url = post.url;
	}
}

export default class Topic extends React.Component {

	constructor(props) {
		super(props);
		this.state = { 
			items: [] ,
		};
	}

componentDidMount() {
	this.getTopic();
}

getTopic() {
	const arrays = [];
	dbh.collection("article").orderBy("date1", "desc").limit(20).get().then((querySnapshot) => {
		querySnapshot.forEach((doc) => {
			arrays.push(doc.data());
		});
		for(var i in arrays) {
			var p = new WPPost(arrays[i]);
			this.setState({ items: this.state.items.concat([p]) });
		}
	});
}

clearData() {
	this.setState({items: []})
}

siteName(url) {
	const domain = url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1]
	const site = sites.find((v) => v.domain === domain);
	return site.name
}
	
	render() {
		var items = this.state.items;
		items.sort(function(a, b) {
			if (a.date1 > b.date1) {
				return -1;
			} else {
				return 1;
			}
		});
		return (
			<View style={styles.container}>
			<StatusBar barStyle="light-content" />
				<View style={styles.content}>
					<List
						refreshControl={
							<RefreshControl
								onRefresh={() => {this.getTopic(), this.clearData()}}
							/>
						}
						dataArray={items}
						renderRow={
							(item) =>
							<ListItem
								onPress={() => this.props.navigation.navigate('Article', { url: item.url, content:item.content, title:item.title, from: 'arrival', date: item.date })}
							>
								<View style={{ flexDirection: 'row'}}>
									<View style={styles.list}>
										<Text style={styles.title}>{item.title}</Text>
										<Text style={styles.site}>{this.siteName(item.url)}</Text>
										<Text style={styles.date}>{item.date}</Text>
									</View>
								</View>
							</ListItem>} >
					</List>
				</View>
			</View>
		);
	}
}

import dbh from '../../../firebase'

getTopic() {
	const arrays = [];
	dbh.collection("article").orderBy("date1", "desc").limit(20).get().then((querySnapshot) => {
		querySnapshot.forEach((doc) => {
			arrays.push(doc.data());
		});
		for(var i in arrays) {
			var p = new WPPost(arrays[i]);
			this.setState({ items: this.state.items.concat([p]) });
		}
	});
}

render() {
  var items = this.state.items;
  items.sort(function(a, b) {
    if (a.date1 > b.date1) {
      return -1;
    } else {
      return 1;
    }
  });
  return (

componentDidMount() {
	this.getTopic();
}

<List
refreshControl={
  <RefreshControl
    onRefresh={() => {this.getTopic(), this.clearData()}}
  />

<ListItem
  onPress={() => this.props.navigation.navigate('Article', { url: item.url, content:item.content, title:item.title, from: 'arrival', date: item.date })}
>

import { HomeNavigator, ProfileNavigator, NewsListNavigator, AllNewsNavigator, ArchiveNavigator, TopicNavigator } from './Stacks'

export { NewsListNavigator, HomeNavigator, ProfileNavigator, AllNewsNavigator, ArchiveNavigator, TopicNavigator }

import Topic from 'scenes/topic'

export const TopicNavigator = () => (
  <Stack.Navigator
    initialRouteName="Topic"
    headerMode="screen"
    screenOptions={navigationProps}
  >
    <Stack.Screen
      name="Topic"
      component={Topic}
      options={({ navigation }) => ({
        title: 'Topic',
      })}
    />
    <Stack.Screen
      name="Article"
      component={Article}
      options={({ navigation }) => ({
        title: 'Article',
      })}
    />
  </Stack.Navigator>
)

import Tabs from './Tabs'

export default Tabs

import { HomeNavigator, ProfileNavigator, NewsListNavigator, AllNewsNavigator, ArchiveNavigator, TopicNavigator } from '../stacks'

case 'Topic':
  return (
    <FontIcon
      name="fire-alt"
      color={focused ? colors.lightPurple : colors.gray}
      size={20}
      solid
    />
  )

<Tab.Screen name="Topic" component={TopicNavigator} />