From e842185382a71765937057c15973313a8089126f Mon Sep 17 00:00:00 2001
From: Linden <65407488+thelindat@users.noreply.github.com>
Date: Mon, 11 Apr 2022 03:52:18 +0000
Subject: [PATCH] feat(resource/interface): export notify

---
 .../client.lua => client/context.lua}         |  6 ++--
 resource/interface/client/notify.lua          | 19 ++++++++++++
 .../notifications/NotificationWrapper.tsx     | 31 ++++++++++++++-----
 web/src/index.css                             | 12 +++++++
 4 files changed, 58 insertions(+), 10 deletions(-)
 rename resource/interface/{context/client.lua => client/context.lua} (90%)
 create mode 100644 resource/interface/client/notify.lua

diff --git a/resource/interface/context/client.lua b/resource/interface/client/context.lua
similarity index 90%
rename from resource/interface/context/client.lua
rename to resource/interface/client/context.lua
index 5bde37f14..5e0625bc7 100644
--- a/resource/interface/context/client.lua
+++ b/resource/interface/client/context.lua
@@ -1,6 +1,6 @@
 local contextMenus = {}
 
-local function showContext(id)
+function lib.showContext(id)
     local data = contextMenus[id]
     SetNuiFocus(true, true)
     SendNUIMessage({
@@ -13,7 +13,7 @@ local function showContext(id)
     })
 end
 
-local function registerContext(context)
+function lib.registerContext(context)
     for k, v in pairs(context) do
         if type(k) == 'number' then
             contextMenus[v.id] = v
@@ -25,7 +25,7 @@ local function registerContext(context)
 end
 
 RegisterNUICallback('openContext', function(id)
-    showContext(id)
+    lib.showContext(id)
 end)
 
 RegisterNUICallback('clickContext', function(data)
diff --git a/resource/interface/client/notify.lua b/resource/interface/client/notify.lua
new file mode 100644
index 000000000..a12d2eca9
--- /dev/null
+++ b/resource/interface/client/notify.lua
@@ -0,0 +1,19 @@
+--[[```lua
+{
+	id?: string
+	title?: string
+	description: string
+	duration?: number
+	position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'
+	style?: table
+	icon?: string
+	iconColor?: string
+}
+```]]
+---@param data table
+function lib.notify(data)
+	SendNUIMessage({
+		action = 'customNotify',
+		data = data
+	})
+end
diff --git a/web/src/features/notifications/NotificationWrapper.tsx b/web/src/features/notifications/NotificationWrapper.tsx
index f34572ce6..77920dfed 100644
--- a/web/src/features/notifications/NotificationWrapper.tsx
+++ b/web/src/features/notifications/NotificationWrapper.tsx
@@ -28,6 +28,7 @@ interface CustomProps {
   iconColor?: string;
   position?: ToastPositionWithLogical;
   id?: number;
+  type?: string;
 }
 
 debugData<Props>([
@@ -59,23 +60,39 @@ debugData<CustomProps>([
 const Notifications: React.FC = () => {
   const toast = useToast();
 
-  // todo: figure out icon support
   useNuiEvent<CustomProps>("customNotify", (data) => {
     if (data.id && toast.isActive(data.id)) return;
+    if (!data.icon) {
+      //@ts-expect-error because amazing types
+      data.icon =
+        data.type === "error"
+          ? "fa-circle-xmark"
+          : data.type === "success"
+          ? "fa-circle-check"
+          : "fa-circle-info";
+    }
+
     toast({
-      duration: data.duration || 4000,
+      duration: data.duration || 3000,
       position: data.position || "top-right",
       render: () => (
-        <Box style={data.style} p={3} borderRadius="md" boxShadow="lg">
+        <Box
+          className={`toast-${data.type || "inform"}`}
+          style={data.style}
+          p={2}
+          borderRadius="sm"
+          boxShadow="md"
+        >
           <HStack spacing={0}>
-            {data.icon && (
+            {
               <FontAwesomeIcon
+                //@ts-expect-error because amazing types
                 icon={data.icon}
-                fontSize="1.4rem"
-                style={{ paddingRight: 11 }}
+                fontSize="1.3em"
+                style={{ paddingRight: 8 }}
                 color={data.iconColor}
               />
-            )}
+            }
             <Box w="100%">
               {data.title && <Text as="b">{data.title}</Text>}
               {data.description && <Text>{data.description}</Text>}
diff --git a/web/src/index.css b/web/src/index.css
index c43bf8b77..5692f71ae 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -50,3 +50,15 @@ code {
   width: 0;
   height: 0;
 }
+
+.toast-inform {
+	background-color: #2980b9;
+}
+
+.toast-success {
+	background-color: #27ae60;
+}
+
+.toast-error {
+	background-color: #c0392b;
+}