From 19b698538823dcf24a36287880018faa914f9ee5 Mon Sep 17 00:00:00 2001 From: zuies Date: Thu, 30 Nov 2023 12:07:41 +0300 Subject: [PATCH] remove old routes --- src/pages/settings.tsx | 161 -------- src/pages/tryNow.tsx | 845 ----------------------------------------- 2 files changed, 1006 deletions(-) delete mode 100644 src/pages/settings.tsx delete mode 100644 src/pages/tryNow.tsx diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx deleted file mode 100644 index 86d5d0cf..00000000 --- a/src/pages/settings.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import SEO from '../components/global/SEO'; -import { defaultLayout } from '../layouts/defaultLayout'; -import { FiCalendar } from 'react-icons/fi'; -import { FaHashtag, FaCodeBranch, FaRegCheckCircle } from 'react-icons/fa'; -import Accardion from '../components/global/Accardion'; -import { Paper, TextField } from '@mui/material'; -import CustomButton from '../components/global/CustomButton'; -import ChannelSelection from '../components/pages/settings/ChannelSelection'; -import IntegrateDiscord from '../components/pages/settings/IntegrateDiscord'; -import { HiOutlineMail } from 'react-icons/hi'; -import DataAnalysis from '../components/pages/settings/DataAnalysis'; -import useAppStore from '../store/useStore'; -import SimpleBackdrop from '../components/global/LoadingBackdrop'; -import { useRouter } from 'next/router'; -import { StorageService } from '../services/StorageService'; -import { IUser } from '../utils/types'; - -function Settings(): JSX.Element { - const { - isLoading, - userInfo, - getUserInfo, - changeEmail, - getUserGuildInfo, - fetchGuildChannels, - getGuilds, - } = useAppStore(); - - const [emailAddress, setEmailAddress] = useState(''); - const [isEmailUpdated, setEmailUpdated] = useState(false); - - const router = useRouter(); - - useEffect(() => { - const user = StorageService.readLocalStorage('user'); - if (user) { - const { token } = user; - if (!token.accessToken) { - router.replace('/tryNow'); - } - } else { - router.replace('/tryNow'); - } - }, []); - - useEffect(() => { - fetchEmail(); - const intervalId = setInterval(() => { - getGuilds(); - }, 5000); - - // Clean up the interval when the component unmounts - return () => clearInterval(intervalId); - }, []); - - const fetchEmail = async () => { - await getUserInfo().then((_res: any) => { - setEmailAddress(_res?.email); - }); - }; - - if (typeof window !== 'undefined') { - useEffect(() => { - if (Object.keys(router?.query).length > 0 && router.query.isSuccessful) { - const { guildId } = router?.query; - fetchGuildChannels(guildId); - getUserGuildInfo(guildId); - } - }, [router]); - } - - useEffect(() => { - const user = StorageService.readLocalStorage('user'); - - if (user) { - const { guildId } = user.guild; - if (guildId) { - fetchGuildChannels(guildId); - getUserGuildInfo(guildId); - } - } - }, []); - - const updateEmailAddress = () => { - changeEmail(emailAddress).then((res: any) => { - setEmailUpdated(true); - }); - }; - - const CommunityItems = [ - { - title: 'Change date period for data analysis', - icon: , - detailsComponent: , - id: '1', - }, - { - title: 'Change your imported channels', - icon: , - detailsComponent: , - id: '2', - }, - { - title: 'Integration', - icon: , - detailsComponent: , - id: '3', - }, - ]; - - const personalItems = [ - { - title: 'Email', - icon: , - detailsComponent: ( -
- setEmailAddress(e.target.value)} - /> - : ''} - disabled={emailAddress === userInfo.email} - label={isEmailUpdated ? 'Email saved' : 'Save email'} - onClick={() => updateEmailAddress()} - /> -
- ), - id: '1', - }, - ]; - - return ( - <> - - {isLoading ? ( - - ) : ( -
- -

Settings

- - - -
- )} - - ); -} - -Settings.pageLayout = defaultLayout; - -export default Settings; diff --git a/src/pages/tryNow.tsx b/src/pages/tryNow.tsx deleted file mode 100644 index ed0f3039..00000000 --- a/src/pages/tryNow.tsx +++ /dev/null @@ -1,845 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import StepConnector, { - stepConnectorClasses, -} from '@mui/material/StepConnector'; -import { StepIconProps } from '@mui/material/StepIcon'; -import { IoClose } from 'react-icons/io5'; -import { BiError } from 'react-icons/bi'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Dialog, - Button, - Checkbox, - FormControlLabel, - TextField, -} from '@mui/material'; -import { useEffect, useState } from 'react'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import SEO from '../components/global/SEO'; -import clsx from 'clsx'; -import CustomButton from '../components/global/CustomButton'; -import useAppStore from '../store/useStore'; -import ChannelList from '../components/pages/login/ChannelList'; -import moment from 'moment'; -import SimpleBackdrop from '../components/global/LoadingBackdrop'; -import tclogo from '../assets/svg/tc-logo.svg'; -import Image from 'next/image'; -import { StorageService } from '../services/StorageService'; -import { FaDiscord } from 'react-icons/fa'; -import { FiRefreshCcw } from 'react-icons/fi'; -import Loading from '../components/global/Loading'; -import { MdExpandMore } from 'react-icons/md'; -import { IGuildChannels, ISubChannels, IUser } from '../utils/types'; -import * as amplitude from '@amplitude/analytics-browser'; -import { - setAmplitudeUserIdFromToken, - trackAmplitudeEvent, -} from '../helpers/amplitudeHelper'; - -const ColorlibConnector = styled(StepConnector)(() => ({ - [`&.${stepConnectorClasses.alternativeLabel}`]: { - top: 22, - }, - [`&.${stepConnectorClasses.active}`]: { - [`& .${stepConnectorClasses.line}`]: { - backgroundColor: '#804EE1', - }, - }, - [`&.${stepConnectorClasses.completed}`]: { - [`& .${stepConnectorClasses.line}`]: { - backgroundColor: '#804EE1', - }, - }, - [`& .${stepConnectorClasses.line}`]: { - height: 6, - border: 0, - backgroundColor: '#F5F5F5', - borderRadius: 1, - }, -})); - -const VerticalColorlibConnector = styled(StepConnector)(() => ({ - [`&.${stepConnectorClasses.active}`]: { - [`& .${stepConnectorClasses.line}`]: { - backgroundColor: '#804EE1', - }, - }, - [`&.${stepConnectorClasses.completed}`]: { - [`& .${stepConnectorClasses.line}`]: { - backgroundColor: '#804EE1', - }, - }, - [`& .${stepConnectorClasses.line}`]: { - marginTop: '-8px', - marginBottom: '-8px', - marginLeft: '8px', - minHeight: 'calc(24px + 1.5rem)', - borderLeftWidth: '6px', - borderColor: '#F5F5F5', - }, -})); - -const ColorlibStepIconRoot = styled('div')<{ - ownerState: { completed?: boolean; active?: boolean }; -}>(({ ownerState }) => ({ - backgroundColor: '#FFFFFF', - zIndex: 1, - color: '#222222', - fontWeight: 'bold', - width: 50, - height: 50, - fontSize: '27px', - display: 'flex', - borderRadius: '50%', - justifyContent: 'center', - alignItems: 'center', - boxShadow: '0px 5px 15px rgba(0, 0, 0, 0.2)', - ...(ownerState.active && { - border: 'solid 4px #804EE1', - }), - ...(ownerState.completed && { - backgroundColor: '#804EE1', - color: 'white', - }), -})); - -function ColorlibStepIcon(props: StepIconProps) { - const { active, completed, className } = props; - - const icons: { [index: string]: number } = { - 1: 1, - 2: 2, - 3: 3, - }; - - return ( - - {icons[String(props.icon)]} - - ); -} - -const steps = [ - <> - Connect your Discord community - , - <> - Select time period and channels you want to be analysed - , - <> - Begin data import - , -]; - -type dateItems = { - title: string; - icon?: JSX.Element; - value: any; -}; -const datePeriod: dateItems[] = [ - { - title: 'Last 35 days', - value: 1, - }, - { - title: '3M', - value: 2, - }, - { - title: '6M', - value: 3, - }, - { - title: '1Y', - value: 4, - }, -]; - -export default function TryNow() { - const router = useRouter(); - const [open, setOpen] = useState(false); - const [fullWidth, setFullWidth] = React.useState(true); - const [activeStep, setActiveStep] = useState(-1); - const [activePeriod, setActivePeriod] = useState(1); - const [emailAddress, setEmailAddress] = useState(''); - const [isTermsChecked, setTermsCheck] = useState(false); - const [guild, setGuild] = useState(''); - const [selectedPeriod, setSelectedPeriod] = useState(''); - const [channels, setChannels] = useState>([]); - const [selectedChannels, setSelectedChannels] = useState>([]); - const [tryNowState, setTryNowState] = useState<'active' | 'passive'>( - 'active' - ); - const { - isLoading, - signUp, - login, - loginWithDiscord, - fetchGuildChannels, - guildChannels, - changeEmail, - updateGuildById, - isRefetchLoading, - refetchGuildChannels, - } = useAppStore(); - - useEffect(() => { - const channels = guildChannels.map((guild: any, index: any) => { - const selected: Record = {}; - guild.subChannels.forEach((subChannel: any) => { - if (subChannel.canReadMessageHistoryAndViewChannel) { - selected[subChannel.channelId] = true; - } else { - selected[subChannel.channelId] = false; - } - }); - - return { ...guild, selected: selected }; - }); - - const subChannelsStatus = channels.map((channel: any) => { - return channel.selected; - }); - - const selectedChannelsStatus = Object.assign({}, ...subChannelsStatus); - let activeChannel: string[] = []; - for (const key in selectedChannelsStatus) { - if (selectedChannelsStatus[key]) { - activeChannel.push(key); - } - } - - const result = [].concat( - ...channels.map((channel: any) => { - return channel.subChannels - .filter((subChannel: ISubChannels) => { - if (activeChannel.includes(subChannel.channelId)) { - return subChannel; - } - }) - .map((filterdItem: any) => { - return { - channelId: filterdItem.channelId, - channelName: filterdItem.name, - }; - }); - }) - ); - setSelectedChannels(result); - - setChannels(channels); - }, [guildChannels]); - - const onChange = ( - channelId: string, - subChannelId: string, - status: boolean - ) => { - setChannels((preChannels) => { - return preChannels.map((preChannel) => { - if (preChannel.channelId !== channelId) return preChannel; - - const selected = preChannel.selected; - selected[subChannelId] = status; - - return { ...preChannel, selected }; - }); - }); - }; - const handleCheckAll = (guild: IGuildChannels, status: boolean) => { - const selectedGuild = channels.filter( - (channel: any) => channel.channelId === guild.channelId - )[0].channelId; - - setChannels((preChannels) => { - return preChannels.map((preChannel) => { - if (selectedGuild === preChannel.channelId) { - Object.keys(preChannel.selected).forEach((key: any) => { - preChannel.selected[key] = status; - }); - } - return preChannel; - }); - }); - }; - - if (typeof window !== 'undefined') { - useEffect(() => { - if (Object.keys(router?.query).length > 0 && router.query.statusCode) { - if (router.query.statusCode === '501') { - fetchGuildChannels(router.query.guildId); - setActiveStep(1); - const { - accessToken, - accessExp, - guildId, - guildName, - refreshExp, - refreshToken, - } = Object.assign({}, router.query); - setGuild(guildId); - loginWithDiscord({ - accessToken, - accessExp, - guildId, - guildName, - refreshExp, - refreshToken, - }); - setSelectedDatePeriod(1); - } else { - setTryNowState('passive'); - } - } - }, [router]); - } - const submitChannels = () => { - const subChannelsStatus = channels.map((channel: any) => { - return channel.selected; - }); - - const selectedChannelsStatus = Object.assign({}, ...subChannelsStatus); - let activeChannel: string[] = []; - for (const key in selectedChannelsStatus) { - if (selectedChannelsStatus[key]) { - activeChannel.push(key); - } - } - - const result = [].concat( - ...channels.map((channel: any) => { - return channel.subChannels - .filter((subChannel: any) => { - if ( - activeChannel.includes(subChannel.channelId) && - subChannel.canReadMessageHistoryAndViewChannel - ) { - return subChannel; - } - }) - .map((filterdItem: any) => { - return { - channelId: filterdItem.channelId, - channelName: filterdItem.name, - }; - }); - }) - ); - setSelectedChannels(result); - setOpen(false); - }; - - const handleClose = () => { - setOpen(false); - }; - - const refetchChannels = () => { - refetchGuildChannels(router.query.guildId); - }; - - const updateGuild = () => { - try { - updateGuildById(guild, selectedPeriod, selectedChannels).then( - (res: any) => { - if (emailAddress && emailAddress != '') { - changeEmail(emailAddress).then((_res: any) => { - setActiveStep(2); - }); - } else { - setActiveStep(2); - } - } - ); - } catch (error) {} - }; - - const redirectToSettings = () => { - const user = router.query; - StorageService.writeLocalStorage('user', { - guild: { - guildId: user.guildId, - guildName: user.guildName, - }, - token: { - accessToken: user.accessToken, - accessExp: user.accessExp, - refreshToken: user.refreshToken, - refreshExp: user.refreshExp, - }, - }); - router.push('/settings'); - }; - - const setSelectedDatePeriod = (dateRangeType: number | string) => { - let dateTime = ''; - switch (dateRangeType) { - case 1: - setActivePeriod(dateRangeType); - dateTime = moment() - .subtract('35', 'days') - .format('YYYY-MM-DDTHH:mm:ss[Z]'); - break; - case 2: - setActivePeriod(dateRangeType); - dateTime = moment() - .subtract('3', 'months') - .format('YYYY-MM-DDTHH:mm:ss[Z]'); - break; - case 3: - setActivePeriod(dateRangeType); - dateTime = moment() - .subtract('6', 'months') - .format('YYYY-MM-DDTHH:mm:ss[Z]'); - break; - case 4: - setActivePeriod(dateRangeType); - dateTime = moment() - .subtract('1', 'year') - .format('YYYY-MM-DDTHH:mm:ss[Z]'); - break; - default: - break; - } - setSelectedPeriod(dateTime); - - setActivePeriod(dateRangeType); - }; - - const handleRedirectToApp = () => { - const user: IUser | undefined = - StorageService.readLocalStorage('user'); - - setAmplitudeUserIdFromToken(); - - trackAmplitudeEvent({ - eventType: 'onboarding_successful_integration', - eventProperties: { - guild: user?.guild, - mail: emailAddress ? emailAddress : 'not exist', - }, - }); - router.push('/'); - }; - - return ( - <> - {isLoading ? ( - - ) : ( - <> - -
- - Image Alt - -
- {tryNowState === 'active' ? ( -
-
- {activeStep === 0 || activeStep === -1 ? ( - <> -
-

- Welcome to TogetherCrew -

-

- Let’s connect your community. -

-
- - ) : ( - '' - )} -
-
- - ) : ( - - ) - } - > - {steps.map((label, index) => ( - - - {activeStep === 0 || activeStep === -1 ? label : ''} - - - ))} - -
- } - > - {steps.map((label, index) => ( - - - {activeStep === 0 || activeStep === -1 - ? label - : ''} - - - ))} - -
- {activeStep === 0 || activeStep === -1 ? ( - <> - setTermsCheck(e.target.checked)} - /> - } - label={ - - I understand and agree to the{' '} - - - Privacy Policy and Terms of Service. - - - - } - /> -
- signUp()} - classes={'bg-secondary text-white'} - /> -
- - ) : activeStep === 1 ? ( - <> -
-
-

- Choose date period for data analysis -

-

- You will be able to change date period and - selected channels in the future. -

-
-
    - {datePeriod.length > 0 - ? datePeriod.map((el) => ( -
  • - setSelectedDatePeriod(el.value) - } - > - {el.icon ? el.icon : ''} -
    {el.title}
    -
    • - )) - : ''} -
-
-
-
-

- Confirm your imported channels -

-

- Selected channels: - {selectedChannels.length}{' '} - { - setOpen(true); - }} - > - Show Channels - -

-
-
-

Type your email

- setEmailAddress(e.target.value)} - /> -
-
- updateGuild()} - label="Continue" - disabled={!activeStep} - /> -
-
- - ) : ( - <> -
-

- {"Perfect, you're all set!"} -

-

- Data import just started. It might take up to 6 - hours to finish. Once it is done we will send you a{' '} - message on Discord. -

- handleRedirectToApp()} - label="I Understand" - disabled={!activeStep} - /> -
-

- While you are waiting, read our research about{' '} - - {' '} - - Community Health. - - -

- - )} -
-
-
- {tryNowState === 'active' && - (activeStep === -1 || activeStep === 0) ? ( -
- - Already connected?{' '} - - Log in - -
- ) : ( - '' - )} -
- ) : ( -
-
-
-
- -
-

- Please, disconnect your
{' '} - community first -

- - There is one Discord community under your email already. If - you want to add a new community, please disconnect the - current community first. Go to the Settings section - and choose Disconnect option. - - { - redirectToSettings(); - }} - /> -
-
-
- )} - -
-
-
-

- Import activities from channels -

- -
-

- Select channels to import activity in this workspace. Please - give Together Crew access to all selected private channels by - updating the channels permissions in Discord. Discord - permission will affect the channels the bot can see. -

-
-
- {isRefetchLoading ? ( - - ) : ( -
-
- } - size="large" - variant="outlined" - onClick={refetchChannels} - /> -
- {channels && channels.length > 0 - ? channels.map((guild: IGuildChannels, index: any) => { - return ( -
- -
- ); - }) - : ''} -
- )} -
- - - } - > -

- How to give access to the channel you want to import? -

- - -
-
    -
  1. - Navigate to the channel you want to import on{' '} - - Discord - -
    2. -
  2. - Go to the settings for that specific channel (select the - wheel on the right of the channel name) -
    3. -
  3. - Select Permissions (left sidebar), and then in - the middle of the screen check{' '} - Advanced permissions -
    4. -
  4. - With the TogetherCrew Bot selected, under - Advanced Permissions, make sure that [View channel] and - [Read message history] are marked as [✓] -
    5. -
  5. - Select the plus sign to the right of Roles/Members and - under members select TogetherCrew bot -
    6. -
  6. - Click on the Refresh List button on this window - and select the new channels -
    7. -
-
- - -
- {' '} -
-
- - - )} - - ); -}