@nualang/nualang-ui-components 0.1.1317 → 0.1.1318

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Typography, Box, List, Dialog, DialogContent, Card, CardActionArea, Button, Select, FormControl, InputLabel, IconButton, Tooltip, CircularProgress, Divider, MenuItem } from "@mui/material";
 import { red, orange, green, grey } from "@mui/material/colors";
 import Styles from "../../utils/Styles";
@@ -11,6 +12,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import ArchiveIcon from "@mui/icons-material/Archive";
 import dayjs from "dayjs";
 import GroupFeedbackDialog from "../../Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog";
+import { useUrlQueryParam } from "../../hooks/useUrlQueryParam";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MeetingPromptsList = withStyles(({
   scheduleListData,
@@ -39,6 +41,8 @@ const MeetingPromptsList = withStyles(({
   getRecordings,
   startTimes = {}
 }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const [selectedGroup, setSelectedGroup] = useState({});
   const [isDialogOpen, setDialogOpen] = useState(false);
   const [meetingCounts, setMeetingCounts] = useState({});
@@ -51,6 +55,20 @@ const MeetingPromptsList = withStyles(({
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [attendeesData, setAttendeesData] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [groupedIdFromUrl, setGroupedIdFromUrl, clearGroupedId] = useUrlQueryParam("groupedId", {
+    hash: "Discuss"
+  });
+  useEffect(() => {
+    if (groupedIdFromUrl && scheduleListData.length > 0) {
+      const discussion = scheduleListData.find(item => item.groupedId === groupedIdFromUrl);
+      if (discussion) {
+        setSelectedGroup(discussion);
+        setSelectedDiscussion(discussion);
+        setGroupedId(discussion.groupedId);
+        setDialogOpen(true);
+      }
+    }
+  }, [groupedIdFromUrl, scheduleListData, setSelectedDiscussion]);
   const calculateMeetingCounts = () => {
     const counts = {};
     scheduleListData?.forEach(item => {
@@ -113,6 +131,8 @@ const MeetingPromptsList = withStyles(({
   };
   const closeDialog = () => {
     setDialogOpen(false);
+    setSelectedGroup({});
+    clearGroupedId();
   };
   useEffect(() => {
     const selectedDiscussionGroup = scheduleListData.filter(item => item.groupedId === groupedId);
@@ -201,6 +221,7 @@ const MeetingPromptsList = withStyles(({
               setSelectedDiscussion(discussion);
               setGroupedId(discussion?.groupedId);
               openDialog();
+              setGroupedIdFromUrl(discussion.groupedId);
             },
             children: /*#__PURE__*/_jsxs(Box, {
               sx: {
@@ -361,8 +382,7 @@ const MeetingPromptsList = withStyles(({
       }), sortedScheduleListData?.length > cardsToShow && /*#__PURE__*/_jsx(Button, {
         variant: "outlined",
         "aria-label": t("view_more"),
-        onClick: () => setCardsToShow(cardsToShow + 2) // Load 2 more cards on button click
-        ,
+        onClick: () => setCardsToShow(cardsToShow + 2),
         children: t("view_more")
       })]
     }), /*#__PURE__*/_jsx(ConfirmDeleteDiscussion, {

package/dist/Tables/RecordingListCards/RecordingListCards.js

@@ -1,4 +1,4 @@
-import { useState, Fragment } from "react";
+import { useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
 import { Typography, Box, Button } from "@mui/material";
@@ -7,6 +7,7 @@ import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
 import FeedbackDialog from "../../Dialogs/FeedbackInfoDialog/FeedbackInfoDialog";
 import RecordingCard from "../../Cards/RecordingCard/RecordingCard";
 import LoadingCard from "../../Cards/LoadingCard/LoadingCard";
+import { useUrlQueryParam } from "../../hooks/useUrlQueryParam";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const RecordingListCards = withStyles(({
   classes,
@@ -31,6 +32,18 @@ const RecordingListCards = withStyles(({
   const [open, setOpen] = useState(false);
   const [feedbackOpen, setFeedbackOpen] = useState(false);
   const [cardsToShow, setCardsToShow] = useState(3);
+  const [recordingIdFromUrl, setRecordingIdFromUrl, clearRecordingIdFromUrl] = useUrlQueryParam("meetingId", {
+    hash: 'Discuss'
+  });
+  useEffect(() => {
+    if (recordingIdFromUrl && recordingsTableData.length > 0) {
+      const recording = recordingsTableData.find(rec => (rec.meetingId || rec.meetingID)?.toString() === recordingIdFromUrl.toString());
+      if (recording) {
+        setSelectedRecording(recording);
+        setOpen(true);
+      }
+    }
+  }, [recordingIdFromUrl, recordingsTableData, setSelectedRecording]);
   const attendeeUsernames = [];
   userData.forEach(user => {
     [selectedRecording?.attendees].flat().forEach(attendee => {
@@ -50,6 +63,7 @@ const RecordingListCards = withStyles(({
   const handleJoin = recording => {
     setSelectedRecording(recording);
     setOpen(true);
+    setRecordingIdFromUrl(recording.meetingId);
   };
   const handleFeedbackJoin = recording => {
     setSelectedRecording(recording);
@@ -58,6 +72,7 @@ const RecordingListCards = withStyles(({
   const handleClose = () => {
     resetVideoState();
     setOpen(false);
+    clearRecordingIdFromUrl();
   };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
@@ -122,25 +137,21 @@ const RecordingListCards = withStyles(({
       })), recordingsTableData?.length > cardsToShow && /*#__PURE__*/_jsx(Button, {
         variant: "outlined",
         "aria-label": t("view_more"),
-        onClick: () => setCardsToShow(cardsToShow + 2) // Load 2 more cards on button click
-        ,
+        onClick: () => setCardsToShow(cardsToShow + 2),
         children: t("view_more")
       })]
-    }) : /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "15vh",
-          // You can adjust the height as needed
-          textAlign: "center" // Center-align text
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          component: "h5",
-          variant: "h5",
-          children: t("no_recordings_found")
-        })
+    }) : /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "15vh",
+        textAlign: "center"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "h5",
+        variant: "h5",
+        children: t("no_recordings_found")
       })
     })]
   });

package/dist/hooks/useUrlQueryParam.js

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+export function useUrlQueryParam(name, {
+  hash
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const params = new URLSearchParams(location.search);
+  const value = params.get(name);
+  const setValue = useCallback(newValue => {
+    const newParams = new URLSearchParams(location.search);
+    if (newValue === null || newValue === undefined) {
+      newParams.delete(name);
+    } else {
+      newParams.set(name, newValue);
+    }
+    const queryString = newParams.toString();
+    const hashSuffix = hash ? `#${hash}` : location.hash;
+    navigate(`${location.pathname}${queryString ? `?${queryString}` : ""}${hashSuffix || ""}`, {
+      replace: true
+    });
+  }, [hash, location.pathname, location.search, location.hash, name, navigate]);
+  const clear = useCallback(() => {
+    setValue(null);
+  }, [setValue]);
+  return [value, setValue, clear];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1317",
+  "version": "0.1.1318",
   "type": "module",
   "main": "dist/index.js",
   "files": [