feat: ZO-190 - conferences history with copy info and delete actions

feat: ZO-190 - conferences history with copy info and delete actions

Author: wagner-wutzke

package-lock.json

@@ -11,9 +11,10 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.0",
-    "@mui/material": "^6.4.0",
+    "@mui/icons-material": "^6.4.7",
+    "@mui/material": "^6.4.7",
     "@mui/material-nextjs": "^6.4.3",
+    "@mui/x-data-grid": "^7.27.2",
     "@mui/x-date-pickers": "^7.23.6",
     "axios": "^1.7.9",
     "i18next": "^24.2.1",
@@ -30,7 +31,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.0",
-    "string-strip-html": "^13.4.8",
     "uuid": "^11.0.5"
   },
   "devDependencies": {

package.json

@@ -29,4 +29,17 @@ export async function PUT(
             method: 'PUT',
         },
     });
+}
+
+export async function DELETE(
+    request: NextRequest,
+    props: { params: Promise<{ meetingId: string }> },
+) {
+    const params = await props.params;
+    return fetchWithAuth({
+        relativeUrl: `api/v1.0/meetings/${params.meetingId}`,
+        requestInit: {
+            method: 'DELETE',
+        },
+    });
 }

src/app/api/meetings/[meetingId]/route.ts

@@ -17,6 +17,8 @@
 import { Metadata } from "next";
 import NavigationTopBar from "@/components/opendesk/NavigationTopBar/NavigationTopBar";
 import ConferenceActions from "@/components/conference/ConferenceActions";
+import ConferenceHistory from "@/components/conference/ConferenceHistory";
+import {ConferenceAppContext} from "@/contexts/Conference/ConferenceAppContext";
 
 export const metadata: Metadata = {
     title: 'openDesk Video Conference',
@@ -27,9 +29,10 @@ export default function Conference() {
     return (
         <>
             <NavigationTopBar />
-            <section className="flex flex-col h-screen max-h-[50vh] items-center justify-center main-section">
+            <ConferenceAppContext>
                 <ConferenceActions />
-            </section>
+                <ConferenceHistory />
+            </ConferenceAppContext>
         </>
     );
 }

src/app/conference/page.tsx

@@ -16,59 +16,31 @@
 
 'use client'
 
-import {createContext, useState} from 'react'
-import {useAuth, useAuthLoggedUser} from "@/contexts/Auth/AuthProvider";
-import {isVarTrue} from "@/lib/isVarTrue";
 import {Stack, Typography} from "@mui/material";
 import ConferenceNameField from "@/components/conference/ConferenceNameField";
 import StartConferenceButton from "@/components/conference/StartConferenceButton";
 import CopyConferenceInfoButton from "@/components/conference/CopyConferenceInfoButton";
 import VideoTestButton from "@/components/conference/VideoTestButton";
-import {Meeting} from "@/types/types";
 import {t} from "i18next";
 import "../../../i18n"
+import {useContext} from "react";
+import {ConferenceAppProps, ConferenceContext} from "@/contexts/Conference/ConferenceAppContext";
 
-export type MeetingContext = {
-    loggedUser: string,
-    meeting: Meeting | undefined,
-    setMeeting: (meeting: Meeting | undefined) => void,
-    meetingName: string,
-    setMeetingName: (meetingName: string) => void,
-}
-
-export const ConferenceContext= createContext<MeetingContext | null>(null);
 
 function ConferenceActions() {
 
-    const {
-        clientEnv: {
-            NEXT_PUBLIC_VIDEO_TEST_ENABLED,
-        },
-    } = useAuth();
-
-    const isVideoTestEnabled = isVarTrue(NEXT_PUBLIC_VIDEO_TEST_ENABLED);
-    const { email: loggedUser} = useAuthLoggedUser();
-
-    const [ meetingName, setMeetingName ] = useState('');
-    const [ meeting, setMeeting ] = useState<Meeting | undefined>();
+    const { isVideoTestEnabled } = useContext(ConferenceContext)  as ConferenceAppProps;
 
     return (
         <>
-            <ConferenceContext.Provider value={{
-                loggedUser,
-                meeting,
-                setMeeting,
-                meetingName,
-                setMeetingName
-            }}>
-
+            <section className="flex flex-col h-screen max-h-[48vh] items-center justify-center main-section">
                 <Typography className={'text-white'}
-                    sx={{
-                        fontSize: 30,
-                        fontWeight: 'bold',
-                        marginTop: 2,
-                        marginBottom: 6,
-                    }}
+                            sx={{
+                                fontSize: 40,
+                                fontWeight: '700',
+                                marginTop: 2,
+                                marginBottom: 4,
+                            }}
                 >
                     {t('main.title', 'main.title')}
                 </Typography>
@@ -84,19 +56,19 @@ function ConferenceActions() {
 
                 <Stack className="space-y-6 w-full items-center justify-center m-4">
                     <Stack className="w-2/5 items-center justify-center" direction={'row'} spacing={0}>
-                        <ConferenceNameField />
-                        <StartConferenceButton />
+                        <ConferenceNameField/>
+                        <StartConferenceButton/>
                     </Stack>
                     <Stack className="w-2/5 items-center justify-center" direction={'row'} spacing={2}>
-                        <CopyConferenceInfoButton />
-                        { isVideoTestEnabled &&
-                                <VideoTestButton />
+                        <CopyConferenceInfoButton/>
+                        {isVideoTestEnabled &&
+                            <VideoTestButton/>
                         }
                     </Stack>
                 </Stack>
-            </ConferenceContext.Provider>
+            </section>
         </>
-    )
+    );
 }
 
 export default ConferenceActions