mirror of
https://github.com/emailerfacu-spec/minix-front.git
synced 2026-04-02 13:20:43 -03:00
109 lines
2.8 KiB
Svelte
109 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import InputGroupAddon from './ui/input-group/input-group-addon.svelte';
|
|
import InputGroupButton from './ui/input-group/input-group-button.svelte';
|
|
import InputGroupTextarea from './ui/input-group/input-group-textarea.svelte';
|
|
import InputGroup from './ui/input-group/input-group.svelte';
|
|
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
|
|
import Loader2Icon from '@lucide/svelte/icons/loader-2';
|
|
import Kbd from './ui/kbd/kbd.svelte';
|
|
|
|
import { apiBase } from '@/stores/url';
|
|
import { sesionStore } from '@/stores/usuario';
|
|
import type { CreatePostDto } from '../../types';
|
|
import { addPost } from '@/stores/posts';
|
|
import { Tooltip } from './ui/tooltip';
|
|
import TooltipContent from './ui/tooltip/tooltip-content.svelte';
|
|
import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
|
|
|
|
let mensaje = $state('');
|
|
|
|
let cargando = $state(false);
|
|
let mostrarError = $state('');
|
|
|
|
async function handlePost(e: Event) {
|
|
e.preventDefault();
|
|
try {
|
|
const data: CreatePostDto = {
|
|
content: mensaje,
|
|
imageUrl: null,
|
|
parentPostId: null
|
|
};
|
|
|
|
const req = fetch($apiBase + '/api/posts', {
|
|
method: 'POST',
|
|
//credentials: 'include',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${$sesionStore?.accessToken}`
|
|
},
|
|
|
|
body: JSON.stringify(data)
|
|
});
|
|
cargando = true;
|
|
|
|
const res = await req;
|
|
if (res.ok) {
|
|
mensaje = '';
|
|
const post = await res.json();
|
|
addPost(post);
|
|
return;
|
|
}
|
|
mostrarError = 'No se pudo crear el post.';
|
|
} catch {
|
|
mostrarError = 'Fallo al alcanzar el servidor';
|
|
} finally {
|
|
cargando = false;
|
|
}
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.ctrlKey && e.key === 'Enter') {
|
|
handlePost(e);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<form onsubmit={(e: Event) => handlePost(e)}>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
bind:value={mensaje}
|
|
maxlength={280}
|
|
placeholder="Alguna novedad?"
|
|
onkeydown={handleKeydown}
|
|
></InputGroupTextarea>
|
|
|
|
<InputGroupAddon align="block-end" class="bg-">
|
|
<div class="flex w-full justify-between">
|
|
<Kbd class="text-sm leading-none font-medium italic">
|
|
<p class:text-red-500={mensaje.length > 239}>
|
|
{mensaje.length}
|
|
</p>
|
|
/ 280
|
|
</Kbd>
|
|
<Tooltip>
|
|
<TooltipTrigger class="*: flex">
|
|
<InputGroupButton
|
|
variant="default"
|
|
disabled={cargando}
|
|
type="submit"
|
|
class="transform rounded-full transition-transform ease-in hover:scale-120"
|
|
size="xs"
|
|
>
|
|
{#if cargando}
|
|
<Loader2Icon class="animate-spin" />
|
|
Publicando...
|
|
{:else}
|
|
Publicar
|
|
<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
|
|
{/if}
|
|
</InputGroupButton>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</form>
|