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

A collection of open source fullstack services powered by React Server

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ThumbDown, ThumbUp, KeyboardArrowUp, KeyboardArrowDown, } from '@mui/icons-material';
import { Alert, Box, Button, CircularProgress, IconButton, Typography, } from '@mui/material';
import { useComponent } from '@state-less/react-client';
import { useMemo } from 'react';
export const calc = (votes = 0, { lb = 0, ub = 0, random = false, wilson = true, r }) => {
    const diff = ub - lb;
    const lbv = Math.round(lb * votes);
    const rand = Math.round(r * diff * votes);
    return (wilson ? lbv : votes) + (random ? rand : 0);
};
export const UpDownButtons = ({ random, wilson, data, id = 'votings', ssr, }) => {
    const [component, { loading, error }] = useComponent(id, {
        suspend: true,
        ssr: ssr,
        data,
    });
    const { score, upvotes, downvotes, voted, policies } = component?.props || {};
    const randomUp = useMemo(() => Math.random(), []);
    const randomDown = useMemo(() => Math.random(), []);
    const sum = useMemo(() => {
        return (calc(upvotes, {
            lb: score?.upvote[0],
            ub: score?.upvote[1],
            wilson,
            random,
            r: randomUp,
        }) -
            calc(downvotes, {
                lb: score?.downvote[0],
                ub: score?.downvote[1],
                wilson,
                random,
                r: randomDown,
            }));
    }, [upvotes, downvotes, score, wilson, random]);
    return (_jsxs(Box, { sx: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
        }, children: [_jsx(IconButton, { color: voted === 1 ? 'success' : 'default', onClick: () => component?.props.upvote(), disabled: voted === -1 && policies.includes('single-vote'), sx: { pb: 0 }, children: _jsx(KeyboardArrowUp, {}) }), loading ? _jsx(CircularProgress, { size: "1rem" }) : sum, _jsx(IconButton, { sx: { pt: 0 }, color: voted === -1 ? 'error' : 'default', onClick: () => component?.props.downvote(), disabled: voted === 1 && policies.includes('single-vote'), children: _jsx(KeyboardArrowDown, {}) })] }));
};
export const UpButton = ({ random, wilson, id = 'votings', ssr, }) => {
    const [component, { loading, error }] = useComponent(id, {
        suspend: true,
        ssr: ssr,
    });
    const { score, upvotes, downvotes, voted, policies } = component?.props || {};
    const randomUp = useMemo(() => Math.random(), []);
    const randomDown = useMemo(() => Math.random(), []);
    const sum = useMemo(() => calc(upvotes, {
        lb: score?.upvote[0],
        ub: score?.upvote[1],
        wilson,
        random,
        r: randomUp,
    }) -
        calc(downvotes, {
            lb: score?.downvote[0],
            ub: score?.downvote[1],
            wilson,
            random,
            r: randomDown,
        }), [upvotes, downvotes, score, wilson, random]);
    return (_jsxs(Box, { sx: {
            display: 'flex',
            flexDirection: 'row-reverse',
            alignItems: 'center',
            justifyContent: 'start',
            mr: 1,
        }, children: [_jsx(IconButton, { sx: { p: 0 }, color: voted === 1 ? 'success' : 'default', onClick: () => component?.props.upvote(), disabled: voted === -1 && policies.includes('single-vote'), children: _jsx(KeyboardArrowUp, {}) }), loading ? _jsx(CircularProgress, { size: '14px' }) : sum] }));
};
export const VotingApp = ({ random, wilson, id = 'votings', hideVotes = false, ssr, }) => {
    const [component, { loading, error }] = useComponent(id, {
        suspend: true,
        ssr: ssr,
    });
    const { score, upvotes, downvotes, voted, policies } = component?.props || {};
    const randomUp = useMemo(() => Math.random(), []);
    const randomDown = useMemo(() => Math.random(), []);
    const sum = useMemo(() => calc(upvotes, {
        lb: score?.upvote[0],
        ub: score?.upvote[1],
        wilson,
        random,
        r: randomUp,
    }) -
        calc(downvotes, {
            lb: score?.downvote[0],
            ub: score?.downvote[1],
            wilson,
            random,
            r: randomDown,
        }), [upvotes, downvotes, score, wilson, random]);
    if (loading)
        return _jsx("div", { children: "Loading..." });
    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { severity: "error", children: error.message }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: 'center', flexDirection: 'row', sx: { my: 2 }, children: [hideVotes ? (_jsx(IconButton, { color: "success", onClick: () => component?.props.upvote(), disabled: voted === -1 && policies.includes('single-vote'), children: _jsx(ThumbUp, {}) })) : (_jsx(Button, { variant: "contained", color: "success", onClick: () => component?.props.upvote(), disabled: voted === -1 && policies.includes('single-vote'), startIcon: _jsx(ThumbUp, {}), children: upvotes || 0 })), _jsx(Typography, { variant: "h5", align: "center", sx: { mx: 2 }, children: sum }), hideVotes ? (_jsx(IconButton, { color: "error", onClick: () => component?.props.downvote(), disabled: voted === 1 && policies.includes('single-vote'), children: _jsx(ThumbDown, {}) })) : (_jsx(Button, { variant: "contained", color: "error", onClick: () => component?.props.downvote(), disabled: voted === 1 && policies.includes('single-vote'), endIcon: _jsx(ThumbDown, {}), children: downvotes || 0 }))] })] }));
};