diff --git a/src/components/DiscoveryList.jsx b/src/components/DiscoveryList.jsx index 2dc85e4..d8f5aab 100644 --- a/src/components/DiscoveryList.jsx +++ b/src/components/DiscoveryList.jsx @@ -1,9 +1,15 @@ import { Table } from 'react-bootstrap'; -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; export default function DiscoveryList() { - const creators = useSelector((state) => state.discovery.creators); + const dispatch = useDispatch(); + const { creators, error, status } = useSelector((state) => state.discovery); + + // 如果加载失败，显示错误信息 + if (status === 'failed') { + return
{error || 'Failed to load creators. Please try again later.'}
; + } return (
@@ -21,18 +27,28 @@ export default function DiscoveryList() { - {creators?.length > 0 && creators.map((creator) => ( - - {creator.sessions} - {creator.creator} - {creator.shoppableCreators} - {creator.avgFollowers} - {creator.avgGMV} - {creator.avgVideoViews} - {creator.date} - View + {creators?.length > 0 ? ( + creators.map((creator) => ( + + {creator.sessions} + {creator.creator} + {creator.shoppableCreators} + {creator.avgFollowers} + {creator.avgGMV} + {creator.avgVideoViews} + {creator.date} + + View + + + )) + ) : ( + + + No session found + - ))} + )}
diff --git a/src/pages/CreatorDiscovery.jsx b/src/pages/CreatorDiscovery.jsx index b46961f..c09e0e2 100644 --- a/src/pages/CreatorDiscovery.jsx +++ b/src/pages/CreatorDiscovery.jsx @@ -4,10 +4,11 @@ import { Button, Form } from 'react-bootstrap'; import '@/styles/CreatorDiscovery.scss'; import DiscoveryList from '../components/DiscoveryList'; import { useDispatch } from 'react-redux'; -import { fetchDiscovery } from '../store/slices/discoverySlice'; +import { fetchDiscovery, fetchDiscoveryByIndividual, fetchDiscoveryByMode } from '../store/slices/discoverySlice'; export default function CreatorDiscovery() { const [search, setSearch] = useState(''); + const [searchMode, setSearchMode] = useState(''); const dispatch = useDispatch(); @@ -15,8 +16,27 @@ export default function CreatorDiscovery() { const handleSubmit = (e) => { e.preventDefault(); - console.log('Form submitted'); - dispatch(fetchDiscovery(search)); + if(search === '') { + return
Please enter a search query
; + } + switch (searchMode) { + case 'hashtag': + dispatch(fetchDiscoveryByMode({ keyword: search, mode: searchMode })); + break; + case 'trend': + dispatch(fetchDiscoveryByMode({ keyword: search, mode: searchMode })); + break; + case 'individual': + dispatch(fetchDiscoveryByIndividual({ criteria: search })); + break; + default: + dispatch(fetchDiscovery(search)); + break; + } + }; + + const handleModeChange = (mode) => { + setSearchMode((prev) => (prev === mode ? null : mode)); }; return ( @@ -35,19 +55,43 @@ export default function CreatorDiscovery() { />
- -
+
Creator Database
diff --git a/src/pages/PrivateCreator.jsx b/src/pages/PrivateCreator.jsx index 381cdf9..b8ad8e4 100644 --- a/src/pages/PrivateCreator.jsx +++ b/src/pages/PrivateCreator.jsx @@ -1,13 +1,14 @@ -import React from 'react'; +import React, { useState } from 'react'; import SearchBar from '../components/SearchBar'; import { Button } from 'react-bootstrap'; import DatabaseFilter from '../components/DatabaseFilter'; import PrivateCreatorList from '../components/PrivateCreatorList'; import { searchPrivateCreators } from '../store/slices/creatorsSlice'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; export default function PrivateCreator({ path }) { const [searchValue, setSearchValue] = useState(''); + const { selectedCreators } = useSelector((state) => state.creators); const dispatch = useDispatch(); const handleSearch = (e) => { @@ -19,7 +20,7 @@ export default function PrivateCreator({ path }) {
setSearchValue(e.target.value)} /> - +
Private Creators
diff --git a/src/store/slices/creatorsSlice.js b/src/store/slices/creatorsSlice.js index 8d12cf4..02da087 100644 --- a/src/store/slices/creatorsSlice.js +++ b/src/store/slices/creatorsSlice.js @@ -222,7 +222,7 @@ export const fetchCreators = createAsyncThunk( async ({ page = 1 }, { getState, rejectWithValue }) => { try { const state = getState(); - const filter = state.filters; + const {pricing, ...filter} = state.filters; const { code, data, message, pagination } = await api.post( `/daren_detail/public/creators/filter/?page=${page}`, diff --git a/src/store/slices/discoverySlice.js b/src/store/slices/discoverySlice.js index 4282b75..a2259d0 100644 --- a/src/store/slices/discoverySlice.js +++ b/src/store/slices/discoverySlice.js @@ -26,9 +26,9 @@ const mockCreators = [ ]; export const fetchDiscovery = createAsyncThunk( 'discovery/fetchDiscovery', - async (searchParams, { rejectWithValue }) => { + async (query, { rejectWithValue, dispatch }) => { try { - const response = await api.post('/creators/search/', searchParams); + const response = await api.post('/discovery/creators/search/', {query: query}); if (response.code === 200) { return response.data; } @@ -42,7 +42,7 @@ export const fetchDiscovery = createAsyncThunk( export const fetchDiscoveryByMode = createAsyncThunk( 'discovery/fetchDiscoveryByMode', - async (params, { rejectWithValue }) => { + async (params, { rejectWithValue, dispatch }) => { try { const response = await api.post('/discovery/creators/search_tags/', params); if (response.code === 200) { @@ -56,6 +56,21 @@ export const fetchDiscoveryByMode = createAsyncThunk( } ); +export const fetchDiscoveryByIndividual = createAsyncThunk( + 'discovery/fetchDiscoveryByIndividual', + async (params, { rejectWithValue, dispatch }) => { + try { + const response = await api.post('/discovery/creators/search_individual/', params); + if (response.code === 200) { + return response.data; + } + throw new Error(response.message); + } catch (error) { + dispatch(setNotificationBarMessage({ message: error.message, type: 'error' })); + return rejectWithValue(error.message); + } + } +); const initialState = { creators: [], status: 'idle', @@ -77,7 +92,7 @@ const discoverySlice = createSlice({ }) .addCase(fetchDiscovery.rejected, (state, action) => { state.status = 'failed'; - state.error = action.error.message; + state.error = action.payload; }) .addCase(fetchDiscoveryByMode.pending, (state) => { state.status = 'loading'; @@ -88,7 +103,18 @@ const discoverySlice = createSlice({ }) .addCase(fetchDiscoveryByMode.rejected, (state, action) => { state.status = 'failed'; - state.error = action.error.message; + state.error = action.payload; + }) + .addCase(fetchDiscoveryByIndividual.pending, (state) => { + state.status = 'loading'; + }) + .addCase(fetchDiscoveryByIndividual.fulfilled, (state, action) => { + state.status = 'succeeded'; + state.creators = action.payload; + }) + .addCase(fetchDiscoveryByIndividual.rejected, (state, action) => { + state.status = 'failed'; + state.error = action.payload; }); }, });