Fix page title @ /minecraft/players/[uuid]

pages/api/PlayerName/[uuid].js

@@ -0,0 +1,23 @@
+// React
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const getName = async (props) => {
+  const uuid = props;
+  return fetch('https://api.ashcon.app/mojang/v2/user/' + uuid);
+};
+
+const Spotify = async (req, res) => {
+    const { uuid } = req.query
+    const response = await getName(uuid);
+    const data = await response.json();
+    if (response.status === 204 || response.status > 400) {
+      return res.status(200).send("404");
+    }
+    const username = data.username;
+    return res.status(200).json({
+      username,
+    });
+};
+
+export default Spotify

pages/components/Minecraft/PlayerName.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+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 <>404</>
+        } else {
+        return (
+          <>{data.username.toString()}</>
+        )
+        }
+    };
+}
+
+export default App;

pages/components/Minecraft/Players.js

@@ -1,6 +1,6 @@
 import Online from './Online'
 import Head from './Head'
-import GetName from './GetName'
+import PlayerNameHolder from './PlayerNameHolder'
 
 function App (props) {
   const uuid = props;
@@ -12,7 +12,7 @@ function App (props) {
         </div>
         <div className="w-5"></div>
         <div>
-          <p className="text-2xl text-mono"><GetName uuid={uuid.uuid} /></p>
+          <p className="text-2xl text-mono"><PlayerNameHolder uuid={uuid.uuid} /></p>
           <p><Online uuid={uuid.uuid} /></p>
         </div>
     </div>

pages/minecraft/players/[uuid].js

@@ -5,10 +5,13 @@ import Layout from "../../components/Layout"
 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'
 
 export default function UUID() {
   const router = useRouter()
@@ -16,11 +19,38 @@ export default function UUID() {
   const { t, lang } = useTranslation("index")
   const { uuid } = router.query
   
+  const [data, setData] = useState({ hits: [] });
+  
+  let playerName = null;
+  
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        '/api/PlayerName/' + uuid,
+      );
+      setData(result.data);
+      
+    };  
+    fetchData();
+  }, []);
+  
+  console.log(data);
+  
+  if (data.username === undefined) {
+    return (
+      <>
+        <Layout title="404 - プレイヤー情報">
+        <Players uuid={uuid} />
+        </Layout>
+      </>
+    )
+  } else {
   return (
     <>
-      <Layout title={t('home')}>
+      <Layout title={data.username + " - " + "プレイヤー情報"}>
       <Players uuid={uuid} />
       </Layout>
     </>
   )
+  }
 }