From 2b6ca4354d8844237495f4dd58ce8bbd3a5feb20 Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Sun, 26 Sep 2021 12:52:37 +0900
Subject: [PATCH] Fix: loading implementation

---
 pages/api/PlayerName/[uuid].js           |  2 +-
 pages/components/Minecraft/Biography.js  | 10 ++---
 pages/components/Minecraft/Group.js      |  8 +---
 pages/components/Minecraft/LastPlayed.js |  5 ---
 pages/minecraft/players/[uuid].js        | 49 +++++++++++-------------
 5 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/pages/api/PlayerName/[uuid].js b/pages/api/PlayerName/[uuid].js
index 6158ba3..6974b8c 100644
--- a/pages/api/PlayerName/[uuid].js
+++ b/pages/api/PlayerName/[uuid].js
@@ -12,7 +12,7 @@ const RawPlayerName = async (req, res) => {
     const response = await getName(uuid);
     const data = await response.json();
     if (response.status === 204 || response.status > 400) {
-      return res.status(200).send("読み込み中...");
+      return res.status(200).send("404");
     }
     const username = data.username;
     return res.status(200).json({
diff --git a/pages/components/Minecraft/Biography.js b/pages/components/Minecraft/Biography.js
index 160a42d..ad1180c 100644
--- a/pages/components/Minecraft/Biography.js
+++ b/pages/components/Minecraft/Biography.js
@@ -1,14 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
-import LastPlayed from './LastPlayed'
 
 function App (props) {
   const uuid = props;
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")  
   const [data, setData] = useState({ hits: [] });
 
   useEffect(() => {
@@ -24,11 +18,15 @@ function App (props) {
     console.log("[Minecraft: PlayersBio] データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
   }else {
+      if (data.toString() == "[object Object]"){
+        return <p>読み込み中...</p>
+      } else {
         if (data.toString() == "") {
             return <p>ひとことは設定されていません...</p>
         } else {
             return <p>ひとこと: <span className="italic">{data.toString()}</span></p>
         }
+      }
     };
 }
 
diff --git a/pages/components/Minecraft/Group.js b/pages/components/Minecraft/Group.js
index 72584b4..041f841 100644
--- a/pages/components/Minecraft/Group.js
+++ b/pages/components/Minecraft/Group.js
@@ -1,13 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 
 function App (props) {
   const uuid = props;
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")  
   const [data, setData] = useState({ hits: [] });
 
   useEffect(() => {
@@ -19,8 +15,8 @@ function App (props) {
     };  
     fetchData();
   }, []);
-  if (data === undefined){
-    console.log("[Minecraft: PlayersBio] データの取得に失敗しました。 / Failed to retrieve data.")
+  
+  if (data === undefined || data === null){
     return <p></p>
   }else {
         if (data.toString() == "staff") {
diff --git a/pages/components/Minecraft/LastPlayed.js b/pages/components/Minecraft/LastPlayed.js
index f775289..4ee4769 100644
--- a/pages/components/Minecraft/LastPlayed.js
+++ b/pages/components/Minecraft/LastPlayed.js
@@ -1,13 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
 
 function App (props) {
   const uuid = props;
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("common")  
   const [data, setData] = useState({ hits: [] });
   
   const timeAgo = (prevDate) => {
diff --git a/pages/minecraft/players/[uuid].js b/pages/minecraft/players/[uuid].js
index 8f7b553..281b554 100644
--- a/pages/minecraft/players/[uuid].js
+++ b/pages/minecraft/players/[uuid].js
@@ -1,54 +1,49 @@
 // Base layout
 import Layout from "../../components/Layout"
 
-// i18n
-import useTranslation from 'next-translate/useTranslation'
-
 // React
-import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router'
 
 // Data fetching
-import axios from 'axios';
 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())
 
 export default function UUID() {
   const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("index")
   const { uuid } = router.query
+  const { data, error } = useSwr(
+    router.query.id ? `/api/user/${router.query.id}` : null,
+    fetcher
+  )
   
-  const [data, setData] = useState({ hits: [] });
-  
-  let playerName = null;
-  
-  useEffect(() => {
-    const fetchData = async () => {
-      const result = await axios(
-        '/api/PlayerName/' + uuid,
-      );
-      setData(result.data);
-      
-    };  
-    fetchData();
-  }, []);
-  
-  if (data.username === undefined) {
+  if (error) {
     return (
       <>
-        <Layout title="404 - プレイヤー情報">
+        <Layout title="エラー - プレイヤー情報">
+        <p className="text-2xl">エラーが発生しました。</p>
+        </Layout>
+      </>
+    )
+  }
+  
+  if (!data) {
+    return (
+      <>
+        <Layout title="読み込み中... - プレイヤー情報">
         <Players uuid={uuid} />
         </Layout>
       </>
     )
-  } else {
+  }
+  
   return (
     <>
-      <Layout title={data.username + " - " + "プレイヤー情報"}>
+      <Layout title={<PlayerName uuid={uuid.uuid} /> + " - " + "プレイヤー情報"}>
       <Players uuid={uuid} />
       </Layout>
     </>
   )
-  }
 }