diff --git a/src/components/molecules/GitHubBuildStatus.tsx b/src/components/molecules/GitHubBuildStatus.tsx index 5d4219e..da6670b 100644 --- a/src/components/molecules/GitHubBuildStatus.tsx +++ b/src/components/molecules/GitHubBuildStatus.tsx @@ -241,12 +241,9 @@ export function GitHubBuildStatus({ owner, repo, defaultBranch = 'main' }: GitHu loading, error, copiedBadge, - fetchData, - copyBadgeMarkdown, - getBadgeUrl, - getBadgeMarkdown, - formatTime, + actions, } = useGithubBuildStatus({ owner, repo, defaultBranch }) + const { refresh, copyBadgeMarkdown, getBadgeUrl, getBadgeMarkdown, formatTime } = actions if (loading) { return ( @@ -291,7 +288,7 @@ export function GitHubBuildStatus({ owner, repo, defaultBranch = 'main' }: GitHu

{error}

-
@@ -331,7 +328,7 @@ export function GitHubBuildStatus({ owner, repo, defaultBranch = 'main' }: GitHu {copy.header.description} - diff --git a/src/hooks/use-github-build-status.ts b/src/hooks/use-github-build-status.ts index db8c83f..efd12d8 100644 --- a/src/hooks/use-github-build-status.ts +++ b/src/hooks/use-github-build-status.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { toast } from 'sonner' import copy from '@/data/github-build-status.json' @@ -31,9 +31,6 @@ interface UseGithubBuildStatusArgs { defaultBranch?: string } -const formatWithCount = (template: string, count: number) => - template.replace('{count}', count.toString()) - export const useGithubBuildStatus = ({ owner, repo, @@ -45,6 +42,10 @@ export const useGithubBuildStatus = ({ const [error, setError] = useState(null) const [copiedBadge, setCopiedBadge] = useState(null) + const formatWithCount = useCallback((template: string, count: number) => { + return template.replace('{count}', count.toString()) + }, []) + const fetchData = useCallback(async () => { try { setLoading(true) @@ -79,53 +80,72 @@ export const useGithubBuildStatus = ({ fetchData() }, [fetchData]) - const getBadgeUrl = (workflowPath: string, branch = defaultBranch) => { - const workflowFile = workflowPath.split('/').pop() - if (branch) { - return `https://github.com/${owner}/${repo}/actions/workflows/${workflowFile}/badge.svg?branch=${branch}` - } - return `https://github.com/${owner}/${repo}/actions/workflows/${workflowFile}/badge.svg` - } + const getBadgeUrl = useCallback( + (workflowPath: string, branch = defaultBranch) => { + const workflowFile = workflowPath.split('/').pop() + if (branch) { + return `https://github.com/${owner}/${repo}/actions/workflows/${workflowFile}/badge.svg?branch=${branch}` + } + return `https://github.com/${owner}/${repo}/actions/workflows/${workflowFile}/badge.svg` + }, + [defaultBranch, owner, repo], + ) - const getBadgeMarkdown = (workflowPath: string, workflowName: string, branch?: string) => { - const badgeUrl = getBadgeUrl(workflowPath, branch) - const actionUrl = `https://github.com/${owner}/${repo}/actions/workflows/${workflowPath.split('/').pop()}` - return `[![${workflowName}](${badgeUrl})](${actionUrl})` - } + const getBadgeMarkdown = useCallback( + (workflowPath: string, workflowName: string, branch?: string) => { + const badgeUrl = getBadgeUrl(workflowPath, branch) + const actionUrl = `https://github.com/${owner}/${repo}/actions/workflows/${workflowPath.split('/').pop()}` + return `[![${workflowName}](${badgeUrl})](${actionUrl})` + }, + [getBadgeUrl, owner, repo], + ) - const copyBadgeMarkdown = (workflowPath: string, workflowName: string, branch?: string) => { - const markdown = getBadgeMarkdown(workflowPath, workflowName, branch) - navigator.clipboard.writeText(markdown) - const key = `${workflowPath}-${branch || defaultBranch}` - setCopiedBadge(key) - toast.success(copy.toast.badgeCopied) - setTimeout(() => setCopiedBadge(null), 2000) - } + const copyBadgeMarkdown = useCallback( + (workflowPath: string, workflowName: string, branch?: string) => { + const markdown = getBadgeMarkdown(workflowPath, workflowName, branch) + navigator.clipboard.writeText(markdown) + const key = `${workflowPath}-${branch || defaultBranch}` + setCopiedBadge(key) + toast.success(copy.toast.badgeCopied) + setTimeout(() => setCopiedBadge(null), 2000) + }, + [defaultBranch, getBadgeMarkdown], + ) - const formatTime = (dateString: string) => { - const date = new Date(dateString) - const now = new Date() - const diff = now.getTime() - date.getTime() - const minutes = Math.floor(diff / 60000) - const hours = Math.floor(minutes / 60) - const days = Math.floor(hours / 24) + const formatTime = useCallback( + (dateString: string) => { + const date = new Date(dateString) + const now = new Date() + const diff = now.getTime() - date.getTime() + const minutes = Math.floor(diff / 60000) + const hours = Math.floor(minutes / 60) + const days = Math.floor(hours / 24) - if (days > 0) return formatWithCount(copy.time.daysAgo, days) - if (hours > 0) return formatWithCount(copy.time.hoursAgo, hours) - if (minutes > 0) return formatWithCount(copy.time.minutesAgo, minutes) - return copy.time.justNow - } + if (days > 0) return formatWithCount(copy.time.daysAgo, days) + if (hours > 0) return formatWithCount(copy.time.hoursAgo, hours) + if (minutes > 0) return formatWithCount(copy.time.minutesAgo, minutes) + return copy.time.justNow + }, + [formatWithCount], + ) + + const actions = useMemo( + () => ({ + refresh: fetchData, + copyBadgeMarkdown, + getBadgeUrl, + getBadgeMarkdown, + formatTime, + }), + [copyBadgeMarkdown, fetchData, formatTime, getBadgeMarkdown, getBadgeUrl], + ) return { - workflows, - allWorkflows, loading, error, + workflows, + allWorkflows, copiedBadge, - fetchData, - copyBadgeMarkdown, - getBadgeUrl, - getBadgeMarkdown, - formatTime, + actions, } }