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 ? (
Loading...
- ) : score === undefined ? (
- No score
) : (
<>
-
- みす廃データ
-
-
-
- 内容 |
- スコア |
- 前日比 |
-
-
-
-
- ノート |
- {score.notesCount} |
- {score.notesDelta} |
-
-
- フォロー |
- {score.followingCount} |
- {score.followingDelta} |
-
-
- フォロワー |
- {score.followersCount} |
- {score.followersDelta} |
-
-
-
-
+ {session.data && (
+
+ )}
+ {score.data && (
+
+ みす廃データ
+
+
+
+ 内容 |
+ スコア |
+ 前日比 |
+
+
+
+
+ ノート |
+ {score.data.notesCount} |
+ {score.data.notesDelta} |
+
+
+ フォロー |
+ {score.data.followingCount} |
+ {score.data.followingDelta} |
+
+
+ フォロワー |
+ {score.data.followersCount} |
+ {score.data.followersDelta} |
+
+
+
+
+ )}
>
);
};
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(0);
+
const items = useMemo(() => ([
{
label: 'データ',
@@ -20,21 +20,21 @@ export const IndexSessionPage: React.VFC = () => {
},
]), []);
- return isLoading ? (
- Loading...
- ) : error ? (
- Error: {error}
- ) : (
+ const component = useMemo(() => {
+ switch (selectedTab) {
+ case 0: return ;
+ case 1: return ;
+ default: return null;
+ }
+ }, [selectedTab]);
+
+ return (
<>
-
-
- おかえりなさい、{session?.username}さん。
-
-
+
- {selectedTab === 0 && }
+ {component}
>