wip

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>
 		</>