Skip to content

Commit cdf66cc

Browse files
sawkasawka
committed
update todo app to use new UseLocal
1 parent 78c3391 commit cdf66cc

2 files changed

Lines changed: 35 additions & 77 deletions

File tree

‎tsunami/demo/todo/app.go‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -102,49 +102,55 @@ var App = app.DefineComponent("App",
102102
func(_ any) any {
103103
app.UseSetAppTitle("Todo App (Tsunami Demo)")
104104

105-
// Multiple state hooks example
106-
todos, setTodos, _ := app.UseState([]Todo{
105+
// Multiple local atoms example
106+
todosAtom := app.UseLocal([]Todo{
107107
{Id: 1, Text: "Learn VDOM", Completed: false},
108108
{Id: 2, Text: "Build a todo app", Completed: false},
109109
})
110-
nextId, setNextId, _ := app.UseState(3)
111-
inputText, setInputText, _ := app.UseState("")
110+
nextIdAtom := app.UseLocal(3)
111+
inputTextAtom := app.UseLocal("")
112112

113113
// Event handlers modifying multiple pieces of state
114114
addTodo := func() {
115-
if inputText == "" {
115+
if inputTextAtom.Get() == "" {
116116
return
117117
}
118-
setTodos(append(todos, Todo{
119-
Id: nextId,
120-
Text: inputText,
121-
Completed: false,
122-
}))
123-
setNextId(nextId + 1)
124-
setInputText("")
118+
todosAtom.SetFn(func(todos []Todo) []Todo {
119+
newTodos := app.DeepCopy(todos)
120+
return append(newTodos, Todo{
121+
Id: nextIdAtom.Get(),
122+
Text: inputTextAtom.Get(),
123+
Completed: false,
124+
})
125+
})
126+
nextIdAtom.Set(nextIdAtom.Get() + 1)
127+
inputTextAtom.Set("")
125128
}
126129

127130
// Immutable state update pattern
128131
toggleTodo := func(id int) {
129-
newTodos := make([]Todo, len(todos))
130-
copy(newTodos, todos)
131-
for i := range newTodos {
132-
if newTodos[i].Id == id {
133-
newTodos[i].Completed = !newTodos[i].Completed
134-
break
132+
todosAtom.SetFn(func(todos []Todo) []Todo {
133+
newTodos := app.DeepCopy(todos)
134+
for i := range newTodos {
135+
if newTodos[i].Id == id {
136+
newTodos[i].Completed = !newTodos[i].Completed
137+
break
138+
}
135139
}
136-
}
137-
setTodos(newTodos)
140+
return newTodos
141+
})
138142
}
139143

140144
deleteTodo := func(id int) {
141-
newTodos := make([]Todo, 0, len(todos)-1)
142-
for _, todo := range todos {
143-
if todo.Id != id {
144-
newTodos = append(newTodos, todo)
145+
todosAtom.SetFn(func(todos []Todo) []Todo {
146+
newTodos := make([]Todo, 0, len(todos)-1)
147+
for _, todo := range todos {
148+
if todo.Id != id {
149+
newTodos = append(newTodos, todo)
150+
}
145151
}
146-
}
147-
setTodos(newTodos)
152+
return newTodos
153+
})
148154
}
149155

150156
return vdom.H("div", map[string]any{
@@ -160,8 +166,8 @@ var App = app.DefineComponent("App",
160166
"className": "flex gap-2.5 mb-5",
161167
},
162168
InputField(InputFieldProps{
163-
Value: inputText,
164-
OnChange: setInputText,
169+
Value: inputTextAtom.Get(),
170+
OnChange: inputTextAtom.Set,
165171
OnEnter: addTodo,
166172
}),
167173
vdom.H("button", map[string]any{
@@ -171,7 +177,7 @@ var App = app.DefineComponent("App",
171177
),
172178

173179
TodoList(TodoListProps{
174-
Todos: todos,
180+
Todos: todosAtom.Get(),
175181
OnToggle: toggleTodo,
176182
OnDelete: deleteTodo,
177183
}),

‎tsunami/demo/todo/static/tw.css‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -234,33 +234,12 @@
234234
.sticky {
235235
position: sticky;
236236
}
237-
.-inset-1 {
238-
inset: calc(var(--spacing) * -1);
239-
}
240237
.isolate {
241238
isolation: isolate;
242239
}
243240
.isolation-auto {
244241
isolation: auto;
245242
}
246-
.\!container {
247-
width: 100% !important;
248-
@media (width >= 40rem) {
249-
max-width: 40rem !important;
250-
}
251-
@media (width >= 48rem) {
252-
max-width: 48rem !important;
253-
}
254-
@media (width >= 64rem) {
255-
max-width: 64rem !important;
256-
}
257-
@media (width >= 80rem) {
258-
max-width: 80rem !important;
259-
}
260-
@media (width >= 96rem) {
261-
max-width: 96rem !important;
262-
}
263-
}
264243
.container {
265244
width: 100%;
266245
@media (width >= 40rem) {
@@ -788,18 +767,10 @@
788767
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
789768
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
790769
}
791-
.ring {
792-
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
793-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
794-
}
795770
.inset-ring {
796771
--tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
797772
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
798773
}
799-
.outline {
800-
outline-style: var(--tw-outline-style);
801-
outline-width: 1px;
802-
}
803774
.blur {
804775
--tw-blur: blur(8px);
805776
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -809,18 +780,10 @@
809780
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
810781
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
811782
}
812-
.grayscale {
813-
--tw-grayscale: grayscale(100%);
814-
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
815-
}
816783
.invert {
817784
--tw-invert: invert(100%);
818785
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
819786
}
820-
.sepia {
821-
--tw-sepia: sepia(100%);
822-
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
823-
}
824787
.filter {
825788
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
826789
}
@@ -848,11 +811,6 @@
848811
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
849812
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
850813
}
851-
.transition {
852-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
853-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
854-
transition-duration: var(--tw-duration, var(--default-transition-duration));
855-
}
856814
.ease-in {
857815
--tw-ease: var(--ease-in);
858816
transition-timing-function: var(--ease-in);
@@ -1046,11 +1004,6 @@
10461004
inherits: false;
10471005
initial-value: 0 0 #0000;
10481006
}
1049-
@property --tw-outline-style {
1050-
syntax: "*";
1051-
inherits: false;
1052-
initial-value: solid;
1053-
}
10541007
@property --tw-blur {
10551008
syntax: "*";
10561009
inherits: false;
@@ -1184,7 +1137,6 @@
11841137
--tw-ring-offset-width: 0px;
11851138
--tw-ring-offset-color: #fff;
11861139
--tw-ring-offset-shadow: 0 0 #0000;
1187-
--tw-outline-style: solid;
11881140
--tw-blur: initial;
11891141
--tw-brightness: initial;
11901142
--tw-contrast: initial;

0 commit comments

Comments
 (0)