Skip to content

Commit

Permalink
feat: Remove native-base from zoom-related modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeangelLF
JeangelLF committed Sep 14, 2024
1 parent 87872f9 commit 1f5d658
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 105 deletions.
11 changes: 7 additions & 4 deletions src/components/VideoButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next';
import { Lecture_Appointmenttype_Enum } from '../gql/graphql';
import { useMutation } from '@apollo/client';
import { gql } from '../gql';
import { Modal } from 'native-base';
import ZoomMeetingModal from '../modals/ZoomMeetingModal';
import { useMemo, useState } from 'react';
import { useQuery } from '@apollo/client';
Expand Down Expand Up @@ -79,9 +78,13 @@ const VideoButton: React.FC<VideoButtonProps> = ({

return (
<>
<Modal isOpen={isOpenModal} onClose={() => setIsOpenModal(false)}>
<ZoomMeetingModal appointmentId={appointmentId} appointmentType={appointmentType} zoomUrl={zoomUrl ?? undefined} />
</Modal>
<ZoomMeetingModal
isOpen={isOpenModal}
onOpenChange={setIsOpenModal}
appointmentId={appointmentId}
appointmentType={appointmentType}
zoomUrl={zoomUrl ?? undefined}
/>
<Button
disabled={!canStartMeeting || isOver}
reasonDisabled={isInstructor ? t('course.meeting.hint.student') : t('course.meeting.hint.pupil')}
Expand Down
74 changes: 28 additions & 46 deletions src/modals/AdHocMeetingModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import { Button, Modal, Stack, Text, useBreakpointValue, useTheme } from 'native-base';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useLayoutHelper } from '../hooks/useLayoutHelper';
import { useMutation } from '@apollo/client';
import { gql } from '../gql';
import { useState } from 'react';
import { ZoomInfoOptions } from './ZoomMeetingModal';
import { BaseModalProps, Modal, ModalFooter, ModalHeader, ModalTitle } from '@/components/Modal';
import { Button } from '@/components/Button';
import { Typography } from '@/components/Typography';

type ModalProps = {
interface ModalProps extends BaseModalProps {
matchId: number;
showAdHocModal: boolean;
onPressBack: () => void;
};
}

const AdHocMeetingModal: React.FC<ModalProps> = ({ showAdHocModal, onPressBack, matchId }) => {
const AdHocMeetingModal = ({ isOpen, onOpenChange, matchId }: ModalProps) => {
const { t } = useTranslation();
const { space } = useTheme();
const navigate = useNavigate();
const { isMobile } = useLayoutHelper();
const [isBrowserMeeting, setIsBrowserMeeting] = useState(true);
const [createAdHocMeeting, { loading: isCreatingMeeting }] = useMutation(
gql(`
Expand Down Expand Up @@ -52,11 +49,6 @@ const AdHocMeetingModal: React.FC<ModalProps> = ({ showAdHocModal, onPressBack,
return { appointmentId, appointmentType, zoomUrl };
};

const minWidth = useBreakpointValue({
base: '350px',
lg: '680px',
});

const handleOnBrowser = async () => {
setIsBrowserMeeting(true);
const response = await createMeeting();
Expand All @@ -79,38 +71,28 @@ const AdHocMeetingModal: React.FC<ModalProps> = ({ showAdHocModal, onPressBack,
const isLoadingZoomClientMeeting = isCreatingMeeting && !isBrowserMeeting;

return (
<Modal isOpen={showAdHocModal} onClose={onPressBack}>
<Modal.Content minW={minWidth}>
<Modal.CloseButton />
<>
<Modal.Header>{t('matching.adHocMeeting.title')}</Modal.Header>
<Modal.Body justifyContent="center" py={4}>
<Text p={space['0.5']}>{t('matching.adHocMeeting.infoText')}</Text>
<ZoomInfoOptions />
</Modal.Body>
<Modal.Footer>
<Stack space={isMobile ? space['0.5'] : space['1']} direction={isMobile ? 'column' : 'row'} width="full" justifyContent="center">
<Button
width={['100%', '100%', '46%']}
variant="outline"
onPress={handleOnBrowser}
isLoading={isLoadingBrowserMeeting}
isDisabled={isLoadingZoomClientMeeting}
>
{t('matching.adHocMeeting.browser')}
</Button>
<Button
width={['100%', '100%', '46%']}
isDisabled={isLoadingBrowserMeeting}
onPress={handleOnZoomClient}
isLoading={isLoadingZoomClientMeeting}
>
{t('matching.adHocMeeting.zoomClient')}
</Button>
</Stack>
</Modal.Footer>
</>
</Modal.Content>
<Modal onOpenChange={onOpenChange} isOpen={isOpen}>
<ModalHeader>
<ModalTitle>{t('matching.adHocMeeting.title')}</ModalTitle>
</ModalHeader>
<div>
<Typography className="mb-4">{t('matching.adHocMeeting.infoText')}</Typography>
<ZoomInfoOptions />
</div>
<ModalFooter>
<Button
className="w-full"
variant="outline"
onClick={handleOnBrowser}
isLoading={isLoadingBrowserMeeting}
disabled={isLoadingZoomClientMeeting}
>
{t('matching.adHocMeeting.browser')}
</Button>
<Button className="w-full" disabled={isLoadingBrowserMeeting} onClick={handleOnZoomClient} isLoading={isLoadingZoomClientMeeting}>
{t('matching.adHocMeeting.zoomClient')}
</Button>
</ModalFooter>
</Modal>
);
};
Expand Down
86 changes: 34 additions & 52 deletions src/modals/ZoomMeetingModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { Button, Modal, Stack, useTheme, Heading, VStack, HStack, Box, Text, useBreakpointValue } from 'native-base';
import { Trans, useTranslation } from 'react-i18next';
import { Lecture_Appointmenttype_Enum } from '../gql/graphql';
import { useNavigate } from 'react-router-dom';
import CheckBadge from '../assets/icons/check-badge.svg';
import CameraIcon from '../assets/icons/camera-icon.svg';
import { useLayoutHelper } from '../hooks/useLayoutHelper';
import { BaseModalProps, Modal, ModalFooter, ModalHeader, ModalTitle } from '@/components/Modal';
import { Button } from '@/components/Button';
import { Typography } from '@/components/Typography';

type ZoomMeetingModalProps = {
interface ZoomMeetingModalProps extends BaseModalProps {
appointmentId: number;
appointmentType: Lecture_Appointmenttype_Enum;
zoomUrl: string | undefined;
};
}

enum ZoomInfoIconEnum {
CHECK = 'check',
Expand All @@ -21,12 +22,6 @@ type ZoomInfo = { icon: ZoomInfoIconEnum; label: string };

export const ZoomInfoOptions = () => {
const { t } = useTranslation();
const { isMobile } = useLayoutHelper();
const iconPadding = useBreakpointValue({
base: '3',
lg: '5',
});

const zoomInfos: ZoomInfo[] = [
{
icon: ZoomInfoIconEnum.CHECK,
Expand All @@ -35,58 +30,45 @@ export const ZoomInfoOptions = () => {
{ icon: ZoomInfoIconEnum.CAMERA, label: 'camera' },
];
return (
<Stack space={5}>
<div className="flex flex-col gap-y-2">
{zoomInfos.map((info) => (
<HStack alignItems="center" space={1}>
<VStack>
<Box px={iconPadding}>{info.icon === ZoomInfoIconEnum.CHECK ? <CheckBadge /> : <CameraIcon />}</Box>
</VStack>
<VStack maxW={isMobile ? 250 : 'full'}>
<Text bold fontSize="lg" ellipsizeMode="tail" numberOfLines={10}>
{t(`appointment.zoomModal.${info.label}.header` as any)}
</Text>
<Text fontSize="sm" ellipsizeMode="tail" numberOfLines={10}>
<div className="flex items-center gap-x-1">
<div className="flex flex-col">
<div className="pr-3 lg:pr-4">{info.icon === ZoomInfoIconEnum.CHECK ? <CheckBadge /> : <CameraIcon />}</div>
</div>
<div className="flex flex-col">
<Typography variant="h6">{t(`appointment.zoomModal.${info.label}.header` as any)}</Typography>
<Typography className="text-detail">
<Trans i18nKey={`appointment.zoomModal.${info.label}.description` as any} components={{ b: <b />, br: <br /> }} />
</Text>
</VStack>
</HStack>
</Typography>
</div>
</div>
))}
</Stack>
</div>
);
};

const ZoomMeetingModal: React.FC<ZoomMeetingModalProps> = ({ appointmentId, appointmentType, zoomUrl }) => {
const { space } = useTheme();
const ZoomMeetingModal: React.FC<ZoomMeetingModalProps> = ({ isOpen, onOpenChange, appointmentId, appointmentType, zoomUrl }) => {
const { t } = useTranslation();
const navigate = useNavigate();
const { isMobile } = useLayoutHelper();
const modalWidth = useBreakpointValue({
base: '350px',
lg: '580px',
});

return (
<>
<Modal.Content minW={modalWidth}>
<Modal.CloseButton />
<Modal.Body>
<VStack marginBottom={space['2']} alignItems="left" p={space['1']}>
<Heading fontSize="2xl">{t('appointment.zoomModal.header')}</Heading>
</VStack>
<Box mb={10}>
<ZoomInfoOptions />
</Box>
<Stack space={isMobile ? space['0.5'] : space['1']} direction={isMobile ? 'column' : 'row'} width="full" justifyContent="center">
<Button minW="260px" variant="outline" onPress={() => navigate(`/video-chat/${appointmentId}/${appointmentType}`)}>
{t('appointment.zoomModal.browser')}
</Button>
<Button minW="260px" isDisabled={!zoomUrl} onPress={() => window.open(zoomUrl, '_self')}>
{t('appointment.zoomModal.zoomClient')}
</Button>
</Stack>
</Modal.Body>
</Modal.Content>
</>
<Modal onOpenChange={onOpenChange} isOpen={isOpen}>
<ModalHeader>
<ModalTitle>{t('appointment.zoomModal.header')}</ModalTitle>
</ModalHeader>
<div>
<ZoomInfoOptions />
</div>
<ModalFooter>
<Button className="w-full" variant="outline" onClick={() => navigate(`/video-chat/${appointmentId}/${appointmentType}`)}>
{t('appointment.zoomModal.browser')}
</Button>
<Button className="w-full" disabled={!zoomUrl} onClick={() => window.open(zoomUrl, '_self')}>
{t('appointment.zoomModal.zoomClient')}
</Button>
</ModalFooter>
</Modal>
);
};

Expand Down
4 changes: 1 addition & 3 deletions src/pages/SingleMatch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,9 +367,7 @@ const SingleMatch = () => {
}}
onPressBack={() => setShowDissolveModal(false)}
/>
{data?.match.id && (
<AdHocMeetingModal showAdHocModal={showAdHocMeetingModal} matchId={data?.match.id} onPressBack={() => setShowAdHocMeetingModal(false)} />
)}
{data?.match.id && <AdHocMeetingModal onOpenChange={setShowAdHocMeetingModal} isOpen={showAdHocMeetingModal} matchId={data?.match.id} />}
{data && data.match.pupil.firstname && data.match.student.firstname && (
<ReportMatchModal
matchName={userType === 'student' ? data.match.pupil.firstname : data.match.student.firstname}
Expand Down

0 comments on commit 1f5d658

Please sign in to comment.