susieshi/CreatorCenter_OOIN
1
0
Fork 0
mirror of https://github.com/Funkoala14/CreatorCenter_OOIN.git synced 2025-06-08 01:18:14 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[dev]brands list

Browse Source
This commit is contained in:
susie-laptop 2025-05-22 21:42:59 -04:00
parent c518639845
commit 4c22e12101
6 changed files with 78 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BrandsList.jsx
View File

@ -33,14 +33,14 @@ export default function BrandsList({ openBrandDetail }) {
<Hash size={16} /> <Hash size={16} />
Collab. Collab.
</span> </span>
<span className='card-text-content'>{brand.collab}</span> <span className='card-text-content'>{brand.collab_count}</span>
</Card.Text> </Card.Text>
<Card.Text className=''> <Card.Text className=''>
<span className='card-text-title'> <span className='card-text-title'>
<Users size={16} /> <Users size={16} />
Creators Creators
</span> </span>
<span className='card-text-content'>{brand.creators}</span> <span className='card-text-content'>{brand.creators_count}</span>
</Card.Text> </Card.Text>
<Card.Text className=''> <Card.Text className=''>
<span className='card-text-title'> <span className='card-text-title'>

13
src/components/CampaignList.jsx
View File

@ -3,14 +3,23 @@ import { useEffect } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ChartNoAxesColumnIncreasing, CircleDollarSign, Edit, Eye, Folders, Hash, Layers, Tag, TrendingUp, UserRoundCheck } from 'lucide-react'; import { ChartNoAxesColumnIncreasing, CircleDollarSign, Edit, Eye, Folders, Hash, Layers, Tag, TrendingUp, UserRoundCheck } from 'lucide-react';
import Spinning from './Spinning';
export default function CampaignList() { export default function CampaignList() {
const { selectedBrand } = useSelector((state) => state.brands); const { selectedBrand ,status } = useSelector((state) => state.brands);
useEffect(() => { useEffect(() => {
console.log(selectedBrand); console.log(selectedBrand);
}, [selectedBrand]); }, [selectedBrand]);
if (status === 'loading') {
return <Spinning />;
}
if (selectedBrand?.campaigns?.length === 0) {
return <div>No campaigns found</div>;
}
return ( return (
<div className='campaigns-list'> <div className='campaigns-list'>
{selectedBrand?.campaigns?.length > 0 && {selectedBrand?.campaigns?.length > 0 &&

40
src/components/ProductsList.jsx
View File

@ -4,23 +4,16 @@ import { useSelector, useDispatch } from 'react-redux';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import '../styles/Products.scss'; import '../styles/Products.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Spinning from './Spinning';
export default function ProductsList({ onShowProductDetail }) { export default function ProductsList({ onShowProductDetail }) {
const { brandId } = useParams(); const { brandId } = useParams();
const { brands } = useSelector((state) => state.brands); const { selectedBrand } = useSelector((state) => state.brands);
const [products, setProducts] = useState([]); const [products, setProducts] = useState([]);
const [selectedProducts, setSelectedProducts] = useState([]); const [selectedProducts, setSelectedProducts] = useState([]);
const [sortField, setSortField] = useState(null); const [sortField, setSortField] = useState(null);
const [sortDirection, setSortDirection] = useState('asc'); const [sortDirection, setSortDirection] = useState('asc');
useEffect(() => {
if (brands.length > 0) {
const brand = brands.find((b) => b.id.toString() === brandId);
if (brand && brand.products) {
setProducts(brand.products);
}
}
}, [brands, brandId]);
const handleSort = (field) => { const handleSort = (field) => {
if (sortField === field) { if (sortField === field) {
@ -52,6 +45,11 @@ export default function ProductsList({ onShowProductDetail }) {
} }
}; };
if (status === 'loading') {
return <Spinning />;
}
return ( return (
<div className='products-list rounded shadow-xs'> <div className='products-list rounded shadow-xs'>
<Table responsive hover className='bg-white rounded overflow-hidden m-0'> <Table responsive hover className='bg-white rounded overflow-hidden m-0'>
@ -60,7 +58,7 @@ export default function ProductsList({ onShowProductDetail }) {
<th className='selector' style={{ width: '40px' }}> <th className='selector' style={{ width: '40px' }}>
<Form.Check <Form.Check
type='checkbox' type='checkbox'
checked={selectedProducts.length === products.length && products.length > 0} checked={selectedProducts.length === selectedBrand?.products?.length && selectedBrand?.products?.length > 0}
onChange={handleSelectAll} onChange={handleSelectAll}
/> />
</th> </th>
@ -94,14 +92,14 @@ export default function ProductsList({ onShowProductDetail }) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{products.length === 0 ? ( {selectedBrand?.products?.length === 0 ? (
<tr> <tr>
<td colSpan='10' className='text-center py-4'> <td colSpan='10' className='text-center py-4'>
No products found for this brand. No products found for this brand.
</td> </td>
</tr> </tr>
) : ( ) : (
products.map((product) => ( selectedBrand?.products?.map((product) => (
<tr key={product.id} className={selectedProducts.includes(product.id) ? 'selected' : ''}> <tr key={product.id} className={selectedProducts.includes(product.id) ? 'selected' : ''}>
<td> <td>
<Form.Check <Form.Check
@ -117,19 +115,19 @@ export default function ProductsList({ onShowProductDetail }) {
</div> </div>
</td> </td>
<td className='text-center' > <td className='text-center' >
<div>{product.commission}</div> <div>{product.commission_rate}</div>
<div className='small text-muted'>Open collab. {product.openCollab}</div> <div className='small text-muted'>Open collab. {product.open_collab}</div>
</td> </td>
<td className='text-center'>{product.availableSamples}</td> <td className='text-center'>{product.available_samples}</td>
<td className='text-center'>{product.price}</td> <td className='text-center'>{product.sales_price_min} - {product.sales_price_max}</td>
<td className='text-center'>{product.stock}</td> <td className='text-center'>{product.stock}</td>
<td className='text-center'>{product.sold}</td> <td className='text-center'>{product.items_sold}</td>
<td className='text-center'> <td className='text-center'>
<div>{product.rating}</div> <div>{product.product_rating}</div>
<div className='small text-muted'>{product.reviews} Reviews</div> <div className='small text-muted'>{product.reviews_count} Reviews</div>
</td> </td>
<td className='text-center'>{product.collabCreators}</td> <td className='text-center'>{product.collab_creators}</td>
<td className='text-center'>{product.tiktokShop && <FontAwesomeIcon icon='fa-brands fa-tiktok' />}</td> <td className='text-center'>{product.tiktok_shop && <FontAwesomeIcon icon='fa-brands fa-tiktok' />}</td>
</tr> </tr>
)) ))
)} )}

18
src/pages/BrandsDetail.jsx
View File

@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom'; import { Link, useParams } from 'react-router-dom';
import CampaignList from '../components/CampaignList'; import CampaignList from '../components/CampaignList';
import ProductsList from '../components/ProductsList'; import ProductsList from '../components/ProductsList';
import { findBrandById } from '../store/slices/brandsSlice'; import { findBrandById, fetchBrandCampaigns, fetchBrandProducts } from '../store/slices/brandsSlice';
export default function BrandsDetail() { export default function BrandsDetail() {
const { id } = useParams(); const { id } = useParams();
@ -16,9 +16,9 @@ export default function BrandsDetail() {
useEffect(() => { useEffect(() => {
if (id) { if (id) {
console.log(id);
dispatch(findBrandById(id)); dispatch(findBrandById(id));
dispatch(fetchBrandCampaigns(id));
dispatch(fetchBrandProducts(id));
} }
}, [dispatch, id]); }, [dispatch, id]);
@ -69,31 +69,31 @@ export default function BrandsDetail() {
<Hash size={20} /> <Hash size={20} />
Collab. Collab.
</div> </div>
<div className='info-value'>{selectedBrand.collab}</div> <div className='info-value'>{selectedBrand.collab_count}</div>
</div> </div>
<div className='info-item'> <div className='info-item'>
<div className='info-name'> <div className='info-name'>
<Users size={20} /> <Users size={20} />
Creators Creators
</div> </div>
<div className='info-value'>{selectedBrand.creators}</div> <div className='info-value'>{selectedBrand.creators_count}</div>
</div> </div>
</div> </div>
<div className='brand-info-bottom'> <div className='brand-info-bottom'>
<div className='info-item'> <div className='info-item'>
<div className='info-value'>{selectedBrand.collab}</div> <div className='info-value'>{selectedBrand.creators_count}</div>
<div className='info-name'>Total Collab. Creators</div> <div className='info-name'>Total Collab. Creators</div>
</div> </div>
<div className='info-item'> <div className='info-item'>
<div className='info-value'>{selectedBrand.collab}</div> <div className='info-value'>{selectedBrand.total_gmv_achieved}</div>
<div className='info-name'>Total GMV Achieved</div> <div className='info-name'>Total GMV Achieved</div>
</div> </div>
<div className='info-item'> <div className='info-item'>
<div className='info-value'>{selectedBrand.collab}</div> <div className='info-value'>{selectedBrand.total_views_achieved}</div>
<div className='info-name'>Total Views Achieved</div> <div className='info-name'>Total Views Achieved</div>
</div> </div>
<div className='info-item'> <div className='info-item'>
<div className='info-value'>{selectedBrand.collab}</div> <div className='info-value'>{selectedBrand.shop_overall_rating}</div>
<div className='info-name'>Shop Overall Rating</div> <div className='info-name'>Shop Overall Rating</div>
</div> </div>
</div> </div>

39
src/store/slices/brandsSlice.js
View File

@ -1,5 +1,5 @@
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import api from '@/services/api';
const mockProducts = [ const mockProducts = [
{ {
id: 1, id: 1,
@ -108,10 +108,19 @@ const mockBrands = [
export const fetchBrands = createAsyncThunk('brands/fetchBrands', async () => { export const fetchBrands = createAsyncThunk('brands/fetchBrands', async () => {
// const response = await fetch('https://api.example.com/brands'); // const response = await fetch('https://api.example.com/brands');
await new Promise((resolve) => setTimeout(resolve, 500)); const response = await api.get('/brands/');
console.log('fetchBrands'); return response.data;
});
return mockBrands; export const fetchBrandCampaigns = createAsyncThunk('brands/fetchBrandCampaigns', async (brandId) => {
const response = await api.get(`/brands/${brandId}/campaigns/`);
return response.data;
});
export const fetchBrandProducts = createAsyncThunk('brands/fetchBrandProducts', async (brandId) => {
const response = await api.get(`/brands/${brandId}/products/`);
console.log(response);
return response.data;
}); });
const initialState = { const initialState = {
@ -161,6 +170,28 @@ const brandsSlice = createSlice({
.addCase(fetchBrands.rejected, (state, action) => { .addCase(fetchBrands.rejected, (state, action) => {
state.status = 'failed'; state.status = 'failed';
state.error = action.error.message; state.error = action.error.message;
})
.addCase(fetchBrandCampaigns.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchBrandCampaigns.fulfilled, (state, action) => {
state.status = 'succeeded';
state.selectedBrand.campaigns = action.payload;
})
.addCase(fetchBrandCampaigns.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
})
.addCase(fetchBrandProducts.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchBrandProducts.fulfilled, (state, action) => {
state.status = 'succeeded';
state.selectedBrand.products = action.payload;
})
.addCase(fetchBrandProducts.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
}); });
}, },
}); });

3
src/styles/Brands.scss
View File

@ -8,7 +8,8 @@
gap: 1rem; gap: 1rem;
.brand-card { .brand-card {
width: 325px; flex: 1;
min-width: 325px;
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.4rem; border-radius: 0.4rem;
background-color: white; background-color: white;