@state-less/leap-frontend/dist/forum/newPost.js

A collection of open source fullstack services powered by React Server

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Container, TextField, Card, CardHeader, CardContent, Typography, CardActionArea, CardActions, Button, Chip, Box, InputAdornment, } from '@mui/material';
import { useState } from 'react';
import { useComponent } from '@state-less/react-client';
import { useNavigate } from 'react-router';
import { FlexBox } from '../components/FlexBox.js';
import { ContentEditor } from '../server-components/ContentEditor.js';
export const Tags = ({ onChange }) => {
    const [tags, setTags] = useState([]);
    const [tag, setTag] = useState('');
    const onKeyDown = (e) => {
        if (e.key === 'Backspace' && tag === '') {
            setTags(tags.slice(0, -1));
        }
        if (e.key === ' ' || e.key === 'Enter') {
            e.preventDefault();
            e.stopPropagation();
            if (tags.length >= 5)
                return;
            if (tags.includes(tag))
                return;
            setTag('');
            setTags([...tags, tag.toLowerCase()]);
            onChange([...tags, tag.toLowerCase()]);
        }
    };
    return (_jsx(FlexBox, { children: _jsx(TextField, { color: tags.includes(tag) ? 'error' : 'secondary', InputProps: {
                inputProps: {
                    pattern: '[a-z]',
                },
                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Box, { sx: { display: 'flex', flexWrap: 'nowrap', gap: 1 }, children: tags.map((tag) => (_jsx(Chip, { label: tag, onDelete: () => setTags(tags.filter((filtered) => filtered !== tag)) }))) }) })),
            }, value: tag, disabled: tags.length >= 5, onKeyDown: onKeyDown, onChange: (e) => setTag(e.target.value) }) }));
};
export const NewPost = ({ forumKey, ssr }) => {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const [component, { loading }] = useComponent(forumKey, {
        suspend: true,
        ssr,
    });
    const [tags, setTags] = useState([]);
    const navigate = useNavigate();
    return (_jsx(Container, { maxWidth: "lg", disableGutters: true, children: _jsxs(Card, { children: [_jsx(CardHeader, { title: 'Create a new Post' }), _jsxs(CardContent, { sx: { pb: 0 }, children: [_jsx(Typography, { variant: "h5", children: "Title" }), _jsx(Typography, { children: "Be specific and imagine you\u2019re talking to another person." }), _jsx(TextField, { fullWidth: true, color: "secondary", id: "outlined-multiline-flexible", label: "Title", multiline: true, maxRows: 4, value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs(CardContent, { sx: { pb: 0 }, children: [_jsx(Typography, { variant: "h5", children: "Body" }), _jsx(Typography, { children: "Include all the information someone would need to understand the topic." })] }), _jsx(ContentEditor, { body: body, setBody: setBody, draft: true, edit: true, loading: loading, setEdit: null, component: component }), _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", children: "Tags" }), _jsx(Tags, { onChange: setTags })] }), _jsx(CardActionArea, { children: _jsx(CardActions, { children: _jsx(Button, { variant: "contained", color: "secondary", onClick: async () => {
                                const post = await component?.props?.createPost({
                                    title,
                                    body,
                                    tags,
                                });
                                setTimeout(() => {
                                    navigate(`/post-${post.id}`);
                                }, 250);
                            }, children: "Post" }) }) })] }) }));
};