Add recently joined developers list (#44)

Author: DannyFeliz

.editorconfig

@@ -5,4 +5,5 @@ indent_style = space
 indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = true
+end_of_line = lf

.gitattributes

@@ -0,0 +1,3 @@
+ignore all differences in line endings
+*        -crlf
+

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/composition-api": "^0.6.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "lodash": "^4.17.15",

src/components/DeveloperCard.vue

@@ -4,11 +4,7 @@
       <div class="card-content center-align">
         <span class="developer__rank"># {{ developer.position }}</span>
         <a :href="`https://github.com/${developer.login}`" target="_blank">
-          <img
-            :src="developer.avatarUrl"
-            :alt="`${developer.name} profile image`"
-            class="developer__photo circle responsive-img"
-          />
+          <img :src="developer.avatarUrl" :alt="`${developer.name}`" class="developer__photo circle responsive-img" />
           <h3 class="card-title developer__name">{{ developer.name || developer.login }}</h3>
         </a>
         <p>Followed by: {{ developer.followers }}</p>

src/composable/useSearchDeveloper.js

@@ -0,0 +1,31 @@
+import sortBy from "lodash/sortBy";
+import Searcher from "@/util/Searcher";
+import store from "../store/store";
+
+const developerSearcher = new Searcher().setField("name").setField("login");
+
+export function useSearchDeveloper() {
+  function searchPopular(searchTerm) {
+    let developers = store.state.Developers.developers;
+    developerSearcher.setData(developers);
+
+    if (searchTerm) {
+      developers = developerSearcher.findAll(searchTerm);
+    }
+
+    return developers.slice(0, 10);
+  }
+
+  function searchNewDevelopers(searchTerm) {
+    let developers = store.getters["Developers/newDevelopers"];
+    developerSearcher.setData(developers);
+
+    if (searchTerm) {
+      developers = sortBy(developerSearcher.findAll(searchTerm), dev => -Number(new Date(dev.createdAt)));
+    }
+
+    return developers.slice(0, 10);
+  }
+
+  return { searchPopular, searchNewDevelopers };
+}

src/config/composition-api.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import VueCompositionApi from "@vue/composition-api";
+
+Vue.use(VueCompositionApi);

src/config/index.js

@@ -1,4 +1,5 @@
 import Vue from "vue";
 import "@/config/materialize";
+import "@/config/composition-api";
 
 Vue.config.productionTip = false;

src/router/index.js

@@ -25,7 +25,7 @@ const routes = [
       },
       {
         path: ":language",
-        name: "PopularRepositories",
+        name: "PopularRepositoriesByLanguages",
         component: PopularRepositories
       },
       {

src/store/Developers.js

@@ -1,4 +1,5 @@
 import clone from "lodash/cloneDeep";
+import sortBy from "lodash/sortBy";
 import API from "@/util/api";
 
 const state = {
@@ -49,7 +50,24 @@ const actions = {
   }
 };
 
-const getters = {};
+const getters = {
+  newDevelopers(state) {
+    const lastMonthDate = new Date();
+    const ONE_MONTH = 30;
+    lastMonthDate.setDate(lastMonthDate.getDate() - ONE_MONTH);
+
+    const newDevs = state.developers.filter(dev => {
+      return new Date(dev.createdAt) >= lastMonthDate;
+    });
+
+    const sortedDevs = sortBy(newDevs, dev => -Number(new Date(dev.createdAt)));
+    return clone(sortedDevs).map((dev, index) => {
+      dev.position = index + 1;
+
+      return dev;
+    });
+  }
+};
 
 export default {
   namespaced: true,

src/views/PopularDevelopers.vue

@@ -15,12 +15,9 @@
 
 <script>
 import { mapState } from "vuex";
-import sortBy from "lodash/sortBy";
 import DeveloperCard from "@/components/DeveloperCard";
 import InputSearch from "@/components/InputSearch";
-import Searcher from "@/util/Searcher";
-
-const developerSearcher = new Searcher().setField("name").setField("login");
+import { useSearchDeveloper } from "@/composable/useSearchDeveloper";
 
 export default {
   name: "PopularDevelopers",
@@ -30,25 +27,23 @@ export default {
   },
   data() {
     return {
-      searchTerm: ""
+      searchTerm: "",
+      search: () => {}
     };
   },
   computed: {
     ...mapState({
       developers: state => state.Developers.developers
     }),
     filteredDevelopers() {
-      if (!this.searchTerm) {
-        return this.developers.slice(0, 10);
-      }
-
-      return sortBy(developerSearcher.findAll(this.searchTerm), dev => -dev.followers).slice(0, 10);
+      return this.search(this.searchTerm);
     }
   },
   watch: {
     developers: {
       handler() {
-        developerSearcher.setData(this.developers);
+        const { searchPopular } = useSearchDeveloper();
+        this.search = searchPopular;
       },
       immediate: true
     }