From 2c2385ac59cade5fd8d0caca45ba0d8c30cd00ce Mon Sep 17 00:00:00 2001
From: xeltica <xeltica@gmail.com>
Date: Sat, 4 Sep 2021 23:29:41 +0900
Subject: [PATCH] wip

---
 src/frontend/components/SessionData.tsx | 90 +++++++++++++++----------
 src/frontend/pages/index.session.tsx    | 26 +++----
 2 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/src/frontend/components/SessionData.tsx b/src/frontend/components/SessionData.tsx
index 4299867..d0bda23 100644
--- a/src/frontend/components/SessionData.tsx
+++ b/src/frontend/components/SessionData.tsx
@@ -1,44 +1,66 @@
 import React from 'react';
-import { useGetScoreQuery } from '../services/session';
+import { useGetScoreQuery, useGetSessionQuery } from '../services/session';
 
 export const SessionData: React.VFC = () => {
-	const { data: score, error, isLoading } = useGetScoreQuery(undefined);
+	const session = useGetSessionQuery(undefined);
+	const score = useGetScoreQuery(undefined);
 
-	return isLoading ? (
+	return session.isLoading || score.isLoading ? (
 		<div>Loading...</div>
-	) : score === undefined ? (
-		<div>No score</div>
 	) : (
 		<>
-			<section>
-				<h2>みす廃データ</h2>
-				<table className="table">
-					<thead>
-						<tr>
-							<th>内容</th>
-							<th>スコア</th>
-							<th>前日比</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>ノート</td>
-							<td>{score.notesCount}</td>
-							<td>{score.notesDelta}</td>
-						</tr>
-						<tr>
-							<td>フォロー</td>
-							<td>{score.followingCount}</td>
-							<td>{score.followingDelta}</td>
-						</tr>
-						<tr>
-							<td>フォロワー</td>
-							<td>{score.followersCount}</td>
-							<td>{score.followersDelta}</td>
-						</tr>
-					</tbody>
-				</table>
-			</section>
+			{session.data && (
+				<section>
+					<p>
+						おかえりなさい、
+						<a
+							href={`https://${session.data.host}/@${session.data.username}`}
+							target="_blank"
+							rel="noreferrer noopener"
+						>
+							@{session.data.username}@{session.data.host}
+						</a>
+						さん。
+					</p>
+					<p>
+						<strong>
+							みす廃レート:
+						</strong>
+						{session.data.rating}
+					</p>
+				</section>
+			)}
+			{score.data && (
+				<section>
+					<h2>みす廃データ</h2>
+					<table className="table fluid">
+						<thead>
+							<tr>
+								<th>内容</th>
+								<th>スコア</th>
+								<th>前日比</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>ノート</td>
+								<td>{score.data.notesCount}</td>
+								<td>{score.data.notesDelta}</td>
+							</tr>
+							<tr>
+								<td>フォロー</td>
+								<td>{score.data.followingCount}</td>
+								<td>{score.data.followingDelta}</td>
+							</tr>
+							<tr>
+								<td>フォロワー</td>
+								<td>{score.data.followersCount}</td>
+								<td>{score.data.followersDelta}</td>
+							</tr>
+						</tbody>
+					</table>
+				</section>
+			)}
 		</>
 	);
 };
diff --git a/src/frontend/pages/index.session.tsx b/src/frontend/pages/index.session.tsx
index 8f7d290..cea0f25 100644
--- a/src/frontend/pages/index.session.tsx
+++ b/src/frontend/pages/index.session.tsx
@@ -2,12 +2,12 @@ import React, { useMemo, useState }  from 'react';
 
 import { Header } from '../components/Header';
 import { SessionData } from '../components/SessionData';
+import { Ranking } from '../components/Ranking';
 import { Tab, TabItem } from '../components/Tab';
-import { useGetSessionQuery } from '../services/session';
 
 export const IndexSessionPage: React.VFC = () => {
-	const { data: session, error, isLoading } = useGetSessionQuery(undefined);
 	const [selectedTab, setSelectedTab] = useState<number>(0);
+
 	const items = useMemo<TabItem[]>(() => ([
 		{
 			label: 'データ',
@@ -20,21 +20,21 @@ export const IndexSessionPage: React.VFC = () => {
 		},
 	]), []);
 
-	return isLoading ? (
-		<div>Loading...</div>
-	) : error ? (
-		<div>Error: {error}</div>
-	) : (
+	const component = useMemo(() => {
+		switch (selectedTab) {
+			case 0: return <SessionData />;
+			case 1: return <Ranking limit={10}/>;
+			default: return null;
+		}
+	}, [selectedTab]);
+
+	return (
 		<>
-			<Header>
-				<article className="mt-4">
-					おかえりなさい、{session?.username}さん。
-				</article>
-			</Header>
+			<Header />
 			<div className="xarticle card" style={{borderRadius: 'var(--radius)'}}>
 				<Tab items={items} selected={selectedTab} onSelect={setSelectedTab}/>
 				<article className="container">
-					{selectedTab === 0 && <SessionData /> }
+					{component}
 				</article>
 			</div>
 		</>