Refactor/signature context

app/components/invoice/components/form/sections/InvoiceSummary.tsx

@@ -8,6 +8,7 @@ import { Charges, FormTextarea, SignatureModal } from "@/app/components";
 
 // Contexts
 import { useTranslationContext } from "@/app/contexts/TranslationContext";
+import { SignatureContextProvider } from "@/app/contexts/SignatureContext";
 
 type InvoiceSummaryProps = {};
 
@@ -21,7 +22,9 @@ const InvoiceSummary = ({}: InvoiceSummaryProps) => {
             <div className="flex flex-wrap gap-x-5 gap-y-10">
                 <div className="flex flex-col gap-3">
                     {/* Signature dialog */}
-                    <SignatureModal />
+                    <SignatureContextProvider>
+                        <SignatureModal />
+                    </SignatureContextProvider>
 
                     {/* Additional notes & Payment terms */}
                     <FormTextarea

app/components/modals/signature/SignatureModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 // RHF
 import { useFormContext, useWatch } from "react-hook-form";
@@ -24,13 +24,11 @@ import {
 
 // Contexts
 import { useTranslationContext } from "@/app/contexts/TranslationContext";
+import { useSignatureContext } from "@/app/contexts/SignatureContext";
 
 // Icons
 import { FileSignature } from "lucide-react";
 
-// Hooks
-import { useSignature } from "@/app/hooks/useSignature";
-
 // Helpers
 import { isDataUrl } from "@/lib/helpers";
 
@@ -42,6 +40,15 @@ type SignatureModalProps = {};
 const SignatureModal = ({}: SignatureModalProps) => {
     const { setValue } = useFormContext();
 
+    const {
+        handleCanvasEnd,
+        signatureData,
+        typedSignature,
+        selectedFont,
+        uploadSignatureImg,
+        signatureRef,
+    } = useSignatureContext();
+
     const { _t } = useTranslationContext();
 
     // Modal state
@@ -54,33 +61,10 @@ const SignatureModal = ({}: SignatureModalProps) => {
         setTab(value as string);
     };
 
-    // Signature variables
-    const {
-        signatureData,
-        signatureRef,
-        colors,
-        selectedColor,
-        handleColorButtonClick,
-        clearSignature,
-        handleCanvasEnd,
-        typedSignature,
-        setTypedSignature,
-        typedSignatureFonts,
-        selectedFont,
-        setSelectedFont,
-        typedSignatureFontSize,
-        uploadSignatureRef,
-        uploadSignatureImg,
-        handleUploadSignatureChange,
-        handleRemoveUploadedSignature,
-    } = useSignature();
-
     const signature = useWatch({
         name: "details.signature.data",
     });
 
-    const typedSignatureRef = useRef<HTMLInputElement | null>(null);
-
     /**
      * Function that handles signature save logic for all tabs (draw, type, upload)
      */
@@ -126,7 +110,7 @@ const SignatureModal = ({}: SignatureModalProps) => {
         if (open && signatureData) {
             // Access the canvas element and draw the signature
             setTimeout(() => {
-                const canvas = signatureRef.current;
+                const canvas = signatureRef?.current;
                 if (canvas) {
                     canvas.fromDataURL(signatureData);
                 }
@@ -199,36 +183,16 @@ const SignatureModal = ({}: SignatureModalProps) => {
 
                         {/* DRAW */}
                         <DrawSignature
-                            signatureData={signatureData}
-                            signatureRef={signatureRef}
-                            colors={colors}
-                            selectedColor={selectedColor}
-                            handleColorButtonClick={handleColorButtonClick}
-                            clearSignature={clearSignature}
-                            handleCanvasEnd={handleCanvasEnd}
                             handleSaveSignature={handleSaveSignature}
                         />
 
                         {/* TYPE */}
                         <TypeSignature
-                            typedSignatureFontSize={typedSignatureFontSize}
-                            selectedFont={selectedFont}
-                            setSelectedFont={setSelectedFont}
-                            typedSignature={typedSignature}
-                            setTypedSignature={setTypedSignature}
-                            typedSignatureFonts={typedSignatureFonts}
                             handleSaveSignature={handleSaveSignature}
-                            inputRef={typedSignatureRef}
                         />
 
                         {/* UPLOAD */}
                         <UploadSignature
-                            uploadSignatureRef={uploadSignatureRef}
-                            uploadSignatureImg={uploadSignatureImg}
-                            handleUploadSignatureChange={
-                                handleUploadSignatureChange
-                            }
-                            handleRemoveUpload={handleRemoveUploadedSignature}
                             handleSaveSignature={handleSaveSignature}
                         />
                     </Tabs>

app/components/modals/signature/tabs/DrawSignature.tsx

@@ -12,33 +12,30 @@ import { TabsContent } from "@/components/ui/tabs";
 // Components
 import { BaseButton, SignatureColorSelector } from "@/app/components";
 
+// Contexts
+import { useSignatureContext } from "@/app/contexts/SignatureContext";
+
 // Icons
 import { Eraser } from "lucide-react";
 
 // Types
-import { SignatureColor, SignatureTabs } from "@/app/types/types";
+import { SignatureTabs } from "@/app/types/types";
 
 type DrawSignatureProps = {
-    signatureData?: string;
-    signatureRef?: React.RefObject<SignatureCanvas>;
-    colors: SignatureColor[];
-    selectedColor: string;
-    handleColorButtonClick: (color: string) => void;
-    clearSignature: () => void;
-    handleCanvasEnd: () => void;
     handleSaveSignature: () => void;
 };
 
-const DrawSignature = ({
-    signatureData,
-    signatureRef,
-    colors,
-    selectedColor,
-    handleColorButtonClick,
-    clearSignature,
-    handleCanvasEnd,
-    handleSaveSignature,
-}: DrawSignatureProps) => {
+const DrawSignature = ({ handleSaveSignature }: DrawSignatureProps) => {
+    const {
+        signatureData,
+        signatureRef,
+        colors,
+        selectedColor,
+        handleColorButtonClick,
+        clearSignature,
+        handleCanvasEnd,
+    } = useSignatureContext();
+
     return (
         <TabsContent value={SignatureTabs.DRAW}>
             <Card className="border-none shadow-none">

app/components/modals/signature/tabs/TypeSignature.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import React from "react";
 
 // ShadCn
 import { Card, CardContent } from "@/components/ui/card";
@@ -8,30 +8,27 @@ import { TabsContent } from "@/components/ui/tabs";
 // Components
 import { BaseButton, SignatureFontSelector } from "@/app/components";
 
+// Contexts
+import { useSignatureContext } from "@/app/contexts/SignatureContext";
+
 // Types
-import { SignatureFont, SignatureTabs } from "@/app/types/types";
+import { SignatureTabs } from "@/app/types/types";
 
 type TypeSignatureProps = {
-    typedSignatureFontSize: number | string;
-    selectedFont: SignatureFont;
-    setSelectedFont: (value: SignatureFont) => void;
-    typedSignature: string;
-    setTypedSignature: (value: string) => void;
-    typedSignatureFonts: SignatureFont[];
     handleSaveSignature: () => void;
-    inputRef: RefObject<HTMLInputElement>;
 };
 
-const TypeSignature = ({
-    typedSignatureFontSize,
-    selectedFont,
-    setSelectedFont,
-    typedSignature,
-    setTypedSignature,
-    typedSignatureFonts,
-    handleSaveSignature,
-    inputRef,
-}: TypeSignatureProps) => {
+const TypeSignature = ({ handleSaveSignature }: TypeSignatureProps) => {
+    const {
+        typedSignatureFontSize,
+        selectedFont,
+        setSelectedFont,
+        typedSignature,
+        setTypedSignature,
+        typedSignatureRef,
+        typedSignatureFonts,
+    } = useSignatureContext();
+
     return (
         <TabsContent value={SignatureTabs.TYPE}>
             <Card className="border-none shadow-none">
@@ -42,7 +39,7 @@ const TypeSignature = ({
                     >
                         <Input
                             id="typed-signature"
-                            ref={inputRef}
+                            ref={typedSignatureRef}
                             className="bg-transparent h-full text-center"
                             style={{
                                 fontSize: `${typedSignatureFontSize}px`,

app/components/modals/signature/tabs/UploadSignature.tsx

@@ -7,29 +7,27 @@ import { TabsContent } from "@/components/ui/tabs";
 // Components
 import { BaseButton } from "@/app/components";
 
+// Contexts
+import { useSignatureContext } from "@/app/contexts/SignatureContext";
+
 // Icons
 import { Trash2 } from "lucide-react";
 
 // Types
 import { SignatureTabs } from "@/app/types/types";
 
 type UploadSignatureProps = {
-    uploadSignatureRef: React.RefObject<HTMLInputElement>;
-    uploadSignatureImg: string;
-    handleUploadSignatureChange: (
-        e: React.ChangeEvent<HTMLInputElement>
-    ) => void;
-    handleRemoveUpload: () => void;
     handleSaveSignature: () => void;
 };
 
-const UploadSignature = ({
-    uploadSignatureRef,
-    uploadSignatureImg,
-    handleUploadSignatureChange,
-    handleRemoveUpload,
-    handleSaveSignature,
-}: UploadSignatureProps) => {
+const UploadSignature = ({ handleSaveSignature }: UploadSignatureProps) => {
+    const {
+        uploadSignatureRef,
+        uploadSignatureImg,
+        handleUploadSignatureChange,
+        handleRemoveUploadedSignature,
+    } = useSignatureContext();
+
     return (
         <TabsContent value={SignatureTabs.UPLOAD}>
             <Card className="border-none shadow-none">
@@ -63,7 +61,7 @@ const UploadSignature = ({
                         <BaseButton
                             tooltipLabel="Remove signature image"
                             variant="outline"
-                            onClick={handleRemoveUpload}
+                            onClick={handleRemoveUploadedSignature}
                         >
                             <Trash2 />
                             Remove

app/contexts/Providers.tsx

@@ -13,7 +13,7 @@ import { InvoiceSchema } from "@/lib/schemas";
 
 // Context
 import { ThemeProvider } from "@/app/contexts/ThemeProvider";
-import { TranslationProvider } from "./TranslationContext";
+import { TranslationProvider } from "@/app/contexts/TranslationContext";
 import { InvoiceContextProvider } from "@/app/contexts/InvoiceContext";
 import { ChargesContextProvider } from "@/app/contexts/ChargesContext";