add a search hook

2021-09-04_composition-13-demo-starting-project/src/components/UI/BaseSearch.vue

@@ -13,9 +13,9 @@
 export default {
   props: ['searchTerm'],
   emits: ['search'],
-  setup(context) {
+  setup(_, { emit }) {
     function search(event) {
-      context.emit('search', event.target.value);
+      emit('search', event.target.value);
     }
     return {
       search

2021-09-04_composition-13-demo-starting-project/src/components/projects/ProjectsList.vue

@@ -8,7 +8,7 @@
     ></base-search>
     <ul v-if="hasProjects">
       <project-item
-        v-for="prj in availableProjects"
+        v-for="prj in availableItems"
         :key="prj.id"
         :title="prj.title"
       ></project-item>
@@ -21,8 +21,9 @@
 </template>
 
 <script>
-import { ref, computed, watch, toRefs } from 'vue';
+import { computed, watch, toRefs } from 'vue';
 import ProjectItem from './ProjectItem.vue';
+import useSearch from '../../hooks/search';
 
 export default {
   components: {
@@ -30,46 +31,31 @@ export default {
   },
   props: ['user'],
   setup(props) {
-    const activeSearchTerm = ref('');
-    const enteredSearchTerm = ref('');
-
-    const availableProjects = computed(function() {
-      if (activeSearchTerm.value) {
-        return props.user.projects.filter(prj =>
-          prj.title.includes(activeSearchTerm.value)
-        );
-      }
-      return props.user.projects;
-    });
-
-    const hasProjects = computed(function() {
-      return props.user.projects && availableProjects.value.length > 0;
-    });
-
     //const propsWithRefs = toRefs(props);
     //const user = propsWithRefs.user;
     const { user } = toRefs(props);
 
-    watch(enteredSearchTerm, function(newValue) {
-      setTimeout(() => {
-        if (newValue === enteredSearchTerm.value) {
-          activeSearchTerm.value = newValue;
-        }
-      }, 300);
+    const projects = computed(function() {
+      return user.value ? user.value.projects : [];
     });
+
+    const { enteredSearchTerm, availableItems, updateSearch } = useSearch(
+      projects,
+      'title'
+    );
+
+    const hasProjects = computed(function() {
+      return props.user.projects && availableItems.value.length > 0;
+    });
+
     watch(user, function() {
       enteredSearchTerm.value = '';
     });
 
-    function updateSearch(val) {
-      enteredSearchTerm.value = val;
-    }
-
     return {
       enteredSearchTerm,
-      activeSearchTerm,
       hasProjects,
-      availableProjects,
+      availableItems,
       updateSearch
     };
   }

2021-09-04_composition-13-demo-starting-project/src/components/users/UserItem.vue

@@ -9,9 +9,9 @@
 export default {
   props: ['id', 'userName'],
   emits: ['list-projects'],
-  setup(context) {
+  setup(props, { emit }) {
     function viewProjects() {
-      context.emit('list-projects', this.id);
+      emit('list-projects', props.id);
     }
     return {
       viewProjects

2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue

@@ -26,8 +26,9 @@
 </template>
 
 <script>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, toRefs } from 'vue';
 import UserItem from './UserItem.vue';
+import useSearch from '../../hooks/search';
 
 export default {
   components: {
@@ -36,39 +37,18 @@ export default {
   props: ['users'],
   emits: ['list-projects'],
   setup(props) {
-    const enteredSearchTerm = ref('');
-    const activeSearchTerm = ref('');
-
-    const availableUsers = computed(function() {
-      let users = [];
-      if (activeSearchTerm.value) {
-        users = props.users.filter(usr =>
-          usr.fullName.includes(activeSearchTerm.value)
-        );
-      } else if (props.users) {
-        users = props.users;
-      }
-      return users;
-    });
-
-    function updateSearch(val) {
-      enteredSearchTerm.value = val;
-    }
-
-    watch(enteredSearchTerm, function(newValue) {
-      setTimeout(() => {
-        if (newValue === enteredSearchTerm.value) {
-          activeSearchTerm.value = newValue;
-        }
-      }, 300);
-    });
+    const { users } = toRefs(props);
 
+    const { enteredSearchTerm, availableItems, updateSearch } = useSearch(
+      users,
+      'fullName'
+    );
     const sorting = ref(null);
     const displayedUsers = computed(function() {
       if (!sorting.value) {
-        return availableUsers.value;
+        return availableItems.value;
       }
-      return availableUsers.value.slice().sort((u1, u2) => {
+      return availableItems.value.slice().sort((u1, u2) => {
         if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
           return 1;
         } else if (sorting.value === 'asc') {

2021-09-04_composition-13-demo-starting-project/src/hooks/search.js

@@ -0,0 +1,35 @@
+import { ref, computed, watch } from 'vue';
+
+export default function useSearch(items, searchProp) {
+  const enteredSearchTerm = ref('');
+  const activeSearchTerm = ref('');
+
+  const availableItems = computed(function() {
+    let filteredItems = [];
+    if (activeSearchTerm.value) {
+      filteredItems = items.value.filter(item =>
+        item[searchProp].includes(activeSearchTerm.value)
+      );
+    } else if (items.value) {
+      filteredItems = items.value;
+    }
+    return filteredItems;
+  });
+
+  function updateSearch(val) {
+    enteredSearchTerm.value = val;
+  }
+
+  watch(enteredSearchTerm, function(newValue) {
+    setTimeout(() => {
+      if (newValue === enteredSearchTerm.value) {
+        activeSearchTerm.value = newValue;
+      }
+    }, 300);
+  });
+  return {
+    enteredSearchTerm,
+    availableItems,
+    updateSearch
+  };
+}