111 lines
3.6 KiB
TypeScript
111 lines
3.6 KiB
TypeScript
import { createSignal } from 'solid-js'
|
|
import { Show } from 'solid-js/web'
|
|
import { useLocalize } from '~/context/localize'
|
|
|
|
export const ConnectView = () => {
|
|
const { t } = useLocalize()
|
|
const [state, setState] = createSignal<'initial' | 'loading' | 'success' | 'error'>('initial')
|
|
let formRef: HTMLFormElement | null = null
|
|
|
|
const handleFormSubmit = async (e: SubmitEvent) => {
|
|
e.preventDefault()
|
|
setState('loading')
|
|
|
|
const postData = formRef
|
|
? Array.from(formRef.elements).reduce(
|
|
(acc, element) => {
|
|
const formField = element as HTMLInputElement
|
|
if (formField.name) {
|
|
acc[formField.name] = formField.value
|
|
}
|
|
return acc
|
|
},
|
|
{} as Record<string, string>
|
|
)
|
|
: {}
|
|
|
|
const requestOptions = {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(postData)
|
|
}
|
|
|
|
try {
|
|
const result = await fetch('/api/feedback', requestOptions)
|
|
if (!result.ok) {
|
|
console.error('[handleFormSubmit]', result)
|
|
setState('error')
|
|
return
|
|
}
|
|
setState('success')
|
|
window.scrollTo({
|
|
top: 0
|
|
})
|
|
} catch (error) {
|
|
console.error('[handleFormSubmit]', error)
|
|
setState('error')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<article class="wide-container container--static-page">
|
|
<div class="row">
|
|
<div class="col-sm-20 col-md-16 col-lg-14 col-xl-12 offset-md-5">
|
|
<Show when={state() !== 'success'}>
|
|
<h1>
|
|
<span class="wrapped">{t('Suggest an idea')}</span>
|
|
</h1>
|
|
|
|
<p>
|
|
{t(
|
|
'Want to suggest, discuss or advise something? Share a topic or an idea? Please send us a message!'
|
|
)}
|
|
{t('Specify your e-mail and we will reply.')}
|
|
</p>
|
|
|
|
<form onSubmit={handleFormSubmit} ref={(el) => (formRef = el)}>
|
|
<div class="pretty-form__item">
|
|
<select name="subject" disabled={state() === 'loading'}>
|
|
<option value={t('Collaborate')} selected>
|
|
{t('Collaborate')}
|
|
</option>
|
|
<option value={t('Recommend some new topic')}>{t('Recommend some new topic')}</option>
|
|
<option value={t('Report an error')}>{t('Report an error')}</option>
|
|
<option value={t('Volounteering')}>{t('Volounteering')}</option>
|
|
<option value={t('Anything else')}>{t('Anything else')}</option>
|
|
</select>
|
|
</div>
|
|
<div class="pretty-form__item">
|
|
<input
|
|
type="email"
|
|
name="contact"
|
|
placeholder={t('Your contact for answer')}
|
|
disabled={state() === 'loading'}
|
|
/>
|
|
<label for="contact-email">{t('Your contact for answer')}</label>
|
|
</div>
|
|
<div class="pretty-form__item">
|
|
<textarea name="message" placeholder={t('Message text')} disabled={state() === 'loading'} />
|
|
<label for="message">{t('Message text')}</label>
|
|
</div>
|
|
<button class="button" disabled={state() === 'loading'} type="submit">
|
|
{t('Send')}
|
|
</button>
|
|
</form>
|
|
</Show>
|
|
<Show when={state() === 'error'}>
|
|
<br />
|
|
{t('Something went wrong, please try again')}
|
|
</Show>
|
|
<Show when={state() === 'success'}>
|
|
<br />
|
|
{t('Thank you for reaching us')}!
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|