[dev]public creator search

src/components/CreatorList.jsx

@@ -50,7 +50,6 @@ export default function CreatorList({ path }) {
     }, [path, dispatch]);
 
     useEffect(() => {
-        console.log(publicCreators, status);
     }, [publicCreators, status]);
 
     // 处理全选/取消全选

src/components/NotificationBar.jsx

@@ -19,7 +19,6 @@ export default function NotificationBar() {
     };
 
     useEffect(() => {
-        console.log(message);
         setTimeOut();
     }, [message]);
 

src/components/SearchBar.jsx

@@ -1,18 +1,16 @@
 import { useState } from "react";
 import { Form, InputGroup } from "react-bootstrap";
 
-export default function SearchBar() {
-	const [searchValue, setSearchValue] = useState('');
-
+export default function SearchBar({ onSearch, value, onChange }) {
 	const handleSearch = (e) => {
 		e.preventDefault();
-		console.log(searchValue);
+		onSearch(e);
 	};
 
     return (
         <Form onSubmit={handleSearch} className='search-bar'>
             <InputGroup>
-                <Form.Control type='text' list='datalistOptions' placeholder='Search' value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
+                <Form.Control type='text' list='datalistOptions' placeholder='Search' value={value} onChange={onChange} />
             </InputGroup>
             <datalist id='datalistOptions'>
                 <option value='San Francisco' />

src/pages/Database.jsx

@@ -4,14 +4,23 @@ import CreatorList from '../components/CreatorList';
 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';
 
 export default function Database({ path }) {
     const [showAddToCampaignModal, setShowAddToCampaignModal] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const dispatch = useDispatch();
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+        dispatch(searchCreators({ q: searchValue, mode: 'or', page: 1, page_size: 10 }));
+    };
 
     return (
         <div className='database-page'>
             <div className='function-bar'>
-                <SearchBar />
+                <SearchBar onSearch={handleSearch} value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
                 <Button onClick={() => setShowAddToCampaignModal(true)}>+ Add to Campaign</Button>
             </div>
             <div className='breadcrumb'>

src/pages/PrivateCreator.jsx

@@ -3,12 +3,22 @@ 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';
 
 export default function PrivateCreator({ path }) {
+	const [searchValue, setSearchValue] = useState('');
+    const dispatch = useDispatch();
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+        dispatch(searchPrivateCreators({ q: searchValue, mode: 'or', page: 1, page_size: 10 }));
+    };
+
     return (
         <div className='private-creator-page'>
             <div className='function-bar'>
-                <SearchBar />
+                <SearchBar onSearch={handleSearch} value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
                 <Button>+ Add to Campaign</Button>
             </div>
             <div className='breadcrumb'>

src/store/slices/creatorsSlice.js

@@ -1,5 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import api from '@/services/api';
+import { setNotificationBarMessage } from './notificationBarSlice';
 
 const mockVideos = [
     {
@@ -221,7 +222,7 @@ export const fetchCreators = createAsyncThunk(
     async ({ page = 1 }, { getState, rejectWithValue }) => {
         try {
             const state = getState();
-            const { pricing, views_range, ...filter } = state.filters;
+            const filter = state.filters;
 
             const { code, data, message, pagination } = await api.post(
                 `/daren_detail/public/creators/filter/?page=${page}`,
@@ -243,7 +244,7 @@ export const fetchPrivateCreators = createAsyncThunk(
     async ({ page = 1 }, { getState, rejectWithValue, dispatch }) => {
         try {
             const state = getState();
-            const { pricing, views_range, ...filter } = state.filters;
+            const filter = state.filters;
 
             const { code, data, message, pagination } = await api.post(
                 `/daren_detail/private/pools/creators/filter/?page=${page}`,
@@ -260,6 +261,54 @@ export const fetchPrivateCreators = createAsyncThunk(
     }
 );
 
+/**
+ * 搜索公有达人库达人
+ * @param {Object} params
+ * @param {string} params.q 搜索关键词
+ * @param {string} params.mode 搜索类型 OR 和 AND 固定or
+ * @param {number} params.page 页码
+ * @param {number} params.page_size 每页条数
+ */
+export const searchCreators = createAsyncThunk(
+    'creators/searchPublicCreators',
+    async (params, { rejectWithValue, dispatch }) => {
+        try {
+            const response = await api.get(`/daren_detail/creators/search/`, { params });
+            if (response.code === 200) {
+                return response;
+            } else {
+                throw new Error(response.message);
+            }
+        } catch (error) {
+            return rejectWithValue(error.message);
+        }
+    }
+);
+
+/**
+ * 搜索私有达人库达人
+ * @param {Object} params
+ * @param {string} params.q 搜索关键词
+ * @param {string} params.mode 搜索类型 OR 和 AND 固定or
+ * @param {number} params.page 页码
+ * @param {number} params.page_size 每页条数
+ */
+export const searchPrivateCreators = createAsyncThunk(
+    'creators/searchPrivateCreators',
+    async (params, { rejectWithValue, dispatch }) => {
+        try {
+            const response = await api.get(`/daren_detail/private/creators/search/`, { params });
+            if (response.code === 200) {
+                return response;
+            } else {
+                throw new Error(response.message);
+            }
+        } catch (error) {
+            return rejectWithValue(error.message);
+        }
+    }
+);
+
 export const fetchCreatorDetail = createAsyncThunk(
     'creators/fetchCreatorDetail',
     async ({ creatorId }, { dispatch, rejectWithValue }) => {
@@ -474,6 +523,32 @@ const creatorsSlice = createSlice({
             })
             .addCase(fetchCreatorVideos.fulfilled, (state, action) => {
                 state.selectedCreator.videosData = action.payload.data;
+            })
+            .addCase(searchCreators.pending, (state) => {
+                state.status = 'loading';
+            })
+            .addCase(searchPrivateCreators.pending, (state) => {
+                state.status = 'loading';
+            })
+            .addCase(searchCreators.fulfilled, (state, action) => {
+                state.publicCreators = action.payload.data;
+                state.status = 'succeeded';
+                state.error = null;
+            })
+            .addCase(searchPrivateCreators.fulfilled, (state, action) => {
+                state.privateCreators = action.payload.data;
+                state.status = 'succeeded';
+                state.error = null;
+            })
+            .addCase(searchCreators.rejected, (state, action) => {
+                state.status = 'failed';
+                state.error = action.payload;
+                console.log('searchCreators.rejected', action);
+                
+            })
+            .addCase(searchPrivateCreators.rejected, (state, action) => {
+                state.status = 'failed';
+                state.error = action.payload;
             });
     },
 });