Implement basic user page for Minecraft server

pages/components/Minecraft/GetName.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+//   const uuid_nohyphen = uuid.uuid.toString().replace(/-/g, "");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://api.ashcon.app/mojang/v2/user/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+        console.log("[Minecraft: UUID to player's name] データの取得に失敗しました。 / Failed to retrieve data.")
+        return <span></span>
+  }else {
+        return <span>{data.username}</span>
+    };
+    
+    // return <p>{uuid_nohyphen}</p>
+}
+
+export default App;

pages/components/Minecraft/Head.js

@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image'
+
+function App (props) {
+  const uuid = props;
+
+  return (
+    <Image
+        src={"https://crafatar.com/renders/body/" + uuid.uuid}
+        width={110}
+        height={250}
+    />
+  )
+}
+
+export default App;

pages/components/Minecraft/LastPlayed.js

@@ -9,6 +9,33 @@ function App (props) {
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")  
   const [data, setData] = useState({ hits: [] });
+  
+  const timeAgo = (prevDate) => {
+    const diff = Number(new Date()) - prevDate;
+    const minute = 60 * 1000;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const month = day * 30;
+    const year = day * 365;
+    switch (true) {
+        case diff < minute:
+            const seconds = Math.round(diff / 1000);
+             return `${seconds} 秒前`
+        case diff < hour:
+            return Math.round(diff / minute) + ' 分前';
+        case diff < day:
+            return Math.round(diff / hour) + ' 時間前';
+        case diff < month:
+            return Math.round(diff / day) + ' 日前';
+        case diff < year:
+            return Math.round(diff / month) + ' ヶ月前';
+        case diff > year:
+            return Math.round(diff / year) + ' 年前';
+        default:
+            return "";
+    }
+};
+
   useEffect(() => {
     const fetchData = async () => {
       const result = await axios(
@@ -25,7 +52,13 @@ function App (props) {
         if (data.toString() == "[object Object]") {
             return <p>取得中です...</p>
         } else {
-            return <p>{data.toString()}</p>
+            let dateTime = new Date(parseInt(data.toString()) * 1000);
+            return (
+                <div class='has-tooltip'>
+                    <span class='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8'>{dateTime.toLocaleDateString() + " " + dateTime.toLocaleTimeString()}</span>
+                    最終ログイン: {timeAgo(dateTime)}
+                </div>
+            )
         }
     };
 }

pages/components/Minecraft/Online.js

@@ -0,0 +1,39 @@
+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(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/online/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: オンライン状況] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+        if (data.toString() == "false") {
+            return <LastPlayed uuid={uuid.uuid} />
+        } else {
+            if (data.toString() == "true") {
+            return <p>オンライン</p>
+            } else {
+                return <p>取得中...</p>
+            }
+        }
+    };
+}
+
+export default App;

pages/components/Minecraft/Players.js

@@ -1,12 +1,22 @@
-import LastPlayed from './LastPlayed'
+import Online from './Online'
+import Head from './Head'
+import GetName from './GetName'
 
 function App (props) {
   const uuid = props;
   
   return (
+    <div className="w-full flex flex-wrap">
         <div>
-        <p>UUID: {uuid.uuid}</p>
-        <p>Last played: <LastPlayed uuid={uuid.uuid} /></p>
+            <Head uuid={uuid.uuid} />
+        </div>
+        <div className="w-5"></div>
+        <div>
+            <p className="text-2xl text-mono"><GetName uuid={uuid.uuid} /></p>
+            <p className="text-xs">UUID: <span className="font-mono">{uuid.uuid}</span></p>
+            <p><Online uuid={uuid.uuid} /></p>
+        </div>
+        
     </div>
   )
 }