Skip to content

Commit

Permalink
Merge pull request #347 from TogetherCrew/feat/premium-guilds
Browse files Browse the repository at this point in the history 
premium guilds
  • Loading branch information
@daniel-ospina
daniel-ospina authored Oct 23, 2024
2 parents 5b31e5a + a1d8813 commit 88fc66a
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 146 deletions.
162 changes: 90 additions & 72 deletions src/components/communitySettings/communityPlatforms/TcDiscordIntegrationSettingsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ import React, { useEffect, useState } from 'react';
import { AiOutlineClose } from 'react-icons/ai';
import { FiRefreshCcw } from 'react-icons/fi';
import { IoClose, IoSettingsSharp } from 'react-icons/io5';
import { MdExpandMore } from 'react-icons/md';
import { MdCalendarMonth, MdExpandMore } from 'react-icons/md';
import { MdChevronRight } from 'react-icons/md';
import { RiTimeLine } from 'react-icons/ri';

import TcCommunityPlatformIcon from './TcCommunityPlatformIcon';
import TcButton from '../../shared/TcButton';
import TcDatePickerPopover from '../../shared/TcDatePickerPopover';
import TcDialog from '../../shared/TcDialog';
import TcSwitch from '../../shared/TcSwitch';
import TcText from '../../shared/TcText';
Expand All @@ -29,6 +30,13 @@ import { truncateCenter } from '../../../helpers/helper';
import useAppStore from '../../../store/useStore';
import { IPlatformProps } from '../../../utils/interfaces';

export const PREMIUM_GUILDS = [
'732892373507375164', // fuel
'915914985140531240', // rndao
'980858613587382322',
'1007641784798691468',
];

interface TcDiscordIntegrationSettingsDialog {
platform: IPlatformProps;
handleUpdateCommunityPlatform: () => void;
Expand All @@ -48,10 +56,10 @@ function TcDiscordIntegrationSettingsDialog({
const [isAnalyizingDialogOpen, setIsAnalyizingDialogOpen] =
useState<boolean>(false);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false);
// const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const [dateTimeDisplay, setDateTimeDisplay] = useState<string>('Filter Date');

// const [selectedDate, setSelectedDate] = useState<Date | null>();
const [selectedDate, setSelectedDate] = useState<Date | null>(null);

const [selectedChannels, setSelectedChannels] = useState<string[]>([]);

Expand Down Expand Up @@ -98,12 +106,12 @@ function TcDiscordIntegrationSettingsDialog({
setDateTimeDisplay(newDateTimeDisplay);
}

// if (
// !selectedDate ||
// (selectedDate && period && selectedDate.toISOString() !== period)
// ) {
// setSelectedDate(new Date(period));
// }
if (
!selectedDate ||
(selectedDate && period && selectedDate.toISOString() !== period)
) {
setSelectedDate(new Date(period));
}
setLoading(true);
const data = await retrievePlatformProperties({
platformId: platform.id,
Expand Down Expand Up @@ -173,13 +181,15 @@ function TcDiscordIntegrationSettingsDialog({

const handlePatchDiscordIntegrationSettings = async () => {
try {
const period = PREMIUM_GUILDS.includes(platform?.metadata?.id)
? selectedDate?.toISOString()
: new Date(new Date().setDate(new Date().getDate() - 90)).toISOString();

const data = await patchPlatformById({
id: platform.id,
metadata: {
selectedChannels: selectedChannels,
period: new Date(
new Date().setDate(new Date().getDate() - 90)
).toISOString(),
period: period,
analyzerStartedAt: new Date().toISOString(),
},
});
Expand All @@ -189,7 +199,9 @@ function TcDiscordIntegrationSettingsDialog({
router.replace('/community-settings', {}, { shallow: true });
setIsAnalyizingDialogOpen(true);
}
} catch (error) {}
} catch (error) {
console.error('Error updating Discord integration settings:', error);
}
};

const handleDisconnectDiscordIntegration = async (
Expand Down Expand Up @@ -219,32 +231,32 @@ function TcDiscordIntegrationSettingsDialog({
}
};

// const datePickerOpen = Boolean(anchorEl);
// const id = open ? 'date-time-popover' : undefined;
const datePickerOpen = Boolean(anchorEl);
const id = open ? 'date-time-popover' : undefined;

// const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
// setAnchorEl(event.currentTarget);
// };
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};

// const handleDateChange = (date: Date | null) => {
// if (date) {
// setSelectedDate(date);
// const fullDateTime = moment(date);
// setDateTimeDisplay(fullDateTime.format('D MMMM YYYY'));
// setAnchorEl(null);
// }
// };
const handleDateChange = (date: Date | null) => {
if (date) {
setSelectedDate(date);
const fullDateTime = moment(date);
setDateTimeDisplay(fullDateTime.format('D MMMM YYYY'));
setAnchorEl(null);
}
};

// const handleClose = () => {
// setAnchorEl(null);
// };
const handleClose = () => {
setAnchorEl(null);
};

// const resetDateFilter = () => {
// setSelectedDate(null);
// setDateTimeDisplay('Filter Date');
const resetDateFilter = () => {
setSelectedDate(null);
setDateTimeDisplay('Filter Date');

// setAnchorEl(null);
// };
setAnchorEl(null);
};

return (
<>
Expand Down Expand Up @@ -303,46 +315,52 @@ function TcDiscordIntegrationSettingsDialog({
/>
</div>
</div>
<Alert severity='info' className='my-2 rounded-sm'>
<AlertTitle>Analyzing Your Community Data</AlertTitle>
<Typography variant='body2'>
We're currently analyzing 90 days of your community's data.
This process may take up to 6 hours. Once the analysis is
complete, you will receive a message on Discord.
</Typography>
</Alert>

{/* <div>
<TcText
text='Change date period for data analysis'
variant='subtitle1'
fontWeight='bold'
/>
<TcText
text='Choose the analysis start date (min. last 35 days for all the metrics to show properly).'
variant='body2'
/>
</div> */}
{/* <div className='w-1/2'>
<TcButton
className='w-full'
variant='outlined'
startIcon={<MdCalendarMonth />}
onClick={handleClick}
text={dateTimeDisplay}
aria-describedby={id}
/>
{PREMIUM_GUILDS.includes(platform?.metadata?.id) ? (
<>
<div>
<TcText
text='Change date period for data analysis'
variant='subtitle1'
fontWeight='bold'
/>
<TcText
text='Choose the analysis start date (min. last 35 days for all the metrics to show properly).'
variant='body2'
/>
</div>
<div className='w-1/2'>
<TcButton
className='w-full'
variant='outlined'
startIcon={<MdCalendarMonth />}
onClick={handleClick}
text={dateTimeDisplay}
aria-describedby={id}
/>

<TcDatePickerPopover
open={datePickerOpen}
anchorEl={anchorEl}
onClose={handleClose}
selectedDate={selectedDate}
onDateChange={handleDateChange}
onResetDate={resetDateFilter}
disableDaysFrom={30}
/>
</div>
</>
) : (
<Alert severity='info' className='my-2 rounded-sm'>
<AlertTitle>Analyzing Your Community Data</AlertTitle>
<Typography variant='body2'>
We're currently analyzing 90 days of your community's data.
This process may take up to 6 hours. Once the analysis is
complete, you will receive a message on Discord.
</Typography>
</Alert>
)}

<TcDatePickerPopover
open={datePickerOpen}
anchorEl={anchorEl}
onClose={handleClose}
selectedDate={selectedDate}
onDateChange={handleDateChange}
onResetDate={resetDateFilter}
disableDaysFrom={30}
/>
</div> */}
<div className='my-2 flex flex-col md:flex-row md:items-center md:justify-between'>
<div>
<TcText
Expand Down
57 changes: 37 additions & 20 deletions src/components/pages/pageIndex/HeatmapChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { FaDiscord, FaEnvelope, FaTelegram, FaXTwitter } from 'react-icons/fa6';
import { FiCalendar } from 'react-icons/fi';
import 'moment-timezone';

import { PREMIUM_GUILDS } from '../../communitySettings/communityPlatforms/TcDiscordIntegrationSettingsDialog';
import FilterByChannels from '../../global/FilterByChannels';
import Loading from '../../global/Loading';
import RangeSelect from '../../global/RangeSelect';
Expand Down Expand Up @@ -54,19 +55,19 @@ const HeatmapChart = () => {

const { community } = useToken();

const platformId = community?.platforms.find(
const platform = community?.platforms.find(
(platform) =>
platform.disconnectedAt === null && platform.name === 'discord'
)?.id;
);

const fetchData = async () => {
if (showOverlay) return;

setLoading(true);
try {
if (platformId) {
if (platform?.id) {
const data = await fetchHeatmapData(
platformId,
platform.id,
dateRange[0],
dateRange[1],
selectedZone,
Expand Down Expand Up @@ -139,6 +140,16 @@ const HeatmapChart = () => {
const handleDateRange = (dateRangeType: number): void => {
let endDate: moment.Moment = moment().subtract(1, 'day');
let startDate: moment.Moment = moment(endDate).subtract(7, 'days');
const isPremiumGuild =
platform?.metadata?.id && PREMIUM_GUILDS.includes(platform.metadata.id);

const handleNonPremiumLoading = () => {
setShowOverlay(true);
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 300);
};

switch (dateRangeType) {
case 1:
Expand All @@ -161,20 +172,26 @@ const HeatmapChart = () => {
break;
case 4:
setActiveDateRange(dateRangeType);
setShowOverlay(true);
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 300);
if (isPremiumGuild) {
startDate = moment(endDate).subtract(6, 'months');
endDate = moment().subtract(1, 'day');
setShowOverlay(false);
} else {
handleNonPremiumLoading();
}
break;

case 5:
setActiveDateRange(dateRangeType);
setShowOverlay(true);
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 300);
if (isPremiumGuild) {
startDate = moment(endDate).subtract(12, 'months');
endDate = moment().subtract(1, 'day');
setShowOverlay(false);
} else {
handleNonPremiumLoading();
}
break;

default:
break;
}
Expand All @@ -195,14 +212,14 @@ const HeatmapChart = () => {

const fetchPlatformChannels = async () => {
try {
if (platformId) {
const data = await retrievePlatformById(platformId);
if (platform?.id) {
const data = await retrievePlatformById(platform.id);
const { metadata } = data;
if (metadata) {
const { selectedChannels } = metadata;
await refreshData(platformId, 'channel', selectedChannels, true);
await refreshData(platform.id, 'channel', selectedChannels, true);
} else {
await refreshData(platformId);
await refreshData(platform.id);
}
setPlatformFetched(true);
}
Expand All @@ -212,11 +229,11 @@ const HeatmapChart = () => {
};

useEffect(() => {
if (!platformId || showOverlay) {
if (!platform?.id || showOverlay) {
return;
}
fetchData();
}, [dateRange, selectedZone, platformId, platformFetched]);
}, [dateRange, selectedZone, platform?.id, platformFetched]);

return (
<div className='min-h-[400px] rounded-lg bg-white p-5 shadow-box'>
Expand Down
12 changes: 6 additions & 6 deletions src/components/pages/statistics/ActiveMembersComposition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { SeriesData, StatisticsProps } from '../../../utils/interfaces';

export interface ActiveMembersComposition {
activePeriod: number;
isPremiumGuild: boolean;
handleDateRange: (range: number) => void;
}

Expand Down Expand Up @@ -62,6 +63,7 @@ const defaultOptions = {

export default function ActiveMembersComposition({
activePeriod,
isPremiumGuild = false,
handleDateRange,
}: ActiveMembersComposition) {
const router = useRouter();
Expand Down Expand Up @@ -254,12 +256,10 @@ export default function ActiveMembersComposition({
};

useEffect(() => {
if (activePeriod === 4 || activePeriod === 5) {
setShowOverlay(true);
} else {
setShowOverlay(false);
}
}, [activePeriod]);
const shouldShowOverlay =
!isPremiumGuild && (activePeriod === 4 || activePeriod === 5);
setShowOverlay(shouldShowOverlay);
}, [activePeriod, isPremiumGuild]);

return (
<>
Expand Down
Loading

0 comments on commit 88fc66a

Please sign in to comment.