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
|
import React, { useEffect, useMemo } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { Poll } from 'which-types';
import { Container } from '@material-ui/core';
import ProfileInfo from './ProfileInfo';
import PollsList from '../../components/PollsList/PollsList';
import Loading from '../../components/Loading/Loading';
import Fab from '../../components/Fab/Fab';
import EmptyState from '../../components/EmptyState/EmptyState';
import { useAuth } from '../../hooks/useAuth';
import { useUser, useProfile } from '../../hooks/APIClient';
const Profile: React.FC = () => {
const history = useHistory();
const { username } = useParams();
const { user } = useAuth();
const { data: userInfo, mutate: setUserInfo } = useUser(username);
const { data: polls, mutate: mutatePolls, isValidating } = useProfile(username);
useEffect(() => {
if (!username) {
if (user) history.push(`/profile/${user.username}`);
else history.push('/login');
}
}, [username, history, user]);
const isOwnProfile = useMemo(() => user?.username === username, [user, username]);
const message = useMemo(() => {
return isOwnProfile
? 'Create a poll and it will show up here.'
: 'This user has not uploaded anything yet.';
}, [isOwnProfile]);
const totalVotes = useMemo(() => polls?.reduce(
(total: number, current: Poll) => {
const { left, right } = current.contents;
return total + left.votes + right.votes;
}, 0
) || 0, [polls]);
return (
<Container maxWidth="sm" disableGutters>
<ProfileInfo
userInfo={userInfo}
setUserInfo={setUserInfo}
savedPolls={polls?.length || 0}
totalVotes={totalVotes}
/>
{
polls
? polls.length
? <PollsList polls={polls} mutate={mutatePolls} />
: <EmptyState message={message} />
: isValidating && <Loading />
}
{isOwnProfile && <Fab />}
</Container>
);
};
export default Profile;
|
