@state-less/leap-frontend/dist/server-components/examples/Comments.js

A collection of open source fullstack services powered by React Server

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Alert, Avatar, Box, Button, Card, CardActions, CardContent, Chip, IconButton, TextField, Tooltip, CardHeader, List, ListItem, ListItemSecondaryAction, ListItemIcon, Paper, } from '@mui/material';
import { authContext, useComponent } from '@state-less/react-client';
import { useContext, useMemo, useState } from 'react';
import { Google as GoogleIcon, Delete as DeleteIcon, } from '@mui/icons-material';
import { UpButton, UpDownButtons } from './VotingApp.js';
import { Markdown } from '../../components/Markdown.js';
export const CommunityComments = ({ id = 'comments', title, ssr, }) => {
    const [component, { error, loading }] = useComponent(id, {
        suspend: true,
        ssr,
    });
    const [features, { loading: featuresLoading }] = useComponent('features', {
        suspend: true,
        ssr,
    });
    const [comment, setComment] = useState('');
    const comments = component?.props?.comments || [];
    const canComment = component?.props?.permissions.comment;
    const canDelete = component?.props?.permissions.delete;
    const { children } = component || {};
    const [showComment, setShowComment] = useState(false);
    const wilson = useMemo(() => features?.props?.wilson, [loading]);
    // return <>{JSON.stringify(component)}</>;
    return (_jsxs(_Fragment, { children: [title && _jsx(CardHeader, { title: title }), loading ||
                (featuresLoading && _jsx(Alert, { severity: "info", children: "Loading..." })), error && _jsx(Alert, { severity: "error", children: error.message }), !canComment && (_jsx(Alert, { severity: "info", children: "You need to be logged in to comment." })), _jsx(List, { dense: true, children: (component?.children || []).map((child, index) => {
                    return (_jsx(ListItem, { dense: true, children: _jsx(CommunityComment, { comment: child, canDelete: canDelete, wilson: wilson, ssr: ssr }) }));
                }) }), !showComment && (_jsx(CardActions, { children: _jsx(Button, { onClick: () => setShowComment(true), children: "Add comment" }) })), showComment && (_jsxs(_Fragment, { children: [_jsx(CardContent, { sx: { display: 'flex' }, children: _jsx(TextField, { multiline: true, rows: 3, onChange: (e) => setComment(e.target.value), fullWidth: true, value: comment }) }), _jsx(CardActions, { children: _jsx(Tooltip, { title: canComment ? '' : 'You need to be logged in to comment.', children: _jsx("span", { children: _jsx(Button, { onClick: () => {
                                        component?.props?.comment(comment);
                                        setComment('');
                                    }, disabled: !canComment, children: "Add comment" }) }) }) })] }))] }));
};
export const Comments = ({ id = 'comments', title, ssr, }) => {
    const [component, { error, loading }] = useComponent(id, {
        suspend: true,
        ssr,
    });
    const [features, { loading: featuresLoading }] = useComponent('features', {
        suspend: true,
        ssr,
    });
    const [comment, setComment] = useState('');
    const comments = component?.props?.comments || [];
    const canComment = component?.props?.permissions.comment;
    const canDelete = component?.props?.permissions.delete;
    const { children } = component || {};
    const [visible, setVisible] = useState(false);
    // return <>{JSON.stringify(component)}</>;
    return (_jsxs(Paper, { square: true, children: [loading ||
                (featuresLoading && _jsx(Alert, { severity: "info", children: "Loading..." })), error && _jsx(Alert, { severity: "error", children: error.message }), !canComment && (_jsx(Alert, { severity: "info", children: "You need to be logged in to comment." })), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: (component?.children || []).map((child, index) => {
                    return (_jsx(Comment, { comment: child, canDelete: canDelete, wilson: features?.props?.wilson, ssr: ssr }));
                }) }), visible && (_jsx(CardContent, { children: _jsx(TextField, { multiline: true, rows: 3, onChange: (e) => setComment(e.target.value), fullWidth: true, value: comment }) })), _jsx(CardActions, { children: _jsx(Tooltip, { title: canComment ? '' : 'You need to be logged in to comment.', children: _jsx("span", { children: _jsx(Button, { onClick: () => {
                                if (!visible) {
                                    setVisible(true);
                                }
                                else {
                                    component?.props?.comment(comment);
                                    setComment('');
                                    setVisible(false);
                                }
                            }, disabled: !canComment, children: visible ? 'Post' : 'Add Comment' }) }) }) })] }));
};
const StrategyIcons = {
    google: GoogleIcon,
};
const Comment = ({ comment, canDelete, wilson, ssr }) => {
    const { session } = useContext(authContext);
    const [component, { error, loading }] = useComponent(comment.key, {
        suspend: true,
        ssr,
        data: comment,
    });
    const props = component?.props;
    const isOwnComment = props.identity.email ===
        session?.strategies?.[session?.strategy || '']?.email ||
        (props.identity.strategy === 'anonymous' &&
            props.identity.id === JSON.parse(localStorage.id));
    const Icon = StrategyIcons[props?.identity?.strategy];
    return (_jsxs(Card, { children: [_jsxs(Box, { sx: { display: 'flex', ml: 1, mt: 1 }, children: [_jsx(UpDownButtons, { id: component?.children[0].key, data: component?.children[0], wilson: wilson, ssr: ssr }), _jsx(CardContent, { sx: {
                            display: 'flex',
                            flexDirection: 'column',
                            pb: '0px !important',
                            pt: 0,
                        }, children: _jsx(Markdown, { children: props?.message }) })] }), _jsxs(CardActions, { children: [(canDelete || isOwnComment) && (_jsx(IconButton, { onClick: () => component?.props?.del(), children: _jsx(DeleteIcon, {}) })), _jsx(Chip, { avatar: props?.identity.picture && (_jsx(Avatar, { src: props?.identity.picture, children: _jsx(Icon, {}) })), label: props?.identity.name, sx: { ml: 'auto' } })] })] }));
};
const CommunityComment = ({ comment, canDelete, wilson, ssr }) => {
    const { session } = useContext(authContext);
    const [component, { error, loading }] = useComponent(comment.key, {
        suspend: true,
        ssr,
        data: comment,
    });
    const props = component?.props;
    const isOwnComment = props.identity.email ===
        session?.strategies?.[session?.strategy || '']?.email ||
        (props.identity.strategy === 'anonymous' &&
            props.identity.id === JSON.parse(localStorage.id));
    const Icon = StrategyIcons[props?.identity?.strategy];
    return (_jsxs(_Fragment, { children: [_jsx(ListItemIcon, { children: _jsx(UpButton, { id: component?.children[0].key, wilson: wilson, ssr: ssr }) }), _jsx(Markdown, { small: true, children: props?.message + ` *- ${props?.identity.name}*` }), (canDelete || isOwnComment) && (_jsx(ListItemSecondaryAction, { children: _jsx(IconButton, { size: "small", onClick: () => component?.props?.del(), children: _jsx(DeleteIcon, {}) }) }))] }));
};