Fix: loading implementation

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({

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>
         }
+      }
     };
 }
 

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") {

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) => {

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>
     </>
   )
-  }
 }