t3code/apps/mobile/src/features/pull-requests/PullRequestOverviewLoading.tsx at main · pingdotgg/t3code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { Chip } from "../../components/ui/Chip";
import { PullRequestSectionHeading } from "./PullRequestSectionHeading";
import type { PullRequestListEntry, PullRequestSummary } from "@t3tools/contracts";
import { View } from "react-native";
import { PullRequestCardGroup, PullRequestCardRow } from "./PullRequestControls";
import { PullRequestStackCard } from "./PullRequestStackCard";
import type { PullRequestParams } from "./usePullRequestDiff";
import type { PullRequestStackState } from "./usePullRequestStack";
import { pullRequestListReviewStatus } from "./pullRequestList";
import { PullRequestGlyph } from "./pullRequestGlyphs";

export function PullRequestOverviewLoading({
  summary,
  params,
  stack,
}: {
  readonly summary: PullRequestListEntry | PullRequestSummary;
  readonly params: PullRequestParams;
  readonly stack: PullRequestStackState;
}) {
  const review = pullRequestListReviewStatus({
    reviewDecision: summary.reviewDecision ?? undefined,
    viewerReviewRequested: "viewerReviewRequested" in summary && summary.viewerReviewRequested,
  });
  const conflicting = summary.mergeability === "conflicting";
  const clean = summary.mergeability === "mergeable";
  return (
    <View
      className="gap-5"
      accessibilityLabel="Loading pull request details"
      accessibilityState={{ busy: true }}
    >
      <PullRequestStackCard params={params} state={stack} />
      <PullRequestCardGroup>
        <PullRequestCardRow
          compact
          title={
            summary.checksState === "passing"
              ? "Checks completed"
              : summary.checksState === "failing"
                ? "Checks failing"
                : summary.checksState === "pending"
                  ? "Checks running"
                  : "Checks"
          }
          icon={
            summary.checksState === "passing"
              ? "checkmark.circle"
              : summary.checksState === "failing"
                ? "exclamationmark.circle"
                : "clock"
          }
          tint={
            summary.checksState === "passing"
              ? "accent-adaptive-emerald-600-400"
              : summary.checksState === "failing"
                ? "accent-danger-foreground"
                : "accent-icon-muted"
          }
        >
          <View className="h-3 w-16 rounded bg-subtle-strong" />
        </PullRequestCardRow>
        <PullRequestCardRow
          compact
          title={review?.accessibleLabel ?? "Reviews"}
          icon={review?.icon ?? "bubble.left"}
          tint={review?.tint}
        >
          <View className="h-3 w-20 rounded bg-subtle-strong" />
        </PullRequestCardRow>
        <PullRequestCardRow
          compact
          title={
            conflicting
              ? `Conflicts with ${summary.baseBranch}`
              : clean
                ? `No conflicts with ${summary.baseBranch}`
                : "Branch"
          }
          icon={
            conflicting ? PullRequestGlyph.conflicting : clean ? "checkmark.circle" : "arrow.branch"
          }
          tint={
            conflicting
              ? "accent-danger-foreground"
              : clean
                ? "accent-adaptive-emerald-600-400"
                : undefined
          }
        />
        <View className="border-t border-border-subtle p-3">
          <View className="h-11 rounded-xl bg-subtle-strong" />
        </View>
      </PullRequestCardGroup>
      {"labels" in summary && summary.labels.length ? (
        <View className="flex-row flex-wrap gap-2">
          {summary.labels.map((label) => (
            <Chip key={label.name} label={label.name} size="small" />
          ))}
        </View>
      ) : null}
      <View className="gap-3">
        <PullRequestSectionHeading>Description</PullRequestSectionHeading>
        <View className="gap-3 py-1">
          <View className="h-4 w-full rounded bg-subtle-strong" />
          <View className="h-4 w-full rounded bg-subtle-strong" />
          <View className="h-4 w-3/4 rounded bg-subtle-strong" />
        </View>
      </View>
    </View>
  );
}