From 3492e16c40a0264042265eaa28670d25e5eefb89 Mon Sep 17 00:00:00 2001 From: susie-laptop Date: Wed, 28 May 2025 19:23:13 -0400 Subject: [PATCH] [dev]brands search --- src/components/AddToCampaign.jsx | 2 +- src/components/BrandsList.jsx | 13 ++++++++++- src/components/CampaignList.jsx | 2 +- src/components/ProductsList.jsx | 4 ++-- .../{Spinning.jsx => SpinningComponent.jsx} | 0 src/components/TemplateList.jsx | 2 +- src/pages/Brands.jsx | 15 ++++++++---- src/pages/BrandsDetail.jsx | 1 - src/store/slices/brandsSlice.js | 23 +++++++++++++++++++ 9 files changed, 50 insertions(+), 12 deletions(-) rename src/components/{Spinning.jsx => SpinningComponent.jsx} (100%) diff --git a/src/components/AddToCampaign.jsx b/src/components/AddToCampaign.jsx index 8c48d88..68841e6 100644 --- a/src/components/AddToCampaign.jsx +++ b/src/components/AddToCampaign.jsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { Button, Form, Modal } from 'react-bootstrap'; import { useDispatch, useSelector } from 'react-redux'; import { fetchCampaigns } from '../store/slices/brandsSlice'; -import SpinningComponent from './Spinning'; +import SpinningComponent from './SpinningComponent'; import { addCreatorsToCampaign } from '../store/slices/creatorsSlice'; export default function AddToCampaign({ show, onHide }) { diff --git a/src/components/BrandsList.jsx b/src/components/BrandsList.jsx index fbcb44f..81d2270 100644 --- a/src/components/BrandsList.jsx +++ b/src/components/BrandsList.jsx @@ -3,15 +3,26 @@ import { useSelector, useDispatch } from 'react-redux'; import { fetchBrands } from '../store/slices/brandsSlice'; import { Card } from 'react-bootstrap'; import { Folders, Hash, Link, Users } from 'lucide-react'; +import SpinningComponent from './SpinningComponent'; export default function BrandsList({ openBrandDetail }) { - const brands = useSelector((state) => state.brands.brands); + const { brands, status, error } = useSelector((state) => state.brands); const dispatch = useDispatch(); useEffect(() => { dispatch(fetchBrands()); }, [dispatch]); + if (status === 'loading') { + return ; + } + + // 如果加载失败，显示错误信息 + if (status === 'failed') { + return
{error || 'Failed to load brands. Please try again later.'}
; + } + + return (
{brands?.length > 0 && brands.map((brand) => ( diff --git a/src/components/CampaignList.jsx b/src/components/CampaignList.jsx index 6472c04..2b35ad0 100644 --- a/src/components/CampaignList.jsx +++ b/src/components/CampaignList.jsx @@ -3,7 +3,7 @@ import { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { Link, useParams } from 'react-router-dom'; import { ChartNoAxesColumnIncreasing, CircleDollarSign, Edit, Eye, Folders, Hash, Layers, Tag, TrendingUp, UserRoundCheck } from 'lucide-react'; -import Spinning from './Spinning'; +import Spinning from './SpinningComponent'; export default function CampaignList() { const { selectedBrand ,status } = useSelector((state) => state.brands); diff --git a/src/components/ProductsList.jsx b/src/components/ProductsList.jsx index d57b3aa..8f3ee84 100644 --- a/src/components/ProductsList.jsx +++ b/src/components/ProductsList.jsx @@ -3,9 +3,9 @@ import { Table, Form, Button, Modal } from 'react-bootstrap'; import { useSelector, useDispatch } from 'react-redux'; import '../styles/Products.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import Spinning from './Spinning'; +import Spinning from './SpinningComponent'; import { Plus } from 'lucide-react'; -import SpinningComponent from './Spinning'; +import SpinningComponent from './SpinningComponent'; import { addProductToCampaign } from '../store/slices/productSlice'; export default function ProductsList({ products, onShowProductDetail, type = 'default' }) { diff --git a/src/components/Spinning.jsx b/src/components/SpinningComponent.jsx similarity index 100% rename from src/components/Spinning.jsx rename to src/components/SpinningComponent.jsx diff --git a/src/components/TemplateList.jsx b/src/components/TemplateList.jsx index 9ac12c3..b113995 100644 --- a/src/components/TemplateList.jsx +++ b/src/components/TemplateList.jsx @@ -1,7 +1,7 @@ import { Copy, Edit, FileText, LayoutTemplate } from 'lucide-react'; import { Button } from 'react-bootstrap'; import { useSelector } from 'react-redux'; -import Spinning from './Spinning'; +import Spinning from './SpinningComponent'; export default function TemplateList({ activeTab, openModal, setFormData }) { const { templates, templatesStatus } = useSelector((state) => state.inbox); diff --git a/src/pages/Brands.jsx b/src/pages/Brands.jsx index ef7f5da..0d0b7f0 100644 --- a/src/pages/Brands.jsx +++ b/src/pages/Brands.jsx @@ -6,27 +6,32 @@ import '../styles/Brands.scss'; import { useNavigate } from 'react-router-dom'; import { Plus } from 'lucide-react'; import { useDispatch, useSelector } from 'react-redux'; -import { createBrandThunk, fetchBrands, selectBrand } from '../store/slices/brandsSlice'; -import SpinningComponent from '../components/Spinning'; +import { createBrandThunk, fetchBrands, searchBrands, selectBrand } from '../store/slices/brandsSlice'; +import SpinningComponent from '../components/SpinningComponent'; import { BRAND_SOURCES } from '../lib/constant'; export default function Brands() { const navigate = useNavigate(); const dispatch = useDispatch(); const [showAddBrandModal, setShowAddBrandModal] = useState(false); + const [searchValue, setSearchValue] = useState(''); useEffect(() => {}, [dispatch]); const openBrandDetail = async (item) => { - console.log(item); await dispatch(selectBrand(item)); navigate(`/brands/${item.id}`); }; + const handleSearch = (e) => { + e.preventDefault(); + dispatch(searchBrands({ keyword: searchValue })); + }; + return (
- + setSearchValue(e.target.value)} />