From d94f2c91fb4cbb6571430aa8d4ab89799f647720 Mon Sep 17 00:00:00 2001 From: xeltica Date: Sun, 5 Sep 2021 10:50:35 +0900 Subject: [PATCH] wip --- src/backend/functions/format.ts | 13 +-- src/backend/functions/get-scores.ts | 1 + src/backend/router.ts | 2 +- src/backend/views/frontend.pug | 3 +- src/common/default-template.ts | 11 +++ .../{SessionData.tsx => SessionDataPage.tsx} | 10 +- src/frontend/components/SettingPage.tsx | 93 +++++++++++++++++++ src/frontend/components/Skeleton.tsx | 12 +++ src/frontend/init.tsx | 3 - src/frontend/pages/index.session.tsx | 18 ++-- src/frontend/style.scss | 24 +++++ 11 files changed, 160 insertions(+), 30 deletions(-) create mode 100644 src/common/default-template.ts rename src/frontend/components/{SessionData.tsx => SessionDataPage.tsx} (82%) create mode 100644 src/frontend/components/SettingPage.tsx create mode 100644 src/frontend/components/Skeleton.tsx diff --git a/src/backend/functions/format.ts b/src/backend/functions/format.ts index 73be73f..68750f3 100644 --- a/src/backend/functions/format.ts +++ b/src/backend/functions/format.ts @@ -1,18 +1,7 @@ import { config } from '../../config'; import { User } from '../models/entities/user'; import { Score } from '../../common/types/score'; - -/** - * デフォルトの投稿用テンプレート - */ -export const defaultTemplate = `昨日のMisskeyの活動は - -ノート: {notesCount}({notesDelta}) -フォロー : {followingCount}({followingDelta}) -フォロワー :{followersCount}({followersDelta}) - -でした。 -{url}`; +import { defaultTemplate } from '../../common/default-template'; /** * 埋め込み変数の型 diff --git a/src/backend/functions/get-scores.ts b/src/backend/functions/get-scores.ts index ae97eb0..46b4d2d 100644 --- a/src/backend/functions/get-scores.ts +++ b/src/backend/functions/get-scores.ts @@ -9,6 +9,7 @@ import { toSignedString } from './to-signed-string'; * @returns ユーザーのスコア */ export const getScores = async (user: User): Promise => { + // TODO 毎回取ってくるのも微妙なので、ある程度キャッシュしたいかも const miUser = await api>(user.host, 'users/show', { username: user.username }, user.token); if (miUser.error) { throw miUser.error; diff --git a/src/backend/router.ts b/src/backend/router.ts index 5832784..6245092 100644 --- a/src/backend/router.ts +++ b/src/backend/router.ts @@ -13,7 +13,7 @@ import { AlertMode, alertModes } from '../common/types/alert-mode'; import { Users } from './models'; import { sendAlert } from './services/send-alert'; import { visibilities, Visibility } from '../common/types/visibility'; -import { defaultTemplate } from './functions/format'; +import { defaultTemplate } from '../common/default-template'; import { die } from './die'; export const router = new Router(); diff --git a/src/backend/views/frontend.pug b/src/backend/views/frontend.pug index 0fd8574..d5d80b2 100644 --- a/src/backend/views/frontend.pug +++ b/src/backend/views/frontend.pug @@ -14,6 +14,7 @@ html meta(name='twitter:card' content='summary') meta(name='twitter:site' content='@Xeltica') meta(name='twitter:creator' content='@Xeltica') + link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css") style. .loading { display: flex; @@ -25,7 +26,7 @@ html align-items: center; justify-content: center; } - body.dark + body #app: .loading Loading... script(src=`/assets/fe.${version}.js` async defer) diff --git a/src/common/default-template.ts b/src/common/default-template.ts new file mode 100644 index 0000000..4167a68 --- /dev/null +++ b/src/common/default-template.ts @@ -0,0 +1,11 @@ +/** + * デフォルトの投稿用テンプレート + */ +export const defaultTemplate = `昨日のMisskeyの活動は + +ノート: {notesCount}({notesDelta}) +フォロー : {followingCount}({followingDelta}) +フォロワー :{followersCount}({followersDelta}) + +でした。 +{url}`; diff --git a/src/frontend/components/SessionData.tsx b/src/frontend/components/SessionDataPage.tsx similarity index 82% rename from src/frontend/components/SessionData.tsx rename to src/frontend/components/SessionDataPage.tsx index d0bda23..3a3664b 100644 --- a/src/frontend/components/SessionData.tsx +++ b/src/frontend/components/SessionDataPage.tsx @@ -1,12 +1,18 @@ import React from 'react'; import { useGetScoreQuery, useGetSessionQuery } from '../services/session'; +import { Skeleton } from './Skeleton'; -export const SessionData: React.VFC = () => { +export const SessionDataPage: React.VFC = () => { const session = useGetSessionQuery(undefined); const score = useGetScoreQuery(undefined); return session.isLoading || score.isLoading ? ( -
Loading...
+
+ + + + +
) : ( <> {session.data && ( diff --git a/src/frontend/components/SettingPage.tsx b/src/frontend/components/SettingPage.tsx new file mode 100644 index 0000000..4a94927 --- /dev/null +++ b/src/frontend/components/SettingPage.tsx @@ -0,0 +1,93 @@ +import React, { useEffect, useReducer } from 'react'; +import { AlertMode } from '../../common/types/alert-mode'; +import { IUser } from '../../common/types/user'; +import { Visibility } from '../../common/types/visibility'; +import { useGetSessionQuery } from '../services/session'; +import { defaultTemplate } from '../../common/default-template'; + +type SettingDraftType = Pick; + +type DraftReducer = React.Reducer>; + +export const SettingPage: React.VFC = () => { + const session = useGetSessionQuery(undefined); + + const data = session.data; + + const [draft, dispatchDraft] = useReducer((state, action) => { + return { ...state, ...action }; + }, { + alertMode: data?.alertMode ?? 'note', + visibility: data?.visibility ?? 'public', + localOnly: data?.localOnly ?? false, + remoteFollowersOnly: data?.remoteFollowersOnly ?? false, + template: data?.template ?? null, + }); + + useEffect(() => { + if (data) { + dispatchDraft({ + alertMode: data.alertMode, + visibility: data.visibility, + localOnly: data.localOnly, + remoteFollowersOnly: data.remoteFollowersOnly, + template: data.template, + }); + } + }, [session.data]); + + return session.isLoading || !data ? ( +
+ ) : ( +
+
+ + + {draft.alertMode === 'notification' && ( +
+ + 「Misskey に通知」オプションは古いMisskeyでは動作しません。 +
+ )} +
+ { draft.alertMode === 'note' && ( +
+ + + +
+ )} +
+ +