Merge pull request #4 from Emerrrail/dev

Fixed bugs

src/Layouts/UserLayout/UserLayout.js

@@ -12,19 +12,19 @@ function UserLayout ({ children }) {
 
     const dispatch = useDispatch()
 
-    const onTogglerClick = () => {
+    const onSwitchButtonClick = () => {
         dispatch(toggleOwnerInfo())
     }
 
     return (
         <div>
             <div
                 className={`userLayout__toggler_container${matches ? '' : ' hidden'}`}
-                onClick={onTogglerClick}
+                onClick={onSwitchButtonClick}
             >
                 <Toggler />
             </div>
-            <OwnerInfo />
+            <OwnerInfo onSwitchButtonClick={onSwitchButtonClick} />
             {children}
         </div>
     )

src/Pages/UserPage/UserPage.js

@@ -6,6 +6,7 @@ import UserRepos from '../../components/UserRepos/UserRepos'
 import UserFollowers from '../../components/UserFollowers/UserFollowers'
 import Error from '../../components/Error/Error'
 import { getReposRequest } from '../../Services/store/actions/index'
+import { scrollToTop } from '../../helper-function/scrollToTop'
 
 function UserPage ({ errorRepos, errorFollowers }) {
     const { username, page } = useParams()
@@ -14,9 +15,9 @@ function UserPage ({ errorRepos, errorFollowers }) {
 
     useEffect(() => {
         dispatch(getReposRequest(username))
+        scrollToTop()
     }, [dispatch, username])
-    // 在搜尋失敗後，成為error的狀態，因為UserRepos沒有生成，也不會再打API，所以就停在error畫面了。
-    // 可以在UserPage dispatch action
+
     return (
         <div>
             {!errorRepos && !errorFollowers &&

src/components/Button/Button.js

@@ -1,12 +1,12 @@
 import './Button.css'
 import React from 'react'
-import { onClickUrl } from '../../helper-function/onClickUrl'
+import { onUrlClick } from '../../helper-function/onUrlClick'
 
 function Button ({ text, url }) {
     return (
         <button
             className='button'
-            onClick={onClickUrl(url)}
+            onClick={onUrlClick(url)}
         >{text}
         </button>
     )

src/components/OwnerInfo/OwnerInfo.js

@@ -8,16 +8,14 @@ import Mail from '../icon/Mail'
 import Button from '../Button/Button'
 import LinkIcon from '../icon/LinkIcon'
 import Repositories from '../icon/Repositories'
-import { onClickUrl } from '../../helper-function/onClickUrl'
+import { onUrlClick } from '../../helper-function/onUrlClick'
 import { getOwnerDataRequest } from '../../Services/store/actions/index'
 
-function OwnerInfo ({ ownerData, loading, open }) {
+function OwnerInfo ({ ownerData, loading, open, onSwitchButtonClick }) {
     const [matches, setMatches] = useState(window.matchMedia('(max-width: 576px)').matches)
 
     window.matchMedia('(max-width: 576px)').addEventListener('change', (event) => setMatches(event.matches))
 
-    console.log('open, matches', open, matches)
-
     const dispatch = useDispatch()
 
     const { username } = useParams()
@@ -65,7 +63,7 @@ function OwnerInfo ({ ownerData, loading, open }) {
                             {ownerData.email}
                         </div>}
                     {ownerData.blog &&
-                        <div className='ownerInfo__link' onClick={onClickUrl(ownerData.blog)}>
+                        <div className='ownerInfo__link' onClick={onUrlClick(ownerData.blog)}>
                             <LinkIcon />
                             {ownerData.blog}
                         </div>}
@@ -76,13 +74,19 @@ function OwnerInfo ({ ownerData, loading, open }) {
             </div>
             <div className='ownerInfo__menu'>
                 <Link to={`/users/${username}/repos`}>
-                    <div className={`ownerInfo__repositories${reposSelected ? ' selected' : ''}`}>
+                    <div
+                        className={`ownerInfo__repositories${reposSelected ? ' selected' : ''}`}
+                        onClick={onSwitchButtonClick}
+                    >
                         <Repositories />
                         Repositories
                     </div>
                 </Link>
                 <Link to={`/users/${username}/followers`}>
-                    <div className={`ownerInfo__followers${followersSelected ? ' selected' : ''}`}>
+                    <div
+                        className={`ownerInfo__followers${followersSelected ? ' selected' : ''}`}
+                        onClick={onSwitchButtonClick}
+                    >
                         <Followers />
                         Followers
                     </div>

src/components/PlaceholderFollowers/PlaceholderFollowers.css

@@ -23,3 +23,9 @@
 .placeholderFollowers__title {
     width: 70%;
 }
+
+@media (max-width: 880px) {
+    .placeholderFollowers {
+        grid-template-columns: 1fr;
+    }
+}

src/helper-function/onClickUrl.js → src/helper-function/onUrlClick.js

@@ -3,6 +3,6 @@ const openInNewTab = (url) => {
     if (newWindow) newWindow.opener = null
 }
 
-export const onClickUrl = (url) => {
+export const onUrlClick = (url) => {
     return () => openInNewTab(url)
 }

src/helper-function/scrollToTop.js

@@ -0,0 +1,6 @@
+export const scrollToTop = () => {
+    window.scrollTo({
+        top: 0,
+        behavior: 'auto'
+    })
+}