[dev]discovery

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 <div className='alert alert-danger'>{error || 'Failed to load creators. Please try again later.'}</div>;
+    }
 
     return (
         <div className='discovery-list'>
@@ -21,18 +27,28 @@ export default function DiscoveryList() {
                     </tr>
                 </thead>
                 <tbody>
-                    {creators?.length > 0 && creators.map((creator) => (
+                    {creators?.length > 0 ? (
-                        <tr key={creator.id}>
+                        creators.map((creator) => (
-                            <td className='text-center'>{creator.sessions}</td>
+                            <tr key={creator.id}>
-                            <td className='text-center'>{creator.creator}</td>
+                                <td className='text-center'>{creator.sessions}</td>
-                            <td className='text-center'>{creator.shoppableCreators}</td>
+                                <td className='text-center'>{creator.creator}</td>
-                            <td className='text-center'>{creator.avgFollowers}</td>
+                                <td className='text-center'>{creator.shoppableCreators}</td>
-                            <td className='text-center'>{creator.avgGMV}</td>
+                                <td className='text-center'>{creator.avgFollowers}</td>
-                            <td className='text-center'>{creator.avgVideoViews}</td>
+                                <td className='text-center'>{creator.avgGMV}</td>
-                            <td className='text-center'>{creator.date}</td>
+                                <td className='text-center'>{creator.avgVideoViews}</td>
-                            <td className='text-center'><Link to={`/creator/${creator.id}`}>View</Link></td>
+                                <td className='text-center'>{creator.date}</td>
+                                <td className='text-center'>
+                                    <Link to={`/creator/${creator.id}`}>View</Link>
+                                </td>
+                            </tr>
+                        ))
+                    ) : (
+                        <tr>
+                            <td colSpan='7' className='text-center'>
+                                No session found
+                            </td>
                         </tr>
-                    ))}
+                    )}
                 </tbody>
             </Table>
         </div>

src/components/LoadingOverlay.jsx

@@ -1,7 +1,9 @@
 import { Spinner } from 'react-bootstrap';
 
-export default function LoadingOverlay({ status }) {
+export default function LoadingOverlay({ loading }) {
-    if (status !== 'loading') return null;
+    if (!loading) return null;
+
+    
     return (
         <div style={styles.overlay}>
             <Spinner animation='border' role='status' variant='primary' style={{ width: '3rem', height: '3rem' }}>
@@ -12,12 +14,12 @@ export default function LoadingOverlay({ status }) {
 }
 const styles = {
     overlay: {
-        position: 'absolute', // 可改为 fixed 实现全屏
+        position: 'fixed',
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
-        backgroundColor: 'rgba(255, 255, 255, 0.6)', // 半透明背景
+        backgroundColor: 'rgba(255, 255, 255, 0.6)',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',

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');
+        if(search === '') {
-        dispatch(fetchDiscovery(search));
+            return <div className='alert alert-danger'>Please enter a search query</div>;
+        }
+        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() {
                         />
                     </Form.Group>
                     <div className='btn-tag-group' role='group' aria-label='Tag selection button group'>
-                        <input type='checkbox' className='btn-check' id='btncheck1' autocomplete='off' />
+                        <input
-                        <label className='rounded-pill btn btn-primary-subtle' for='btncheck1'>
+                            type='radio'
+                            className='btn-check'
+                            id='btncheck1'
+                            name='searchMode'
+                            autoComplete='off'
+                            checked={searchMode === 'hashtag'}
+                            onClick={() => handleModeChange('hashtag')}
+                        />
+                        <label className='rounded-pill btn btn-primary-subtle' htmlFor='btncheck1'>
                             #Hashtag
                         </label>
 
-                        <input type='checkbox' className='btn-check' id='btncheck2' autocomplete='off' />
+                        <input
-                        <label className='rounded-pill btn btn-primary-subtle' for='btncheck2'>
+                            type='radio'
+                            className='btn-check'
+                            id='btncheck2'
+                            name='searchMode'
+                            autoComplete='off'
+                            checked={searchMode === 'trend'}
+                            onClick={() => handleModeChange('trend')}
+                        />
+                        <label className='rounded-pill btn btn-primary-subtle' htmlFor='btncheck2'>
                             Trend
                         </label>
 
-                        <input type='checkbox' className='btn-check' id='btncheck3' autocomplete='off' />
+                        <input
-                        <label className='rounded-pill btn btn-primary-subtle' for='btncheck3'>
+                            type='radio'
-                            Indivisual
+                            className='btn-check'
+                            id='btncheck3'
+                            name='searchMode'
+                            autoComplete='off'
+                            checked={searchMode === 'individual'}
+                            onClick={() => handleModeChange('individual')}
+                        />
+                        <label className='rounded-pill btn btn-primary-subtle' htmlFor='btncheck3'>
+                            Individual
                         </label>
                     </div>
                     <Button className='rounded-pill submit-btn' type='submit'>

src/pages/Database.jsx

@@ -5,12 +5,13 @@ import SearchBar from '../components/SearchBar';
 import { Button } from 'react-bootstrap';
 import AddToCampaign from '../components/AddToCampaign';
 import { searchCreators } from '../store/slices/creatorsSlice';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 export default function Database({ path }) {
     const [showAddToCampaignModal, setShowAddToCampaignModal] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const dispatch = useDispatch();
+    const { selectedCreators } = useSelector((state) => state.creators);
 
     const handleSearch = (e) => {
         e.preventDefault();
@@ -21,7 +22,7 @@ export default function Database({ path }) {
         <div className='database-page'>
             <div className='function-bar'>
                 <SearchBar onSearch={handleSearch} value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
-                <Button onClick={() => setShowAddToCampaignModal(true)}>+ Add to Campaign</Button>
+                <Button disabled={selectedCreators.length === 0} onClick={() => setShowAddToCampaignModal(true)}>+ Add to Campaign</Button>
             </div>
             <div className='breadcrumb'>
                 <div className='breadcrumb-item'>Creator Database</div>

src/pages/Login.jsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { loginThunk } from '../store/slices/authSlice';
+import LoadingOverlay from '../components/LoadingOverlay';
 
 export default function Login() {
     const [formData, setFormData] = useState({
@@ -39,9 +40,9 @@ export default function Login() {
         }
         return true;
     };
-
     return (
         <div className='login-container'>
+            <LoadingOverlay loading={isLoading} />
             <div className='title'>Creator Center</div>
             <Form className='login-form' onSubmit={handleSubmit}>
                 {/* <Form.Group>

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 }) {
         <div className='private-creator-page'>
             <div className='function-bar'>
                 <SearchBar onSearch={handleSearch} value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
-                <Button>+ Add to Campaign</Button>
+                <Button disabled={selectedCreators.length === 0}>+ Add to Campaign</Button>
             </div>
             <div className='breadcrumb'>
                 <div className='breadcrumb-item'>Private Creators</div>

src/store/slices/authSlice.js

@@ -1,16 +1,19 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import api from '@/services/api';
+import { setNotificationBarMessage } from './notificationBarSlice';
 
-export const loginThunk = createAsyncThunk('auth/login', async (credentials, { rejectWithValue }) => {
+
+export const loginThunk = createAsyncThunk('auth/login', async (credentials, { rejectWithValue, dispatch }) => {
     try {
         const response = await api.post('/user/login/', credentials);
         if (response.code === 200) {
             sessionStorage.setItem('token', response.data.token);
             return response.data;
         } else {
-            return rejectWithValue(response.message);
+            throw new Error(response.message);
         }
     } catch (error) {
+        dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
         return rejectWithValue(error.message);
     }
 });

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}`,

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;
             });
     },
 });