awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 07:27:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: move NotificationProvider into Notifications folder

Browse Source
This commit is contained in:
asharonbaltazar
2022-12-06 12:49:44 -05:00
parent 389bf0b41f
commit 9499aa1097
2 changed files with 64 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/context/NotificationProvider.tsx
-113
View File
@@ -1,113 +0,0 @@
import { createContext, ReactNode, useContext, useState } from "react";
import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import classnames from "classnames";
type NotificationType = "success" | "error";
type Notification = {
text: string;
type: NotificationType;
};
type NotificationContextState = {
createNotification: (text: string, type?: NotificationType) => void;
};
const NotificationContext = createContext<NotificationContextState>({
createNotification: () => console.log("createNotification not set!"),
});
export const useNotificationContext = () => useContext(NotificationContext);
interface NotificationProviderProps {
children: ReactNode;
}
interface NoticationsProps {
notifications: Notification[];
clearNotification: (text?: string) => void;
}
const Notifications = ({
notifications,
clearNotification,
}: NoticationsProps) => {
return (
<div className="hidden fixed z-50 top-1 w-full inset-x-0 pointer-events-none md:flex justify-center">
<div className="flex flex-col gap-y-2 w-96">
{notifications.map((notif) => (
<div
key={notif.text}
className={classnames(
"w-full flex items-center justify-between px-4 py-3 rounded pointer-events-auto",
{
"bg-green-500": notif.type === "success",
"bg-red-500": notif.type === "error",
}
)}
role="alert"
>
<p className="text-white text-sm font-bold">{notif.text}</p>
<button
className="bg-white/5 rounded-lg p-3"
onClick={() => clearNotification(notif.text)}
>
<FontAwesomeIcon className="text-white" icon={faXmarkCircle} />
</button>
</div>
))}
</div>
</div>
);
};
const NotificationProvider = ({ children }: NotificationProviderProps) => {
const [notifications, setNotifications] = useState<Notification[]>([
{
text: "Your secrets weren't saved, please fix the conflicts first.",
type: "error",
},
{
text: "Testing",
type: "success",
},
]);
const clearNotification = (text?: string) => {
if (text) {
return setNotifications((state) =>
state.filter((notif) => notif.text !== text)
);
}
return setNotifications([]);
};
const createNotification = (
text: string,
type: NotificationType = "success"
) => {
const doesNotifExist = notifications.some((notif) => notif.text === text);
if (doesNotifExist) {
return;
}
return setNotifications((state) => [...state, { text, type }]);
};
return (
<NotificationContext.Provider
value={{
createNotification,
}}
>
<Notifications
notifications={notifications}
clearNotification={clearNotification}
/>
{children}
</NotificationContext.Provider>
);
};
export default NotificationProvider;
frontend/components/context/Notifications/NotificationProvider.tsx
+64
View File
@@ -0,0 +1,64 @@
import { createContext, ReactNode, useContext, useState } from "react";
import Notifications from "./Notifications";
type NotificationType = "success" | "error";
export type Notification = {
text: string;
type: NotificationType;
};
type NotificationContextState = {
createNotification: ({ text, type }: Notification) => void;
};
const NotificationContext = createContext<NotificationContextState>({
createNotification: () => console.log("createNotification not set!"),
});
export const useNotificationContext = () => useContext(NotificationContext);
interface NotificationProviderProps {
children: ReactNode;
}
const NotificationProvider = ({ children }: NotificationProviderProps) => {
const [notifications, setNotifications] = useState<Notification[]>([]);
const clearNotification = (text?: string) => {
if (text) {
return setNotifications((state) =>
state.filter((notif) => notif.text !== text)
);
}
return setNotifications([]);
};
const createNotification = ({ text, type = "success" }: Notification) => {
const doesNotifExist = notifications.some((notif) => notif.text === text);
if (doesNotifExist) {
return;
}
return setNotifications((state) => [...state, { text, type }]);
};
return (
<NotificationContext.Provider
value={{
createNotification,
}}
>
<Notifications
notifications={notifications}
clearNotification={clearNotification}
/>
{children}
</NotificationContext.Provider>
);
};
export default NotificationProvider;