-
-
- {profile}
-
+
-
/
-
-
+
{/* Optional description */}
{issue.body && (
diff --git a/src/components/popover/IssuePopoverContent.tsx b/src/components/popover/IssuePopoverContent.tsx new file mode 100644 index 0000000..131948b --- /dev/null +++ b/src/components/popover/IssuePopoverContent.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { GitHubIssue } from "../../types"; + +interface IssuePopoverContentProps { + issue: GitHubIssue; +} + +export default function IssuePopoverContent({ issue }: IssuePopoverContentProps) { + return ( +
+ {/* Title */}
+
+ );
+}
diff --git a/src/components/popover/UserProfilePopoverContent.tsx b/src/components/popover/UserProfilePopoverContent.tsx
index 33dd0c5..b06de38 100644
--- a/src/components/popover/UserProfilePopoverContent.tsx
+++ b/src/components/popover/UserProfilePopoverContent.tsx
@@ -1,18 +1,69 @@
-import React from "react";
-import { GitHubIssue } from "../../types";
+import React, { useEffect, useState } from "react";
+import { GitHubIssue, GitHubUser } from "../../types";
-export interface UserProfilePopoverContentI {
+interface UserProfilePopoverContentProps {
issue: GitHubIssue;
+ users: GitHubUser;
}
-export default function UserProfilePopoverContent(props: GitHubIssue) {
+export default function UserProfilePopoverContent({ issue }: UserProfilePopoverContentProps) {
+ const { user } = issue;
+ const [userStats, setUserStats] = useState<{ repos: number; followers: number; following: number; bio: string | null } | null>(null);
+
+ useEffect(() => {
+ if (user?.login) {
+ fetch(`https://api.github.com/users/${user.login}`)
+ .then((res) => res.json())
+ .then((data) => {
+ console.log("Fetched user data:", data);
+ setUserStats({
+ repos: data.public_repos,
+ followers: data.followers,
+ following: data.following,
+ bio: data.bio,
+ });
+ })
+ .catch((err) => console.error("Error fetching user stats:", err));
+ }
+ }, [user?.login]);
+
return (
- {issue.title}
+ + {/* State + Created */} +
+
+ {issue.state}
+
+ Opened on {new Date(issue.created_at).toLocaleDateString()}
+
+
+ {/* Body (short) */}
+ {issue.body && (
+ {issue.body}
+ )} + + {/* Comments + Updated */} +
+ 💬 {issue.comments} comments
+ Updated {new Date(issue.updated_at).toLocaleDateString()}
+
+
- 
+
+ {/* Avatar + Username */}
+
);
}
diff --git a/src/services/apiServices.ts b/src/services/apiServices.ts
index 7d48678..eabf022 100644
--- a/src/services/apiServices.ts
+++ b/src/services/apiServices.ts
@@ -24,9 +24,11 @@ const apiService = {
items: GitHubIssue[] | null;
}> => {
const labelQueryParam = 'label:"good first issue" ';
- let languageQueryParam = ''
- languages?.forEach(language => languageQueryParam += `language:${language.toLowerCase()} `)
- const stateQueryParam = "state:open ";
+ let languageQueryParam = "";
+ if (languages && languages.length > 0) {
+ languageQueryParam = languages.map(lang => `language:${lang}`).join(" OR ") + " ";
+ }
+ const stateQueryParam = "is:issue state:open ";
const searchQueryParam = searchString ? `${searchString} ` : "";
try {
+ 
+
+
+ {/* Bio */}
+ {userStats && (
+
+
+ {user.login}
+ {user.html_url && ( + + View Profile + + )} ++ {userStats.bio ?? "No bio available"} +
+ )} + + {/* Stats */} +
+ Repos: {userStats?.repos ?? "-"}
+ Followers: {userStats?.followers ?? "-"}
+ Following: {userStats?.following ?? "-"}
+