98 lines
3.2 KiB
TypeScript
98 lines
3.2 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
|
||
|
|
const handleFormSubmit = async (e: SubmitEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
setState('loading')
|
||
|
|
|
||
|
|
const postData = formRef? Array.from(formRef.elements).reduce(
|
||
|
|
(acc, element) => {
|
||
|
|
const formField = element as unknown as { name: string; value: string }
|
||
|
|
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),
|
||
|
|
}
|
||
|
|
|
||
|
|
const result = await fetch('/api/feedback', requestOptions)
|
||
|
|
|
||
|
|
if (!result.ok) {
|
||
|
|
console.error('[handleFormSubmit]', result)
|
||
|
|
setState('error')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setState('success')
|
||
|
|
window.scrollTo({
|
||
|
|
top: 0,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
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() === 'loading' || state() === 'initial' || state() === 'error'}>
|
||
|
|
<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'}>{t('Thank you for reaching us')}!</Show>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>)
|
||
|
|
}
|