import * as yup from 'yup' ; import { useParams , useHistory } from 'react-router-dom' ; import { useFormik } from 'formik' ; import { Header } from '../../modules/layout/Header' ; import { useDatabaseByIdQuery , useDestroyDatabaseMutation , DashboardDocument , useDatabaseInfoQuery , } from '../../generated/graphql' ; import { Button , FormInput , FormHelper , HeaderContainer } from '../../ui' ; import { Container , Heading } from '@chakra-ui/react' ; import { useToast } from '../../ui/toast' ; import { DatabaseHeaderInfo } from '../../modules/database/DatabaseHeaderInfo' ; import { DatabaseHeaderTabNav } from '../../modules/database/DatabaseHeaderTabNav' ; export const Settings = ( ) => { const { id : databaseId } = useParams < { id : string ; } > ( ) ; let history = useHistory ( ) ; const toast = useToast ( ) ; const [ destroyDatabaseMutation , { loading : destroyDbLoading } , ] = useDestroyDatabaseMutation ( ) ; const { data , loading } = useDatabaseByIdQuery ( { variables : { databaseId , } , ssr : false , skip : ! databaseId , } ) ; const { data : databaseInfoData , loading : databaseInfoLoading , } = useDatabaseInfoQuery ( { variables : { databaseId , } , ssr : false , skip : ! databaseId , pollInterval : 15000 , } ) ; const DeleteDatabaseNameSchema = yup . object ( ) . shape ( { databaseName : yup . string ( ) . required ( 'Required' ) . test ( 'Equals database name' , 'Must match database name' , ( val ) => val === data ?. database ?. name ) , } ) ; const formik = useFormik < { databaseName : string ; } > ( { initialValues : { databaseName : '' , } , validateOnChange : true , validationSchema : DeleteDatabaseNameSchema , onSubmit : async ( values ) => { try { await destroyDatabaseMutation ( { variables : { input : { databaseId } , } , refetchQueries : [ { query : DashboardDocument , } , ] , } ) ; toast . success ( 'Database deleted successfully' ) ; history . push ( '/dashboard' ) ; } catch ( error ) { toast . error ( error . message ) ; } } , } ) ; if ( ! data ) { return null ; } if ( loading ) { return < p > Loading ... < /p>; } const { database } = data ; if ( ! database ) { return < p > Database not found . < /p>; } const databaseInfos = databaseInfoData ?. databaseInfo . info . map ( ( data ) => data . trim ( ) ) . map ( ( info ) => { const name = info . split ( ':' ) [ 0 ] ; const value = info . substring ( info . indexOf ( ':' ) + 1 ) . trim ( ) ; return { name , value } ; } ) ; return ( < div > < HeaderContainer > < Header /> < DatabaseHeaderInfo database = { database } / > < DatabaseHeaderTabNav database = { database } /> < /HeaderContainer> < Container maxW = "5xl" mt = { 10 } > < div className = "grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-4 mt-10" > < div className = "col-span-2 w-5/5" > < Heading as = "h2" size = "md" py = { 5 } > Infos < /Heading> { databaseInfoLoading ? ( < p className = "text-gray-400 text-sm" > Loading ... < /p>) : null} { ! databaseInfoLoading && databaseInfos ? databaseInfos . map ( ( info ) => ( < div key = { info . name } className = "py-2" > < div className = "font-semibold" > { info . name } < /div> < div > { info . value } < /div> < /div>)) : null } < /div> < div className = "w-3/3 mb-6" > < h1 className = "text-lg font-bold py-5" > Database settings < /h1> < h2 className = "text-gray-400 w-6/6" > This action cannot be undone . This will permanently delete { ' ' } { database . name } database and everything related to it . Please type { ' ' } < b > { database . name } < /b> to confirm deletion. < /h2> < form onSubmit = { formik . handleSubmit } > < div className = "grid md:grid-cols-3" > < div className = "mt-4" > < FormInput autoComplete = "off" id = "databaseName" name = "databaseName" value = { formik . values . databaseName } onChange = { formik . handleChange } onBlur = { formik . handleBlur } error = { Boolean ( formik . errors . databaseName && formik . touched . databaseName ) } / > { formik . errors . databaseName && formik . errors . databaseName ? ( < FormHelper status = "error" > { formik . errors . databaseName } < /FormHelper>) : null} < Button type = "submit" isLoading = { destroyDbLoading } disabled = { ! formik . values . databaseName || ! ! formik . errors . databaseName } color = "red" className = "mt-2" > Delete < /Button> < /div> < /div> < /form> < /div> < /div> < /Container> < /div>); } ;