1- import React , { useRef , useState } from "react" ;
1+ import React , { useEffect , useRef , useState } from "react" ;
22import { useNavigate , useParams } from "react-router-dom" ;
33import SignatureCanvas from "react-signature-canvas" ;
4- import { Button , message , Spin } from "antd" ;
4+ import { Button , message , Spin , Typography } from "antd" ;
55import { uploadSignatureThunk } from "@thunks/upload-thunk" ;
6- import { useDispatch } from "react-redux" ;
6+ import { useDispatch , useSelector } from "react-redux" ;
7+ import { getSingleDocument , getSingleDocumentLoading } from "@/redux/selectors" ;
8+ import { fetchSingleDocumentThunk } from "@/redux/thunks/single-document-thunk" ;
9+ import { removeCurrentDocument } from "@/redux/slices/single-document" ;
10+
11+ const { Title } = Typography ;
712
813const SignatureUpload = ( ) => {
14+ const document = useSelector ( getSingleDocument ) ;
15+ const documentLoading = useSelector ( getSingleDocumentLoading ) ;
916 const [ loading , setLoading ] = useState ( false ) ;
1017 const dispatch = useDispatch ( ) ;
1118 const signatureRef = useRef ( null ) ;
1219 const { id } = useParams ( ) ;
1320 const navigate = useNavigate ( ) ;
1421
22+ useEffect ( ( ) => {
23+ if ( id ) {
24+ dispatch (
25+ fetchSingleDocumentThunk ( {
26+ endpoint : id ?. split ( "-" ) [ 0 ] ,
27+ id : id ?. split ( "-" ) [ 1 ] ,
28+ } ) ,
29+ ) ;
30+ }
31+ } , [ id ] ) ;
32+
1533 const handleSave = ( ) => {
1634 const signature = signatureRef . current
1735 . getTrimmedCanvas ( )
@@ -42,6 +60,7 @@ const SignatureUpload = () => {
4260 } ,
4361 } ) ,
4462 ) ;
63+ dispatch ( removeCurrentDocument ( ) ) ;
4564 } ;
4665
4766 const handleReset = ( ) => {
@@ -50,28 +69,34 @@ const SignatureUpload = () => {
5069
5170 return (
5271 < div className = "max-w-[500px] mx-auto h-screen flex flex-col gap-[20px] justify-center items-center" >
53- { loading ? (
54- < Spin / >
72+ { document ?. signature ? (
73+ < Title level = { 4 } > Sizning imzongiz mavjud </ Title >
5574 ) : (
5675 < >
57- { " " }
58- < SignatureCanvas
59- ref = { signatureRef }
60- penColor = "black"
61- canvasProps = { {
62- width : 500 ,
63- height : 200 ,
64- className : "border-2 border-black" ,
65- } }
66- />
67- < div className = "flex gap-4" >
68- < Button type = "primary" disabled = { loading } onClick = { handleSave } >
69- Saqlash
70- </ Button >
71- < Button type = "default" disabled = { loading } onClick = { handleReset } >
72- Qaytadan chizish
73- </ Button >
74- </ div >
76+ { loading || documentLoading ? (
77+ < Spin />
78+ ) : (
79+ < >
80+ { " " }
81+ < SignatureCanvas
82+ ref = { signatureRef }
83+ penColor = "black"
84+ canvasProps = { {
85+ width : 500 ,
86+ height : 200 ,
87+ className : "border-2 border-black" ,
88+ } }
89+ />
90+ < div className = "flex gap-4" >
91+ < Button type = "primary" disabled = { loading } onClick = { handleSave } >
92+ Saqlash
93+ </ Button >
94+ < Button type = "default" disabled = { loading } onClick = { handleReset } >
95+ Qaytadan chizish
96+ </ Button >
97+ </ div >
98+ </ >
99+ ) }
75100 </ >
76101 ) }
77102 </ div >
0 commit comments