Untitled
unknown
plain_text
a year ago
3.6 kB
1
Indexable
Never
import useQrTypeDataContext from '@/contexts/QrTypeDataContext'; import { qrCodeUrl } from '@/lib/api/getAxios'; import { Form, Formik } from 'formik'; import { useRouter } from 'next/navigation'; import { useEffect, useState } from 'react'; import WebQrDesignForm from './WebQrDesignForm'; import WebQrDesignPreview from './WebQrDesignPreview'; export default function WebQrDesignHome() { const [initialValues, setInitialValues] = useState({ width: 200, height: 200, margin: 0, image: null, dotsOptions: { type: 'square', color: '#000000', gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#000000' }, { offset: 1, color: '#000000' } ] } }, backgroundOptions: { color: '#ffffff', gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#ffffff' }, { offset: 1, color: '#ffffff' } ] } }, cornersSquareOptions: { type: 'extra-rounded', color: '#000000', gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#000000' }, { offset: 1, color: '#000000' } ] } }, cornersDotOptions: { type: 'dot', color: '#000000', gradient: { type: 'linear', rotation: 0, colorStops: [ { offset: 0, color: '#000000' }, { offset: 1, color: '#000000' } ] } } }); const [loading, setLoading] = useState(false); const { push } = useRouter(); const { websiteData } = useQrTypeDataContext(); const handleSubmit = async values => { console.log(values); const qrStyles = { qr_info: values }; const { data } = await qrCodeUrl.put(`/api/v1/qr/website/${websiteData.qr_id}`, qrStyles); console.log(data); }; useEffect(() => { if (websiteData.qr_id) { setLoading(false); } else { // push("/qr-code-generator"); } }, [push, websiteData.qr_id]); return loading ? ( 'Loading' ) : ( <div> <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize> {({ values, setFieldValue, handleChange }) => ( <Form> <div className='flex items-center justify-end'> <button type='submit' className='btn btn-primary fixed right-10 rounded-full text-white'> Save Qr </button> </div> <div className='grid grid-cols-3 gap-4'> <WebQrDesignForm values={values} setFieldValue={setFieldValue} handleChange={handleChange} /> <WebQrDesignPreview values={values} qr_id={websiteData.qr_id} /> </div> </Form> )} </Formik> </div> ); }