Merge pull request #21 from QWYNG/play_with_hook

impl loading indicator

src/components/RankCard.tsx

@@ -1,47 +1,15 @@
-import React, { useEffect, useState } from 'react'
-
-// myEncryptedAccountIdは公開されてるので特に秘匿ではない
-const myEncryptedAccountId = 'eouFLBesHZCWzbab9ygwRQjqcUATAJnM0QfXeN5rhtPnYw'
-const RiotApiProxyEndPoint = '  https://hjdkbpkvcl.execute-api.us-east-2.amazonaws.com/default/apiProxyWithGO'
-
-export interface RankedStatus {
-  leagueId: string
-  queueType: string
-  tier: string
-  rank: string
-  summonerId: string
-  summonerName: string
-  leaguePoints: number
-  wins: number
-  losses: number
-  veteran: boolean
-  inactive: boolean
-  freshBlood: boolean
-  hotStreak: boolean
-}
-
-function fetchThroughProxy(path: string): Promise<Response> {
-  return fetch(`${RiotApiProxyEndPoint}?path=${path}`)
-}
-
-function fetchMyRankStatus(): Promise<RankedStatus> {
-  return fetchThroughProxy(`league/v4/entries/by-summoner/${myEncryptedAccountId}`)
-    .then(response => response.json())
-    .then(json => json[0] as RankedStatus)
-}
+import React from 'react'
+import useRankedStatus from '../hooks/useRankedStatus'
 
 const RankCard: React.FC = () => {
-  const [rankedStatus, setRankedStatus] = useState<RankedStatus | undefined>(undefined)
-
-  useEffect(() => {
-    fetchMyRankStatus().then(fetchedStatus => {
-      setRankedStatus(fetchedStatus)
-    })
-  }, [])
+  const [rankedStatus, isLoading] = useRankedStatus()
 
+  if (isLoading) {
+    return <div> now Loading...</div>
+  }
   return (
     <div>
-      <p>{rankedStatus?.summonerName}のLOLソロQランク!</p>
+      <p>{rankedStatus?.summonerName}'s LOL ranked status</p>
       <p>
         {rankedStatus?.tier} {rankedStatus?.rank} {rankedStatus?.leaguePoints}LP
       </p>

src/hooks/useRankedStatus.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+
+// myEncryptedAccountIdは公開されてるので特に秘匿ではない
+const myEncryptedAccountId = 'eouFLBesHZCWzbab9ygwRQjqcUATAJnM0QfXeN5rhtPnYw'
+const RiotApiProxyEndPoint = '  https://hjdkbpkvcl.execute-api.us-east-2.amazonaws.com/default/apiProxyWithGO'
+
+export interface RankedStatus {
+  leagueId: string
+  queueType: string
+  tier: string
+  rank: string
+  summonerId: string
+  summonerName: string
+  leaguePoints: number
+  wins: number
+  losses: number
+  veteran: boolean
+  inactive: boolean
+  freshBlood: boolean
+  hotStreak: boolean
+}
+
+function fetchThroughProxy(path: string): Promise<Response> {
+  return fetch(`${RiotApiProxyEndPoint}?path=${path}`)
+}
+
+function fetchMyRankStatus(): Promise<RankedStatus> {
+  return fetchThroughProxy(`league/v4/entries/by-summoner/${myEncryptedAccountId}`)
+    .then(response => response.json())
+    .then(json => json[0] as RankedStatus)
+}
+
+function useRankedStatus(): [RankedStatus | undefined, boolean] {
+  const [rankedStatus, setRankedStatus] = useState<RankedStatus | undefined>(undefined)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    setIsLoading(true)
+    fetchMyRankStatus().then(fetchedStatus => {
+      setRankedStatus(fetchedStatus)
+      setIsLoading(false)
+    })
+  }, [])
+
+  return [rankedStatus, isLoading]
+}
+
+export default useRankedStatus