\n {actor.login} \n \n {payload.action}\n \n issue\n \n #{payload.issue.number}\n \n in\n {repo.name}\n

\n \n

\n \n {payload.issue.title}\n \n

\n {payload.issue.body && (\n

\n {truncateText(payload.issue.body)}\n

\n )}\n {payload.issue.labels && payload.issue.labels.length > 0 && (\n

\n {payload.issue.labels.map((label, index) => (\n \n {label.name}\n \n ))}\n

\n )}\n

\n {formatTimeAgo(created_at)}\n

\n \n );\n}\n\nfunction PushEventComponent({ event }: { event: PushEvent }) {\n const { payload, actor, repo, created_at } = event;\n const branchName = getBranchName(payload.ref);\n const cutoffPoint = 15;\n\n return (\n \n \n \n

\n {actor.login} \n \n pushed {payload.size} commit{payload.size > 1 ? \"s\" : \"\"} to\n \n \n {branchName}\n \n in\n \n {repo.name}\n \n

\n \n

\n {payload.commits.slice(0, cutoffPoint).map((commit, index) => (\n

\n \n {commit.sha.substring(0, 7)}\n \n \n {truncateText(commit.message, 80)}\n \n

\n ))}\n {payload.commits.length > cutoffPoint && (\n \n ... and {payload.commits.length - cutoffPoint}{\" \"}\n more commit{payload.commits.length - cutoffPoint > 1 ? \"s\" : \"\"}\n

\n )}\n

\n {formatTimeAgo(created_at)}\n

\n \n \n );\n}\n\nfunction PullRequestEventComponent({ event }: { event: PullRequestEvent }) {\n const { payload, actor, repo, created_at } = event;\n const actionColor = payload.action === \"opened\"\n ? \"#28a745\"\n : payload.pull_request.merged\n ? \"#6f42c1\"\n : \"#dc3545\";\n const actionText = payload.pull_request.merged ? \"merged\" : payload.action;\n\n return (\n \n \n \n

\n {actor.login} \n \n {actionText}\n \n pull request\n \n #{payload.pull_request.number}\n \n in\n {repo.name}\n

\n \n

\n \n {payload.pull_request.title}\n \n

\n {payload.pull_request.body && (\n

\n {truncateText(payload.pull_request.body)}\n

\n )}\n

\n {formatTimeAgo(created_at)}\n

\n \n );\n}\n\nfunction PullRequestReviewEventComponent(\n { event }: { event: PullRequestReviewEvent },\n) {\n const { payload, actor, repo, created_at } = event;\n const reviewStateColor = payload.review.state === \"approved\"\n ? \"#28a745\"\n : payload.review.state === \"changes_requested\"\n ? \"#dc3545\"\n : \"#6f42c1\";\n\n return (\n \n \n \n

\n {actor.login} \n reviewed\n pull request\n \n #{payload.pull_request.number}\n \n in\n {repo.name}\n

\n \n

\n \n {payload.pull_request.title}\n \n

\n {payload.review.body && (\n

\n {truncateText(payload.review.body)}\n

\n )}\n

\n {formatTimeAgo(created_at)}\n

\n \n );\n}\n\nfunction IssueCommentEventComponent({ event }: { event: IssueCommentEvent }) {\n const { payload, actor, repo, created_at } = event;\n\n return (\n \n \n \n

\n {actor.login} \n commented on\n \n #{payload.issue.number}\n \n in\n \n {repo.name}\n \n

\n \n

\n \n {payload.issue.title}\n \n

\n \n

\n {truncateText(payload.comment.body)}\n

\n {formatTimeAgo(created_at)}\n

\n \n \n );\n}\n\nfunction DeleteEventComponent({ event }: { event: DeleteEvent }) {\n const { payload, actor, repo, created_at } = event;\n\n return (\n \n \n \n

\n {actor.login} \n deleted\n {payload.ref_type}\n \n {payload.ref}\n \n in\n \n {repo.name}\n \n

\n \n

\n {formatTimeAgo(created_at)}\n

\n \n );\n}\n\nfunction GroupedPushEventComponent({ event }: { event: GroupedPushEvents }) {\n const { events, actor, repo, created_at } = event;\n const totalCommits = events.reduce((sum, e) => sum + e.payload.size, 0);\n const allCommits = events.flatMap((e) => e.payload.commits);\n const branches = [\n ...new Set(events.map((e) => getBranchName(e.payload.ref))),\n ];\n const cutoffPoint = 15;\n\n return (\n \n \n \n

\n {actor.login} \n \n pushed {totalCommits} commit{totalCommits > 1 ? \"s\" : \"\"} in{\" \"}\n {events.length} push{events.length > 1 ? \"es\" : \"\"} to\n \n {branches.map((branch, index) => (\n \n \n {branch}\n \n {index < branches.length - 1 && ,}\n \n ))}\n in\n \n {repo.name}\n \n

\n \n

\n {allCommits.slice(0, cutoffPoint).map((commit, index) => (\n \n \n {commit.sha.substring(0, 7)}\n \n \n {truncateText(commit.message, 80)}\n \n

\n ))}\n {allCommits.length > cutoffPoint && (\n \n ... and {allCommits.length - cutoffPoint}{\" \"}\n more commit{allCommits.length - cutoffPoint > 1 ? \"s\" : \"\"}\n \n )}\n

\n {formatTimeAgo(created_at)}\n

\n \n \n );\n}\n\n// Main event renderer component\nfunction ProcessedEventComponent({ event }: { event: ProcessedEvent }) {\n switch (event.type) {\n case \"IssuesEvent\":\n return ;\n case \"PushEvent\":\n return ;\n case \"PullRequestEvent\":\n return ;\n case \"PullRequestReviewEvent\":\n return ;\n case \"IssueCommentEvent\":\n return ;\n case \"DeleteEvent\":\n return ;\n case \"GroupedPushEvents\":\n return ;\n default:\n return (\n

I do not know how to display events of type \"{event.type}\" :(

\n );\n }\n}\n\n// Form component for GitHub credentials\nfunction GitHubCredentialsForm() {\n return (\n \n \n GitHub Activity Dashboard\n \n \n \n \n

\n \n 📊 GitHub Activity Dashboard\n \n \n Enter your GitHub credentials to view your activity\n

\n\n \n

\n \n \n );\n}\n\n// Dashboard component\nfunction GitHubEventsDashboard(\n { events, username, page, token }: {\n events: GitHubEvent[];\n username: string;\n page: number;\n token?: string;\n },\n) {\n const processedEvents = groupConsecutivePushEvents(events);\n return (\n \n \n GitHub Activity Dashboard - {username}\n \n \n \n \n

\n \n 📊 GitHub Activity Dashboard\n \n

\n Recent activity for {username} (Page {page})\n

\n {processedEvents.length > 0\n ? (\n processedEvents.map((event, index) => {\n const key = event.type === \"GroupedPushEvents\"\n ? `grouped-${index}`\n : (event as GitHubEvent).id;\n return ;\n })\n )\n : (\n \n \n No recent activity found for {username}\n

\n )}\n

\n ← Back to Form\n\n {page !== 1 && (\n \n \n \n \n \n Previous Page\n \n \n )}\n\n

\n \n \n \n );\n}\n\n// Fetch GitHub events function\nasync function fetchGitHubEvents(\n username: string,\n token: string,\n page: number,\n): Promise {\n const url =\n `https://api.github.com/users/${username}/events?per_page=30&page=${page}`;\n\n const headers: Record = {\n \"Accept\": \"application/vnd.github.v3+json\",\n \"User-Agent\": \"GitHub-Activity-Dashboard\",\n };\n\n // Only add Authorization header if token is provided\n if (token) {\n headers[\"Authorization\"] = `token ${token}`;\n }\n\n try {\n const response = await fetch(url, { headers });\n\n if (!response.ok) {\n throw new Error(\n `GitHub API error: ${response.status} ${response.statusText}`,\n );\n }\n\n const events = await response.json();\n return events as GitHubEvent[];\n } catch (error) {\n console.error(\"Error fetching GitHub events:\", error);\n throw error;\n }\n}\n\n// Main HTTP handler\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const pathname = url.pathname;\n\n try {\n // Handle GET request to root - show the form\n if (req.method === \"GET\" && pathname === \"/\") {\n const html = renderToString(\n React.createElement(GitHubCredentialsForm),\n );\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n },\n });\n }\n\n // Handle POST request to /events - process form and show dashboard\n if (req.method === \"POST\" && pathname === \"/events\") {\n const formData = await req.formData();\n const username = formData.get(\"username\")?.toString();\n const token = formData.get(\"token\")?.toString();\n const pageParam = formData.get(\"page\")?.toString();\n\n if (!username) {\n return new Response(\n `\n \n Error - GitHub Activity Dashboard\n \n

⚠️ Error

GitHub username is required.

\n ← Go back to form\n \n \n `,\n {\n status: 400,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n\n // Get page from form data or URL query parameter, default to 1\n const urlPage = Number(url.searchParams.get(\"page\") ?? 1);\n const formPage = pageParam ? Number(pageParam) : 1;\n const page = formPage || urlPage;\n\n // Fetch GitHub events\n const events = await fetchGitHubEvents(username, token || \"\", page);\n\n // Render the dashboard\n const html = renderToString(\n React.createElement(GitHubEventsDashboard, {\n events,\n username,\n page,\n token,\n }),\n );\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\", // Don't cache form submissions\n },\n });\n }\n\n // Handle GET request to /events with query params (pagination)\n if (req.method === \"GET\" && pathname === \"/events\") {\n // For pagination, we need to redirect back to form since we don't have stored credentials\n return new Response(\n `\n \n Session Expired - GitHub Activity Dashboard\n \n

🔒 Session Expired

Please enter your credentials again to continue.

\n ← Go back to form\n \n \n `,\n {\n status: 200,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n\n // Handle any other routes - redirect to home\n return new Response(null, {\n status: 302,\n headers: { Location: \"/\" },\n });\n } catch (error) {\n console.error(\"Dashboard error:\", error);\n\n return new Response(\n `\n \n Error - GitHub Activity Dashboard\n \n

⚠️ Error

Failed to load GitHub activity dashboard.

${\n error instanceof Error ? error.message : \"Unknown error\"\n }

\n ← Go back to form\n \n \n `,\n {\n status: 500,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n}","deleted","label","github-activity-dashboard",[98],"permalink","https://www.val.town/x/tobeofuse/github-activity-dashboard-public/code/main.tsx","extension","actionData","errors"]