From da720a48d3f40d8b916249e592425396f502cac1 Mon Sep 17 00:00:00 2001
From: Ryan Mwangi <ryannganga13325@gmail.com>
Date: Wed, 18 Dec 2024 16:00:40 +0300
Subject: [PATCH] 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.
---
 src/components/items_list.rs | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/items_list.rs b/src/components/items_list.rs
index 1274ad5..19102c8 100644
--- a/src/components/items_list.rs
+++ b/src/components/items_list.rs
@@ -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>
     }
-}
\ No newline at end of file
+}