Skip to content

Commit 3043538

Browse files
IgboPharaohIgboPharaoh
authored
Feat/increase data fetching range (#58)
* update meta information * update type definitions * update graphql queries * add new utils for data fetching * update data fetching for prs by years * update data fetching for issue comments * add queries for fetching contribution years * abstract fetch years functionality * fix undefined issues of issue comments * rearrange project according to order of contributions * remove more button and show all projects * add months and days to contribution graph * fix build error * fix endcursor being overwritten after viewing issues 3yrs past * fix overflowing side panel * fix overflowing side panel in mobile * fix: remove console.logs add ternaries
1 parent 3466fb8 commit 3043538

File tree

21 files changed

+836
-278
lines changed

21 files changed

+836
-278
lines changed

‎src/app/components/cards/OrganisationCard.tsx‎

Lines changed: 10 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,20 @@ type OrganisationCardProps = {
66
login: string
77
avatarUrl: string
88
handleClick: (type: string) => void
9-
more: boolean
109
toggleFilter: string | null
1110
}
1211

1312
export const OrganisationCard = ({
1413
login,
1514
avatarUrl,
1615
handleClick,
17-
more,
1816
toggleFilter
1917
}: OrganisationCardProps) => {
2018
return (
2119
<div
2220
className={`border border-card-border-color rounded-md bg-card-bg shadow-card-shadow flex py-[8px] sm:py-[10px] px-4 cursor-pointer ${
23-
more
24-
? "w-full items-start justify-start bg-transparent shadow-none py-2 px-2 hover:bg-card-bg"
25-
: "w-max rounded-md items-center justify-center"
26-
} ${
2721
toggleFilter === login
2822
? " border-card-text-black border-2"
29-
: toggleFilter === login && more === true
30-
? "border-black border"
3123
: "border-none"
3224
} `}
3325
onClick={() => handleClick(login)}
@@ -52,61 +44,22 @@ export const ProjectsBlock = ({
5244
toggleFilter,
5345
handleFilterToggle
5446
}: {
55-
projects: Array<Project>
47+
projects: Array<Project & { position: number }>
5648
toggleFilter: string | null
5749
handleFilterToggle: (key: string) => void
5850
}) => {
59-
const [showMore, setShowMore] = React.useState(false)
60-
6151
return (
6252
<section className="flex gap-4 w-full flex-wrap">
6353
{projects.length > 0 &&
64-
projects
65-
.slice(0, 3)
66-
.map((x, idx) => (
67-
<OrganisationCard
68-
key={`${idx}_${x.login}`}
69-
handleClick={handleFilterToggle}
70-
login={x.login}
71-
avatarUrl={x.avatarUrl}
72-
more={false}
73-
toggleFilter={toggleFilter}
74-
/>
75-
))}
76-
{projects.length > 3 ? (
77-
<div className="md:relative">
78-
<button
79-
className="text-black border border-card-border-color rounded-md bg-card-bg shadow-card-shadow w-max flex items-center justify-center py-[8px] sm:py-[10px] px-4 cursor-pointer tracking-tighter text-xs sm:text-sm"
80-
onClick={() => setShowMore(!showMore)}
81-
>
82-
More
83-
</button>
84-
{showMore ? (
85-
<div
86-
className="absolute top-0 right-0 left-0 bottom-0 md:backdrop-blur-none backdrop-blur-sm h-full flex items-center justify-center p-8 z-10"
87-
onClick={() => setShowMore(!showMore)}
88-
>
89-
<div className="md:absolute md:right-2 md:top-14 flex flex-col gap-3 border-card-border-color border rounded-md shadow-card-shadow w-full md:w-[250px] pt-3 bg-white z-30">
90-
<p className="text-black text-sm font-semibold px-4">
91-
projects
92-
</p>
93-
<div className="flex flex-col gap-1">
94-
{projects.slice(3).map((x, idx) => (
95-
<OrganisationCard
96-
key={`${idx}_${x.login}`}
97-
handleClick={handleFilterToggle}
98-
login={x.login}
99-
avatarUrl={x.avatarUrl}
100-
more={true}
101-
toggleFilter={toggleFilter}
102-
/>
103-
))}
104-
</div>
105-
</div>
106-
</div>
107-
) : null}
108-
</div>
109-
) : null}
54+
projects.map((x, idx) => (
55+
<OrganisationCard
56+
key={`${idx}_${x.login}`}
57+
handleClick={handleFilterToggle}
58+
login={x.login}
59+
avatarUrl={x.avatarUrl}
60+
toggleFilter={toggleFilter}
61+
/>
62+
))}
11063
</section>
11164
)
11265
}

‎src/app/components/contribution-graph/index.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { days, months } from "@/helpers/utils"
2+
import { Contribution } from "@/types"
3+
import React from "react"
4+
import ToolTip from "../tool-tip"
5+
6+
const ContributionGraph = ({
7+
memoizedGraphValues,
8+
loading,
9+
onClickToolTip
10+
}: {
11+
memoizedGraphValues: Contribution[]
12+
onClickToolTip: (content: Contribution) => void
13+
loading: boolean
14+
}) => {
15+
return (
16+
<div>
17+
<div className="flex items-center gap-[3px]">
18+
<section className="flex flex-col justify-center h-full mt-[10px]">
19+
{days.map((d) => (
20+
<p key={d} className="text-black text-xs pt-[8.5px]">
21+
{d}
22+
</p>
23+
))}
24+
</section>
25+
<div className="max-w-full w-full overflow-x-auto h-full relative">
26+
<section className="grid grid-flow-col pb-[2px] w-full overflow-x-auto md:min-w-[620px] min-w-[620px]">
27+
{months.map((m) => (
28+
<p key={m} className="text-black text-xs">
29+
{m}
30+
</p>
31+
))}
32+
</section>
33+
<div>
34+
<div className="gap-[2px] grid grid-flow-col h-full gridBox">
35+
{memoizedGraphValues.map((day, idx) => (
36+
<ToolTip
37+
key={`${day.day}_${idx}`}
38+
content={day}
39+
onClickToolTip={onClickToolTip}
40+
loading={loading}
41+
/>
42+
))}
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<section className="text-black text-xs font-medium flex gap-3 flex-wrap pt-4">
48+
<div className="flex items-center gap-1">
49+
<p>Commits</p>
50+
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-blue"></section>
51+
</div>
52+
<div className="flex items-center gap-1">
53+
<p>Comments</p>
54+
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-yellow"></section>
55+
</div>
56+
<div className="flex items-center gap-1">
57+
<p>Commits & Comments</p>
58+
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-green"></section>
59+
</div>
60+
</section>
61+
</div>
62+
)
63+
}
64+
65+
export default ContributionGraph

‎src/app/components/search/action.ts‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,20 @@
22

33
import { auth } from "@/auth"
44
import { getGithubData } from "@/helpers/get-github-data"
5+
import { getIssueCommentsData } from "@/helpers/get-issues-data"
6+
import { getGithubPrsData } from "@/helpers/get-prs-data"
57

6-
export const fetchIssues = async ({ username }: { username: string }) => {
8+
export const fetchIssues = async ({
9+
username,
10+
startDate,
11+
endDate,
12+
endCursor
13+
}: {
14+
username: string
15+
startDate?: string
16+
endDate?: string
17+
endCursor: string
18+
}) => {
719
const session = await auth()
820
const token = session?.accessToken
921

@@ -20,7 +32,32 @@ export const fetchIssues = async ({ username }: { username: string }) => {
2032
})
2133
])
2234

35+
const ranged_response = await Promise.all([
36+
getGithubPrsData({
37+
username,
38+
token,
39+
query: "FETCH_RANGED_PRS",
40+
startDate,
41+
endDate
42+
}),
43+
getIssueCommentsData({
44+
username,
45+
token,
46+
query: "FETCH_RANGED_COMMENTS",
47+
startDate,
48+
endCursor
49+
})
50+
])
51+
2352
const issues = res[0]
2453
const prs = res[1]
25-
return { issues, prs }
54+
const ranged_prs = ranged_response[0]
55+
const ranged_issues = ranged_response[1]
56+
57+
return {
58+
issues,
59+
prs,
60+
ranged_prs,
61+
ranged_issues
62+
}
2663
}

‎src/app/components/search/contribution-years.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use server"
2+
3+
import { auth } from "@/auth"
4+
import { getContributionYears } from "@/helpers/get-contribution-years"
5+
6+
export const fetchYears = async ({ params }: { params: any }) => {
7+
const session = await auth()
8+
const token = session?.accessToken
9+
10+
const res = await Promise.all([
11+
getContributionYears({
12+
token,
13+
...params
14+
})
15+
])
16+
17+
const years = res[0]
18+
19+
return {
20+
years
21+
}
22+
}

‎src/app/components/search/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ export default function Search() {
3030
setError(null)
3131

3232
const { issues, prs } = await fetchIssues({
33-
username: username as string
33+
username: username as string,
34+
endCursor: ""
3435
})
3536
setLoading(false)
3637

3738
if (issues.error || prs.error) {
38-
console.error(issues.error, "error")
3939
setError(issues.error[0].message || prs.error[0].message)
4040
return
4141
}

‎src/app/components/years-switch/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const YearSection = ({ years, currentYear, handleClick }: YearSectionProps) => {
1212
const [showYears, setShowYears] = React.useState(false)
1313

1414
return (
15-
<div className="w-full sm:p-4 md:p-9 lg:px-8 sm:px-4 md:px-4 sm:py-8 h-max rounded-[15px] p-0 flex items-end justify-end absolute top-9 right-4 md:relative md:block md:top-0 md:right-0">
15+
<div className="w-full sm:p-4 md:p-9 lg:px-8 sm:px-4 md:px-4 sm:py-8 h-max rounded-[6px] p-0 flex items-end justify-end absolute top-9 right-4 md:relative md:block md:top-0 md:right-0 md:max-h-screen overflow-y-scroll">
1616
<div className="md:flex-col gap-1 md:block hidden">
1717
{years.map((year) => (
1818
<div
@@ -60,7 +60,7 @@ const YearSection = ({ years, currentYear, handleClick }: YearSectionProps) => {
6060
</button>
6161
</section>
6262
{showYears ? (
63-
<section className="flex flex-col gap-1 border-card-border-color border rounded-md shadow-card-shadow bg-white mt-3">
63+
<section className="flex flex-col gap-1 border-card-border-color border rounded-md shadow-card-shadow bg-white mt-3 max-h-[300px] overflow-y-scroll">
6464
{years.slice(1).map((year) => (
6565
<div
6666
key={year}

‎src/app/layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ export const metadata: Metadata = {
2828
card: "summary",
2929
creator: "@chaincodelabs",
3030
images: ["https://ghstats.bitcoinsearch.xyz/images/bitcoin-dev-og.png"]
31+
},
32+
metadataBase: new URL("https://ghstats.bitcoinsearch.xyz"),
33+
alternates: {
34+
canonical: "/",
35+
languages: {
36+
"en-US": "/en-US"
37+
}
3138
}
3239
}
3340

‎src/app/result/page.tsx‎

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
"use client"
22

3-
import { useSearchParams } from "next/navigation"
43
import React from "react"
4+
import { useSearchParams } from "next/navigation"
55
import { ProjectsBlock } from "../components/cards/OrganisationCard"
66

77
import YearSection from "../components/years-switch"
88
import { useGithubIssues } from "@/hooks/useGithubIssues"
99
import { IssuesAndPullRequests } from "../components/issues-and-prs"
10-
import "../globals.css"
11-
import ToolTip from "../components/tool-tip"
1210
import { ArrowLeftIcon } from "@radix-ui/react-icons"
11+
import { useGetYears } from "@/hooks/useGetYears"
12+
import ContributionGraph from "../components/contribution-graph"
13+
import "../globals.css"
1314

1415
const Page = () => {
1516
const searchParams = useSearchParams()
@@ -23,11 +24,11 @@ const Page = () => {
2324
toggleFilter,
2425
yearlyFilter,
2526
handleYearlyFilter,
26-
years,
2727
memoizedGraphValues,
2828
onClickToolTip,
2929
goBack
3030
} = useGithubIssues()
31+
const { years } = useGetYears()
3132

3233
return (
3334
<main className="flex items-center justify-center bg-white">
@@ -60,32 +61,11 @@ const Page = () => {
6061
</button>
6162
</section>
6263
</div>
63-
<div className="max-w-full w-full overflow-x-auto">
64-
<div className="gap-[2px] grid grid-flow-col h-full gridBox">
65-
{memoizedGraphValues.map((day, idx) => (
66-
<ToolTip
67-
key={`${day.day}_${idx}`}
68-
content={day}
69-
onClickToolTip={onClickToolTip}
70-
loading={loading}
71-
/>
72-
))}
73-
</div>
74-
</div>
75-
<section className="text-black text-xs font-medium flex gap-3 flex-wrap">
76-
<div className="flex items-center gap-1">
77-
<p>Commits</p>
78-
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-blue"></section>
79-
</div>
80-
<div className="flex items-center gap-1">
81-
<p>Comments</p>
82-
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-yellow"></section>
83-
</div>
84-
<div className="flex items-center gap-1">
85-
<p>Commits & Comments</p>
86-
<section className="h-[10px] w-[10px] rounded-[3px] bg-grid-green"></section>
87-
</div>
88-
</section>
64+
<ContributionGraph
65+
memoizedGraphValues={memoizedGraphValues}
66+
onClickToolTip={onClickToolTip}
67+
loading={loading}
68+
/>
8969
</section>
9070
<ProjectsBlock
9171
projects={projects}

0 commit comments

Comments
 (0)