refactor: remove useToastFunctions interface - handle everything via …

…the provider
Admyral-Security · Oct 21, 2024 · de90c35 · de90c35
1 parent e960ab5
commit de90c35
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 45 deletions.
diff --git a/web/src/components/api-keys/create-api-keys.tsx b/web/src/components/api-keys/create-api-keys.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCreateApiKey } from "@/hooks/use-create-api-key";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { useApiKeysStore } from "@/stores/api-keys-store";
 import { InfoCircledIcon, PlusIcon } from "@radix-ui/react-icons";
 import {
@@ -25,7 +25,7 @@ export default function CreateApiKey() {
 	const [state, setState] = useState<State>(State.CLOSED);
 	const [name, setName] = useState<string | undefined>(undefined);
 	const [secretKey, setSecretKey] = useState<string>("");
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 
 	const createApiKey = useCreateApiKey();
 	const { addApiKey } = useApiKeysStore();

diff --git a/web/src/components/api-keys/existing-api-key.tsx b/web/src/components/api-keys/existing-api-key.tsx
@@ -6,7 +6,7 @@ import { TApiKeyMetadata } from "@/types/api-key";
 import { TrashIcon } from "@radix-ui/react-icons";
 import { Flex, IconButton, Text, TextField } from "@radix-ui/themes";
 import { useEffect } from "react";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 
 export default function ExistingApiKey({
 	key,
@@ -18,7 +18,7 @@ export default function ExistingApiKey({
 	const { removeApiKey } = useApiKeysStore();
 	const deleteApiKey = useDeleteApiKey();
 	const handleDelete = () => deleteApiKey.mutate({ id: apiKey.id });
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 
 	useEffect(() => {
 		if (deleteApiKey.isSuccess) {

diff --git a/web/src/components/publish-workflow-toggle/publish-workflow-toggle-base.tsx b/web/src/components/publish-workflow-toggle/publish-workflow-toggle-base.tsx
@@ -1,4 +1,4 @@
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { Flex, Switch, Text } from "@radix-ui/themes";
 import { usePublishWorkflowApi } from "@/hooks/use-publish-workflow-api";
 import { useEffect } from "react";
@@ -14,7 +14,7 @@ export default function PublishWorkflowToggleBase({
 	isLive,
 	updateIsLiveState,
 }: PublishWorkflowToggleBaseProps) {
-	const { infoToast } = useToastFunctions();
+	const { infoToast } = useToast();
 	const publishWorkflow = usePublishWorkflowApi();
 
 	useEffect(() => {

diff --git a/web/src/components/run-workflow/run-workflow-dialog.tsx b/web/src/components/run-workflow/run-workflow-dialog.tsx
@@ -1,5 +1,5 @@
 import { useTriggerWorkflowApi } from "@/hooks/use-trigger-workflow-api";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { useWorkflowStore } from "@/stores/workflow-store";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { Button, Dialog, Flex, Text } from "@radix-ui/themes";
@@ -14,7 +14,7 @@ export default function RunWorkflowDialog({
 	const { workflowName, isActive, payloadCache, setPayloadCache } =
 		useWorkflowStore();
 	const triggerWorkflow = useTriggerWorkflowApi();
-	const { errorToast, infoToast } = useToastFunctions();
+	const { errorToast, infoToast } = useToast();
 
 	useEffect(() => {
 		if (triggerWorkflow.isSuccess) {

diff --git a/web/src/components/save-workflow-button/save-workflow-button.tsx b/web/src/components/save-workflow-button/save-workflow-button.tsx
@@ -8,15 +8,15 @@ import { useEffect } from "react";
 import { AxiosError } from "axios";
 import { useEditorActionStore } from "@/stores/editor-action-store";
 import { EditorWorkflowNodeType } from "@/types/react-flow";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 
 const SPACE = " ";
 
 export default function SaveWorkflowButton() {
 	const { getWorkflow, updateWebhookIdAndSecret } = useWorkflowStore();
 	const { actionsIndex } = useEditorActionStore();
 	const saveWorkflow = useSaveWorkflowApi();
-	const { errorToast, infoToast } = useToastFunctions();
+	const { errorToast, infoToast } = useToast();
 
 	useEffect(() => {
 		if (saveWorkflow.isSuccess) {

diff --git a/web/src/components/secrets/encrypted-secret.tsx b/web/src/components/secrets/encrypted-secret.tsx
@@ -5,11 +5,11 @@ import { Flex, IconButton, Text, TextField } from "@radix-ui/themes";
 import { useSecretsStore } from "@/stores/secrets-store";
 import { useDeleteSecretApi } from "@/hooks/use-delete-secret-api";
 import { useEffect } from "react";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { TrashIcon } from "@radix-ui/react-icons";
 
 export default function EncryptedSecret({ idx }: { idx: number }) {
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 	const { secrets, removeSecret } = useSecretsStore();
 	const deleteSecret = useDeleteSecretApi();
 

diff --git a/web/src/components/secrets/new-secret.tsx b/web/src/components/secrets/new-secret.tsx
@@ -8,10 +8,10 @@ import { useSecretsStore } from "@/stores/secrets-store";
 import { useSetSecretApi } from "@/hooks/use-set-secret-api";
 import { ChangeEvent, useEffect } from "react";
 import { produce } from "immer";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 
 export default function NewSecret({ idx }: { idx: number }) {
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 	const { secrets, updateSecret } = useSecretsStore();
 	const saveSecret = useSetSecretApi();
 

diff --git a/web/src/components/utils/copy-text.tsx b/web/src/components/utils/copy-text.tsx
@@ -1,4 +1,4 @@
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { Button, Flex, TextField, Tooltip } from "@radix-ui/themes";
 
@@ -7,7 +7,7 @@ export interface CopyTextProps {
 }
 
 export default function CopyText({ text }: CopyTextProps) {
-	const { successToast } = useToastFunctions();
+	const { successToast } = useToast();
 	const copyToClipboard = () => {
 		navigator.clipboard.writeText(text);
 		successToast("Copied to clipboard.");

diff --git a/web/src/components/workflow-editor/run-history/workflow-run-history.tsx b/web/src/components/workflow-editor/run-history/workflow-run-history.tsx
@@ -1,5 +1,5 @@
 import { useListWorkflowRunsApi } from "@/hooks/use-list-workflow-runs-api";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { Box, Flex, Spinner, ScrollArea, Text } from "@radix-ui/themes";
 import { useEffect, useState } from "react";
 import WorkflowRunTrace from "./workflow-run-trace";
@@ -50,7 +50,7 @@ export default function WorkflowRunHistory({
 	const { data, isPending, error } = useListWorkflowRunsApi(workflowId);
 	const [selectedRunIdx, setSelectedRunIdx] = useState<number | null>(null);
 	const [runs, setRuns] = useState<TWorkflowRunMetadata[]>([]);
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 
 	useEffect(() => {
 		if (data && data.length > 0) {

diff --git a/web/src/components/workflow-editor/run-history/workflow-run-step.tsx b/web/src/components/workflow-editor/run-history/workflow-run-step.tsx
@@ -1,6 +1,6 @@
 import ErrorCallout from "@/components/utils/error-callout";
 import { useGetWorkflowRunStepApi } from "@/hooks/use-get-workflow-run-step-api";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { TJson } from "@/types/json";
 import { Box, DataList, Flex, ScrollArea, Tabs, Text } from "@radix-ui/themes";
 import { useEffect } from "react";
@@ -20,7 +20,7 @@ export default function WorkflowRunStep({
 		workflowRunId,
 		workflowRunStepId,
 	);
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 
 	useEffect(() => {
 		if (error) {

diff --git a/web/src/components/workflow-editor/run-history/workflow-run-trace.tsx b/web/src/components/workflow-editor/run-history/workflow-run-trace.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Text } from "@radix-ui/themes";
 import WorkflowRunStep from "./workflow-run-step";
 import { useGetWorkflowRunStepsApi } from "@/hooks/use-get-workflow-run-steps-api";
 import { useEffect, useState } from "react";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import Row from "./row";
 import ErrorCallout from "@/components/utils/error-callout";
 import { TWorkflowRunStepMetadata } from "@/types/workflow-runs";
@@ -24,7 +24,7 @@ export default function WorkflowRunTrace({
 	);
 	const [selectedStepIdx, setSelectedStepIdx] = useState<number>(0);
 	const [steps, setSteps] = useState<TWorkflowRunStepMetadata[]>([]);
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 
 	useEffect(() => {
 		if (data) {

diff --git a/web/src/components/workflow-editor/workflow-editor.tsx b/web/src/components/workflow-editor/workflow-editor.tsx
@@ -17,7 +17,7 @@ import WorkflowSettingsButton from "./workflow-settings-button";
 import WorkflowEditorActionEditSidebar from "./workflow-editor-action-edit-sidebar";
 import WorkflowRunHistory from "./run-history/workflow-run-history";
 import RunWorkflowButton from "../run-workflow/run-workflow-button";
-import { useToastFunctions } from "@/lib/toast";
+import { useToast } from "@/providers/toast";
 import { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
 
@@ -36,7 +36,7 @@ export default function WorkflowEditor({
 
 	const { isNew, setWorkflow, clearWorkflowStore } = useWorkflowStore();
 	const { setEditorActions } = useEditorActionStore();
-	const { errorToast } = useToastFunctions();
+	const { errorToast } = useToast();
 
 	// Loading Actions
 	const {

diff --git a/web/src/lib/toast.ts b/web/src/lib/toast.ts
diff --git a/web/src/providers/toast.tsx b/web/src/providers/toast.tsx
@@ -12,19 +12,13 @@ import { Flex } from "@radix-ui/themes";
 type ToastType = "success" | "error" | "info";
 
 interface ToastContextType {
-	showToast: (message: string, type: ToastType) => void;
+	successToast: (message: string) => void;
+	errorToast: (message: string) => void;
+	infoToast: (message: string) => void;
 }
 
 const ToastContext = createContext<ToastContextType | undefined>(undefined);
 
-export function useToast() {
-	const context = useContext(ToastContext);
-	if (context === undefined) {
-		throw new Error("useToast must be used within a ToastProvider");
-	}
-	return context;
-}
-
 const ToastIcon = ({ type }: { type: ToastType }) => {
 	switch (type) {
 		case "info":
@@ -48,7 +42,14 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
 	};
 
 	return (
-		<ToastContext.Provider value={{ showToast }}>
+		<ToastContext.Provider
+			value={{
+				successToast: (message: string) =>
+					showToast(message, "success"),
+				errorToast: (message: string) => showToast(message, "error"),
+				infoToast: (message: string) => showToast(message, "info"),
+			}}
+		>
 			{children}
 			<Toast.Provider swipeDirection="right">
 				<Toast.Root
@@ -73,3 +74,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
 		</ToastContext.Provider>
 	);
 }
+
+export function useToast() {
+	const context = useContext(ToastContext);
+	if (context === undefined) {
+		throw new Error("useToast must be used within a ToastProvider");
+	}
+	return context;
+}