-
Notifications
You must be signed in to change notification settings - Fork 0
/
MemoListScreen.jsx
108 lines (107 loc) · 2.76 KB
/
MemoListScreen.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, { useEffect, useState } from 'react';
import {
View, StyleSheet, Alert, Text,
} from 'react-native';
import firebase from 'firebase';
import CircleButton from '../components/CircleButton';
import LogOutButton from '../components/LogOutButton';
import MemoList from '../components/MemoList';
import Button from '../components/Button';
import Loading from '../components/Loading';
function MemoListScreen(props) {
const { navigation } = props;
const [memos, setMemos] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
navigation.setOptions({
// eslint-disable-next-line react/no-unstable-nested-components
headerRight: () => <LogOutButton />,
});
}, []);
useEffect(() => {
const db = firebase.firestore();
const { currentUser } = firebase.auth();
let unscribe = () => {};
if (currentUser) {
setIsLoading(true);
const ref = db
.collection(`users/${currentUser.uid}/memos`)
.orderBy('updatedAt', 'desc');
unscribe = ref.onSnapshot(
(snapshot) => {
const userMemos = [];
snapshot.forEach((doc) => {
const data = doc.data();
userMemos.push({
id: doc.id,
bodyText: data.bodyText,
updatedAt: data.updatedAt.toDate(),
});
});
setMemos(userMemos);
setIsLoading(false);
},
(error) => {
setIsLoading(false);
Alert.alert('データの読み込みに失敗しました');
},
);
}
return unscribe;
}, []);
if (memos.length === 0) {
return (
<View style={emptyStyles.container}>
<Loading isLoading={isLoading} />
<View style={emptyStyles.inner}>
<Text style={emptyStyles.title}>最初のメモを作成しよう!</Text>
<Button
style={emptyStyles.button}
label="作成する"
onPress={() => {
navigation.navigate('MemoCreate');
}}
/>
</View>
</View>
);
}
return (
<View style={styles.container}>
<MemoList memos={memos} />
<CircleButton
name="plus"
color="#fff"
onPress={() => {
navigation.navigate('MemoCreate');
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
const emptyStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
},
inner: {
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 18,
marginBottom: 24,
},
button: {
alignSelf: 'center',
},
});
export default MemoListScreen;