@asaleh37/ui-base 25.6.2-0.3 → 25.6.2

package/src/components/common/MyNotificationsPanel.tsx

@@ -1,109 +1,103 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Box, Button } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useAxios, useSession } from "../../hooks";
-import { useState } from "react";
-import useInterval from "../../hooks/useInterval";
-import { notificationsCheckIntervalSeconds } from "../../layout/NotificationButton";
-import NotificationItem from "./NotificationItem";
-
-const MyNotificationsPanel: React.FC = () => {
-  const { UserInfo } = useSession();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const { handleGetRequest, handlePostRequest } = useAxios();
-  const [notifications, setNotifications] = useState<Array<Notification>>([]);
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const acknowledgeAllCurrentNotifications = async () => {
-    await handlePostRequest({
-      endPointURI: "api/v1/public/notification/all/notified",
-      showMask: true,
-    });
-  };
-
-  const archiveAllCurrentNotifications = async () => {
-    await handlePostRequest({
-      endPointURI: "api/v1/public/notification/all/archive",
-      showMask: true,
-    });
-  };
-
-  const loadUserNotifications = () => {
-    if (UserInfo.isAuthenticated === true) {
-      handleGetRequest({
-        endPointURI: "api/v1/public/notifications",
-        showMask: false,
-        successCallBkFn: (response: any) => {
-          setNotifications(response.data);
-        },
-      });
-    }
-  };
-  if (AppInfo?.enableUINotifications === true) {
-    useInterval(
-      loadUserNotifications,
-      notificationsCheckIntervalSeconds * 1000
-    );
-  }
-
-  return (
-    <>
-      <Box
-        sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
-      >
-        <Box sx={{ flex: 1 }}></Box>
-        <h3>
-          <FontAwesomeIcon
-            icon="bell"
-            style={{ marginRight: 10, marginLeft: 10 }}
-          />
-          {AppLayout.appDirection === "ltr" ? "Notifications" : "الاشعارات"}
-        </h3>
-        <Box sx={{ flex: 1 }}></Box>
-        <Button
-          sx={{ textTransform: "none" }}
-          onClick={acknowledgeAllCurrentNotifications}
-        >
-          Mark All Read
-        </Button>
-        <Button
-          color="error"
-          sx={{ textTransform: "none" }}
-          onClick={archiveAllCurrentNotifications}
-        >
-          Delete All
-        </Button>
-      </Box>
-      <Box
-        sx={{
-          flex: 1,
-          width: "100%",
-          display: "flex",
-          overflowY: "auto",
-        }}
-      >
-        <Box
-          sx={{
-            flexGrow: 1,
-            width: "fit-content",
-            display: "flex",
-            flexDirection: "column",
-            overflowY: "auto",
-            alignItems: "center",
-            justifyContent: "flex-start",
-          }}
-        >
-          {notifications.map((notification: Notification, index) => {
-            return (
-              <NotificationItem
-                {...notification}
-                showDivider={index < notifications.length - 1}
-              />
-            );
-          })}
-        </Box>
-      </Box>
-    </>
-  );
-};
-
-export default MyNotificationsPanel;
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Box, Button } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useAxios, useSession } from "../../hooks";
+import { useState } from "react";
+import useInterval from "../../hooks/useInterval";
+import { notificationsCheckIntervalSeconds } from "../../layout/NotificationButton";
+import NotificationItem from "./NotificationItem";
+
+const MyNotificationsPanel: React.FC = () => {
+  const { UserInfo } = useSession();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const [notifications, setNotifications] = useState<Array<Notification>>([]);
+
+  const acknowledgeAllCurrentNotifications = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/notification/all/notified",
+      showMask: true,
+    });
+  };
+
+  const archiveAllCurrentNotifications = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/public/notification/all/archive",
+      showMask: true,
+    });
+  };
+
+  const loadUserNotifications = () => {
+    if (UserInfo.isAuthenticated === true) {
+      handleGetRequest({
+        endPointURI: "api/v1/public/notifications",
+        showMask: false,
+        successCallBkFn: (response: any) => {
+          setNotifications(response.data);
+        },
+      });
+    }
+  };
+  useInterval(loadUserNotifications, notificationsCheckIntervalSeconds * 1000);
+  return (
+    <>
+      <Box
+        sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+      >
+        <Box sx={{ flex: 1 }}></Box>
+        <h3>
+          <FontAwesomeIcon
+            icon="bell"
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {AppLayout.appDirection === "ltr" ? "Notifications" : "الاشعارات"}
+        </h3>
+        <Box sx={{ flex: 1 }}></Box>
+        <Button
+          sx={{ textTransform: "none" }}
+          onClick={acknowledgeAllCurrentNotifications}
+        >
+          Mark All Read
+        </Button>
+        <Button
+          color="error"
+          sx={{ textTransform: "none" }}
+          onClick={archiveAllCurrentNotifications}
+        >
+          Delete All
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          display: "flex",
+          overflowY: "auto",
+        }}
+      >
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: "fit-content",
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          {notifications.map((notification: Notification, index) => {
+            return (
+              <NotificationItem
+                {...notification}
+                showDivider={index < notifications.length - 1}
+              />
+            );
+          })}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default MyNotificationsPanel;

package/src/components/common/NotificationItem.tsx

@@ -1,138 +1,138 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { Box, Button, Divider, keyframes, Typography } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
-import { useAxios, useSession } from "../../hooks";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { timeAgo } from "../../util";
-
-const beatFade = keyframes`
-  0% { transform: scale(1); opacity: 1; }
-  25% { transform: scale(1); opacity: 0.6; }
-  50% { transform: scale(1); opacity: 1; }
-  75% { transform: scale(1); opacity: 0.6; }
-  100% { transform: scale(1); opacity: 1; }
-`;
-
-export type Notification = {
-  id: number;
-  notificationIcon?: IconProp;
-  notificationIconColor?: string;
-  notificationEnText: string;
-  notificationArText: string;
-  notificationTextColor?: string;
-  notificationAction?: "NAVIGATION";
-  notificationActionPayload?: string;
-  isNotified?: boolean;
-  createTime: string;
-  setOpen?: (state: boolean) => void;
-  showDivider?: boolean;
-};
-const NotificationItem: React.FC<Notification> = (notification) => {
-  const navigate = useNavigate();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const { handlePostRequest } = useAxios();
-  const acknowledgeNotification = (notificationId) => {
-    handlePostRequest({
-      endPointURI: "api/v1/public/notification/notified",
-      showMask: false,
-      parameters: { notificationQueueId: notificationId },
-    });
-  };
-  return (
-    <>
-      <Button
-        fullWidth
-        onClick={() => {
-          if (
-            notification?.notificationAction === "NAVIGATION" &&
-            notification?.notificationActionPayload
-          ) {
-            navigate(notification.notificationActionPayload);
-          }
-          if (!notification?.isNotified) {
-            acknowledgeNotification(notification.id);
-          }
-          if (notification?.setOpen) {
-            notification.setOpen(false);
-          }
-        }}
-        sx={{
-          marginBottom: 1,
-          justifyContent: "flex-start",
-          alignItems: "flex-start",
-          color: notification?.notificationTextColor,
-          display: "flex",
-          flexDirection: "column",
-          cursor: "pointer",
-        }}
-      >
-        <Box
-          sx={{
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-start",
-            width: "100%",
-          }}
-        >
-          {notification?.notificationIcon ? (
-            <FontAwesomeIcon
-              icon={notification.notificationIcon}
-              style={{
-                marginRight: 10,
-                marginLeft: 10,
-                color: notification?.notificationIconColor,
-              }}
-            />
-          ) : (
-            <></>
-          )}
-          {AppLayout.appDirection === "ltr"
-            ? notification.notificationEnText
-            : notification.notificationArText}
-          <Box sx={{ flex: 1 }}></Box>
-          {!notification?.isNotified ? (
-            <Typography
-              color="warning"
-              sx={{
-                animation: `${beatFade} 2s infinite ease-in-out`,
-                textTransform: "none",
-                display: "inline-block",
-              }}
-            >
-              <FontAwesomeIcon
-                icon="bell"
-                style={{ marginRight: 5, marginLeft: 5 }}
-              />
-              {AppLayout.appDirection === "ltr" ? "New" : "جديد"}
-            </Typography>
-          ) : (
-            <></>
-          )}
-        </Box>
-        <Box
-          sx={{
-            width: "100%",
-            fontSize: 12,
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-            cursor: "pointer",
-          }}
-        >
-          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
-            {timeAgo(notification.createTime, AppLayout.appDirection)}
-          </Box>
-          <Box sx={{ flex: 1 }}></Box>
-          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
-            {notification.createTime}
-          </Box>
-        </Box>
-      </Button>
-      {notification?.showDivider ? <Divider flexItem /> : <></>}
-    </>
-  );
-};
-
-export default NotificationItem;
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { Box, Button, Divider, keyframes, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { useAxios, useSession } from "../../hooks";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { timeAgo } from "../../util";
+
+const beatFade = keyframes`
+  0% { transform: scale(1); opacity: 1; }
+  25% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1); opacity: 1; }
+  75% { transform: scale(1); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 1; }
+`;
+
+export type Notification = {
+  id: number;
+  notificationIcon?: IconProp;
+  notificationIconColor?: string;
+  notificationEnText: string;
+  notificationArText: string;
+  notificationTextColor?: string;
+  notificationAction?: "NAVIGATION";
+  notificationActionPayload?: string;
+  isNotified?: boolean;
+  createTime: string;
+  setOpen?: (state: boolean) => void;
+  showDivider?: boolean;
+};
+const NotificationItem: React.FC<Notification> = (notification) => {
+  const navigate = useNavigate();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { handlePostRequest } = useAxios();
+  const acknowledgeNotification = (notificationId) => {
+    handlePostRequest({
+      endPointURI: "api/v1/public/notification/notified",
+      showMask: false,
+      parameters: { notificationQueueId: notificationId },
+    });
+  };
+  return (
+    <>
+      <Button
+        fullWidth
+        onClick={() => {
+          if (
+            notification?.notificationAction === "NAVIGATION" &&
+            notification?.notificationActionPayload
+          ) {
+            navigate(notification.notificationActionPayload);
+          }
+          if (!notification?.isNotified) {
+            acknowledgeNotification(notification.id);
+          }
+          if (notification?.setOpen) {
+            notification.setOpen(false);
+          }
+        }}
+        sx={{
+          marginBottom: 1,
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          color: notification?.notificationTextColor,
+          display: "flex",
+          flexDirection: "column",
+          cursor: "pointer",
+        }}
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            width: "100%",
+          }}
+        >
+          {notification?.notificationIcon ? (
+            <FontAwesomeIcon
+              icon={notification.notificationIcon}
+              style={{
+                marginRight: 10,
+                marginLeft: 10,
+                color: notification?.notificationIconColor,
+              }}
+            />
+          ) : (
+            <></>
+          )}
+          {AppLayout.appDirection === "ltr"
+            ? notification.notificationEnText
+            : notification.notificationArText}
+          <Box sx={{ flex: 1 }}></Box>
+          {!notification?.isNotified ? (
+            <Typography
+              color="warning"
+              sx={{
+                animation: `${beatFade} 2s infinite ease-in-out`,
+                textTransform: "none",
+                display: "inline-block",
+              }}
+            >
+              <FontAwesomeIcon
+                icon="bell"
+                style={{ marginRight: 5, marginLeft: 5 }}
+              />
+              {AppLayout.appDirection === "ltr" ? "New" : "جديد"}
+            </Typography>
+          ) : (
+            <></>
+          )}
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            fontSize: 12,
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+        >
+          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
+            {timeAgo(notification.createTime, AppLayout.appDirection)}
+          </Box>
+          <Box sx={{ flex: 1 }}></Box>
+          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
+            {notification.createTime}
+          </Box>
+        </Box>
+      </Button>
+      {notification?.showDivider ? <Divider flexItem /> : <></>}
+    </>
+  );
+};
+
+export default NotificationItem;

package/src/components/index.ts

@@ -1,9 +1,9 @@
-export * from "./BaseApp";
-export * from "@mui/material";
-export * from "zod";
-export * from "@mui/lab";
-export { toast } from "react-toastify";
-export { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-export type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-export * from "./templates";
-export * from "@mui/x-tree-view/models";
+export * from "./BaseApp";
+export * from "@mui/material";
+export * from "zod";
+export * from "@mui/lab";
+export { toast } from "react-toastify";
+export { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+export * from "./templates";
+export * from "@mui/x-tree-view/models";