Merge pull request #48 from shreyas1434shinde/centerSession

Issue #PS-1521 fix: Upcoming Extra Sessions cards copy UI implementation
tekdi · Jul 26, 2024 · 9e0fc0d · 9e0fc0d
2 parents a013e73 + d0437cd
commit 9e0fc0d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
@@ -1,7 +1,8 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Snackbar, Typography } from '@mui/material';
 import { Session, SessionsCardProps } from '@/utils/Interfaces';
 
 import CenterSessionModal from './CenterSessionModal';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import EditOutlined from '@mui/icons-material/EditOutlined';
 import PlannedSession from './PlannedSession';
 import React from 'react';
@@ -10,8 +11,25 @@ import { useTheme } from '@mui/material/styles';
 const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  const theme = useTheme<any>();
  const [open, setOpen] = React.useState(false);
+ const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
+ const handleSnackbarClose = () => setSnackbarOpen(false);
+
+ const handleCopyUrl = () => {
+ if (data?.url) {
+ navigator.clipboard
+ .writeText(data.url)
+ .then(() => {
+ setSnackbarOpen(true);
+ })
+ .catch((err) => {
+ console.error('Failed to copy: ', err);
+ });
+ }
+ };
+
  return (
  <Box
  sx={{
@@ -24,7 +42,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  sx={{
  display: 'flex',
  justifyContent: 'space-between',
- padding: '8px 16px',
+ padding: '8px 16px 4px',
  }}
  >
  <Box>
@@ -46,6 +64,37 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  </Box>
  <EditOutlined onClick={handleOpen} sx={{ cursor: 'pointer' }} />
  </Box>
+ <Box
+ sx={{
+ padding: '0px 16px 8px',
+ display: 'flex',
+ justifyContent: 'space-between',
+ gap: '30px',
+ }}
+ onClick={handleCopyUrl}
+ >
+ <Box
+ sx={{
+ fontSize: '14px',
+ color: theme.palette.secondary.main,
+ fontWeight: '500',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ width: '100%',
+ cursor: 'pointer',
+ }}
+ >
+ {data?.url}
+ </Box>
+ <ContentCopyIcon
+ sx={{
+ fontSize: '18px',
+ color: theme.palette.secondary.main,
+ cursor: 'pointer',
+ }}
+ />
+ </Box>
  <CenterSessionModal
  open={open}
  handleClose={handleClose}
@@ -56,6 +105,12 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  </CenterSessionModal>
 
  <Box>{children}</Box>
+ <Snackbar
+ open={snackbarOpen}
+ autoHideDuration={2000}
+ onClose={handleSnackbarClose}
+ message="URL copied to clipboard"
+ />
  </Box>
  );
 };

diff --git a/src/services/Sessionservice.ts b/src/services/Sessionservice.ts
@@ -11,12 +11,14 @@ export const getSessions = (cohortId: string) => {
  teacherName: 'Mahima Shastri',
  topic: 'real numbers',
  subtopic: 'irrational numbers',
+ url: 'https://zoom.us/j/92735086013?a3t2172..',
  },
  {
  id: 2,
  subject: 'Mathematics',
  time: '11 am - 12 pm',
  teacherName: 'vivek kasture',
+ url: 'https://zoom.us/j/92735086013?a3t2172',
  },
  {
  id: 3,

diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -343,6 +343,7 @@ export interface Session {
  teacherName: string;
  topic?: string;
  subtopic?: string;
+ url?: string;
 }
 
 export interface SessionCardFooterProps {