From 3065481a78aa9f293c4c65d1d32425c5c7f99345 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Mon, 6 Sep 2021 21:52:25 +0200
Subject: [PATCH] add a generic sort hook

---
 .../src/components/projects/ProjectsList.vue  |  2 +-
 .../src/components/users/UserList.vue         | 27 ++++-----------
 .../src/hooks/sort.js                         | 33 +++++++++++++++++++
 3 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 2021-09-04_composition-13-demo-starting-project/src/hooks/sort.js

diff --git a/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue b/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue
index 49ccc18..d918771 100644
--- a/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue
+++ b/2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue
@@ -49,7 +49,7 @@ export default {
     });
 
     watch(user, function() {
-      enteredSearchTerm.value = '';
+      updateSearch('');
     });
 
     return {
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 cc36897..5083f6e 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
@@ -26,9 +26,10 @@
 </template>
 
 <script>
-import { ref, computed, toRefs } from 'vue';
+import { toRefs } from 'vue';
 import UserItem from './UserItem.vue';
 import useSearch from '../../hooks/search';
+import useSort from '../../hooks/sort';
 
 export default {
   components: {
@@ -43,27 +44,11 @@ export default {
       users,
       'fullName'
     );
-    const sorting = ref(null);
-    const displayedUsers = computed(function() {
-      if (!sorting.value) {
-        return availableItems.value;
-      }
-      return availableItems.value.slice().sort((u1, u2) => {
-        if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
-          return 1;
-        } else if (sorting.value === 'asc') {
-          return -1;
-        } else if (sorting.value === 'desc' && u1.fullName > u2.fullName) {
-          return -1;
-        } else {
-          return 1;
-        }
-      });
-    });
 
-    function sort(mode) {
-      sorting.value = mode;
-    }
+    const { displayedUsers, sort, sorting } = useSort(
+      availableItems,
+      'fullName'
+    );
 
     return {
       enteredSearchTerm,
diff --git a/2021-09-04_composition-13-demo-starting-project/src/hooks/sort.js b/2021-09-04_composition-13-demo-starting-project/src/hooks/sort.js
new file mode 100644
index 0000000..63b670d
--- /dev/null
+++ b/2021-09-04_composition-13-demo-starting-project/src/hooks/sort.js
@@ -0,0 +1,33 @@
+import { ref, computed } from 'vue';
+
+export default function useSort(availableItems, sortProp) {
+  const sorting = ref(null);
+  const displayedUsers = computed(function() {
+    if (!sorting.value) {
+      return availableItems.value;
+    }
+    return availableItems.value.slice().sort((item1, item2) => {
+      if (sorting.value === 'asc' && item1[sortProp] > item2[sortProp]) {
+        return 1;
+      } else if (sorting.value === 'asc') {
+        return -1;
+      } else if (
+        sorting.value === 'desc' &&
+        item1[sortProp] > item2[sortProp]
+      ) {
+        return -1;
+      } else {
+        return 1;
+      }
+    });
+  });
+
+  function sort(mode) {
+    sorting.value = mode;
+  }
+  return {
+    displayedUsers,
+    sort,
+    sorting
+  };
+}