Skip to content

Commit ecbf926

Browse files
manuarora700manuarora700
committedAug 18, 2021
➕ Add: GitHub repo fetch
1 parent f20780e commit ecbf926

File tree

7 files changed

+99
-122
lines changed

7 files changed

+99
-122
lines changed
 

‎components/LatestCode.js

+39-120
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
22
import Link from "next/link";
3+
import getLatestRepos from "@lib/getLatestRepos";
4+
import userData from "@constants/data";
35

46
export default function LatestCode() {
7+
const [repos, setRepos] = useState([]);
8+
9+
useEffect(async () => {
10+
let latestRepos = await getLatestRepos(userData);
11+
console.log("latestRepos", latestRepos);
12+
setRepos(latestRepos);
13+
// console.log(data);
14+
console.log("repos", repos);
15+
}, [repos]);
516
return (
617
<section className="bg-[#F1F1F1] -mt-40 dark:bg-gray-900 pb-40">
718
<div className="max-w-6xl mx-auto">
@@ -11,7 +22,7 @@ export default function LatestCode() {
1122
</h1>
1223

1324
<a
14-
href="https://github.com/manuarora700"
25+
href={`https://github.com/${userData.githubUsername}`}
1526
className="mb-20 md:mb-0 px-8 py-4 rounded-md bg-white shadow-lg text-xl font-semibold flex flex-row space-x-4 items-center dark:text-gray-700"
1627
>
1728
<svg
@@ -35,126 +46,34 @@ export default function LatestCode() {
3546
</div>
3647
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto px-10 lg:-mt-10 gap-y-20">
3748
{/* Single github Repo */}
38-
<div className="github-repo">
39-
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
40-
Tailwind Starter Portfolio Project
41-
</h1>
42-
<p className="text-base font-normal my-4 text-gray-500">
43-
Starting out with tailwindcss, Tailwind Master Kit provides an
44-
amazing starter kit which I've integrated in a boilerplate code.
45-
</p>
46-
<a
47-
href="https://github.com"
48-
className="font-semibold group flex flex-row space-x-2 w-full items-center"
49-
>
50-
<p>View Repository </p>
51-
<div className="transform group-hover:translate-x-2 transition duration-300">
52-
&rarr;
53-
</div>
54-
</a>
55-
</div>
56-
57-
{/* Single github Repo */}
58-
<div className="github-repo">
59-
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
60-
Javascript Mini Projects
61-
</h1>
62-
<p className="text-base font-normal my-4 text-gray-500">
63-
20 Javascript mini projects - taught by Wes Bos - is a collection of
64-
20 projects built with vanilla javascript.
65-
</p>
66-
<a
67-
href="https://github.com"
68-
className="font-semibold group flex flex-row space-x-2 w-full items-center"
69-
>
70-
<p>View Repository </p>
71-
<div className="transform group-hover:translate-x-2 transition duration-300">
72-
&rarr;
73-
</div>
74-
</a>
75-
</div>
7649

77-
{/* Single github Repo */}
78-
<div className="github-repo">
79-
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
80-
Music Streaming Project
81-
</h1>
82-
<p className="text-base font-normal my-4 text-gray-500">
83-
A spotify clone with included functionalities like playlist
84-
creation, user account creation, pause, play, repeat and shuffle
85-
music.
86-
</p>
87-
<a
88-
href="https://github.com"
89-
className="font-semibold group flex flex-row space-x-2 w-full items-center"
90-
>
91-
<p>View Repository </p>
92-
<div className="transform group-hover:translate-x-2 transition duration-300">
93-
&rarr;
94-
</div>
95-
</a>
96-
</div>
97-
{/* Single github Repo */}
98-
<div className="github-repo">
99-
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
100-
Accept Payments With Razorpay
101-
</h1>
102-
<p className="text-base font-normal my-4 text-gray-500">
103-
Payment gateway integration using Razorpay with Next.js. Includes
104-
login and authentication with payments validation in test and
105-
production.
106-
</p>
107-
<a
108-
href="https://github.com"
109-
className="font-semibold group flex flex-row space-x-2 w-full items-center"
110-
>
111-
<p>View Repository </p>
112-
<div className="transform group-hover:translate-x-2 transition duration-300">
113-
&rarr;
114-
</div>
115-
</a>
116-
</div>
117-
118-
{/* Single github Repo */}
119-
<div className="github-repo">
120-
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
121-
Covid Resources Portal
122-
</h1>
123-
<p className="text-base font-normal my-4 text-gray-500">
124-
A covid resources portal - to get information and availability on
125-
beds, oxygen and Remdesivir - built with Next.js and tailwindcss.
126-
</p>
127-
<a
128-
href="https://github.com"
129-
className="font-semibold group flex flex-row space-x-2 w-full items-center"
130-
>
131-
<p>View Repository </p>
132-
<div className="transform group-hover:translate-x-2 transition duration-300">
133-
&rarr;
134-
</div>
135-
</a>
136-
</div>
137-
138-
{/* Single github Repo */}
139-
<div className="github-repo">
140-
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
141-
Expense Tracker Application
142-
</h1>
143-
<p className="text-base font-normal my-4 text-gray-500">
144-
A small javascript utility application that tracks your expenditure
145-
and savings on a daily basis. Get analytics delivered to your email.
146-
</p>
147-
<a
148-
href="https://github.com"
149-
className="font-semibold group flex flex-row space-x-2 w-full items-center"
150-
>
151-
<p>View Repository </p>
152-
<div className="transform group-hover:translate-x-2 transition duration-300">
153-
&rarr;
154-
</div>
155-
</a>
156-
</div>
50+
{repos &&
51+
repos.map((latestRepo, idx) => (
52+
<GithubRepoCard latestRepo={latestRepo} key="idx" />
53+
))}
15754
</div>
15855
</section>
15956
);
16057
}
58+
59+
const GithubRepoCard = ({ latestRepo }) => {
60+
return (
61+
<div className="github-repo">
62+
<h1 className="font-semibold text-xl dark:text-gray-200 text-gray-700">
63+
{latestRepo.name}
64+
</h1>
65+
<p className="text-base font-normal my-4 text-gray-500">
66+
{latestRepo.description}
67+
</p>
68+
<a
69+
href={latestRepo.clone_url}
70+
className="font-semibold group flex flex-row space-x-2 w-full items-center"
71+
>
72+
<p>View Repository </p>
73+
<div className="transform group-hover:translate-x-2 transition duration-300">
74+
&rarr;
75+
</div>
76+
</a>
77+
</div>
78+
);
79+
};

‎components/Navbar.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
22
import Link from "next/link";
33
import { useTheme } from "next-themes";
44
import { useRouter } from "next/router";
5+
import userData from "@constants/data";
56

67
export default function Navbar() {
78
const router = useRouter();
@@ -22,10 +23,10 @@ export default function Navbar() {
2223
<Link href="/">
2324
<a>
2425
<h1 className="font-semibold text-xl dark:text-gray-100">
25-
Manu Arora
26+
{userData.name}
2627
</h1>
2728
<p className="text-base font-light text-gray-500 dark:text-gray-300">
28-
Full-Stack Developer
29+
{userData.designation}
2930
</p>
3031
</a>
3132
</Link>

‎constants/data.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const userData = {
2+
githubUsername: "manuarora700",
3+
name: "Manu Arora",
4+
designation: "Full-Stack Developer",
5+
};
6+
7+
export default userData;

‎jsconfig.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@components/*": ["components/*"],
6+
"@data/*": ["data/*"],
7+
"@utils/*": ["utils/*"],
8+
"@layouts/*": ["layouts/*"],
9+
"@lib/*": ["lib/*"],
10+
"@styles/*": ["styles/*"],
11+
"@hooks/*": ["hooks/*"],
12+
"@constants/*": ["constants/*"]
13+
}
14+
}
15+
}

‎lib/getLatestRepos.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import axios from "axios";
2+
3+
const getLatestRepos = async (data) => {
4+
console.log("data", data);
5+
try {
6+
const username = data.githubUsername;
7+
8+
const res = await axios.get(
9+
`https://api.github.com/search/repositories?q=user:${username}+sort:author-date-asc`
10+
);
11+
// const res = await axios.get(`https://api.github.com/users/${username}/repos`);
12+
13+
let repos = res.data.items;
14+
let latestSixRepos = repos.splice(0, 6);
15+
return latestSixRepos;
16+
} catch (err) {
17+
console.log(err);
18+
}
19+
};
20+
21+
export default getLatestRepos;

‎package-lock.json

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

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"start": "next start"
99
},
1010
"dependencies": {
11+
"axios": "^0.21.1",
1112
"next": "10.x",
1213
"next-themes": "0.0.15",
1314
"react": "17.x",

0 commit comments

Comments
 (0)
Please sign in to comment.