Fix 404 page @ minecraft/players/[uuid]

pages/components/Minecraft/PlayerNameHolder.js

@@ -1,40 +1,39 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+// Component
 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: [] });
-
-  useEffect(() => {
-    const fetchData = async () => {
-      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) {
-          return <p>そのようなプレイヤーは存在しません。</p>
-        } else {
+  const { data, error } = useSwr(
+    uuid.uuid ? `/api/PlayerName/${uuid.uuid}` : null,
+    fetcher
+  )
+  
+  if (error) {
+    return (
+      <>エラーが発生しました。</>
+    )
+  } else {
+    if (!data) {
+      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>
+          <>
+            <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>
-            <h1>入力された UUID は正しくありません。</h1>
+        <div className="text-center">
+            <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
@@ -36,13 +37,23 @@ export default function UUID() {
         </>
       )
     } else {
+      if (!data.username) {
         return (
           <>
-            <Layout title={data.username + " - " + "プレイヤー情報"}>
-            <Players uuid={uuid} />
+            <Layout title="404 - プレイヤー情報">
+              <WrongUUID />
             </Layout>
           </>
         )
+      } else {
+        return (
+          <>
+            <Layout title={data.username + " - " + "プレイヤー情報"}>
+              <Players uuid={uuid} />
+            </Layout>
+          </>
+        )
+      }
     }
   }
 }