add a generic sort hook

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 {

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,

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
+  };
+}