From ea617dd8dcc8a100c372934717f35155c65736cb Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Sun, 26 Sep 2021 13:36:23 +0900
Subject: [PATCH] Fix 404 page @ minecraft/players/[uuid]

---
 .../components/Minecraft/PlayerNameHolder.js  | 61 +++++++++----------
 pages/components/Minecraft/Players.js         |  1 +
 pages/components/Minecraft/WrongUUID.js       |  4 +-
 pages/minecraft/players/[uuid].js             | 19 ++++--
 4 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/pages/components/Minecraft/PlayerNameHolder.js b/pages/components/Minecraft/PlayerNameHolder.js
index d4b5d39..3aa3d44 100644
--- a/pages/components/Minecraft/PlayerNameHolder.js
+++ b/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;
\ No newline at end of file
diff --git a/pages/components/Minecraft/Players.js b/pages/components/Minecraft/Players.js
index 00081ae..6af4a37 100644
--- a/pages/components/Minecraft/Players.js
+++ b/pages/components/Minecraft/Players.js
@@ -1,3 +1,4 @@
+// Components
 import Online from './Online'
 import Head from './Head'
 import PlayerNameHolder from './PlayerNameHolder'
diff --git a/pages/components/Minecraft/WrongUUID.js b/pages/components/Minecraft/WrongUUID.js
index 17fe182..81b6f75 100644
--- a/pages/components/Minecraft/WrongUUID.js
+++ b/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>
     )
   }
diff --git a/pages/minecraft/players/[uuid].js b/pages/minecraft/players/[uuid].js
index c0ad62a..00eb135 100644
--- a/pages/minecraft/players/[uuid].js
+++ b/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>
+          </>
+        )
+      }
     }
   }
 }