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 React from 'react';
import { useGetScoreQuery } from '../services/session'; import { useGetScoreQuery, useGetSessionQuery } from '../services/session';
export const SessionData: React.VFC = () => { 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> <div>Loading...</div>
) : score === undefined ? (
<div>No score</div>
) : ( ) : (
<> <>
<section> {session.data && (
<h2>みす廃データ</h2> <section>
<table className="table"> <p>
<thead> おかえりなさい、
<tr> <a
<th>内容</th> href={`https://${session.data.host}/@${session.data.username}`}
<th>スコア</th> target="_blank"
<th>前日比</th> rel="noreferrer noopener"
</tr> >
</thead> @{session.data.username}@{session.data.host}
<tbody> </a>
<tr> さん。
<td>ノート</td> </p>
<td>{score.notesCount}</td> <p>
<td>{score.notesDelta}</td> <strong>
</tr> みす廃レート:
<tr> </strong>
<td>フォロー</td> {session.data.rating}
<td>{score.followingCount}</td> </p>
<td>{score.followingDelta}</td> </section>
</tr> )}
<tr> {score.data && (
<td>フォロワー</td> <section>
<td>{score.followersCount}</td> <h2>みす廃データ</h2>
<td>{score.followersDelta}</td> <table className="table fluid">
</tr> <thead>
</tbody> <tr>
</table> <th>内容</th>
</section> <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 { Header } from '../components/Header';
import { SessionData } from '../components/SessionData'; import { SessionData } from '../components/SessionData';
import { Ranking } from '../components/Ranking';
import { Tab, TabItem } from '../components/Tab'; import { Tab, TabItem } from '../components/Tab';
import { useGetSessionQuery } from '../services/session';
export const IndexSessionPage: React.VFC = () => { export const IndexSessionPage: React.VFC = () => {
const { data: session, error, isLoading } = useGetSessionQuery(undefined);
const [selectedTab, setSelectedTab] = useState<number>(0); const [selectedTab, setSelectedTab] = useState<number>(0);
const items = useMemo<TabItem[]>(() => ([ const items = useMemo<TabItem[]>(() => ([
{ {
label: 'データ', 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)'}}> <div className="xarticle card" style={{borderRadius: 'var(--radius)'}}>
<Tab items={items} selected={selectedTab} onSelect={setSelectedTab}/> <Tab items={items} selected={selectedTab} onSelect={setSelectedTab}/>
<article className="container"> <article className="container">
{selectedTab === 0 && <SessionData /> } {component}
</article> </article>
</div> </div>
</> </>