rewrite some things to composition

2021-09-04_composition-13-demo-starting-project/src/App.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import { ref, reactive } from 'vue';
 import USER_DATA from './dummy-data.js';
 
 import UserList from './components/users/UserList.vue';
@@ -14,19 +15,22 @@ import ProjectsList from './components/projects/ProjectsList.vue';
 export default {
   components: {
     UserList,
-    ProjectsList,
+    ProjectsList
   },
-  data() {
+  setup() {
+    var selectedUser = ref(null);
+    const activeUsers = reactive(USER_DATA);
+
+    function selectUser(uid) {
+      selectedUser = activeUsers.find(usr => usr.id === uid);
+    }
+
     return {
-      selectedUser: null,
-      activeUsers: USER_DATA,
+      activeUsers,
+      selectUser,
+      selectedUser
     };
-  },
-  methods: {
-    selectUser(uid) {
-      this.selectedUser = this.activeUsers.find((usr) => usr.id === uid);
-    },
-  },
+  }
 };
 </script>
 
@@ -64,4 +68,4 @@ button.selected {
   background-color: #00006b;
   color: white;
 }
-</style>
+</style>

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

@@ -1,6 +1,11 @@
 <template>
   <form>
-    <input type="search" @input="search" :value="searchTerm" placeholder="Filter items" />
+    <input
+      type="search"
+      @input="search"
+      :value="searchTerm"
+      placeholder="Filter items"
+    />
   </form>
 </template>
 
@@ -8,11 +13,14 @@
 export default {
   props: ['searchTerm'],
   emits: ['search'],
-  methods: {
-    search(event) {
-      this.$emit('search', event.target.value);
-    },
-  },
+  setup(context) {
+    function search(event) {
+      context.emit('search', event.target.value);
+    }
+    return {
+      search
+    };
+  }
 };
 </script>
 
@@ -30,4 +38,4 @@ input:focus {
   border-color: #00006b;
   background-color: #eeeeff;
 }
-</style>
+</style>

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

@@ -1,9 +1,17 @@
 <template>
-  <base-container v-if="user">
+  <base-container v-if="userSearch">
     <h2>{{ user.fullName }}: Projects</h2>
-    <base-search v-if="hasProjects" @search="updateSearch" :search-term="enteredSearchTerm"></base-search>
+    <base-search
+      v-if="hasProjects"
+      @search="updateSearch"
+      :search-term="enteredSearchTerm"
+    ></base-search>
     <ul v-if="hasProjects">
-      <project-item v-for="prj in availableProjects" :key="prj.id" :title="prj.title"></project-item>
+      <project-item
+        v-for="prj in availableProjects"
+        :key="prj.id"
+        :title="prj.title"
+      ></project-item>
     </ul>
     <h3 v-else>No projects found.</h3>
   </base-container>
@@ -13,49 +21,55 @@
 </template>
 
 <script>
+import { ref, computed, watch } from 'vue';
 import ProjectItem from './ProjectItem.vue';
 
 export default {
   components: {
-    ProjectItem,
+    ProjectItem
   },
   props: ['user'],
-  data() {
-    return {
-      enteredSearchTerm: '',
-      activeSearchTerm: '',
-    };
-  },
-  computed: {
-    hasProjects() {
-      return this.user.projects && this.availableProjects.length > 0;
-    },
-    availableProjects() {
-      if (this.activeSearchTerm) {
-        return this.user.projects.filter((prj) =>
-          prj.title.includes(this.activeSearchTerm)
+  setup(props) {
+    const activeSearchTerm = ref('');
+    const enteredSearchTerm = ref('');
+
+    const hasProjects = computed(function() {
+      return props.user.projects && availableProjects.value.length > 0;
+    });
+    const availableProjects = computed(function() {
+      if (activeSearchTerm.value) {
+        return props.user.projects.filter(prj =>
+          prj.title.includes(activeSearchTerm)
         );
       }
-      return this.user.projects;
-    },
-  },
-  methods: {
-    updateSearch(val) {
-      this.enteredSearchTerm = val;
-    },
-  },
-  watch: {
-    enteredSearchTerm(val) {
+      return props.user.projects;
+    });
+
+    watch(enteredSearchTerm, function(val) {
       setTimeout(() => {
-        if (val === this.enteredSearchTerm) {
-          this.activeSearchTerm = val;
+        if (val === enteredSearchTerm.value) {
+          activeSearchTerm.value = val;
         }
       }, 300);
-    },
-    user() {
-      this.enteredSearchTerm = '';
-    },
-  },
+    });
+
+    function updateSearch(val) {
+      enteredSearchTerm.value = val;
+    }
+
+    function userSearch() {
+      enteredSearchTerm.value = '';
+    }
+
+    return {
+      enteredSearchTerm,
+      activeSearchTerm,
+      hasProjects,
+      availableProjects,
+      updateSearch,
+      userSearch
+    };
+  }
 };
 </script>
 
@@ -65,4 +79,4 @@ ul {
   margin: 0;
   padding: 0;
 }
-</style>
+</style>

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

@@ -9,11 +9,14 @@
 export default {
   props: ['id', 'userName'],
   emits: ['list-projects'],
-  methods: {
-    viewProjects() {
-      this.$emit('list-projects', this.id);
-    },
-  },
+  setup(context) {
+    function viewProjects() {
+      context.emit('list-projects', this.id);
+    }
+    return {
+      viewProjects
+    };
+  }
 };
 </script>
 
@@ -28,4 +31,4 @@ li {
 li h3 {
   margin: 0;
 }
-</style>
+</style>

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

@@ -1,10 +1,17 @@
 <template>
   <base-container>
     <h2>Active Users</h2>
-    <base-search @search="updateSearch" :search-term="enteredSearchTerm"></base-search>
+    <base-search
+      @search="updateSearch"
+      :search-term="enteredSearchTerm"
+    ></base-search>
     <div>
-      <button @click="sort('asc')" :class="{selected: sorting === 'asc'}">Sort Ascending</button>
-      <button @click="sort('desc')" :class="{selected: sorting === 'desc'}">Sort Descending</button>
+      <button @click="sort('asc')" :class="{ selected: sorting === 'asc' }">
+        Sort Ascending
+      </button>
+      <button @click="sort('desc')" :class="{ selected: sorting === 'desc' }">
+        Sort Descending
+      </button>
     </div>
     <ul>
       <user-item
@@ -19,66 +26,72 @@
 </template>
 
 <script>
+import { ref, computed, watch } from 'vue';
 import UserItem from './UserItem.vue';
 
 export default {
   components: {
-    UserItem,
+    UserItem
   },
   props: ['users'],
-  data() {
-    return {
-      enteredSearchTerm: '',
-      activeSearchTerm: '',
-      sorting: null,
-    };
-  },
-  computed: {
-    availableUsers() {
+  setup(props) {
+    var enteredSearchTerm = ref('');
+    const activeSearchTerm = ref('');
+    var sorting = ref(null);
+
+    const availableUsers = computed(function() {
       let users = [];
-      if (this.activeSearchTerm) {
-        users = this.users.filter((usr) =>
-          usr.fullName.includes(this.activeSearchTerm)
+      if (activeSearchTerm.value) {
+        users = props.users.filter(usr =>
+          usr.fullName.includes(activeSearchTerm.value)
         );
-      } else if (this.users) {
-        users = this.users;
+      } else if (props.users) {
+        users = props.users;
       }
       return users;
-    },
-    displayedUsers() {
-      if (!this.sorting) {
-        return this.availableUsers;
+    });
+    const displayedUsers = computed(function() {
+      if (!sorting.value) {
+        return availableUsers;
       }
-      return this.availableUsers.slice().sort((u1, u2) => {
-        if (this.sorting === 'asc' && u1.fullName > u2.fullName) {
+      return availableUsers.value.slice().sort((u1, u2) => {
+        if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
           return 1;
-        } else if (this.sorting === 'asc') {
+        } else if (sorting.value === 'asc') {
           return -1;
-        } else if (this.sorting === 'desc' && u1.fullName > u2.fullName) {
+        } else if (sorting.value === 'desc' && u1.fullName > u2.fullName) {
           return -1;
         } else {
           return 1;
         }
       });
-    },
-  },
-  methods: {
-    updateSearch(val) {
-      this.enteredSearchTerm = val;
-    },
-    sort(mode) {
-      this.sorting = mode;
-    },
-  },
-  watch: {
-    enteredSearchTerm(val) {
+    });
+
+    watch(enteredSearchTerm, function(val) {
       setTimeout(() => {
-        if (val === this.enteredSearchTerm) {
-          this.activeSearchTerm = val;
+        if (val === enteredSearchTerm.value) {
+          activeSearchTerm.value = val;
         }
       }, 300);
+    });
+
+    function updateSearch(val) {
+      enteredSearchTerm = val;
     }
-  },
+    function sort(mode) {
+      sorting = mode;
+    }
+
+    return {
+      enteredSearchTerm,
+      activeSearchTerm,
+      sorting,
+      availableUsers,
+      displayedUsers,
+      updateSearch,
+      sort
+    };
+  }
 };
 </script>
 
@@ -88,4 +101,4 @@ ul {
   margin: 0;
   padding: 0;
 }
-</style>
+</style>