CloudToys/misskey-tools
1
0
Fork 0
Code Issues Pull Requests Releases Activity

wip

Browse Source
This commit is contained in:
xeltica 2021-09-04 23:29:41 +09:00
parent 8adeb4fe5b
commit 2c2385ac59
2 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/frontend/components/SessionData.tsx
View File

@ -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>
)}
</>
);
};

26
src/frontend/pages/index.session.tsx
View File

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