feat: add popup error messages

src/providers/board.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 
 import { api } from "~/utils/api";
+import { usePopup } from "~/providers/popup";
 
 import {
   type GetBoardByIdOutput,
@@ -40,6 +41,8 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
   const [boardData, setBoardData] =
     useState<GetBoardByIdOutput>(initialBoardData);
 
+  const { showPopup } = usePopup();
+
   const refetchBoard = async () => {
     if (boardData?.publicId) {
       try {
@@ -52,10 +55,24 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
 
   const updateCardMutation = api.card.reorder.useMutation({
     onSuccess: () => refetchBoard(),
+    onError: () => {
+      refetchBoard();
+      showPopup({
+        header: "Unable to update card",
+        message: "Please try again later, or contact customer support.",
+      });
+    },
   });
 
   const updateListMutation = api.list.reorder.useMutation({
     onSuccess: () => refetchBoard(),
+    onError: () => {
+      refetchBoard();
+      showPopup({
+        header: "Unable to update list",
+        message: "Please try again later, or contact customer support.",
+      });
+    },
   });
 
   const updateList = ({

src/providers/popup.tsx

@@ -0,0 +1,53 @@
+import { createContext, useContext, useState } from "react";
+
+type PopupContextType = {
+  isOpen: boolean;
+  showPopup: (params: { header: string; message: string }) => void;
+  hidePopup: () => void;
+  popupHeader: string;
+  popupMessage: string;
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const PopupContext = createContext<PopupContextType | undefined>(undefined);
+
+export const PopupProvider: React.FC<Props> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [popupHeader, setPopupHeader] = useState("");
+  const [popupMessage, setPopupMessage] = useState("");
+
+  const showPopup = ({
+    header,
+    message,
+  }: {
+    header: string;
+    message: string;
+  }) => {
+    setIsOpen(true);
+    setPopupHeader(header);
+    setPopupMessage(message);
+  };
+
+  const hidePopup = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <PopupContext.Provider
+      value={{ isOpen, showPopup, hidePopup, popupHeader, popupMessage }}
+    >
+      {children}
+    </PopupContext.Provider>
+  );
+};
+
+export const usePopup = () => {
+  const context = useContext(PopupContext);
+  if (context === undefined) {
+    throw new Error("usePopup must be used within a PopupProvider");
+  }
+  return context;
+};