2021_dev-profile / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
Lee SeJin
bd5da55a 1 parent 06d58532

Update getting user repository

Inline Side-by-side
Showing 10 changed files with 66 additions and 59 deletions
...@@ -119,4 +119,5 @@ dist ...@@ -119,4 +119,5 @@ dist
119 package-lock.json 119 package-lock.json
120 /uploads 120 /uploads
121 /assets 121 /assets
122 -build
...\ No newline at end of file ...\ No newline at end of file
122 +build
123 +.vscode
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,7 @@ const handleRepo = (list) =>{ ...@@ -9,7 +9,7 @@ const handleRepo = (list) =>{
9 list.forEach(element => { 9 list.forEach(element => {
10 const anchor = document.createElement("a"); 10 const anchor = document.createElement("a");
11 anchor.href = element.url; 11 anchor.href = element.url;
12 - anchor.target = "_blank" 12 + anchor.target = "_blank";
13 anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>` 13 anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>`
14 trendRepoBox.appendChild(anchor); 14 trendRepoBox.appendChild(anchor);
15 }); 15 });
......
...@@ -6,8 +6,7 @@ const totalContributionIndicator = document.getElementById( ...@@ -6,8 +6,7 @@ const totalContributionIndicator = document.getElementById(
6 ); 6 );
7 const userCharacterBox = document.querySelector(".user-status__character"); 7 const userCharacterBox = document.querySelector(".user-status__character");
8 const userRepoBox = document.querySelector(".user-repo"); 8 const userRepoBox = document.querySelector(".user-repo");
9 -const URL = 9 +const githubNickname = document.getElementById("jsGithubNickname");
10 - "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
11 10
12 const handleImage = () => { 11 const handleImage = () => {
13 const total = totalContributionIndicator.innerText; 12 const total = totalContributionIndicator.innerText;
...@@ -41,16 +40,16 @@ const handleRepo = (list) => { ...@@ -41,16 +40,16 @@ const handleRepo = (list) => {
41 }); 40 });
42 }; 41 };
43 42
44 -const getGithubRepo = () => { 43 +const getGithubRepo = () =>{
45 - const response = fetch(URL) 44 + const nickname = githubNickname.innerText;
46 - .then(function (response) { 45 + const userId = window.location.href.split("/users/")[1];
47 - return response.json(); 46 + const response = fetch(`/users/${userId}/repo`,{headers:{nickname}}).then(function(reponse){
48 - }) 47 + const data = reponse.json();
49 - .then(function (data) { 48 + return data
50 - const trendRepoList = data.slice(0, 2); 49 + }).then(function(data){
51 - handleRepo(trendRepoList); 50 + handleRepo(data);
52 - }); 51 + })
53 -}; 52 +}
54 53
55 const init = () => { 54 const init = () => {
56 handleImage(); 55 handleImage();
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
4 flex-direction: column; 4 flex-direction: column;
5 padding: 30px; 5 padding: 30px;
6 img { 6 img {
7 - width: 100px; 7 + width: 176px;
8 - height: 100px; 8 + height: 220px;
9 - object-fit: cover; 9 + object-fit: contain;
10 } 10 }
11 .fileUpload { 11 .fileUpload {
12 display: flex; 12 display: flex;
......
...@@ -96,16 +96,21 @@ ...@@ -96,16 +96,21 @@
96 font-size: 1.2rem; 96 font-size: 1.2rem;
97 overflow-x: scroll; 97 overflow-x: scroll;
98 } 98 }
99 - i { 99 + button {
100 - background: transparent;
101 border: none; 100 border: none;
101 + background: none;
102 + padding: 0;
102 i { 103 i {
103 - font-size: 1.5rem; 104 + background: transparent;
104 - margin: 3px; 105 + border: none;
106 + i {
107 + font-size: 1.5rem;
108 + margin: 3px;
109 + }
110 + }
111 + i:hover {
112 + cursor: pointer;
105 } 113 }
106 - }
107 - i:hover {
108 - cursor: pointer;
109 } 114 }
110 } 115 }
111 .home-search__form:hover { 116 .home-search__form:hover {
......
...@@ -48,7 +48,6 @@ ...@@ -48,7 +48,6 @@
48 } 48 }
49 49
50 .boxEffect { 50 .boxEffect {
51 - z-index: -1;
52 content: ""; 51 content: "";
53 bottom: 15px; 52 bottom: 15px;
54 right: 10px; 53 right: 10px;
...@@ -85,9 +84,9 @@ ...@@ -85,9 +84,9 @@
85 84
86 .user-profile__column { 85 .user-profile__column {
87 img { 86 img {
88 - width: 120px; 87 + width: 176px;
89 - height: 120px; 88 + height: 220px;
90 - object-fit: cover; 89 + object-fit: contain;
91 margin: 5px; 90 margin: 5px;
92 } 91 }
93 .user-profile__link { 92 .user-profile__link {
...@@ -117,6 +116,12 @@ ...@@ -117,6 +116,12 @@
117 .user-profile__tech { 116 .user-profile__tech {
118 display: flex; 117 display: flex;
119 } 118 }
119 + .user-profile__introduction {
120 + width: 100%;
121 + overflow: hidden;
122 + word-wrap: break-word;
123 + word-break: break-all;
124 + }
120 ul { 125 ul {
121 display: flex; 126 display: flex;
122 flex-direction: column; 127 flex-direction: column;
...@@ -212,7 +217,7 @@ ...@@ -212,7 +217,7 @@
212 max-width: 200px; 217 max-width: 200px;
213 height: auto; 218 height: auto;
214 object-fit: cover; 219 object-fit: cover;
215 - margin-top: px; 220 + margin-top: 20px;
216 } 221 }
217 } 222 }
218 } 223 }
......
...@@ -27,18 +27,13 @@ export const getUserDetail = async (req, res) => { ...@@ -27,18 +27,13 @@ export const getUserDetail = async (req, res) => {
27 const id = req.params.id; 27 const id = req.params.id;
28 const quote = await getQuote(); 28 const quote = await getQuote();
29 const user = await User.findById(id); 29 const user = await User.findById(id);
30 - const repo = await getRepos();
31 const totalCon = await getContributions(user.githubName); 30 const totalCon = await getContributions(user.githubName);
32 res.render("userDetail", { 31 res.render("userDetail", {
33 pagetTitle: "User Detail", 32 pagetTitle: "User Detail",
34 quote: quote.quote, 33 quote: quote.quote,
35 author: quote.author, 34 author: quote.author,
36 user, 35 user,
37 - fitstRepoName: repo.fitstRepoName, 36 + totalContributions: totalCon
38 - firstRepoUrl: repo.firstRepoUrl,
39 - secondRepoName: repo.secondRepoName,
40 - secondRepoUrl: repo.secondRepoUrl,
41 - totalContributions: totalCon,
42 }); 37 });
43 } catch (error) { 38 } catch (error) {
44 console.log(error); 39 console.log(error);
...@@ -87,7 +82,7 @@ export const postEditProfile = async (req, res) => { ...@@ -87,7 +82,7 @@ export const postEditProfile = async (req, res) => {
87 ); 82 );
88 req.session.passport.user = updatedUser; 83 req.session.passport.user = updatedUser;
89 //console.log(updatedUser); 84 //console.log(updatedUser);
90 - res.redirect("/users/edit-profile"); 85 + res.redirect(`/users/${id}`);
91 } catch (error) { 86 } catch (error) {
92 console.log(error); 87 console.log(error);
93 res.redirect("/"); 88 res.redirect("/");
...@@ -135,7 +130,7 @@ export const githubLoginCallback = async (_, __, profile, done) => { ...@@ -135,7 +130,7 @@ export const githubLoginCallback = async (_, __, profile, done) => {
135 avatarUrl, 130 avatarUrl,
136 githubUrl, 131 githubUrl,
137 name, 132 name,
138 - email, 133 + email
139 }); 134 });
140 return done(null, newUser); 135 return done(null, newUser);
141 } 136 }
...@@ -154,25 +149,6 @@ export const logout = (req, res) => { ...@@ -154,25 +149,6 @@ export const logout = (req, res) => {
154 res.redirect("/"); 149 res.redirect("/");
155 }; 150 };
156 151
157 -const getRepos = async () => {
158 - const url =
159 - "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
160 - const latelyRepos = await axios.get(url).then(function (response) {
161 - return response.data;
162 - });
163 - const fitstRepoName = latelyRepos[0].name;
164 - const secondRepoName = latelyRepos[1].name;
165 - const firstRepoUrl = latelyRepos[0].html_url;
166 - const secondRepoUrl = latelyRepos[1].html_url;
167 -
168 - return {
169 - fitstRepoName,
170 - firstRepoUrl,
171 - secondRepoName,
172 - secondRepoUrl,
173 - };
174 -};
175 -
176 const getContributions = async (username) => { 152 const getContributions = async (username) => {
177 const token = process.env.GH_SECRET_SH; 153 const token = process.env.GH_SECRET_SH;
178 const headers = { 154 const headers = {
...@@ -192,3 +168,21 @@ const getContributions = async (username) => { ...@@ -192,3 +168,21 @@ const getContributions = async (username) => {
192 .totalContributions; 168 .totalContributions;
193 return total; 169 return total;
194 }; 170 };
171 +
172 +export const getRepos = async(req,res) =>{
173 + try{
174 + const githubNickname = req.headers.nickname
175 + const URL = `https://api.github.com/users/${githubNickname}/repos?sort=updated&per_page=2`;
176 + const response = await fetch(URL,{
177 + headers: {
178 + authorization: `token ${process.env.GH_SECRET_SH}`
179 + }
180 + }).then(function (response) {
181 + return response.json();
182 + }).then(function (data) {
183 + return res.send(data);
184 + });
185 + }catch(error){
186 + console.log(error);
187 + }
188 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 import express from "express"; 1 import express from "express";
2 import { 2 import {
3 getEditProfile, 3 getEditProfile,
4 + getRepos,
4 getUserDetail, 5 getUserDetail,
5 handleUsers, 6 handleUsers,
6 postEditProfile, 7 postEditProfile,
...@@ -20,5 +21,6 @@ userRouter.post( ...@@ -20,5 +21,6 @@ userRouter.post(
20 ); 21 );
21 22
22 userRouter.get("/:id", getUserDetail); 23 userRouter.get("/:id", getUserDetail);
24 +userRouter.get("/:id/repo", getRepos);
23 25
24 export default userRouter; 26 export default userRouter;
......
...@@ -18,7 +18,8 @@ block content ...@@ -18,7 +18,8 @@ block content
18 a(href="https://google.com" target="_blank") 18 a(href="https://google.com" target="_blank")
19 img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon") 19 img(src="https://user-images.githubusercontent.com/48612525/86507657-d54fbd80-bd8e-11ea-866b-ac26496481ae.png" alt="google icon")
20 input(type="text" id="jsInput" placeholder="Google 검색") 20 input(type="text" id="jsInput" placeholder="Google 검색")
21 - i.fa.fa-search(aria-hidden="true") 21 + button
22 + i.fa.fa-search(aria-hidden="true")
22 23
23 .home-quote 24 .home-quote
24 h2=quote 25 h2=quote
......
...@@ -12,7 +12,7 @@ block content ...@@ -12,7 +12,7 @@ block content
12 img(src=`/${user.avatarUrl}`) 12 img(src=`/${user.avatarUrl}`)
13 .user-profile__link 13 .user-profile__link
14 a(href=user.githubUrl target="_blank") GitHub 14 a(href=user.githubUrl target="_blank") GitHub
15 - i.fab.fa-github 15 + i.fab.fa-github
16 a(href=`//${user.blogUrl}` target="_blank") Blog 16 a(href=`//${user.blogUrl}` target="_blank") Blog
17 i.fas.fa-link 17 i.fas.fa-link
18 .user-profile__column 18 .user-profile__column
...@@ -24,7 +24,7 @@ block content ...@@ -24,7 +24,7 @@ block content
24 h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB 24 h3 &nbsp; &nbsp; &nbsp;&nbsp;GITHUB
25 br 25 br
26 |NICKNAME 26 |NICKNAME
27 - h4=user.githubName 27 + h4#jsGithubNickname=user.githubName
28 .user-profile__email 28 .user-profile__email
29 h3 EMAIL 29 h3 EMAIL
30 h4=user.email 30 h4=user.email
......