From 52787dbd68f96f6bb79de09b9cae9fc74d4ab8a1 Mon Sep 17 00:00:00 2001 From: Yoshiki Takagi Date: Mon, 13 Mar 2023 21:39:17 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=E3=82=B3=E3=83=B3=E3=83=9D?= =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E5=88=87=E3=82=8A?= =?UTF-8?q?=E5=87=BA=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/kusa/[username].tsx | 41 +++++-------------- src/components/kusa/head.tsx | 26 ++++++++++++ src/components/kusa/title.tsx | 18 ++++++++ .../to-grass-graph-image-url.spec.tsx | 7 ++++ src/lib/to-grass-graph-image-url.ts | 3 ++ 5 files changed, 64 insertions(+), 31 deletions(-) create mode 100644 src/components/kusa/head.tsx create mode 100644 src/components/kusa/title.tsx create mode 100644 src/lib/__tests__/to-grass-graph-image-url.spec.tsx create mode 100644 src/lib/to-grass-graph-image-url.ts diff --git a/pages/kusa/[username].tsx b/pages/kusa/[username].tsx index 92f5b2a6..fa2e662b 100644 --- a/pages/kusa/[username].tsx +++ b/pages/kusa/[username].tsx @@ -1,14 +1,14 @@ -import Head from 'next/head'; import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'; import { FetchProvider, useFetch } from 'react-hooks-fetch'; import { Suspense } from 'react'; +import Head from '../../src/components/kusa/head'; +import Title from '../../src/components/kusa/title'; import Contributions from '../../src/components/contributions/contributions'; +import { toGrassGraphImageUrl } from '../../src/lib/to-grass-graph-image-url'; type Props = { username: string; - todayContributionCount: number; - yesterdayContributionCount: number; - currentStreak: number; + description: string; }; export const getServerSideProps = async ( @@ -30,8 +30,9 @@ export const getServerSideProps = async ( const [todayContributionCount, yesterdayContributionCount] = contributions; const currentStreak = todayContributionCount > 0 ? contributions.indexOf(0) : contributions.slice(1).indexOf(0); + const description = `Today: ${todayContributionCount}, Yesterday: ${yesterdayContributionCount}, Streak: ${currentStreak}`; - return { props: { username, todayContributionCount, yesterdayContributionCount, currentStreak } }; + return { props: { username, description } }; }; const fetchFunc = async (username: string) => { @@ -49,37 +50,15 @@ const Detail = ({ username }: { username: string }) => { const Kusa = (props: Props) => { const username = props.username; - const imgUrl = `https://grass-graph.appspot.com/images/${username}.png?${Date.now()}`; - const siteUrl = `https://tools.swfz.io/kusa/${username}`; - const title = `GitHub Contributions(kusa) in ${username}`; - const desc = `Today: ${props.todayContributionCount}, Yesterday: ${props.yesterdayContributionCount}, Streak: ${props.currentStreak}`; - const toGitHub = `https://github.com/${username}`; return ( <> - - Kusa - - - - - - - - - - - +
- - - {username} - - 's kusa - + - <img src={imgUrl} alt="GitHub Contribution" /> - <span>{desc}</span> + <img src={toGrassGraphImageUrl(username)} alt="GitHub Contribution" /> + <span>{props.description}</span> {/* @ts-ignore */} <FetchProvider initialInputs={[[fetchFunc, username]]}> <Suspense fallback={<span>Loading...</span>}> diff --git a/src/components/kusa/head.tsx b/src/components/kusa/head.tsx new file mode 100644 index 00000000..e9be80a9 --- /dev/null +++ b/src/components/kusa/head.tsx @@ -0,0 +1,26 @@ +import NextHead from 'next/head'; +import { toGrassGraphImageUrl } from '../../lib/to-grass-graph-image-url'; + +const Head = ({ username, description }: { username: string; description: string }) => { + const imageUrl = toGrassGraphImageUrl(username); + const siteUrl = `https://tools.swfz.io/kusa/${username}`; + const title = `GitHub Contributions(kusa) in ${username}`; + + return ( + <NextHead> + <title>Kusa + + + + + + + + + + + + ); +}; + +export default Head; diff --git a/src/components/kusa/title.tsx b/src/components/kusa/title.tsx new file mode 100644 index 00000000..70c78785 --- /dev/null +++ b/src/components/kusa/title.tsx @@ -0,0 +1,18 @@ +type Props = { + username: string; +}; + +const Title = ({ username }: Props) => { + const toGitHub = `https://github.com/${username}`; + + return ( + + + {username} + + 's kusa + + ); +}; + +export default Title; diff --git a/src/lib/__tests__/to-grass-graph-image-url.spec.tsx b/src/lib/__tests__/to-grass-graph-image-url.spec.tsx new file mode 100644 index 00000000..b7f50013 --- /dev/null +++ b/src/lib/__tests__/to-grass-graph-image-url.spec.tsx @@ -0,0 +1,7 @@ +import { toGrassGraphImageUrl } from '../to-grass-graph-image-url'; + +describe('toGrassGraphImageUrl', () => { + test('check to convert to grass graph image url', () => { + expect(toGrassGraphImageUrl('swfz')).toBe('https://grass-graph.appspot.com/images/swfz.png'); + }); +}); diff --git a/src/lib/to-grass-graph-image-url.ts b/src/lib/to-grass-graph-image-url.ts new file mode 100644 index 00000000..0ee616c7 --- /dev/null +++ b/src/lib/to-grass-graph-image-url.ts @@ -0,0 +1,3 @@ +export const toGrassGraphImageUrl = (username: string) => { + return `https://grass-graph.appspot.com/images/${username}.png`; +};