- {users.map((user) => (
-
- )
- } else {
+ if (loading) {
return
+ {users.map((user) => (
+
+ )
}
export default UserResults
diff --git a/src/components/users/UserSearch.jsx b/src/components/users/UserSearch.jsx
index 52f0881..d686c59 100644
--- a/src/components/users/UserSearch.jsx
+++ b/src/components/users/UserSearch.jsx
@@ -18,8 +18,17 @@ function UserSearch() {
setAlert('Please enter something', 'error')
} else {
dispatch({ type: 'SET_LOADING' })
- const users = await searchUsers(text)
- dispatch({ type: 'GET_USERS', payload: users })
+ try {
+ const users = await searchUsers(text)
+ dispatch({ type: 'GET_USERS', payload: users })
+
+ if (users.length === 0) {
+ setAlert('未找到匹配的用户，请尝试其他关键词', 'error')
+ }
+ } catch (error) {
+ dispatch({ type: 'SET_ERROR', payload: error.message })
+ setAlert(error.message, 'error')
+ }
setText('')
}
diff --git a/src/context/github/GithubActions.js b/src/context/github/GithubActions.js
index 50ca5f2..a6db14b 100644
--- a/src/context/github/GithubActions.js
+++ b/src/context/github/GithubActions.js
@@ -13,16 +13,28 @@ export const searchUsers = async (text) => {
q: text,
})
- const response = await github.get(`/search/users?${params}`)
- return response.data.items
+ try {
+ const response = await github.get(`/search/users?${params}`)
+ return response.data.items
+ } catch (error) {
+ throw new Error(
+ error.response?.data?.message || '搜索用户失败，请稍后重试'
+ )
+ }
}
// Get user and repos
export const getUserAndRepos = async (login) => {
- const [user, repos] = await Promise.all([
- github.get(`/users/${login}`),
- github.get(`/users/${login}/repos`),
- ])
+ try {
+ const [user, repos] = await Promise.all([
+ github.get(`/users/${login}`),
+ github.get(`/users/${login}/repos`),
+ ])
- return { user: user.data, repos: repos.data }
+ return { user: user.data, repos: repos.data }
+ } catch (error) {
+ throw new Error(
+ error.response?.data?.message || '获取用户信息失败，请稍后重试'
+ )
+ }
}
diff --git a/src/context/github/GithubContext.js b/src/context/github/GithubContext.js
index 6a1e2a5..e1f7392 100644
--- a/src/context/github/GithubContext.js
+++ b/src/context/github/GithubContext.js
@@ -9,6 +9,7 @@ export const GithubProvider = ({ children }) => {
user: {},
repos: [],
loading: false,
+ error: null,
}
const [state, dispatch] = useReducer(githubReducer, initialState)
diff --git a/src/context/github/GithubReducer.js b/src/context/github/GithubReducer.js
index 806d5bc..eeab9e3 100644
--- a/src/context/github/GithubReducer.js
+++ b/src/context/github/GithubReducer.js
@@ -5,6 +5,7 @@ const githubReducer = (state, action) => {
...state,
users: action.payload,
loading: false,
+ error: null,
}
case 'GET_USER_AND_REPOS':
return {
@@ -12,16 +13,30 @@ const githubReducer = (state, action) => {
user: action.payload.user,
repos: action.payload.repos,
loading: false,
+ error: null,
}
case 'SET_LOADING':
return {
...state,
loading: true,
+ error: null,
}
case 'CLEAR_USERS':
return {
...state,
users: [],
+ error: null,
+ }
+ case 'SET_ERROR':
+ return {
+ ...state,
+ error: action.payload,
+ loading: false,
+ }
+ case 'CLEAR_ERROR':
+ return {
+ ...state,
+ error: null,
}
default:
return state
diff --git a/src/pages/User.jsx b/src/pages/User.jsx
index 097ffab..b927f47 100644
--- a/src/pages/User.jsx
+++ b/src/pages/User.jsx
@@ -4,22 +4,29 @@ import { useParams, Link } from 'react-router-dom'
import Spinner from '../components/layout/Spinner'
import RepoList from '../components/repos/RepoList'
import GithubContext from '../context/github/GithubContext'
+import AlertContext from '../context/alert/AlertContext'
import { getUserAndRepos } from '../context/github/GithubActions'
function User() {
const { user, loading, repos, dispatch } = useContext(GithubContext)
+ const { setAlert } = useContext(AlertContext)
const params = useParams()
useEffect(() => {
dispatch({ type: 'SET_LOADING' })
const getUserData = async () => {
- const userData = await getUserAndRepos(params.login)
- dispatch({ type: 'GET_USER_AND_REPOS', payload: userData })
+ try {
+ const userData = await getUserAndRepos(params.login)
+ dispatch({ type: 'GET_USER_AND_REPOS', payload: userData })
+ } catch (err) {
+ dispatch({ type: 'SET_ERROR', payload: err.message })
+ setAlert(err.message, 'error')
+ }
}
getUserData()
- }, [dispatch, params.login])
+ }, [dispatch, params.login, setAlert])
const {
name,