Fix 404 page @ minecraft/players/[uuid]

pages/components/Minecraft/PlayerNameHolder.js

@@ -1,40 +1,39 @@
-import React, { useState, useEffect } from 'react';
+// Component
-import axios from 'axios';
 import Group from './Group';
 
+// Data fetching
+import useSwr from 'swr'
+
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
 function App (props) {
   const uuid = props;
-  const [data, setData] = useState({ hits: [] });
+  const { data, error } = useSwr(
+    uuid.uuid ? `/api/PlayerName/${uuid.uuid}` : null,
+    fetcher
+  )
   
-  useEffect(() => {
+  if (error) {
-    const fetchData = async () => {
+    return (
-      let result = null;
+      <>エラーが発生しました。</>
-      try {
+    )
-        result = await axios('https://api.ashcon.app/mojang/v2/user/' + uuid.uuid);
-        setData(result.data);
-      } catch (err) {
-        result = 404;
-        setData(result);
-      }
-    };  
-    fetchData();
-  }, []);
-  if (data === undefined){
-        console.log("[Minecraft: UUID to player's name] データの取得に失敗しました。 / Failed to retrieve data.")
-        return <>取得中...</>
   } else {
-        if (data === 404) {
+    if (!data) {
-          return <p>そのようなプレイヤーは存在しません。</p>
+      return (
+        <>読み込み中...</>
+      )
     } else {
         return (
+          <>
             <div className='has-tooltip'>
               <span className='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8 font-mono text-sm'>UUID: {uuid.uuid}</span>
               <p className="text-2xl inline">{data.username}</p>
               <Group uuid={uuid.uuid} />
             </div>
+          </>
         )
     }
-    };
+  }
 }
 
 export default App;

pages/components/Minecraft/Players.js

@@ -1,3 +1,4 @@
+// Components
 import Online from './Online'
 import Head from './Head'
 import PlayerNameHolder from './PlayerNameHolder'

pages/components/Minecraft/WrongUUID.js

@@ -1,7 +1,7 @@
 function App (props) {
     return (
-        <div>
+        <div className="text-center">
-            <h1>入力された UUID は正しくありません。</h1>
+            <h2>入力された UUID に該当するプレイヤーが見つかりませんでした。</h2>
         </div>
     )
   }

pages/minecraft/players/[uuid].js

@@ -6,11 +6,12 @@ import { useRouter } from 'next/router'
 
 // Data fetching
 import Players from '../../components/Minecraft/Players'
-import PlayerName from '../../components/Minecraft/PlayerName'
 import useSwr from 'swr'
-
 const fetcher = (url) => fetch(url).then((res) => res.json())
 
+// Components
+import WrongUUID from '../../components/Minecraft/WrongUUID'
+
 export default function UUID() {
   const router = useRouter()
   const { uuid } = router.query
@@ -35,6 +36,15 @@ export default function UUID() {
           </Layout>
         </>
       )
+    } else {
+      if (!data.username) {
+        return (
+          <>
+            <Layout title="404 - プレイヤー情報">
+              <WrongUUID />
+            </Layout>
+          </>
+        )
       } else {
         return (
           <>
@@ -46,3 +56,4 @@ export default function UUID() {
       }
     }
   }
+}