refactor(item_list): Refactor `ItemsList` component to improve readability and reuse.

- Extracted item selection toggle logic into a dedicated `toggle_selection` function.
- Simplified access to item properties in views by using references (`&`).
- Improved code clarity and maintainability by reducing inline complexity.
This commit is contained in:
Ryan Mwangi 2024-12-18 16:00:40 +03:00
parent 6947d58c7c
commit da720a48d3
1 changed files with 17 additions and 12 deletions

View File

@ -8,6 +8,17 @@ pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
// Create a signal for selected items
let (selected_items_signal, set_selected_items) = create_signal(Vec::<usize>::new());
// Function to toggle selection of an item
let toggle_selection = move |i: usize| {
set_selected_items.update(|items| {
if items.contains(&i) {
items.retain(|&x| x != i);
} else {
items.push(i);
}
});
};
view! {
<div>
<h2>{ "Items" }</h2>
@ -18,18 +29,12 @@ pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
<input
type="checkbox"
checked={selected_items_signal.get().contains(&i)}
on:change=move |_| {
if selected_items_signal.get().contains(&i) {
set_selected_items.update(|items| items.retain(|&x| x != i));
} else {
set_selected_items.update(|items| { items.push(i); });
}
}
on:change=move |_| toggle_selection(i)
/>
{"Select item for comparison"}
</label>
<div>
<strong>{ item.name.clone() }</strong> - { item.description.clone() }
<strong>{ &item.name }</strong> - { &item.description }
</div>
<ul>
<h4>{ "Tags:" }</h4>
@ -44,7 +49,7 @@ pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
}).collect::<Vec<_>>()}
</ul>
</li>
}).collect::<Vec<_>>()}
}).collect::<Vec<_>>() }
</ul>
// Comparison Table
@ -65,8 +70,8 @@ pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
let item = &items.get()[i];
view! {
<tr key={i.to_string()}>
<td>{ item.name.clone() }</td>
<td>{ item.description.clone() }</td>
<td>{ &item.name }</td>
<td>{ &item.description }</td>
<td>
{item.tags.iter().map(|(key, value)| view! {
<span>{ key.clone() + ": " + value + " " }</span>
@ -85,4 +90,4 @@ pub fn ItemsList(items: ReadSignal<Vec<Item>>) -> impl IntoView {
</table>
</div>
}
}
}