From 3f0ae4d413ac2cf3cccd950c2cd913cdbd07555f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 16:33:19 +0200
Subject: [PATCH] migrate according to the solution

---
 .../src/components/users/UserList.vue         | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue b/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue
index b7efe8f..ade899d 100644
--- a/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue
@@ -34,10 +34,10 @@ export default {
     UserItem
   },
   props: ['users'],
+  emits: ['list-projects'],
   setup(props) {
     const enteredSearchTerm = ref('');
     const activeSearchTerm = ref('');
-    const sorting = ref(null);
 
     const availableUsers = computed(function() {
       let users = [];
@@ -50,9 +50,23 @@ export default {
       }
       return users;
     });
+
+    function updateSearch(val) {
+      enteredSearchTerm.value = val;
+    }
+
+    watch(enteredSearchTerm, function(newValue) {
+      setTimeout(() => {
+        if (newValue === enteredSearchTerm.value) {
+          activeSearchTerm.value = newValue;
+        }
+      }, 300);
+    });
+
+    const sorting = ref(null);
     const displayedUsers = computed(function() {
       if (!sorting.value) {
-        return availableUsers;
+        return availableUsers.value;
       }
       return availableUsers.value.slice().sort((u1, u2) => {
         if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
@@ -67,29 +81,16 @@ export default {
       });
     });
 
-    watch(enteredSearchTerm, function(val) {
-      setTimeout(() => {
-        if (val === enteredSearchTerm.value) {
-          activeSearchTerm.value = val;
-        }
-      }, 300);
-    });
-
-    function updateSearch(val) {
-      enteredSearchTerm.value = val;
-    }
     function sort(mode) {
       sorting.value = mode;
     }
 
     return {
       enteredSearchTerm,
-      activeSearchTerm,
-      sorting,
-      availableUsers,
-      displayedUsers,
       updateSearch,
-      sort
+      displayedUsers,
+      sort,
+      sorting
     };
   }
 };