import { Button , Grid , TextField } from "@material-ui/core" ; import { Container } from "@material-ui/core" ; import React , { ReactElement , useState } from "react" ; import { useForm , SubmitHandler } from "react-hook-form" ; import ImageDropzone from "../components/ImageDropzone" ; import { API , Storage } from "aws-amplify" ; import { v4 as uuidv4 } from "uuid" ; import { createPost } from "../graphql/mutations" ; import { CreatePostInput , CreatePostMutation } from "../API" ; import { useRouter } from "next/router" ; import { GRAPHQL_AUTH_MODE } from "@aws-amplify/api" ; interface IFormInput { title : string ; content : string ; } interface Props { } export default function Create ( { } ) { const [ file , setFile ] = useState < File > ( ) ; const router = useRouter ( ) ; const { register , formState : { errors } , handleSubmit , } = useForm < IFormInput > ( ) ; const onSubmit = async ( data ) => { console . log ( file ) ; console . log ( data ) ; if ( file ) { try { const imagePath = uuidv4 ( ) ; await Storage . put ( imagePath , file , { contentType : file . type , } ) ; const createNewPostInput = { title : data . title , contents : data . content , image : imagePath , } ; const createNewPost = ( await API . graphql ( { query : createPost , variables : { input : createNewPostInput } , authMode : GRAPHQL_AUTH_MODE . AMAZON_COGNITO_USER_POOLS , } ) ) as { data : CreatePostMutation ; } ; console . log ( "New post created successfully:" , createNewPost ) ; router . push ( `/post/${ createNewPost . data . createPost . id }` ) ; } catch ( error ) { console . error ( "Error uploading file: " , error ) ; } } else { const createNewPostWithoutImageInput = { title : data . title , contents : data . content , } ; const createNewPostWithoutImage = ( await API . graphql ( { query : createPost , variables : { input : createNewPostWithoutImageInput } , authMode : GRAPHQL_AUTH_MODE . AMAZON_COGNITO_USER_POOLS , } ) ) as { data : CreatePostMutation ; } ; router . push ( `/post/${ createNewPostWithoutImage . data . createPost . id }` ) ; } } ; return ( < Container maxWidth = "md" > { } < form onSubmit = { handleSubmit ( onSubmit ) } autoComplete = "off" > < Grid container spacing = { 4 } direction = "column" > { } < Grid item > < TextField variant = "outlined" id = "title" label = "Post Title" type = "text" fullWidth error = { errors . title ? true : false } helperText = { errors . title ? errors . title . message : null } { ... register ( "title" , { required : { value : true , message : "Please enter a title." } , maxLength : { value : 120 , message : "Please enter a title that is 120 characters or less." , } , } ) } /> < /Grid> { } < Grid item > < TextField variant = "outlined" id = "content" label = "Post Content" type = "text" fullWidth multiline error = { errors . content ? true : false } helperText = { errors . content ? errors . content . message : null } { ... register ( "content" , { required : { value : true , message : "Please enter some content for your post." , } , maxLength : { value : 1000 , message : "Please make sure your content is 1000 characters or less." , } , } ) } /> < /Grid> { } < Grid item > < ImageDropzone file = { file } setFile = { setFile } / > < /Grid> { } < Button variant = "contained" type = "submit" > Create Post < /Button> < /Grid> < /form> < /Container>); }