From b24f73d30a2bc98b4ac37c672c5bb5bd16b38eb5 Mon Sep 17 00:00:00 2001
From: Artem Zubkov <artzub@gmail.com>
Date: Tue, 29 Dec 2020 15:57:25 +0700
Subject: [PATCH] #68 Renamed field to common format. Added cancel catching.

---
 .../Header/components/UserStep/Body.jsx       |  6 ++---
 .../Header/components/UserStep/Header.jsx     | 22 ++++++++++--------
 src/redux/modules/profiles.js                 | 23 ++++++++++++++-----
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/Header/components/UserStep/Body.jsx b/src/components/Header/components/UserStep/Body.jsx
index a79a2f4..29cf83a 100644
--- a/src/components/Header/components/UserStep/Body.jsx
+++ b/src/components/Header/components/UserStep/Body.jsx
@@ -67,7 +67,7 @@ const Body = () => {
   const inputRef = useRef();
   const [search, setSearch] = useState('');
   const [neverChange, setNeverChange] = useState(true);
-  const { isFetching, searched, top } = useSelector(slice.selectors.getState);
+  const { isFetching, items, top } = useSelector(slice.selectors.getState);
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
 
   const onChange = useCallback(
@@ -126,8 +126,8 @@ const Body = () => {
               dense
               subheader={SearchHeader}
             >
-              {!searched.length && <NotData />}
-              {(searched || []).map((user) => (
+              {!items.length && <NotData />}
+              {(items || []).map((user) => (
                 <ListItem
                   alignItems="center"
                   key={user.login}
diff --git a/src/components/Header/components/UserStep/Header.jsx b/src/components/Header/components/UserStep/Header.jsx
index bf58ca7..fa03397 100644
--- a/src/components/Header/components/UserStep/Header.jsx
+++ b/src/components/Header/components/UserStep/Header.jsx
@@ -80,34 +80,38 @@ const PropertyValue = styled.div`
 `;
 
 const Header = (props) => {
-  const { profile } = useSelector(slice.selectors.getState);
+  const { selected } = useSelector(slice.selectors.getState);
+  const {
+    avatar_url, name, login,
+    html_url, public_repos, blog,
+  } = selected || {};
 
   return (
     <Container {...props}>
-      <Avatar src={profile?.avatar_url} />
+      <Avatar src={avatar_url} />
       <InfoContainer>
-        {!profile && <div>Find a user</div>}
-        {profile && (
+        {!selected && <div>Find a user</div>}
+        {selected && (
           <React.Fragment>
-            <Title>{profile.name || profile.login}</Title>
+            <Title>{name || login}</Title>
             <Properties>
               <Property>
                 <GithubIcon size={16} />
                 <PropertyValue>
-                  <Link href={profile.html_url}>{profile.login}</Link>
+                  <Link target="_blank" href={html_url}>{login}</Link>
                 </PropertyValue>
               </Property>
             </Properties>
             <Properties>
               <Property title="Amount of repositories">
                 <SourceRepositoriesIcon size={16} />
-                <PropertyValue>{profile.public_repos}</PropertyValue>
+                <PropertyValue>{public_repos}</PropertyValue>
               </Property>
-              {profile.blog && (
+              {blog && (
                 <Property title="Web site">
                   <LinkVariantIcon size={16} />
                   <PropertyValue>
-                    <Link href={profile.blog}>blog</Link>
+                    <Link target="_blank" href={blog}>blog</Link>
                   </PropertyValue>
                 </Property>
               )}
diff --git a/src/redux/modules/profiles.js b/src/redux/modules/profiles.js
index c3210db..1e9ab07 100644
--- a/src/redux/modules/profiles.js
+++ b/src/redux/modules/profiles.js
@@ -1,17 +1,17 @@
 import { getProfile, searchAccount } from '@/redux/api/github';
 import { createSlice, startFetching, stopFetching } from "@/redux/utils";
-import { call, put } from 'redux-saga/effects';
+import { call, cancelled, put } from 'redux-saga/effects';
 
 const initialState = {
   isFetching: false,
-  profile: null,
-  searched: [],
+  selected: null,
+  items: [],
   top: [],
   error: null,
 };
 
-const setProfile = (state, profile) => {
-  state.profile = profile;
+const setProfile = (state, selected) => {
+  state.selected = selected;
 };
 
 export default createSlice({
@@ -31,7 +31,7 @@ export default createSlice({
     search: startFetching,
     searchSuccess: (state, { payload }) => {
       stopFetching(state);
-      state.searched = Array.isArray(payload) ? payload : [];
+      state.items = Array.isArray(payload) ? payload : [];
     },
     fetchTop: startFetching,
     fetchTopSuccess: (state, { payload }) => {
@@ -39,6 +39,8 @@ export default createSlice({
       state.top = Array.isArray(payload) ? payload : [];
     },
 
+    stopFetching,
+
     fail: (state, { payload: { message } }) => {
       stopFetching(state);
       state.error = message;
@@ -53,6 +55,9 @@ export default createSlice({
           yield put(actions.fetchProfileSuccess(data));
         } catch (error) {
           yield put(actions.fail(error));
+          if (yield cancelled()) {
+            yield put(actions.stopFetching());
+          }
         }
       },
     },
@@ -64,6 +69,9 @@ export default createSlice({
           yield put(actions.searchSuccess(data));
         } catch (error) {
           yield put(actions.fail(error));
+          if (yield cancelled()) {
+            yield put(actions.stopFetching());
+          }
         }
       },
     },
@@ -75,6 +83,9 @@ export default createSlice({
           yield put(actions.fetchTopSuccess(data));
         } catch (error) {
           yield put(actions.fail(error));
+          if (yield cancelled()) {
+            yield put(actions.stopFetching());
+          }
         }
       },
     },