Skip to content

Commit 54748f1

Browse files
MaphikzaMaphikza
committed
Refactor: Rename TrendingCreators to PaidSubscribers for better semantic clarity
1 parent 5500ab1 commit 54748f1

9 files changed

Lines changed: 604 additions & 6 deletions

File tree

‎src/components/relay-dashboard/paid-subscribers/PaidSubscribers.styles.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import styled from 'styled-components';
2+
import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
3+
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
4+
import { BREAKPOINTS, media } from '@app/styles/themes/constants';
5+
6+
export const StoriesModal = styled(BaseModal)`
7+
@media only screen and (max-width: ${BREAKPOINTS.md - 0.02}px) {
8+
top: 0;
9+
padding: 0;
10+
margin: 0;
11+
max-width: 100%;
12+
}
13+
14+
.ant-modal-body {
15+
padding: 0;
16+
}
17+
18+
.ant-modal-close {
19+
z-index: 999999;
20+
top: 1rem;
21+
22+
color: var(--text-secondary-color);
23+
}
24+
`;
25+
26+
export const ArrowBtn = styled(BaseButton)`
27+
color: var(--text-nft-light-color);
28+
`;
29+
30+
export const CardWrapper = styled.div`
31+
margin: 0 0.40625rem;
32+
33+
@media only screen and ${media.xl} {
34+
margin: 0 0.625rem;
35+
}
36+
`;
37+
38+
export const EmptyState = styled.div`
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
padding: 2rem;
43+
color: var(--text-light-color);
44+
font-size: 1rem;
45+
`;

‎src/components/relay-dashboard/paid-subscribers/PaidSubscribers.tsx‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import React, { useRef, useState } from 'react';
2+
import { Splide, SplideSlide, SplideTrack } from '@splidejs/react-splide';
3+
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
4+
import { useTranslation } from 'react-i18next';
5+
import { NFTCardHeader } from '@app/components/relay-dashboard/common/NFTCardHeader/NFTCardHeader';
6+
import { ViewAll } from '@app/components/relay-dashboard/common/ViewAll/ViewAll';
7+
import { SubscriberAvatar } from '@app/components/relay-dashboard/paid-subscribers/avatar/SubscriberAvatar';
8+
import { SubscriberDetailModal } from './SubscriberDetailModal/SubscriberDetailModal';
9+
import * as S from './PaidSubscribers.styles';
10+
import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
11+
import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
12+
import { SplideCarousel } from '@app/components/common/SplideCarousel/SplideCarousel';
13+
import { useResponsive } from '@app/hooks/useResponsive';
14+
import usePaidSubscribers, { SubscriberProfile } from '@app/hooks/usePaidSubscribers';
15+
import { Row, Col } from 'antd';
16+
17+
export const PaidSubscribers: React.FC = () => {
18+
console.log('[PaidSubscribers] Component rendering...');
19+
const hookResult = usePaidSubscribers(12);
20+
const { subscribers } = hookResult;
21+
22+
// Modal state for subscriber details
23+
const [selectedSubscriber, setSelectedSubscriber] = useState<SubscriberProfile | null>(null);
24+
const [isModalVisible, setIsModalVisible] = useState(false);
25+
26+
// Handle opening subscriber detail modal
27+
const handleOpenSubscriberDetails = (subscriber: SubscriberProfile) => {
28+
setSelectedSubscriber(subscriber);
29+
setIsModalVisible(true);
30+
};
31+
32+
// Handle closing subscriber detail modal
33+
const handleCloseModal = () => {
34+
setIsModalVisible(false);
35+
};
36+
37+
console.log('[PaidSubscribers] Received subscribers:', subscribers);
38+
console.log('[PaidSubscribers] Complete hook result:', hookResult);
39+
40+
const sliderRef = useRef<Splide>(null);
41+
const { isTablet: isTabletOrHigher } = useResponsive();
42+
const { t } = useTranslation();
43+
44+
const goPrev = () => {
45+
if (sliderRef.current?.splide) {
46+
sliderRef.current.splide.go('-1');
47+
}
48+
};
49+
50+
const goNext = () => {
51+
if (sliderRef.current?.splide) {
52+
sliderRef.current.splide.go('+1');
53+
}
54+
};
55+
56+
// Determine whether to use carousel with looping based on count
57+
const shouldUseLoop = subscribers.length >= 7;
58+
59+
// Simple grid for few subscribers
60+
if (subscribers.length > 0 && subscribers.length < 7) {
61+
return (
62+
<>
63+
<NFTCardHeader title={t('nft.paidSubs')}>
64+
<BaseRow align="middle">
65+
<BaseCol>
66+
<ViewAll bordered={false} />
67+
</BaseCol>
68+
</BaseRow>
69+
</NFTCardHeader>
70+
71+
<Row gutter={[16, 16]} style={{ padding: '0 10px' }}>
72+
{subscribers.map((subscriber: SubscriberProfile) => (
73+
<Col key={subscriber.pubkey} xs={6} sm={4} md={3} lg={3} xl={2}>
74+
<S.CardWrapper>
75+
<SubscriberAvatar
76+
onStoryOpen={() => handleOpenSubscriberDetails(subscriber)}
77+
img={subscriber.picture}
78+
viewed={false}
79+
/>
80+
</S.CardWrapper>
81+
</Col>
82+
))}
83+
</Row>
84+
85+
<SubscriberDetailModal
86+
subscriber={selectedSubscriber}
87+
isVisible={isModalVisible}
88+
onClose={handleCloseModal}
89+
/>
90+
</>
91+
);
92+
}
93+
94+
// Carousel view for 7+ subscribers
95+
return (
96+
<>
97+
<SplideCarousel
98+
ref={sliderRef}
99+
type={shouldUseLoop ? "loop" : undefined}
100+
drag="free"
101+
gap=".2rem"
102+
snap="false"
103+
autoSpeed={isTabletOrHigher ? 0.7 : 0.8}
104+
flickPower="500"
105+
breakpoints={{
106+
8000: {
107+
perPage: 10,
108+
},
109+
1920: {
110+
perPage: 10,
111+
},
112+
1600: {
113+
perPage: 8,
114+
},
115+
850: {
116+
perPage: 7,
117+
},
118+
768: {
119+
perPage: 4,
120+
},
121+
}}
122+
>
123+
<NFTCardHeader title={t('nft.paidSubs')}>
124+
<BaseRow align="middle">
125+
<BaseCol>
126+
<ViewAll bordered={false} />
127+
</BaseCol>
128+
129+
{isTabletOrHigher && subscribers.length > 1 && (
130+
<>
131+
<BaseCol>
132+
<S.ArrowBtn type="text" size="small" onClick={goPrev}>
133+
<LeftOutlined />
134+
</S.ArrowBtn>
135+
</BaseCol>
136+
137+
<BaseCol>
138+
<S.ArrowBtn type="text" size="small" onClick={goNext}>
139+
<RightOutlined />
140+
</S.ArrowBtn>
141+
</BaseCol>
142+
</>
143+
)}
144+
</BaseRow>
145+
</NFTCardHeader>
146+
<SplideTrack>
147+
{subscribers.map((subscriber: SubscriberProfile) => (
148+
<SplideSlide key={subscriber.pubkey}>
149+
<S.CardWrapper>
150+
<SubscriberAvatar
151+
onStoryOpen={() => handleOpenSubscriberDetails(subscriber)}
152+
img={subscriber.picture}
153+
viewed={false}
154+
/>
155+
</S.CardWrapper>
156+
</SplideSlide>
157+
))}
158+
</SplideTrack>
159+
</SplideCarousel>
160+
161+
<SubscriberDetailModal
162+
subscriber={selectedSubscriber}
163+
isVisible={isModalVisible}
164+
onClose={handleCloseModal}
165+
/>
166+
</>
167+
);
168+
};
169+
170+
export default PaidSubscribers;

0 commit comments

Comments
 (0)