public override ReactElement Render() { return(DOM.Div(new Attributes { Style = Style.Margin(5).Padding(5).FontSize(18) }, DOM.H3(props.Label), DOM.Label("Description"), DOM.Input(new InputAttributes { Value = state.InputValue, OnChange = e => SetState(state.With(_ => _.InputValue, e.CurrentTarget.Value)) }), DOM.Button( new ButtonAttributes { Disabled = string.IsNullOrWhiteSpace(state.InputValue), OnClick = e => AppendTodo(state.InputValue) }, "Add" ), DOM.Div( state.Todos.Select((todo, index) => new TaskCard( task: todo, onChange: updatedTask => SetState(state.With(_ => _.Todos, index, updatedTask)), onRemove: () => SetState(state.With(_ => _.Todos, value => value.RemoveAt(index))) )) ) )); }
public static ReactElement TodoItemList(Store <TodoAppState> appStore) { return(ReactRedux.Component(new ContainerProps <TodoAppState, TodoAppState> { Store = appStore, StateToPropsMapper = state => state, Renderer = appState => { Func <Todo, bool> todoIsCompleted = todo => todo.IsCompleted; Func <Todo, bool> todoNotCompleted = todo => todo.IsCompleted == false; IEnumerable <Todo> todos; if (appState.Visibility == TodoVisibility.Completed) { todos = appState.Todos.Where(todoIsCompleted); } else if (appState.Visibility == TodoVisibility.YetToComplete) { todos = appState.Todos.Where(todoNotCompleted); } else { todos = appState.Todos; } var todoItems = todos.Select(todo => { return TodoItem ( todo: todo, onToggleComplete: id => appStore.Dispatch(new ToggleTodoCompleted { Id = id }), onDelete: id => appStore.Dispatch(new DeleteTodo { Id = id }) ); }); return DOM.Div(new Attributes { Style = new ReactStyle { Padding = 10 } }, DOM.H1("React + Redux todo app in C#"), DOM.UL(new Attributes { }, todoItems.Select(DOM.Li)), DOM.Hr(new HRAttributes { }), DOM.H3("Add a new Todo item"), DOM.Input(new InputAttributes { Style = new ReactStyle { Margin = "5px", MaxWidth = 400 }, ClassName = "form-control", Placeholder = "Todo descriptions", OnInput = e => appStore.Dispatch(new UpdateDescriptionInput { Description = e.CurrentTarget.Value }), Value = appState.DescriptionInput }), DOM.Button(new ButtonAttributes { Style = new ReactStyle { Margin = "5px" }, ClassName = "btn btn-success", OnClick = e => { if (!string.IsNullOrWhiteSpace(appState.DescriptionInput)) { appStore.Dispatch(new AddTodo()); appStore.Dispatch(new UpdateDescriptionInput { Description = "" }); } } }, "Add"), DOM.Hr(new HRAttributes { }), DOM.H3("Visibility"), DOM.Div(new Attributes { }, DOM.Span("Show"), DOM.Button(new ButtonAttributes { Style = new ReactStyle { Margin = 5 }, ClassName = appState.Visibility == TodoVisibility.All ? "btn btn-success" : "btn btn-default", OnClick = e => appStore.Dispatch(new SetVisibility { Visibility = TodoVisibility.All }) }, "All"), DOM.Button(new ButtonAttributes { Style = new ReactStyle { Margin = 5 }, ClassName = appState.Visibility == TodoVisibility.Completed ? "btn btn-success" : "btn btn-default", OnClick = e => appStore.Dispatch(new SetVisibility { Visibility = TodoVisibility.Completed }) }, "Completed only"), DOM.Button(new ButtonAttributes { Style = new ReactStyle { Margin = 5 }, ClassName = appState.Visibility == TodoVisibility.YetToComplete ? "btn btn-success" : "btn btn-default", OnClick = e => appStore.Dispatch(new SetVisibility { Visibility = TodoVisibility.YetToComplete }) }, "Not finished") ) ); } })); }