Loading...
+ 🐴 Saddlin' up...
}
>
+
+
+ {showPicker && (
+
+ );
+};
+
+export default AddReactionButton;
diff --git a/src/components/BranchInfo.tsx b/src/components/BranchInfo.tsx
new file mode 100644
index 0000000..9ff9288
--- /dev/null
+++ b/src/components/BranchInfo.tsx
@@ -0,0 +1,29 @@
+import { graphql, useFragment } from "react-relay";
+import type { BranchInfo_pullRequest$key } from "./__generated__/BranchInfo_pullRequest.graphql";
+
+type BranchInfoProps = {
+ pullRequest: BranchInfo_pullRequest$key;
+};
+
+// 🌿 BranchInfo - Shows which trails this cattle's takin'
+export const BranchInfo = ({ pullRequest }: BranchInfoProps) => {
+ const data = useFragment(
+ graphql`
+ fragment BranchInfo_pullRequest on PullRequest {
+ headRefName
+ baseRefName
+ }
+ `,
+ pullRequest
+ );
+
+ return (
+
+ {REACTION_TYPES.map((type) => (
+
+ ))}
+
+ )}
+
+
+ );
+};
diff --git a/src/components/DiffStats.tsx b/src/components/DiffStats.tsx
new file mode 100644
index 0000000..53f320e
--- /dev/null
+++ b/src/components/DiffStats.tsx
@@ -0,0 +1,38 @@
+import { graphql, useFragment } from "react-relay";
+import type { DiffStats_pullRequest$key } from "./__generated__/DiffStats_pullRequest.graphql";
+
+type DiffStatsProps = {
+ pullRequest: DiffStats_pullRequest$key;
+};
+
+// 📊 DiffStats - Count the head of cattle bein' moved
+export const DiffStats = ({ pullRequest }: DiffStatsProps) => {
+ const data = useFragment(
+ graphql`
+ fragment DiffStats_pullRequest on PullRequest {
+ additions
+ deletions
+ createdAt
+ updatedAt
+ }
+ `,
+ pullRequest
+ );
+
+ return (
+
+ {data.headRefName}
+ →
+ {data.baseRefName}
+
+
+
+ );
+};
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index d7cae9e..1f1bc38 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,7 +1,13 @@
import { Component, ReactNode } from "react";
+interface ErrorFallbackProps {
+ error?: Error;
+ resetError: () => void;
+}
+
interface Props {
children: ReactNode;
+ fallback?: ReactNode | ((props: ErrorFallbackProps) => ReactNode);
}
interface State {
@@ -9,39 +15,75 @@ interface State {
error?: Error;
}
+// 🌵 Default fallback - the cowboy-themed error display
+const DefaultErrorFallback = ({ error, resetError }: ErrorFallbackProps) => (
+
+
+ +{data.additions}
+
+
+ -{data.deletions}
+
+
+ 🌅 Started {new Date(data.createdAt).toLocaleDateString()}
+
+ 🔄 Last wrangled {new Date(data.updatedAt).toLocaleDateString()}
+
+
+
+);
+
+// 🌿 ErrorBoundary - Catches errors like a tumbleweed catches the wind
export class ErrorBoundary extends Component
+
+ + 🌵 Well, Shucks! +
++ {error?.message || + "A tumbleweed done blown through and spooked the horses"} +
+ +
-
+
-
- - Something went wrong -
-- {this.state.error?.message || "An unexpected error occurred"} -
- -
+
+
+
+
+
+
+ 🐮 #{data.number}
+
+ •
+
+ {data.repository.nameWithOwner}
+
+
+ + {data.title} +
+
+ {data.isDraft && (
+
+ 📝 Still Ropin'
+
+ )}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/PullRequestErrorBoundary.tsx b/src/components/PullRequestErrorBoundary.tsx
new file mode 100644
index 0000000..5badc06
--- /dev/null
+++ b/src/components/PullRequestErrorBoundary.tsx
@@ -0,0 +1,54 @@
+import { Component, ReactNode } from "react";
+
+interface Props {
+ children: ReactNode;
+ prNumber?: number;
+}
+
+interface State {
+ hasError: boolean;
+ error?: Error;
+}
+
+export class PullRequestErrorBoundary extends Component
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/components/PullRequestList.tsx b/src/components/PullRequestList.tsx
index f8cb065..2dba8e9 100644
--- a/src/components/PullRequestList.tsx
+++ b/src/components/PullRequestList.tsx
@@ -1,150 +1,106 @@
-import { graphql, useLazyLoadQuery } from "react-relay";
-import type { PullRequestListQuery as PullRequestListQueryType } from "@/__generated__/PullRequestListQuery.graphql";
+import { graphql, useLazyLoadQuery, usePaginationFragment } from "react-relay";
+import type { PullRequestListQuery as PullRequestListQueryType } from "./__generated__/PullRequestListQuery.graphql";
+import type { PullRequestList_viewer$key } from "./__generated__/PullRequestList_viewer.graphql";
+import { PullRequestCard } from "./PullRequestCard";
+import { PullRequestErrorBoundary } from "./PullRequestErrorBoundary";
-const PullRequestListQuery = graphql`
- query PullRequestListQuery($first: Int!) {
- viewer {
- login
- pullRequests(first: $first, states: [OPEN], orderBy: { field: UPDATED_AT, direction: DESC }) {
- totalCount
- nodes {
- id
- number
- title
- url
- state
- isDraft
- createdAt
- updatedAt
- repository {
- name
- nameWithOwner
- }
- baseRefName
- headRefName
- additions
- deletions
- reviewDecision
+// 🐄 PullRequestList - Round up them cattle (PRs) from the range
+export const PullRequestList = ({ headCount = 10 }: { headCount?: number }) => {
+ const queryData = useLazyLoadQuery
+
+
+
+
+ + Failed to load pull request + {this.props.prNumber && ` #${this.props.prNumber}`} +
++ {this.state.error?.message || "An unexpected error occurred"} +
+- {viewer.login}'s Open Pull Requests + 🐄 {data.login}'s Cattle Roundup
- {viewer.pullRequests.totalCount} open pull request{viewer.pullRequests.totalCount !== 1 ? 's' : ''} + {data.pullRequests.totalCount} head of cattle need wranglin'
- No open pull requests found
+ 🌵 No cattle on the range, partner. The herd's all accounted for!
) : (
- {pullRequests.map((pr) => (
-
-
+
+ )
+ )}
+
+ )}
-
-
-
-
-
-
-
- #{pr.number}
-
- •
-
- {pr.repository.nameWithOwner}
-
-
- - {pr.title} -
-
- {pr.isDraft && (
-
- Draft
-
- )}
- {getReviewDecisionBadge(pr.reviewDecision)}
-
-
-
+ {roundups.map(
+ (edge) =>
+ edge.node && (
+
- {pr.headRefName}
- →
- {pr.baseRefName}
-
-
-
-
- ))}
+ {hasNext && (
+
- +{pr.additions}
- -{pr.deletions}
-
-
- Created {new Date(pr.createdAt).toLocaleDateString()}
-
-
- Updated {new Date(pr.updatedAt).toLocaleDateString()}
-
-
+
)}
+ {data.reactionGroups.map((group) => (
+
+ );
+};
+
+export default ReactableReactions;
diff --git a/src/components/ReactionGroup.tsx b/src/components/ReactionGroup.tsx
new file mode 100644
index 0000000..5defa9b
--- /dev/null
+++ b/src/components/ReactionGroup.tsx
@@ -0,0 +1,91 @@
+import { graphql, useFragment, useMutation } from "react-relay";
+import {
+ ReactionGroup_group$key,
+ ReactionContent,
+} from "./__generated__/ReactionGroup_group.graphql";
+import { getReactionEmoji } from "@/lib/reactions";
+
+type Props = {
+ group: ReactionGroup_group$key;
+};
+
+const ReactionGroup = ({ group }: Props) => {
+ const data = useFragment(
+ graphql`
+ fragment ReactionGroup_group on ReactionGroup {
+ # ...ReactionGroup_updatable
+ content
+ viewerHasReacted
+ reactors {
+ totalCount
+ }
+ subject {
+ id
+ }
+ }
+ `,
+ group
+ );
+
+ const [commitRemove, isRemoveInFlight] = useMutation(graphql`
+ mutation ReactionGroupRemoveReactionMutation($input: RemoveReactionInput!) {
+ removeReaction(input: $input) {
+ reaction {
+ content
+ reactable {
+ ...ReactableReactions_reactable
+ }
+ }
+ }
+ }
+ `);
+
+ const handleRemoveReaction = (content: ReactionContent) => {
+ commitRemove({
+ variables: {
+ input: {
+ subjectId: data.subject.id,
+ content: content,
+ },
+ },
+ optimisticUpdater: (store) => {
+ const subject = store.get(data.subject.id);
+ const groups = subject?.getLinkedRecords("reactionGroups");
+ const group = groups?.find(
+ (g) => g.getValue("content") === data.content
+ );
+ const reactors = group?.getLinkedRecord("reactors");
+ const totalCount = Number(reactors?.getValue("totalCount")) ?? 0;
+ reactors?.setValue(totalCount - 1, "totalCount");
+ group?.setValue(false, "viewerHasReacted");
+ },
+ });
+ };
+
+ if (data.reactors.totalCount === 0) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export default ReactionGroup;
diff --git a/src/components/ReviewStatusBadge.tsx b/src/components/ReviewStatusBadge.tsx
new file mode 100644
index 0000000..abd88fd
--- /dev/null
+++ b/src/components/ReviewStatusBadge.tsx
@@ -0,0 +1,34 @@
+// 🏷️ ReviewStatusBadge - Shows the branding status of this here cattle
+
+type ReviewStatusBadgeProps = {
+ decision: string | null | undefined;
+};
+
+const brands = {
+ APPROVED: {
+ text: "🏷️ Branded & Ready",
+ color: "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200",
+ },
+ CHANGES_REQUESTED: {
+ text: "🔧 Needs Re-shoein'",
+ color: "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200",
+ },
+ REVIEW_REQUIRED: {
+ text: "👀 Needs Inspectin'",
+ color:
+ "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200",
+ },
+} as const;
+
+export const ReviewStatusBadge = ({ decision }: ReviewStatusBadgeProps) => {
+ if (!decision) return null;
+
+ const brand = brands[decision as keyof typeof brands];
+ if (!brand) return null;
+
+ return (
+
+ {brand.text}
+
+ );
+};
diff --git a/src/components/TumbleweedSpawner.tsx b/src/components/TumbleweedSpawner.tsx
new file mode 100644
index 0000000..74edd0f
--- /dev/null
+++ b/src/components/TumbleweedSpawner.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+
+interface TumbleweedInstance {
+ id: number;
+ top: number;
+}
+
+// 🌿 A tumbleweed that randomly rolls across the screen
+const RollingTumbleweed = ({ top }: { top: number }) => (
+
+ 
+
+);
+
+// 🌿 TumbleweedSpawner - Spawns tumbleweeds that roll across the range
+export const TumbleweedSpawner = () => {
+ const [activeTumbleweeds, setActiveTumbleweeds] = useState<
+ TumbleweedInstance[]
+ >([]);
+ const [tumbleweedCount, setTumbleweedCount] = useState(1);
+ const tumbleweedIdCounter = useRef(0);
+ const timeoutRef = useRef
+
+ 🤠 Wranglers
+
+ );
+};
+
+export default Wranglers;
diff --git a/src/index.css b/src/index.css
index 8567d6e..7740a2d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,8 +20,43 @@
body {
background: var(--background);
color: var(--foreground);
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Oxygen, Ubuntu, Cantarell, sans-serif;
margin: 0;
padding: 0;
}
+/* 🌿 Tumbleweed rolling animation */
+@keyframes tumbleweed-roll {
+ 0% {
+ left: -100px;
+ opacity: 0;
+ }
+ 5% {
+ opacity: 1;
+ }
+ 95% {
+ opacity: 1;
+ }
+ 100% {
+ left: calc(100vw + 100px);
+ opacity: 0;
+ }
+}
+
+@keyframes spin-slow {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.animate-tumbleweed {
+ animation: tumbleweed-roll 5s linear forwards;
+}
+
+.animate-spin-slow {
+ animation: spin-slow 1s linear infinite;
+}
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 038c1c6..5f9791c 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,4 +1,6 @@
-// GitHub OAuth configuration
+// 🤠 Git Ranch - Cowboy Authentication
+// GitHub OAuth configuration for saddlin' up with the ranch
+
const GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
const REDIRECT_URI =
import.meta.env.VITE_REDIRECT_URI || "http://localhost:3000/callback";
@@ -15,25 +17,22 @@ export interface AuthState {
user: GitHubUser | null;
}
-// Generate a random state for OAuth security
-function generateState(): string {
+// Generate a random trail token for OAuth security
+function generateTrailToken(): string {
return (
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
);
}
-// Initiate GitHub OAuth flow
+// 🐴 Saddle up and ride to GitHub for authentication
export function initiateGitHubLogin(): void {
- const state = generateState();
- // Use localStorage instead of sessionStorage for better reliability across redirects
- localStorage.setItem("oauth_state", state);
-
- console.log("Initiating OAuth login with state:", state);
- console.log(
- "LocalStorage after setting:",
- localStorage.getItem("oauth_state")
- );
+ const state = generateTrailToken();
+ // Stash the trail token in the bunkhouse for when we return
+ localStorage.setItem("trail_token", state);
+
+ console.log("🐴 Headin' out to GitHub with trail token:", state);
+ console.log("🏠 Bunkhouse storage:", localStorage.getItem("trail_token"));
const params = new URLSearchParams({
client_id: GITHUB_CLIENT_ID,
@@ -45,31 +44,32 @@ export function initiateGitHubLogin(): void {
window.location.href = `https://github.com/login/oauth/authorize?${params.toString()}`;
}
-// Handle OAuth callback
+// 🏤 Check in at the tradin' post with yer authorization papers
export async function handleOAuthCallback(
code: string,
state: string
): Promise
+ {assignees.map(
+ (edge) =>
+ edge.node && (
+
+
+ 
+
+ {edge.node.name}
+
+
+ )
+ )}
+ - Authentication Error + 🚫 Trail Trouble
-{error}
+{trouble}
-
Completing authentication...
+ 🐴 Ridin' into the ranch...
- GitHub Pull Request Viewer + 🤠 Welcome to the Git Ranch
- Sign in with GitHub to view your open pull requests + Howdy partner! Saddle up with GitHub to wrangle yer open pull + requests
- Welcome, {user.name || user.login} + 🤠 Howdy, {data.viewer.name || data.viewer.login}!
-- {user.email} -
+{cowboy.email}