Skip to content

Commit f166688

Browse files
pettinarippettinarip
authored
Merge pull request #12942 from ethereum/get-static-contributors
Get GitHub file contributors during getStaticProps, cache to avoid rate limit
2 parents da63380 + ea4fcba commit f166688

13 files changed

+192
-280
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@ robots.txt
5454
.vscode
5555

5656
# Crowdin report output
57-
src/data/crowdin/bucketsAwaitingReviewReport.csv
57+
src/data/crowdin/bucketsAwaitingReviewReport.csv

‎src/components/CrowdinContributors.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Author, CrowdinContributor } from "@/lib/types"
1+
import type { CrowdinContributor, FileContributor } from "@/lib/types"
22

33
import FileContributors from "@/components/FileContributors"
44

@@ -11,22 +11,17 @@ const CrowdinContributors = ({
1111
lastUpdatedDate,
1212
contributors,
1313
}: CrowdinContributorsProps) => {
14-
const mappedContributors: Author[] = contributors.map(
15-
({ id, username, avatarUrl }) => ({
16-
name: username,
17-
email: id.toString(),
18-
avatarUrl: avatarUrl,
19-
user: {
20-
login: username,
21-
url: `https://crowdin.com/profile/${username}`,
22-
},
14+
const mappedContributors: FileContributor[] = contributors.map(
15+
({ username, avatarUrl }) => ({
16+
login: username,
17+
avatar_url: avatarUrl,
18+
html_url: `https://crowdin.com/profile/${username}`,
19+
date: lastUpdatedDate,
2320
})
2421
)
2522

2623
return (
2724
<FileContributors
28-
error={mappedContributors.length === 0} // TODO: Confirm GH error handling
29-
loading={!mappedContributors.length}
3025
contributors={mappedContributors}
3126
lastEdit={lastUpdatedDate}
3227
/>

‎src/components/FileContributors.tsx

Lines changed: 52 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ import {
88
ListItem,
99
ModalBody,
1010
ModalHeader,
11-
SkeletonText,
1211
UnorderedList,
13-
useBreakpointValue,
1412
VStack,
1513
} from "@chakra-ui/react"
1614

17-
import type { Author, Lang } from "@/lib/types"
15+
import type { ChildOnlyProp, FileContributor, Lang } from "@/lib/types"
1816

1917
import { Button } from "@/components/Buttons"
2018
import InlineLink from "@/components/Link"
@@ -25,76 +23,50 @@ import Translation from "@/components/Translation"
2523
import { trackCustomEvent } from "@/lib/utils/matomo"
2624
import { getLocaleTimestamp } from "@/lib/utils/time"
2725

28-
// TODO: skeletons are not part of the DS, so these should be replaced once we
29-
// implement the new designs. Thats the reason we haven't define these styles in
30-
// the theme config file
31-
const skeletonColorProps = {
32-
startColor: "lightBorder",
33-
endColor: "searchBackgroundEmpty",
34-
}
35-
36-
const Skeleton = (props) => <SkeletonText {...skeletonColorProps} {...props} />
37-
38-
const ContributorList = ({ children }: { children: React.ReactNode }) => {
39-
return (
40-
<UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
41-
{children}
42-
</UnorderedList>
43-
)
44-
}
45-
46-
const Contributor = ({ contributor }: { contributor: Author }) => {
47-
return (
48-
<ListItem p={2} display="flex" alignItems="center">
49-
<Avatar
50-
height="40px"
51-
width="40px"
52-
src={contributor.avatarUrl}
53-
name={contributor.name}
54-
me={2}
55-
/>
56-
{contributor.user && (
57-
<InlineLink href={contributor.user.url}>
58-
@{contributor.user.login}
59-
</InlineLink>
60-
)}
61-
{!contributor.user && <span>{contributor.name}</span>}
62-
</ListItem>
63-
)
64-
}
26+
const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
27+
<UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
28+
{children}
29+
</UnorderedList>
30+
)
31+
32+
type ContributorProps = { contributor: FileContributor }
33+
const Contributor = ({ contributor }: ContributorProps) => (
34+
<ListItem p={2} display="flex" alignItems="center">
35+
<Avatar
36+
height="40px"
37+
width="40px"
38+
src={contributor.avatar_url}
39+
name={contributor.login}
40+
me={2}
41+
/>
42+
<InlineLink href={"https://github.com/" + contributor.login}>
43+
@{contributor.login}
44+
</InlineLink>
45+
</ListItem>
46+
)
6547

6648
export type FileContributorsProps = FlexProps & {
6749
editPath?: string
68-
contributors: Author[]
69-
loading: boolean
70-
error?: boolean
50+
contributors: FileContributor[]
7151
lastEdit: string
7252
}
7353

7454
const FileContributors = ({
7555
contributors,
76-
loading,
77-
error,
7856
lastEdit,
7957
...props
8058
}: FileContributorsProps) => {
8159
const [isModalOpen, setModalOpen] = useState(false)
8260
const { locale } = useRouter()
8361

84-
const isDesktop = useBreakpointValue({ base: false, md: true })
85-
86-
if (error) return null
87-
const lastContributor: Author = contributors.length
62+
const lastContributor: FileContributor = contributors.length
8863
? contributors[0]
89-
: {
90-
name: "",
91-
email: "",
92-
avatarUrl: "",
93-
user: {
94-
login: "",
95-
url: "",
96-
},
97-
}
64+
: ({
65+
avatar_url: "",
66+
login: "",
67+
html_url: "",
68+
date: Date.now().toString(),
69+
} as FileContributor)
9870

9971
return (
10072
<>
@@ -107,18 +79,12 @@ const FileContributors = ({
10779

10880
<ModalBody>
10981
<Translation id="contributors-thanks" />
110-
<Skeleton noOfLines="4" mt="4" isLoaded={!loading}>
111-
{contributors ? (
112-
<ContributorList>
113-
{contributors.map((contributor) => (
114-
<Contributor
115-
contributor={contributor}
116-
key={contributor.email}
117-
/>
118-
))}
119-
</ContributorList>
120-
) : null}
121-
</Skeleton>
82+
83+
<ContributorList>
84+
{contributors.map((contributor) => (
85+
<Contributor contributor={contributor} key={contributor.login} />
86+
))}
87+
</ContributorList>
12288
</ModalBody>
12389
</Modal>
12490

@@ -130,29 +96,22 @@ const FileContributors = ({
13096
p={{ base: 0, md: 2 }}
13197
{...props}
13298
>
133-
<Flex me={4} alignItems="center" flex="1">
134-
{isDesktop && (
135-
<>
136-
<Avatar
137-
height="40px"
138-
width="40px"
139-
src={lastContributor.avatarUrl}
140-
name={lastContributor.name}
141-
me={2}
142-
/>
143-
144-
<Text m={0} color="text200">
145-
<Translation id="last-edit" />:{" "}
146-
{lastContributor.user?.url && (
147-
<InlineLink href={lastContributor.user.url}>
148-
@{lastContributor.user.login}
149-
</InlineLink>
150-
)}
151-
{!lastContributor.user && <span>{lastContributor.name}</span>},{" "}
152-
{getLocaleTimestamp(locale as Lang, lastEdit)}
153-
</Text>
154-
</>
155-
)}
99+
<Flex me={4} alignItems="center" flex="1" hideBelow="md">
100+
<Avatar
101+
height="40px"
102+
width="40px"
103+
src={lastContributor.avatar_url}
104+
name={lastContributor.login}
105+
me={2}
106+
/>
107+
108+
<Text m={0} color="text200">
109+
<Translation id="last-edit" />:{" "}
110+
<InlineLink href={"https://github.com/" + lastContributor.login}>
111+
@{lastContributor.login}
112+
</InlineLink>
113+
, {getLocaleTimestamp(locale as Lang, lastEdit)}
114+
</Text>
156115
</Flex>
157116

158117
<VStack align="stretch" justifyContent="space-between" spacing={2}>

‎src/components/GitHubContributors.tsx

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
11
import type { FlexProps } from "@chakra-ui/react"
22

3-
import FileContributors from "@/components/FileContributors"
3+
import type { FileContributor } from "@/lib/types"
44

5-
import { useClientSideGitHubContributors } from "@/hooks/useClientSideGitHubContributors"
5+
import FileContributors from "@/components/FileContributors"
66

77
export type GitHubContributors = FlexProps & {
8-
relativePath: string
9-
editPath?: string
108
lastUpdatedDate: string
9+
contributors: FileContributor[]
1110
}
1211

1312
const GitHubContributors = ({
14-
relativePath,
1513
lastUpdatedDate,
16-
}: GitHubContributors) => {
17-
const state = useClientSideGitHubContributors(relativePath)
18-
19-
return (
20-
<FileContributors
21-
error={"error" in state}
22-
loading={state.loading as boolean}
23-
contributors={"data" in state ? state.data : []}
24-
lastEdit={lastUpdatedDate}
25-
/>
26-
)
27-
}
14+
contributors,
15+
}: GitHubContributors) => (
16+
<FileContributors contributors={contributors} lastEdit={lastUpdatedDate} />
17+
)
2818

2919
export default GitHubContributors

‎src/hooks/useClientSideGitHubContributors.ts

Lines changed: 0 additions & 85 deletions
This file was deleted.

0 commit comments

Comments
 (0)