Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development #377

Merged
merged 12 commits into from
Jan 20, 2025
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import TcGdriveIntegration from './TcGdriveIntegration';
import TcGithubIntegration from './TcGithubIntegration';
import TcMediaWiki from './TcMediaWiki';
import TcNotionIntegration from './TcNotionIntegration';
import TcTelegram from './TcTelegram/TcTelegram';
import TcButton from '../../shared/TcButton';
import TcCard from '../../shared/TcCard';
import TcText from '../../shared/TcText';
Expand Down Expand Up @@ -66,13 +67,14 @@ function TcCommunityPlatforms() {
const communityId =
StorageService.readLocalStorage<IDiscordModifiedCommunity>('community')?.id;

const fetchPlatformsByType = async () => {
const fetchPlatformsByType = async () => {
const platformNames = [
'discord',
'github',
'discourse',
'notion',
'mediaWiki',
'telegram',
'google',
];

Expand Down Expand Up @@ -203,6 +205,7 @@ function TcCommunityPlatforms() {
'Github',
'Notion',
'MediaWiki',
'Telegram',
].includes(platform)
? 'bg-white'
: 'bg-white text-black'
Expand All @@ -228,6 +231,7 @@ function TcCommunityPlatforms() {
'Github',
'Notion',
'MediaWiki',
'Telegram',
].includes(platform)
}
{...a11yProps(index)}
Expand Down Expand Up @@ -282,6 +286,15 @@ function TcCommunityPlatforms() {
)}
{activeTab === 5 && (
<TabPanel value={activeTab} index={5}>
<TcTelegram
isLoading={isLoading}
connectedPlatforms={platforms}
handleUpdateCommunityPlatform={handleUpdateCommunityPlatform}
/>
</TabPanel>
)}
{activeTab === 6 && (
<TabPanel value={activeTab} index={6}>
<TcGdriveIntegration
isLoading={isLoading}
connectedPlatforms={platforms}
Expand All @@ -305,7 +318,7 @@ function TcCommunityPlatforms() {
className='max-h-[6rem] min-h-[6rem] min-w-[10rem] max-w-[10rem] flex-grow'
children={
<div className='flex flex-col items-center justify-center space-y-2 py-4'>
<TcText text='Hivemind' variant='subtitle1' fontWeight='bold' />
<TcText text='Q&A AI assistant' variant='subtitle1' fontWeight='bold' />
<TcButton
text={
hivemindManageIsLoading ? (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import { Button, Paper, Stack } from '@mui/material';
import { BiPlus } from 'react-icons/bi';

import { IntegrationPlatform } from '@/utils/enums';
import { IPlatformProps } from '@/utils/interfaces';

import TcCommunityPlatformIcon from './TcCommunityPlatformIcon';

interface TcConnectPlatformButtonProps {
platform: IntegrationPlatform;
connectedPlatforms: IPlatformProps[];
handleConnectPlatform: () => void;
}

function TcConnectPlatformButton({
platform,
connectedPlatforms,
handleConnectPlatform,
}: TcConnectPlatformButtonProps) {

return (
<Paper className='flex h-[6rem] w-[10rem] flex-col items-center justify-center rounded-sm py-2 shadow-none'>
<Stack
className='pb-1'
sx={{
backgroundColor: 'transparent',
color: 'inherit',
}}
>
<TcCommunityPlatformIcon platform={platform} />
</Stack>
<Button
className='text-sm'
startIcon={<BiPlus />}
onClick={handleConnectPlatform}
disabled={connectedPlatforms?.length > 0}
>
Connect
</Button>
</Paper>
);
}

export default TcConnectPlatformButton;
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
import {
Button,
Dialog,
IconButton,
Typography,
} from '@mui/material';
import { AiOutlineClose } from 'react-icons/ai';

interface TcDisconnectPlatformProps {
open: boolean;
handleClose: () => void;
handleDisconnect: (type: 'hard' | 'soft') => void;
}

function TcDisconnectPlatform({
open,
handleClose,
handleDisconnect,
}: TcDisconnectPlatformProps) {
const handleDisconnectPlatform = (type: 'hard' | 'soft') => {
handleDisconnect(type);
};

return (
<Dialog
open={open}
onClose={handleClose}
fullWidth
sx={{
'& .MuiDialog-container': {
'& .MuiPaper-root': {
width: '100%',
maxWidth: '640px',
borderRadius: '10px',
},
},
}}
>
<div className='flex justify-end p-4'>
<IconButton aria-label='close-disconnect-dialog' onClick={handleClose}>
<AiOutlineClose className='cursor-pointer' size={24} />
</IconButton>
</div>
<div className='px-4 text-center md:px-8'>
<div className='mx-auto text-center md:w-4/5'>
<Typography variant='h6'>
Are you sure you want to disconnect?
</Typography>
</div>
<div className='flex flex-col justify-between space-y-4 pb-8 md:flex-row md:space-x-5 md:space-y-0 md:py-12'>
<div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
<Typography variant='body1' fontWeight='bold'>
Disconnect and delete data
</Typography>
<Typography variant='body2' textAlign='left'>
Importing new data will be stopped. Already imported and analyzed
data <b>will be deleted.</b>
</Typography>
<Button
variant='contained'
fullWidth
disableElevation
onClick={() => handleDisconnectPlatform('hard')}
>
Disconnect and delete
</Button>
</div>
Comment on lines +60 to +68
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add confirmation step for destructive action.

The "Disconnect and delete data" action is destructive and should require additional confirmation to prevent accidental data loss.

Consider implementing a two-step confirmation process:

+  const [confirmHardDisconnect, setConfirmHardDisconnect] = useState(false);
+
   const handleDisconnectPlatform = (type: 'hard' | 'soft') => {
+    if (type === 'hard' && !confirmHardDisconnect) {
+      setConfirmHardDisconnect(true);
+      return;
+    }
+    setConfirmHardDisconnect(false);
     handleDisconnect(type);
   };

   // In the button section:
   <Button
     variant='contained'
     fullWidth
     disableElevation
     onClick={() => handleDisconnectPlatform('hard')}
+    color={confirmHardDisconnect ? 'error' : 'primary'}
   >
-    Disconnect and delete
+    {confirmHardDisconnect ? 'Click again to confirm deletion' : 'Disconnect and delete'}
   </Button>

Committable suggestion skipped: line range outside the PR's diff.

<div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
<Typography variant='body1' fontWeight='bold'>
Disconnect only
</Typography>
<Typography textAlign='left' variant='body2'>
<span>
Importing new data will be stopped. Already imported and
analyzed data <b>will be kept.</b>
</span>
</Typography>
<Button
variant='contained'
fullWidth
disableElevation
onClick={() => handleDisconnectPlatform('soft')}
>
Disconnect
</Button>
</div>
</div>
</div>
</Dialog>
);
}

export default TcDisconnectPlatform;
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,27 @@ function TcDiscordIntegrationSettingsDialog({
onClick={() => handlePatchDiscordIntegrationSettings()}
/>
</div>
<Typography variant='body1' pt={2} color='textSecondary'>
Need help? View our{' '}
<a
href='https://togethercrew.gitbook.io/onboarding/fundamentals/adding-platforms/discord'
target='_blank'
rel='noreferrer'
className='text-secondary underline'
>
documentation
</a>{' '}
or contact our{' '}
<a
href='https://www.togethercrew.com/contact-us'
target='_blank'
rel='noreferrer'
className='text-secondary underline'
>
support team
</a>
.
</Typography>
</div>
</TcDialog>
<TcDialog
Expand Down
53 changes: 38 additions & 15 deletions src/components/communitySettings/communityPlatforms/TcDiscourse.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -261,20 +261,43 @@ function TcDiscourse({
)}
</div>
{!activePlatform && (
<div className='flex items-center justify-between px-5'>
<TcButton
className='w-1/3'
text='Cancel'
variant='outlined'
onClick={() => setIsOpen(false)}
/>
<TcButton
className='w-1/3'
text={isCreatePlatformLoading ? 'Confirming...' : 'Confirm'}
variant='contained'
disabled={!!urlError || !url || isCreatePlatformLoading}
onClick={handleCreateNewPlatform}
/>
<div className='px-5'>
<div className='flex items-center justify-between'>
<TcButton
className='w-1/3'
text='Cancel'
variant='outlined'
onClick={() => setIsOpen(false)}
/>
<TcButton
className='w-1/3'
text={isCreatePlatformLoading ? 'Confirming...' : 'Confirm'}
variant='contained'
disabled={!!urlError || !url || isCreatePlatformLoading}
onClick={handleCreateNewPlatform}
/>
</div>
<Typography variant='body1' pt={2} color='textSecondary'>
Need help? View our{' '}
<a
href='https://togethercrew.gitbook.io/onboarding/fundamentals/adding-platforms/discourse'
target='_blank'
rel='noreferrer'
className='text-secondary underline'
>
documentation
</a>{' '}
or contact our{' '}
<a
href='https://www.togethercrew.com/contact-us'
target='_blank'
rel='noreferrer'
className='text-secondary underline'
>
support team
</a>
.
</Typography>
</div>
)}
</div>
Expand Down Expand Up @@ -303,7 +326,7 @@ function TcDiscourse({
<div className='mx-auto text-center md:w-4/5'>
<TcText text='Are you sure you want to disconnect?' variant='h6' />
</div>
<div className='flex flex-col justify-between space-y-4 pb-8 md:flex-row md:space-y-0 md:space-x-5 md:py-12'>
<div className='flex flex-col justify-between space-y-4 pb-8 md:flex-row md:space-x-5 md:space-y-0 md:py-12'>
<div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
<TcText
text='Disconnect and delete data'
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React, { useState } from 'react';
import { Paper } from '@mui/material';
import { IoSettingsSharp } from 'react-icons/io5';

import TcAvatar from '@/components/shared/TcAvatar';
import TcButton from '@/components/shared/TcButton';

import useAppStore from '@/store/useStore';

import { useSnackbar } from '@/context/SnackbarContext';
import { truncateCenter } from '@/helpers/helper';
import { IPlatformProps } from '@/utils/interfaces';

import TcConnectedTelegramDialog from './TcConnectedTelegramDialog';
import TcDisconnectPlatform from '../TcDisconnectPlatform';

interface TcConnectedTelegramProps {
platforms: IPlatformProps[];
handleUpdateCommunityPlatform: () => void;
}

const TcConnectedTelegram: React.FC<TcConnectedTelegramProps> = ({
platforms,
handleUpdateCommunityPlatform,
}) => {
const { deletePlatform, setTelegram } = useAppStore();
const { showMessage } = useSnackbar();
const [openDialog, setOpenDialog] = useState<boolean>(false);
const [openDisconnectDialog, setOpenDisconnectDialog] =
useState<boolean>(false);

const handleOpenDisconnectDialog = () => {
setOpenDialog(false);
setOpenDisconnectDialog(true);
};

const handleDisconnectPlatform = async (type: 'hard' | 'soft') => {
try {
const data = await deletePlatform({
id: platforms[0]?.id,
deleteType: type,
});
if (data === '') {
showMessage('Platform disconnected successfully.', 'success');
setOpenDisconnectDialog(false);
handleUpdateCommunityPlatform();
setTelegram({
value: null,
expiresAt: null,
});
}
} catch (error) {
showMessage('Error disconnecting platform.', 'error');
}
};

return (
<div className='flex flex-row space-x-3'>
{platforms &&
platforms[0]?.name === 'telegram' &&
platforms.map((platform, index) => (
<Paper
className='flex h-[6rem] w-[10rem] flex-col items-center justify-center space-y-1.5 overflow-hidden rounded-sm py-2 shadow-none'
key={index}
>
<TcAvatar sizes='small' />
<TcButton
text={truncateCenter(platform?.metadata?.chat?.title, 14)}
className='w-10/12'
variant='text'
color='primary'
startIcon={<IoSettingsSharp />}
onClick={() => setOpenDialog(true)}
/>
</Paper>
))}
<TcConnectedTelegramDialog
platform={platforms[0]}
open={openDialog}
handleClose={() => {
setOpenDialog(false);
handleUpdateCommunityPlatform();
}}
handleDisconnect={handleOpenDisconnectDialog}
/>
<TcDisconnectPlatform
open={openDisconnectDialog}
handleClose={() => setOpenDisconnectDialog(false)}
handleDisconnect={handleDisconnectPlatform}
/>
</div>
);
};

export default TcConnectedTelegram;
Loading
Loading