wip

src/frontend/components/SessionData.tsx

@@ -1,18 +1,39 @@
 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>
 	) : (
 		<>
+			{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">
+					<table className="table fluid">
 						<thead>
 							<tr>
 								<th>内容</th>
@@ -23,22 +44,23 @@ export const SessionData: React.VFC = () => {
 						<tbody>
 							<tr>
 								<td>ノート</td>
-							<td>{score.notesCount}</td>
+								<td>{score.data.notesCount}</td>
-							<td>{score.notesDelta}</td>
+								<td>{score.data.notesDelta}</td>
 							</tr>
 							<tr>
 								<td>フォロー</td>
-							<td>{score.followingCount}</td>
+								<td>{score.data.followingCount}</td>
-							<td>{score.followingDelta}</td>
+								<td>{score.data.followingDelta}</td>
 							</tr>
 							<tr>
 								<td>フォロワー</td>
-							<td>{score.followersCount}</td>
+								<td>{score.data.followersCount}</td>
-							<td>{score.followersDelta}</td>
+								<td>{score.data.followersDelta}</td>
 							</tr>
 						</tbody>
 					</table>
 				</section>
+			)}
 		</>
 	);
 };

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 ? (
+	const component = useMemo(() => {
-		<div>Loading...</div>
+		switch (selectedTab) {
-	) : error ? (
+			case 0: return <SessionData />;
-		<div>Error: {error}</div>
+			case 1: return <Ranking limit={10}/>;
-	) : (
+			default: return null;
+		}
+	}, [selectedTab]);
+
+	return (
 		<>
-			<Header>
+			<Header />
-				<article className="mt-4">
-					おかえりなさい、{session?.username}さん。
-				</article>
-			</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>
 		</>