Merge pull request #124 from ethereum/crowdin

implement CrowdinContributors component

Author: pettinarip

src/components/CrowdinContributors.tsx

@@ -0,0 +1,36 @@
+import type { Author, CrowdinContributor } from "@/lib/types"
+
+import FileContributors from "@/components/FileContributors"
+
+type CrowdinContributorsProps = {
+  relativePath: string
+  lastUpdatedDate: string
+  contributors: CrowdinContributor[]
+}
+const CrowdinContributors = ({
+  lastUpdatedDate,
+  contributors,
+}: CrowdinContributorsProps) => {
+  const mappedContributors: Author[] = contributors.map(
+    ({ id, username, avatarUrl }) => ({
+      name: username,
+      email: id.toString(),
+      avatarUrl: avatarUrl,
+      user: {
+        login: username,
+        url: `https://crowdin.com/profile/${username}`,
+      },
+    })
+  )
+
+  return (
+    <FileContributors
+      error={mappedContributors.length === 0} // TODO: Confirm GH error handling
+      loading={!mappedContributors.length}
+      contributors={mappedContributors}
+      lastEdit={lastUpdatedDate}
+    />
+  )
+}
+
+export default CrowdinContributors

src/components/FileContributors.tsx

@@ -1,12 +1,10 @@
 import { useState } from "react"
 import { useRouter } from "next/router"
-import { FaGithub } from "react-icons/fa"
 import {
   Avatar,
   Flex,
   FlexProps,
   Heading,
-  Icon,
   ListItem,
   ModalBody,
   ModalHeader,
@@ -16,10 +14,9 @@ import {
   VStack,
 } from "@chakra-ui/react"
 
-import type { Lang } from "@/lib/types"
-import type { Author } from "@/lib/interfaces"
+import type { Author, Lang } from "@/lib/types"
 
-import { Button, ButtonLink } from "@/components/Buttons"
+import { Button } from "@/components/Buttons"
 import InlineLink from "@/components/Link"
 import Modal from "@/components/Modal"
 import Text from "@/components/OldText"
@@ -72,15 +69,15 @@ const Contributor = ({ contributor }: { contributor: Author }) => {
   )
 }
 
-export interface IProps extends FlexProps {
+export interface FileContributorsProps extends FlexProps {
   editPath?: string
-  contributors: Array<Author>
-  loading: Boolean
+  contributors: Author[]
+  loading: boolean
   error?: boolean
   lastEdit: string
 }
 
-const FileContributors: React.FC<IProps> = ({
+const FileContributors: React.FC<FileContributorsProps> = ({
   contributors,
   loading,
   error,

src/components/FileContributorsCrowdin.tsx

@@ -14,12 +14,13 @@ const GitHubContributors: React.FC<IProps> = ({
   relativePath,
   lastUpdatedDate,
 }) => {
-  const { loading, authors, error } = useClientSideGitHubContributors(relativePath)
+  const state = useClientSideGitHubContributors(relativePath)
+
   return (
     <FileContributors
-      error={!!error}
-      loading={loading}
-      contributors={authors || []}
+      error={"error" in state}
+      loading={state.loading as boolean}
+      contributors={"data" in state ? state.data : []}
       lastEdit={lastUpdatedDate}
     />
   )

src/components/GitHubContributors.tsx

@@ -2,19 +2,20 @@ import { join } from "path"
 
 import { useEffect, useState } from "react"
 
-import type { FileContributorsState } from "@/lib/types"
-import type { Author } from "@/lib/interfaces"
+import type { Author, FileContributorsState } from "@/lib/types"
 
 import { GITHUB_COMMITS_URL, OLD_CONTENT_DIR } from "@/lib/constants"
 
-const gitHubAuthHeaders = {
+export const gitHubAuthHeaders = {
   headers: new Headers({
     // About personal access tokens https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#about-personal-access-tokens
     Authorization: "Token " + process.env.NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY,
   }),
 }
 
-const fetchGitHubContributors = async (relativePath: string) => {
+const fetchGitHubContributors = async (
+  relativePath: string,
+): Promise<FileContributorsState> => {
   const url = new URL(GITHUB_COMMITS_URL)
   // TODO: OLD_CONTENT_DIR -> CONTENT_DIR for production
   const filePath = join(OLD_CONTENT_DIR, relativePath, "index.md")
@@ -43,7 +44,7 @@ const fetchGitHubContributors = async (relativePath: string) => {
     const authors = Array.from(authorSet).map(
       JSON.parse as (entry: string) => Author
     )
-    return { loading: false, authors }
+    return { loading: false, data: authors }
   } catch (error: unknown) {
     if (error instanceof Error) {
       console.error(filePath, error.message)
@@ -54,15 +55,15 @@ const fetchGitHubContributors = async (relativePath: string) => {
 /**
  * Client-side hook to fetch GitHub contributors for a given file
  * @param relativePath Relative path of the file being queried
- * @returns `state` comprise of { loading, authors, error } where
- * authors is an array of Author objects if successful
+ * @returns `state` comprise of { loading, data, error } where
+ * data is an array of Author objects if successful
  */
 export const useClientSideGitHubContributors = (
   relativePath: string
 ): FileContributorsState => {
   const [state, setState] = useState<FileContributorsState>({ loading: true })
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       setState(await fetchGitHubContributors(relativePath))
     })()
   }, [relativePath])

src/hooks/useClientSideGitHubContributors.ts

@@ -0,0 +1,58 @@
+import { join } from "path"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/router"
+
+import type { Lang, LastUpdatedState } from "@/lib/types"
+
+import {
+  DEFAULT_LOCALE,
+  GITHUB_COMMITS_URL,
+  OLD_CONTENT_DIR,
+} from "@/lib/constants"
+
+import { gitHubAuthHeaders } from "@/hooks/useClientSideGitHubContributors"
+
+const fetchGitHubLastEdit = async (
+  relativePath: string,
+  locale?: Lang
+): Promise<LastUpdatedState> => {
+  const url = new URL(GITHUB_COMMITS_URL)
+  // TODO: OLD_CONTENT_DIR -> CONTENT_DIR for production
+  const localePath =
+    locale && locale !== DEFAULT_LOCALE
+      ? join("translations", locale, relativePath)
+      : relativePath
+  const filePath = join(OLD_CONTENT_DIR, localePath, "index.md")
+  url.searchParams.set("path", filePath)
+
+  try {
+    const response = await fetch(url, gitHubAuthHeaders)
+    if (!response.ok) throw new Error(response.statusText)
+    const lastCommit = (await response.json())[0]
+    const lastEdit = lastCommit.commit.author.date
+    return { loading: false, data: lastEdit }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      console.error(filePath, error.message)
+    }
+    return { loading: false, error }
+  }
+}
+/**
+ * Client-side hook to fetch date of last commit through GitHub
+ * @param relativePath Relative path of the file being queried
+ * @returns `state` comprise of data with loading state, where data is last edit string
+ */
+export const useClientSideGitHubLastEdit = (
+  relativePath: string
+): LastUpdatedState => {
+  const [state, setState] = useState<LastUpdatedState>({ loading: true })
+  const { locale } = useRouter()
+  useEffect(() => {
+    ;(async () => {
+      setState(await fetchGitHubLastEdit(relativePath, locale as Lang))
+    })()
+  }, [relativePath, locale])
+  return state
+}