Feat/increase data fetching range

src/app/components/cards/OrganisationCard.tsx

@@ -6,28 +6,20 @@ type OrganisationCardProps = {
     login: string
     avatarUrl: string
     handleClick: (type: string) => void
-    more: boolean
     toggleFilter: string | null
 }
 
 export const OrganisationCard = ({
     login,
     avatarUrl,
     handleClick,
-    more,
     toggleFilter
 }: OrganisationCardProps) => {
     return (
         <div
             className={`border border-card-border-color rounded-md bg-card-bg shadow-card-shadow flex py-[8px] sm:py-[10px] px-4 cursor-pointer ${
-                more
-                    ? "w-full items-start justify-start bg-transparent shadow-none py-2 px-2 hover:bg-card-bg"
-                    : "w-max rounded-md items-center justify-center"
-            }  ${
                 toggleFilter === login
                     ? " border-card-text-black border-2"
-                    : toggleFilter === login && more === true
-                    ? "border-black border"
                     : "border-none"
             } `}
             onClick={() => handleClick(login)}
@@ -52,61 +44,22 @@ export const ProjectsBlock = ({
     toggleFilter,
     handleFilterToggle
 }: {
-    projects: Array<Project>
+    projects: Array<Project & { position: number }>
     toggleFilter: string | null
     handleFilterToggle: (key: string) => void
 }) => {
-    const [showMore, setShowMore] = React.useState(false)
-
     return (
         <section className="flex gap-4 w-full flex-wrap">
             {projects.length > 0 &&
-                projects
-                    .slice(0, 3)
-                    .map((x, idx) => (
-                        <OrganisationCard
-                            key={`${idx}_${x.login}`}
-                            handleClick={handleFilterToggle}
-                            login={x.login}
-                            avatarUrl={x.avatarUrl}
-                            more={false}
-                            toggleFilter={toggleFilter}
-                        />
-                    ))}
-            {projects.length > 3 ? (
-                <div className="md:relative">
-                    <button
-                        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"
-                        onClick={() => setShowMore(!showMore)}
-                    >
-                        More
-                    </button>
-                    {showMore ? (
-                        <div
-                            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"
-                            onClick={() => setShowMore(!showMore)}
-                        >
-                            <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">
-                                <p className="text-black text-sm font-semibold px-4">
-                                    projects
-                                </p>
-                                <div className="flex flex-col gap-1">
-                                    {projects.slice(3).map((x, idx) => (
-                                        <OrganisationCard
-                                            key={`${idx}_${x.login}`}
-                                            handleClick={handleFilterToggle}
-                                            login={x.login}
-                                            avatarUrl={x.avatarUrl}
-                                            more={true}
-                                            toggleFilter={toggleFilter}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ) : null}
-                </div>
-            ) : null}
+                projects.map((x, idx) => (
+                    <OrganisationCard
+                        key={`${idx}_${x.login}`}
+                        handleClick={handleFilterToggle}
+                        login={x.login}
+                        avatarUrl={x.avatarUrl}
+                        toggleFilter={toggleFilter}
+                    />
+                ))}
         </section>
     )
 }

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

@@ -0,0 +1,65 @@
+import { days, months } from "@/helpers/utils"
+import { Contribution } from "@/types"
+import React from "react"
+import ToolTip from "../tool-tip"
+
+const ContributionGraph = ({
+    memoizedGraphValues,
+    loading,
+    onClickToolTip
+}: {
+    memoizedGraphValues: Contribution[]
+    onClickToolTip: (content: Contribution) => void
+    loading: boolean
+}) => {
+    return (
+        <div>
+            <div className="flex items-center gap-[3px]">
+                <section className="flex flex-col justify-center h-full mt-[10px]">
+                    {days.map((d) => (
+                        <p key={d} className="text-black text-xs pt-[8.5px]">
+                            {d}
+                        </p>
+                    ))}
+                </section>
+                <div className="max-w-full w-full overflow-x-auto h-full relative">
+                    <section className="grid grid-flow-col pb-[2px] w-full overflow-x-auto md:min-w-[620px] min-w-[620px]">
+                        {months.map((m) => (
+                            <p key={m} className="text-black text-xs">
+                                {m}
+                            </p>
+                        ))}
+                    </section>
+                    <div>
+                        <div className="gap-[2px] grid grid-flow-col h-full gridBox">
+                            {memoizedGraphValues.map((day, idx) => (
+                                <ToolTip
+                                    key={`${day.day}_${idx}`}
+                                    content={day}
+                                    onClickToolTip={onClickToolTip}
+                                    loading={loading}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <section className="text-black text-xs font-medium flex gap-3 flex-wrap pt-4">
+                <div className="flex items-center gap-1">
+                    <p>Commits</p>
+                    <section className="h-[10px] w-[10px] rounded-[3px] bg-grid-blue"></section>
+                </div>
+                <div className="flex items-center gap-1">
+                    <p>Comments</p>
+                    <section className="h-[10px] w-[10px] rounded-[3px] bg-grid-yellow"></section>
+                </div>
+                <div className="flex items-center gap-1">
+                    <p>Commits & Comments</p>
+                    <section className="h-[10px] w-[10px] rounded-[3px] bg-grid-green"></section>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default ContributionGraph

src/app/components/search/action.ts

@@ -2,8 +2,20 @@
 
 import { auth } from "@/auth"
 import { getGithubData } from "@/helpers/get-github-data"
+import { getIssueCommentsData } from "@/helpers/get-issues-data"
+import { getGithubPrsData } from "@/helpers/get-prs-data"
 
-export const fetchIssues = async ({ username }: { username: string }) => {
+export const fetchIssues = async ({
+    username,
+    startDate,
+    endDate,
+    endCursor
+}: {
+    username: string
+    startDate?: string
+    endDate?: string
+    endCursor: string
+}) => {
     const session = await auth()
     const token = session?.accessToken
 
@@ -20,7 +32,32 @@ export const fetchIssues = async ({ username }: { username: string }) => {
         })
     ])
 
+    const ranged_response = await Promise.all([
+        getGithubPrsData({
+            username,
+            token,
+            query: "FETCH_RANGED_PRS",
+            startDate,
+            endDate
+        }),
+        getIssueCommentsData({
+            username,
+            token,
+            query: "FETCH_RANGED_COMMENTS",
+            startDate,
+            endCursor
+        })
+    ])
+
     const issues = res[0]
     const prs = res[1]
-    return { issues, prs }
+    const ranged_prs = ranged_response[0]
+    const ranged_issues = ranged_response[1]
+
+    return {
+        issues,
+        prs,
+        ranged_prs,
+        ranged_issues
+    }
 }

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

@@ -0,0 +1,22 @@
+"use server"
+
+import { auth } from "@/auth"
+import { getContributionYears } from "@/helpers/get-contribution-years"
+
+export const fetchYears = async ({ params }: { params: any }) => {
+    const session = await auth()
+    const token = session?.accessToken
+
+    const res = await Promise.all([
+        getContributionYears({
+            token,
+            ...params
+        })
+    ])
+
+    const years = res[0]
+
+    return {
+        years
+    }
+}

src/app/components/search/index.tsx

@@ -30,12 +30,12 @@ export default function Search() {
         setError(null)
 
         const { issues, prs } = await fetchIssues({
-            username: username as string
+            username: username as string,
+            endCursor: ""
         })
         setLoading(false)
 
         if (issues.error || prs.error) {
-            console.error(issues.error, "error")
             setError(issues.error[0].message || prs.error[0].message)
             return
         }

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

@@ -12,7 +12,7 @@ const YearSection = ({ years, currentYear, handleClick }: YearSectionProps) => {
     const [showYears, setShowYears] = React.useState(false)
 
     return (
-        <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">
+        <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">
             <div className="md:flex-col gap-1 md:block hidden">
                 {years.map((year) => (
                     <div
@@ -60,7 +60,7 @@ const YearSection = ({ years, currentYear, handleClick }: YearSectionProps) => {
                     </button>
                 </section>
                 {showYears ? (
-                    <section className="flex flex-col gap-1 border-card-border-color border rounded-md shadow-card-shadow bg-white mt-3">
+                    <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">
                         {years.slice(1).map((year) => (
                             <div
                                 key={year}

src/app/layout.tsx

@@ -28,6 +28,13 @@ export const metadata: Metadata = {
         card: "summary",
         creator: "@chaincodelabs",
         images: ["https://ghstats.bitcoinsearch.xyz/images/bitcoin-dev-og.png"]
+    },
+    metadataBase: new URL("https://ghstats.bitcoinsearch.xyz"),
+    alternates: {
+        canonical: "/",
+        languages: {
+            "en-US": "/en-US"
+        }
     }
 }
 

src/app/result/page.tsx

@@ -1,15 +1,16 @@
 "use client"
 
-import { useSearchParams } from "next/navigation"
 import React from "react"
+import { useSearchParams } from "next/navigation"
 import { ProjectsBlock } from "../components/cards/OrganisationCard"
 
 import YearSection from "../components/years-switch"
 import { useGithubIssues } from "@/hooks/useGithubIssues"
 import { IssuesAndPullRequests } from "../components/issues-and-prs"
-import "../globals.css"
-import ToolTip from "../components/tool-tip"
 import { ArrowLeftIcon } from "@radix-ui/react-icons"
+import { useGetYears } from "@/hooks/useGetYears"
+import ContributionGraph from "../components/contribution-graph"
+import "../globals.css"
 
 const Page = () => {
     const searchParams = useSearchParams()
@@ -23,11 +24,11 @@ const Page = () => {
         toggleFilter,
         yearlyFilter,
         handleYearlyFilter,
-        years,
         memoizedGraphValues,
         onClickToolTip,
         goBack
     } = useGithubIssues()
+    const { years } = useGetYears()
 
     return (
         <main className="flex items-center justify-center bg-white">
@@ -60,32 +61,11 @@ const Page = () => {
                                 </button>
                             </section>
                         </div>
-                        <div className="max-w-full w-full overflow-x-auto">
-                            <div className="gap-[2px] grid grid-flow-col h-full gridBox">
-                                {memoizedGraphValues.map((day, idx) => (
-                                    <ToolTip
-                                        key={`${day.day}_${idx}`}
-                                        content={day}
-                                        onClickToolTip={onClickToolTip}
-                                        loading={loading}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                        <section className="text-black text-xs font-medium flex gap-3 flex-wrap">
-                            <div className="flex items-center gap-1">
-                                <p>Commits</p>
-                                <section className="h-[10px] w-[10px] rounded-[3px] bg-grid-blue"></section>
-                            </div>
-                            <div className="flex items-center gap-1">
-                                <p>Comments</p>
-                                <section className="h-[10px] w-[10px] rounded-[3px] bg-grid-yellow"></section>
-                            </div>
-                            <div className="flex items-center gap-1">
-                                <p>Commits & Comments</p>
-                                <section className="h-[10px] w-[10px] rounded-[3px] bg-grid-green"></section>
-                            </div>
-                        </section>
+                        <ContributionGraph
+                            memoizedGraphValues={memoizedGraphValues}
+                            onClickToolTip={onClickToolTip}
+                            loading={loading}
+                        />
                     </section>
                     <ProjectsBlock
                         projects={projects}