/
profile.js
76 lines (66 loc) · 2.58 KB
/
profile.js
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
import React, { useCallback, useEffect, useState } from 'react';
import Head from 'next/head';
import { useSelector } from 'react-redux';
import Router from 'next/router';
import { END } from 'redux-saga';
import axios from 'axios';
import useSWR from 'swr';
import AppLayout from '../components/AppLayout';
import NicknameEditForm from '../components/NicknameEditForm';
import FollowList from '../components/FollowList';
import { LOAD_MY_INFO_REQUEST } from '../reducers/user';
import wrapper from '../store/configureStore';
const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data);
const Profile = () => {
const [followingsLimit, setFollowingsLimit] = useState(3);
const [followersLimit, setFollowersLimit] = useState(3);
const { data: followingsData, error: followingError } = useSWR(`http://localhost:3065/user/followings?limit=${followingsLimit}`, fetcher);
const { data: followersData, error: followerError } = useSWR(`http://localhost:3065/user/followers?limit=${followersLimit}`, fetcher);
const { me } = useSelector((state) => state.user);
useEffect(() => {
if (!(me && me.id)) {
Router.push('/');
}
}, [me && me.id]);
const loadMoreFollowers = useCallback(() => {
setFollowersLimit((prev) => prev + 3);
}, []);
const loadMoreFollowings = useCallback(() => {
setFollowingsLimit((prev) => prev + 3);
}, []);
if (followerError || followingError) {
console.error(followerError || followingError);
return '팔로잉/팔로워 로딩 중 에러가 발생했습니다.';
}
if (!me) {
return '내 정보 로딩중...';
}
return (
<>
<Head>
<title>내 프로필 | NodeBird</title>
</Head>
<AppLayout>
<NicknameEditForm />
<FollowList header="팔로잉" data={followingsData} onClickMore={loadMoreFollowings} loading={!followingError && !followingsData} />
<FollowList header="팔로워" data={followersData} onClickMore={loadMoreFollowers} loading={!followerError && !followersData} />
</AppLayout>
</>
);
};
export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
console.log('getServerSideProps start');
console.log(context.req.headers);
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if (context.req && cookie) {
axios.defaults.headers.Cookie = cookie;
}
context.store.dispatch({
type: LOAD_MY_INFO_REQUEST,
});
context.store.dispatch(END);
console.log('getServerSideProps end');
await context.store.sagaTask.toPromise();
});
export default Profile;