-
Notifications
You must be signed in to change notification settings - Fork 10
/
PeopleDashboard.jsx
executable file
·48 lines (45 loc) · 1.8 KB
/
PeopleDashboard.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
import React, {useMemo} from 'react';
import {useSelector} from 'react-redux';
import {useFirestoreConnect} from 'react-redux-firebase';
import { Grid, Segment, Header, Card } from 'semantic-ui-react';
import PersonCard from './PersonCard';
const PeopleDashboard = () => {
const auth = useSelector(state => state.firebase.auth);
const followingQuery = useMemo(() => ({
collection: 'following',
doc: auth.uid,
subcollections: [{collection: 'following'}],
storeAs: 'following'
}), [auth.uid]);
const followerQuery = useMemo(() => ({
collection: 'followers',
doc: auth.uid,
subcollections: [{collection: 'followers'}],
storeAs: 'followers'
}), [auth.uid]);
useFirestoreConnect(followerQuery);
useFirestoreConnect(followingQuery);
const followers = useSelector(state => state.firestore.ordered.followers);
const followings = useSelector(state => state.firestore.ordered.following);
return (
<Grid>
<Grid.Column width={16}>
<Segment>
<Header dividing content="People following me" />
<Card.Group itemsPerRow={8} stackable>
{followers &&
followers.map(follower => <PersonCard key={follower.id} user={follower} />)}
</Card.Group>
</Segment>
<Segment>
<Header dividing content="People I'm following" />
<Card.Group itemsPerRow={8} stackable>
{followings &&
followings.map(following => <PersonCard key={following.id} user={following} />)}
</Card.Group>
</Segment>
</Grid.Column>
</Grid>
);
};
export default PeopleDashboard;