おwipですわ

src/frontend/pages/index.session.tsx

@@ -1,27 +1,42 @@
-import React, { useEffect, useState }  from 'react';
+import React, { useMemo, useState }  from 'react';
 
 import { Header } from '../components/Header';
+import { SessionData } from '../components/SessionData';
+import { Tab, TabItem } from '../components/Tab';
+import { useGetSessionQuery } from '../services/session';
 
 export const IndexSessionPage: React.VFC = () => {
-	const token = localStorage['token'];
-	const [session, setSession] = useState<Record<string, any> | null>(null);
+	const { data: session, error, isLoading } = useGetSessionQuery(undefined);
+	const [selectedTab, setSelectedTab] = useState<number>(0);
+	const items = useMemo<TabItem[]>(() => ([
+		{
+			label: 'データ',
+		},
+		{
+			label: 'ランキング',
+		},
+		{
+			label: '設定',
+		},
+	]), []);
 
-	useEffect(() => {
-		fetch(`//${location.host}/api/v1/session`, {
-			headers: {
-				'Authorization': `Bearer ${token}`,
-			},
-		}).then(s => s.json())
-			.then(setSession);
-	}, []);
-
-	return (
+	return isLoading ? (
+		<div>Loading...</div>
+	) : error ? (
+		<div>Error: {error}</div>
+	) : (
 		<>
 			<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 /> }
+				</article>
+			</div>
 		</>
 	);
 };