fix: notifications type feature

Author: ZanzyTHEbar

GUI/ETVR/src/components/Notifications/CustomToast/index.tsx

@@ -1,27 +1,28 @@
+/* eslint-disable indent */
 import { Transition, Toast, Alert } from 'solid-headless'
 import { AiOutlineCheckCircle } from 'solid-icons/ai'
 import { FiAlertTriangle, FiAlertOctagon } from 'solid-icons/fi'
 import { IoAlertCircleSharp } from 'solid-icons/io'
 import { createSignal, Component } from 'solid-js'
 import CloseIcon from '@components/CloseIcon'
 import { ENotificationType } from '@static/types/enums'
-import { notifications } from '@store/ui/selectors'
+import { notifications, notificationsType } from '@store/ui/selectors'
 
 interface ToastProps {
     id: string
     message: string
 }
 
-const NotificationIcon = (notificationAction: ENotificationType) => {
-    switch (notificationAction) {
-    case ENotificationType.SUCCESS:
-        return <AiOutlineCheckCircle size={25} color="#68D391" />
-    case ENotificationType.ERROR:
-        return <FiAlertOctagon size={25} color="#F56565" />
-    case ENotificationType.WARNING:
-        return <FiAlertTriangle size={25} color="#F6E05E" />
-    case ENotificationType.INFO:
-        return <IoAlertCircleSharp size={25} color="#90CDF4" />
+const NotificationIcon = () => {
+    switch (notificationsType()) {
+        case ENotificationType.SUCCESS:
+            return <AiOutlineCheckCircle size={25} color="#68D391" />
+        case ENotificationType.ERROR:
+            return <FiAlertOctagon size={25} color="#F56565" />
+        case ENotificationType.WARNING:
+            return <FiAlertTriangle size={25} color="#F6E05E" />
+        case ENotificationType.INFO:
+            return <IoAlertCircleSharp size={25} color="#90CDF4" />
     }
 }
 
@@ -47,7 +48,7 @@ const CustomToast: Component<ToastProps> = (props) => {
             }}>
             <Toast class="flex justify-between items-center">
                 <Alert class="bg-slate-600 flex grow flex-row items-center justify-center text-xl text-bold text-gray-50 p-4">
-                    {/* {NotificationIcon()} */}
+                    {NotificationIcon()}
                     <span class="flex-1 text-sm font-semibold pl-1 pr-1 text-gray-50">
                         {props.message}
                     </span>

GUI/ETVR/src/static/types/enums/index.ts

@@ -26,7 +26,7 @@ export enum loaderType {
 
 /**
  * @description Enum for the different types of notifications
- * @enum {string}
+ * @enum {string} ENotificationType
  * @property {string} ERROR - An Error notification
  * @property {string} SUCCESS - A Success notification
  * @property {string} INFO - An Info notification

GUI/ETVR/src/store/ui/components/actions.ts

@@ -5,6 +5,7 @@ import { sendNotification } from '@tauri-apps/api/notification'
 import { ENotificationAction, ENotificationType } from '@static/types/enums'
 import { INotifictionMessage, INotificationAction } from '@static/types/interfaces'
 import { notifications } from '@store/ui/selectors'
+import { setNotificationsType } from '@store/ui/ui'
 
 /**
  * Send notification to the WebView Window using the browser API
@@ -24,15 +25,16 @@ export const addNotification = (
     notification: INotifictionMessage,
     actionType: ENotificationAction,
 ) => {
-        const { title, message } = notification
-        const notificationAction = NotificationsType(actionType, {
+    const { title, message, type } = notification
+    const notificationAction = NotificationsType(actionType, {
         callbackOS: () => {
             sendNotification({
                 title,
                 body: message,
             })
         },
         callbackApp: () => {
+            setNotificationsType(type as ENotificationType)
             notifications()?.create(message)
         },
     })

GUI/ETVR/src/store/ui/selectors.ts

@@ -8,4 +8,5 @@ export const menuOpenStatus = createMemo(() => uiState().menuOpen)
 export const connectedUserName = createMemo(() => uiState().connectedUser)
 export const showCameraView = createMemo(() => uiState().showCameraView)
 export const notifications = createMemo(() => uiState().notifications)
+export const notificationsType = createMemo(() => uiState().notificationsType)
 export const displayMode = createMemo(() => uiState().displayMode)

GUI/ETVR/src/store/ui/ui.ts

@@ -1,7 +1,7 @@
 import { ToasterStore } from 'solid-headless'
 import { createMemo, JSXElement } from 'solid-js'
 import { createStore, produce } from 'solid-js/store'
-import { loaderType, POPOVER_ID } from '@src/static/types/enums'
+import { ENotificationType, loaderType, POPOVER_ID } from '@src/static/types/enums'
 
 interface IMenuOpen {
     x: number
@@ -28,6 +28,7 @@ export interface IUiStore {
     showCameraView?: boolean
     connectedUser: string
     notifications?: ToasterStore<string>
+    notificationsType?: ENotificationType
     displayMode: POPOVER_ID
 }
 
@@ -99,4 +100,12 @@ export const setShowCameraView = (showCameraView: boolean) => {
     )
 }
 
+export const setNotificationsType = (type: ENotificationType) => {
+    setState(
+        produce((s) => {
+            s.notificationsType = type
+        }),
+    )
+}
+
 export const uiState = createMemo(() => state)