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

A collection of open source fullstack services powered by React Server

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Alert, Box, Button, Card, CardHeader, Checkbox, IconButton, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, TextField, } from '@mui/material';
import { Edit } from '@mui/icons-material';
import { RemoveCircle } from '@mui/icons-material';
import { useComponent } from '@state-less/react-client';
import { useState } from 'react';
export const TodoApp = (props) => {
    const [component, { loading, error }] = useComponent('todos', {});
    const [title, setTitle] = useState('');
    const [edit, setEdit] = useState(false);
    if (loading) {
        return null;
    }
    return (_jsxs(Card, { children: [error && _jsx(Alert, { severity: "error", children: error.message }), _jsx(CardHeader, { title: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(TextField, { value: title, label: "Title", onChange: (e) => setTitle(e.target.value) }), _jsx(Button, { onClick: () => {
                                setTitle('');
                                component.props.add({ title, completed: false });
                            }, children: "Add" })] }), action: _jsx(IconButton, { onClick: () => setEdit(!edit), children: _jsx(Edit, {}) }) }), _jsx(List, { children: component?.children.map((todo, i) => (_jsx(TodoItem, { todo: todo, edit: edit, remove: component?.props?.remove }, i))) })] }));
};
const TodoItem = (props) => {
    const { todo, edit, remove } = props;
    // Hydarate the call with the data from the parent component
    const [component, { loading }] = useComponent(todo.key, { data: todo });
    return (_jsxs(ListItem, { children: [edit && (_jsx(ListItemIcon, { children: _jsx(IconButton, { onClick: () => remove(component.props.id), children: _jsx(RemoveCircle, {}) }) })), _jsx(ListItemText, { primary: component.props.title, sx: { textDecoration: component.props.completed ? 'line-through' : '' } }), _jsx(ListItemSecondaryAction, { children: _jsx(Checkbox, { checked: component?.props.completed, onClick: () => {
                        component?.props.toggle();
                    } }) })] }));
};