Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-07 03:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1680] Show error messages for feedback form (#2196)

Browse source 
Update FeedbackButton.tsx
This commit is contained in:
ameer2468 2024-03-12 16:17:29 +03:00 committed by GitHub
parent 471db4a691
commit 4b74c0af04
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackButton.tsx
View file

@ -8,7 +8,7 @@ import { useLocale } from '~/hooks';
const schema = z.object({ const schema = z.object({
message: z.string().min(1, { message: i18n.t('feedback_is_required') }), message: z.string().min(1, { message: i18n.t('feedback_is_required') }),
emoji: z.number().min(0).max(3) emoji: z.number().min(0).max(3, { message: 'Please select an emoji' })
}); });
const EMOJIS = ['🤩', '😀', '🙁', '😭']; const EMOJIS = ['🤩', '😀', '🙁', '😭'];
@ -32,8 +32,9 @@ export default function () {
message: '' message: ''
} }
}); });
const popover = usePopover();
const emojiError = form.formState.errors.emoji?.message;
const popover = usePopover();
const authState = auth.useStateSnapshot(); const authState = auth.useStateSnapshot();
return ( return (
@ -69,30 +70,42 @@ export default function () {
placeholder={t('feedback_placeholder')} placeholder={t('feedback_placeholder')}
className="!h-36 w-full flex-1" className="!h-36 w-full flex-1"
/> />
<div className="flex flex-row justify-between"> <div className="flex flex-row items-center justify-between">
<Controller <Controller
control={form.control} control={form.control}
name="emoji" name="emoji"
render={({ field }) => ( render={({ field }) => (
<div className="flex items-center justify-center gap-1 text-lg"> <div className="flex flex-col items-center">
{EMOJIS.map((emoji, i) => ( <div className="flex items-center gap-1 text-lg">
<button {EMOJIS.map((emoji, i) => (
type="button" <button
onClick={() => field.onChange(i)} type="button"
key={i} onClick={() => field.onChange(i)}
className={clsx( key={i}
field.value === i ? 'bg-accent' : 'bg-app-input', className={clsx(
'flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-app-line transition-all duration-200 hover:scale-125' field.value === i
)} ? 'bg-accent'
> : 'bg-app-input',
{emoji} 'flex size-7 cursor-pointer items-center justify-center rounded-full border transition-all duration-200 hover:scale-125',
</button> emojiError
))} ? 'border-red-500'
: 'border-app-line'
)}
>
{emoji}
</button>
))}
</div>
{emojiError && (
<p className="pt-1 text-xs text-red-500">
Please select an emoji
</p>
)}
</div> </div>
)} )}
/> />
<Button type="submit" variant="accent" disabled={!form.formState.isValid}> <Button type="submit" variant="accent">
{t('send')} {t('send')}
</Button> </Button>
</div> </div>