Skip to content

Commit f7a78b9

Browse files
boudlalboudlal
committed
add repositories List Component + get and map data from github api
1 parent 8cec7a9 commit f7a78b9

File tree

6 files changed

+152
-17
lines changed

6 files changed

+152
-17
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/build/
22
/config/
33
/dist/
4+
/src/
45
/*.js
56
/test/unit/coverage/

‎index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6-
<title>challenge</title>
6+
<title>Vuejs mini-project</title>
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
88
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
910
</head>
1011
<body>
1112
<div id="app"></div>

‎package-lock.json

+21-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@
1313
"build": "node build/build.js"
1414
},
1515
"dependencies": {
16+
"axios": "^0.18.0",
17+
"moment": "^2.23.0",
1618
"vue": "^2.5.2",
1719
"vue-router": "^3.0.1",
20+
"vue-spinner": "^1.0.3",
1821
"vuex": "^3.1.0"
1922
},
2023
"devDependencies": {

‎src/components/RepositoriesListComponent.vue

+97-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,114 @@
11
<template>
2-
<div class="content">
3-
2+
<div class="container">
3+
<div class="container-title">
4+
<h2>Most strarred repositories</h2>
5+
</div>
6+
<div class="row">
7+
<div v-for="repo in repositories" class="card col-md-12 p-3">
8+
<div class="row ">
9+
<div class="col-md-3">
10+
<img class="w-100" :src="repo.user_avatar">
11+
</div>
12+
<div class="col-md-8">
13+
<div class="card-block">
14+
<a :href="repo.url"><h3 class="card-title">{{ repo.title }}</h3></a>
15+
<p class="card-text text-justify">{{ repo.description }}</p>
16+
<a href="https://www.google.com" class="btn btn-default">Stars: {{ repo.stars_num }}</a>
17+
<a href="https://www.google.com" class="btn btn-default">Issues: {{ repo.issues_num}}</a>
18+
<span>Submitted {{ repo.created_at }} days ago by {{ repo.user_name}}</span>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
<pulse-loader class="loader" v-show="loading"></pulse-loader>
425
</div>
526
</template>
627

728
<script>
29+
/* eslint-disable */
30+
31+
import axios from 'axios'
32+
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
33+
834
export default {
35+
components: {
36+
PulseLoader
37+
},
938
data () {
1039
return {
11-
40+
loading: true
1241
}
42+
},
43+
computed: {
44+
repositories () {
45+
return this.$store.getters.repositories
46+
}
47+
},
48+
created () {
49+
this.$store.dispatch('getRepositories', this.pageNumber).then(() => {
50+
this.loading = false;
51+
})
52+
1353
}
1454
}
1555
</script>
1656

57+
1758
<style scoped>
18-
.content {
19-
min-height: 600px
59+
.container {
60+
min-height: 500px
61+
}
62+
63+
.container-title {
64+
text-align: left;
65+
margin: 5px;
66+
padding: 10px
67+
}
68+
69+
img {
70+
width: 60%;
71+
}
72+
73+
.row {
74+
margin: 0px;
75+
}
76+
77+
.card-title {
78+
text-align: left;
79+
text-transform: uppercase;
80+
color: #E44424;
81+
}
82+
83+
.card {
84+
border-radius:0;
85+
margin:10px auto;
86+
}
87+
88+
.card-block {
89+
text-align: left;
90+
}
91+
92+
.card-text {
93+
margin-top:10px;
94+
margin-bottom: 10px;
95+
background-color:#FFFFFF;
96+
color:#000000;
97+
}
98+
99+
a.btn, a.btn:visited {
100+
color:#333333;
101+
}
102+
103+
hr {
104+
margin-top: 1rem;
105+
margin-bottom: 1rem;
106+
border: 0;
107+
border-top: 1px solid rgba(0, 0, 0, 0.1);
108+
}
109+
110+
.loader {
111+
margin: 10px
20112
}
21113
22-
.img{}
23114
</style>

‎src/store/index.js

+28-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
11
import Vue from 'vue'
22
import Vuex from 'vuex'
3+
import axios from 'axios'
4+
import moment from 'moment'
35

46
Vue.use(Vuex)
7+
Vue.use(axios)
58

69
export const store = new Vuex.Store({
710
state: {
8-
11+
repositories: []
912
},
1013
getters: {
11-
14+
repositories (state) {
15+
return state.repositories.map((x) => {
16+
return {
17+
title: x.name.substring(0, 30),
18+
url: x.html_url,
19+
description: x.description,
20+
stars_num: x.stargazers_count,
21+
issues_num: x.open_issues,
22+
user_name: x.owner.login,
23+
user_avatar: x.owner.avatar_url,
24+
created_at: moment().diff(moment(x.created_at), 'days')
25+
}
26+
})
27+
}
1228
},
1329
mutations: {
14-
30+
getRepositories (state, payload) {
31+
this.state.repositories = this.state.repositories.concat(payload)
32+
return this.state.repositories
33+
}
1534
},
1635
actions: {
17-
36+
getRepositories (context) {
37+
return axios.get(`https://api.github.com/search/repositories?q=created:>2017-10-22&sort=stars&order=desc`)
38+
.then((res) => {
39+
context.commit('getRepositories', res.data.items)
40+
})
41+
}
1842
}
1943
})

0 commit comments

Comments
 (0)