text: ﻿import { useEffect, useState, useCallback } from 'react';
  import { useSelector } from 'react-redux';
  import { END } from 'redux-saga';
  import axios from 'axios';
  import Router from 'next/router';
  import useSWR from 'swr';
  import Head from 'next/head';
  import AppLayout from '../components/AppLayout';
  
  import NicknameEditForm from '../components/NicknameEditForm';
  import FollowList from '../components/FollowList';
  import wrapper from '../store/configureStore';
  import { backUrl } from '../config/config';
  
  import { LOAD_MY_INFO_REQUEST } from '../reducers/user';
  
  const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data);
  
  const Profile = () => {
    const { me } = useSelector((state) => state.user);
    const [followersLimit, setFollwersLimit] = useState(3);
    const [followingsLimit, setFollowingsLimit] = useState(3);
  
    const { data: followersData, error: followerError } = useSWR(
      `${backUrl}/user/followers?limit=${followersLimit}`,
      fetcher
    );
    const { data: followingsData, error: followingError } = useSWR(
      `${backUrl}/user/followings?limit=${followingsLimit}`,
      fetcher
    );
  
    const loadMoreFollowings = useCallback(() => setFollowingsLimit((prev) => prev + 3), []);
    const loadMoreFollowers = useCallback(() => setFollwersLimit((prev) => prev + 3), []);
  
    useEffect(() => {
      if (!(me && me.id)) {
        Router.push('/');
      }
    }, [me && me.id]);
  
    if (!me) {
      return '내 정보 로딩 중....';
    }
  
    // return은 반드시 Hooks보다 위에 있을 수 없다! 무조건 Hooks는 모두 실행되어야 한다.
    if (followerError || followingError) {
      console.error(followerError || followingError);
      return <div>팔로잉/팔로워 로딩 중 에러가 발생했습니다</div>;
    }
  
    return (
      <>
        <Head>
          <title>내 프로필 | NodeBird</title>
        </Head>
        <AppLayout>
          <NicknameEditForm />
          <FollowList
            header="팔로잉"
            data={followingsData}
            onClickMore={loadMoreFollowings}
            loading={!followingsData && !followingError}
          />
          <FollowList
            header="팔로워"
            data={followersData}
            onClickMore={loadMoreFollowers}
            loading={!followersData && !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;
  