From b6f9dbc3cbb21447fdeb22420b005da37de2af8e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 19:51:32 +0300
Subject: feat: use SWR in profile page

---
 src/pages/ProfilePage/ProfilePage.tsx | 57 ++++++++++++-----------------------
 1 file changed, 19 insertions(+), 38 deletions(-)

(limited to 'src/pages/ProfilePage/ProfilePage.tsx')

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index ae94b9f..4769999 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -1,59 +1,41 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { User, Poll } from 'which-types';
+import { Poll } from 'which-types';
 import { Container } from '@material-ui/core';
 
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
-import { get } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
+import { useUser, useProfile } from '../../hooks/APIClient';
 
 
 const ProfilePage: React.FC = () => {
-  const [userInfo, setUserInfo] = useState<User>();
-  const [polls, setPolls] = useState<Poll[]>([]);
-  const [totalVotes, setTotalVotes] = useState<number>(0);
-  const [isInfoLoading, setIsInfoLoading] = useState(false);
-  const [isPollsLoading, setIsPollsLoading] = useState(false);
   const history = useHistory();
   const { username } = useParams();
   const { user } = useAuth();
 
+  const { data: userInfo, mutate: setUserInfo } = useUser(username);
+  const { data: polls, mutate: fetchPolls } = useProfile(userInfo?._id);
+
   useEffect(() => {
-    setIsInfoLoading(true);
+    fetchPolls();
+  }, [userInfo, fetchPolls])
 
-    const redirect = () => {
+  useEffect(() => {
+    if (!username) {
       if (user) history.push(`/profile/${user.username}`);
       else history.push('/login');
     };
+  }, [username, history, user]);
 
-    if (username) {
-      get(`/users?username=${username}`).then(response => {
-        if (!response.data.length) redirect(); // TODO: handle this case
-        setUserInfo(response.data[0]);
-        setIsInfoLoading(false);
-      }).catch(() => redirect());
-    } else redirect();
-  }, [username, user, history]);
-
-
-  useEffect(() => {
-    if (userInfo?._id) {
-      setIsPollsLoading(true);
 
-      get(`/profiles/${userInfo._id}`).then(response => {
-        setIsPollsLoading(false);
-        setPolls([]);
-        setPolls(response.data);
-        setTotalVotes(response.data.reduce(
-          (total: number, current: Poll) => {
-            const { left, right } = current.contents;
-            return total + left.votes + right.votes;
-          }, 0
-        ));
-      });
-    }
-  }, [userInfo]);
+  const totalVotes = useCallback(
+    polls.reduce(
+      (total: number, current: Poll) => {
+        const { left, right } = current.contents;
+        return total + left.votes + right.votes;
+      }, 0
+    ), [polls]);
 
   return (
     <Container maxWidth="sm" disableGutters>
@@ -62,9 +44,8 @@ const ProfilePage: React.FC = () => {
         setUserInfo={setUserInfo}
         savedPolls={polls.length}
         totalVotes={totalVotes}
-        isLoading={isInfoLoading}
       />
-      {isPollsLoading ? <Feed polls={[]} /> : (polls.length > 0 && <Feed polls={polls} />)}
+      <Feed polls={polls} />
     </Container>
   );
 };
-- 
cgit v1.2.3


From 359ec6a68ea92b3d1eecf020742157eb3be90b9f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 21:17:33 +0300
Subject: feat: add useFeed hook

---
 src/pages/ProfilePage/ProfilePage.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'src/pages/ProfilePage/ProfilePage.tsx')

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 4769999..293b766 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -15,11 +15,7 @@ const ProfilePage: React.FC = () => {
   const { user } = useAuth();
 
   const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls, mutate: fetchPolls } = useProfile(userInfo?._id);
-
-  useEffect(() => {
-    fetchPolls();
-  }, [userInfo, fetchPolls])
+  const { data: polls } = useProfile(userInfo?._id);
 
   useEffect(() => {
     if (!username) {
-- 
cgit v1.2.3


From fd6e663a1bcc43cfc49bda99ccbfab380489324b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:02:24 +0300
Subject: feat!: add useLocalStorage hook

---
 src/pages/ProfilePage/ProfilePage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/pages/ProfilePage/ProfilePage.tsx')

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 293b766..9e00784 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -21,7 +21,7 @@ const ProfilePage: React.FC = () => {
     if (!username) {
       if (user) history.push(`/profile/${user.username}`);
       else history.push('/login');
-    };
+    }
   }, [username, history, user]);
 
 
@@ -31,7 +31,9 @@ const ProfilePage: React.FC = () => {
         const { left, right } = current.contents;
         return total + left.votes + right.votes;
       }, 0
-    ), [polls]);
+    ),
+    [polls]
+  );
 
   return (
     <Container maxWidth="sm" disableGutters>
-- 
cgit v1.2.3


From dfa6f0a8d1415539e1ff6a3ca848627bbe87b470 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:19:17 +0300
Subject: fix: show Feed loading correctly

---
 src/pages/ProfilePage/ProfilePage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/pages/ProfilePage/ProfilePage.tsx')

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 9e00784..db27d25 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -5,6 +5,7 @@ import { Container } from '@material-ui/core';
 
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
+import Loading from '../../components/Loading/Loading';
 import { useAuth } from '../../hooks/useAuth';
 import { useUser, useProfile } from '../../hooks/APIClient';
 
@@ -15,7 +16,7 @@ const ProfilePage: React.FC = () => {
   const { user } = useAuth();
 
   const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls } = useProfile(userInfo?._id);
+  const { data: polls, isValidating } = useProfile(userInfo?._id);
 
   useEffect(() => {
     if (!username) {
@@ -43,7 +44,10 @@ const ProfilePage: React.FC = () => {
         savedPolls={polls.length}
         totalVotes={totalVotes}
       />
-      <Feed polls={polls} />
+      {!polls.length && isValidating
+        ? <Loading />
+        : <Feed polls={polls} />
+      }
     </Container>
   );
 };
-- 
cgit v1.2.3


From 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:28:39 +0300
Subject: refactor: move pages -> containers

---
 src/pages/ProfilePage/ProfilePage.tsx | 55 -----------------------------------
 1 file changed, 55 deletions(-)
 delete mode 100644 src/pages/ProfilePage/ProfilePage.tsx

(limited to 'src/pages/ProfilePage/ProfilePage.tsx')

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
deleted file mode 100644
index db27d25..0000000
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useEffect, useCallback } 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 Feed from '../../components/Feed/Feed';
-import Loading from '../../components/Loading/Loading';
-import { useAuth } from '../../hooks/useAuth';
-import { useUser, useProfile } from '../../hooks/APIClient';
-
-
-const ProfilePage: React.FC = () => {
-  const history = useHistory();
-  const { username } = useParams();
-  const { user } = useAuth();
-
-  const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls, isValidating } = useProfile(userInfo?._id);
-
-  useEffect(() => {
-    if (!username) {
-      if (user) history.push(`/profile/${user.username}`);
-      else history.push('/login');
-    }
-  }, [username, history, user]);
-
-
-  const totalVotes = useCallback(
-    polls.reduce(
-      (total: number, current: Poll) => {
-        const { left, right } = current.contents;
-        return total + left.votes + right.votes;
-      }, 0
-    ),
-    [polls]
-  );
-
-  return (
-    <Container maxWidth="sm" disableGutters>
-      <ProfileInfo
-        userInfo={userInfo}
-        setUserInfo={setUserInfo}
-        savedPolls={polls.length}
-        totalVotes={totalVotes}
-      />
-      {!polls.length && isValidating
-        ? <Loading />
-        : <Feed polls={polls} />
-      }
-    </Container>
-  );
-};
-
-export default ProfilePage;
-- 
cgit v1.2.3

