1- import { FC , useEffect , useState } from "react" ;
1+ import { FC , useEffect , useMemo , useState } from "react" ;
22import {
33 Alert ,
44 AlertDescription ,
@@ -20,18 +20,18 @@ import {
2020 Input ,
2121 Button ,
2222} from "@chakra-ui/react" ;
23- import {
24- ICreateEventRecordParams ,
25- IEventGroup ,
26- INFTImage ,
27- useCreateEventRecord ,
28- useOwnEventGroups ,
29- } from "../../hooks/useEventManager" ;
3023import ErrorMessage from "../../components/atoms/form/ErrorMessage" ;
3124import { useLocale } from "../../hooks/useLocale" ;
3225import Link from "next/link" ;
3326import NFTAttributesForm from "./NFTAttributesForm" ;
3427import { useIpfs } from "src/hooks/useIpfs" ;
28+ import { useCreateEvent , useOwnEventGroups } from "src/hooks/useEvent" ;
29+ import { Event } from "types/Event" ;
30+ import { NFT } from "types/NFT" ;
31+
32+ type Props = {
33+ address : string ;
34+ } ;
3535
3636interface EventFormData {
3737 eventGroupId : string ;
@@ -43,19 +43,24 @@ interface EventFormData {
4343 secretPhrase : string ;
4444 mintLimit : number ;
4545 useMtx : "true" | "false" ;
46- nfts : INFTImage [ ] ;
46+ nfts : NFT . NFTImage [ ] ;
4747}
4848
49- const CreateEventForm : FC = ( ) => {
49+ const CreateEventForm : FC < Props > = ( { address } ) => {
5050 const { t } = useLocale ( ) ;
51- const { loading, errors, nftAttributes, saveNFTMetadataOnIPFS } = useIpfs ( ) ;
51+ const {
52+ loading : isUploadingMetadata ,
53+ errors,
54+ nftAttributes,
55+ saveNFTMetadataOnIPFS,
56+ } = useIpfs ( ) ;
5257 const [ formData , setFormData ] = useState < EventFormData | null > ( null ) ;
58+
5359 const {
5460 control,
5561 handleSubmit,
5662 formState : { isSubmitting } ,
5763 watch,
58- setValue,
5964 } = useForm < EventFormData > ( {
6065 mode : "all" ,
6166 defaultValues : {
@@ -68,74 +73,71 @@ const CreateEventForm: FC = () => {
6873 secretPhrase : "" ,
6974 mintLimit : 10 ,
7075 useMtx : undefined ,
71- nfts : [ ] ,
76+ nfts : [
77+ { name : "" , requiredParticipateCount : 0 , description : "" , image : "" } ,
78+ ] ,
7279 } ,
7380 } ) ;
7481
7582 const { remove, append } = useFieldArray ( { control, name : "nfts" } ) ;
7683
77- useEffect ( ( ) => {
78- const groupNFTAttributes = window . localStorage . getItem (
79- `group${ watch ( "eventGroupId" ) }
80- ) ;
81- if ( ! groupNFTAttributes ) {
82- console . log ( "dont has group" ) ;
83- setValue ( "nfts" , [
84- { name : "" , requiredParticipateCount : 0 , description : "" , image : "" } ,
85- ] ) ;
86- } else {
87- console . log ( "has group" , groupNFTAttributes ) ;
88- const baseNFTAttributes : INFTImage [ ] = JSON . parse ( groupNFTAttributes ) ;
89- console . log ( baseNFTAttributes ) ;
90- setValue ( "nfts" , baseNFTAttributes ) ;
91- }
92- } , [ watch ( "eventGroupId" ) ] ) ;
93-
9484 // state for loading event groups
95- const { groups } = useOwnEventGroups ( ) ;
96- const {
97- status,
98- errors : createError ,
99- loading : createLoading ,
100- createEventRecord,
101- } = useCreateEventRecord ( ) ;
85+ const { groups, isLoading : isLoadingEventGroups } = useOwnEventGroups ( ) ;
86+ const { createEvent, isCreating, createError, createStatus, createdEventId } =
87+ useCreateEvent ( address ) ;
10288
10389 const onSubmit = async ( data : EventFormData ) => {
10490 setFormData ( data ) ;
10591 saveNFTMetadataOnIPFS ( data . eventGroupId , data . eventName , data . nfts ) ;
10692 } ;
10793
10894 useEffect ( ( ) => {
109- console . log ( "nftAttributes" , nftAttributes ) ;
110- if ( nftAttributes . length > 0 && formData ) {
111- console . log ( "ok" , formData ) ;
112- const params : ICreateEventRecordParams = {
113- groupId : formData . eventGroupId ,
114- eventName : formData . eventName ,
115- description : formData . description ,
116- date : new Date ( formData . date ) ,
117- startTime : formData . startTime ,
118- endTime : formData . endTime ,
119- secretPhrase : formData . secretPhrase ,
120- mintLimit : Number ( formData . mintLimit ) ,
121- useMtx : formData . useMtx === "true" ,
122- attributes : nftAttributes ,
123- } ;
124- try {
125- console . log ( params ) ;
126- createEventRecord ( params ) ;
127- } catch ( error : any ) {
128- alert ( error ) ;
95+ const create = async ( ) => {
96+ if ( nftAttributes . length > 0 && formData ) {
97+ const params = {
98+ groupId : formData . eventGroupId ,
99+ eventName : formData . eventName ,
100+ description : formData . description ,
101+ date : new Date ( formData . date ) ,
102+ startTime : formData . startTime ,
103+ endTime : formData . endTime ,
104+ secretPhrase : formData . secretPhrase ,
105+ mintLimit : Number ( formData . mintLimit ) ,
106+ useMtx : formData . useMtx === "true" ,
107+ attributes : nftAttributes ,
108+ } ;
109+ await createEvent ( params ) ;
129110 }
130- }
111+ } ;
112+ create ( ) ;
131113 } , [ nftAttributes ] ) ;
132114
115+ const errorMessage = useMemo ( ( ) => {
116+ if ( createError || errors ) {
117+ return ( createError || errors ) as any ;
118+ }
119+ } , [ createError , errors ] ) ;
120+
121+ const isLoading = useMemo ( ( ) => {
122+ if ( isCreating || isUploadingMetadata ) return true ;
123+ } , [ isCreating , isUploadingMetadata ] ) ;
124+
133125 return (
134126 < >
135- { groups . length === 0 ? (
127+ { isLoadingEventGroups || typeof groups == "undefined" ? (
128+ < Spinner />
129+ ) : groups ?. length === 0 ? (
136130 < Link href = "/event-groups/new" > please create event group first</ Link >
137- ) : status ? (
138- "Your Event Created!🎉"
131+ ) : createdEventId ? (
132+ < Box >
133+ < Text > Your Event Created🎉</ Text >
134+
135+ < Link href = { `/events/${ createdEventId } } >
136+ < Button mt = { 10 } backgroundColor = "mint.bg" size = "md" >
137+ Go to Event Page
138+ </ Button >
139+ </ Link >
140+ </ Box >
139141 ) : (
140142 < form onSubmit = { handleSubmit ( onSubmit ) } >
141143 < FormControl mb = { 5 } >
@@ -150,7 +152,7 @@ const CreateEventForm: FC = () => {
150152 value = { value }
151153 onChange = { onChange }
152154 >
153- { groups . map ( ( item : IEventGroup ) => {
155+ { groups . map ( ( item : Event . EventGroup ) => {
154156 return (
155157 < option
156158 value = { item . groupId . toNumber ( ) }
@@ -398,20 +400,22 @@ const CreateEventForm: FC = () => {
398400 < Button
399401 mt = { 10 }
400402 type = "submit"
401- isLoading = { isSubmitting }
403+ isLoading = { isLoading || isSubmitting }
402404 backgroundColor = "mint.bg"
403405 size = "lg"
404406 width = "full"
405- disabled = { isSubmitting || status }
407+ disabled = { isLoading || isSubmitting }
406408 >
407- { createLoading ? < Spinner /> : status ? "Success" : "Create" }
409+ { t . CREATE_NEW_EVENT }
408410 </ Button >
409411
410- { createError && (
412+ { errorMessage && (
411413 < Alert status = "error" mt = { 2 } >
412414 < AlertIcon />
413415 < AlertTitle > Error occurred</ AlertTitle >
414- < AlertDescription > { createError . message } </ AlertDescription >
416+ < AlertDescription >
417+ { errorMessage ?. reason || errorMessage ?. message }
418+ </ AlertDescription >
415419 </ Alert >
416420 ) }
417421 </ >
0 commit comments