<%= htmlWebpackPlugin.options.title %>

Ah-oh, 404!

- - ); -}; - -const LazyAdmin = React.lazy(() => - import(/* webpackChunkName: "admin" */ './admin/Admin') -); - -const App: React.FC = () => { - const [loading, setLoading] = React.useState(true); - - const user = useRawUser(); - - React.useEffect(() => { - void userService.checkLoginState(); - void dataStorage.ready().then(() => setLoading(false)); - }, []); - - let body; - if (user === undefined || loading) { - body = ; - } else { - body = ( - - - - - - - - - - - - - - - - - - - - - {user && user.administrator && ( - - - - )} - - - - - - ); - } - - return ( - }> - {body} - - - ); -}; - -export default hot(App); +import React from "react"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; +import { hot } from "react-hot-loader/root"; + +import AppBar from "./common/AppBar"; +import LoadingPage from "./common/LoadingPage"; +import Home from "./home/Home"; +import Login from "./user/Login"; +import Settings from "./settings/Settings"; +import About from "./about/About"; +import User from "./user/User"; +import TimelinePage from "./timeline/TimelinePage"; +import AlertHost from "./common/AlertHost"; + +import { dataStorage } from "./data/common"; +import { userService, useRawUser } from "./data/user"; + +const NoMatch: React.FC = () => { + return ( + <> + +

Ah-oh, 404!

+ + ); +}; + +const LazyAdmin = React.lazy( + () => import(/* webpackChunkName: "admin" */ "./admin/Admin") +); + +const App: React.FC = () => { + const [loading, setLoading] = React.useState(true); + + const user = useRawUser(); + + React.useEffect(() => { + void userService.checkLoginState(); + void dataStorage.ready().then(() => setLoading(false)); + }, []); + + let body; + if (user === undefined || loading) { + body = ; + } else { + body = ( + + + + + + + + + + + + + + + + + + + + + {user && user.administrator && ( + + + + )} + + + + + + ); + } + + return ( + }> + {body} + + + ); +}; + +export default hot(App); diff --git a/Timeline/ClientApp/src/app/about/About.tsx b/Timeline/ClientApp/src/app/about/About.tsx index 38e16c7c..751fca14 100644 --- a/Timeline/ClientApp/src/app/about/About.tsx +++ b/Timeline/ClientApp/src/app/about/About.tsx @@ -1,172 +1,172 @@ -import React from 'react'; -import { useTranslation, Trans } from 'react-i18next'; - -import authorAvatarUrl from './author-avatar.png'; -import githubLogoUrl from './github.png'; - -import AppBar from '../common/AppBar'; - -const frontendCredits: { - name: string; - url: string; -}[] = [ - { - name: 'reactjs', - url: 'https://reactjs.org', - }, - { - name: 'typescript', - url: 'https://www.typescriptlang.org', - }, - { - name: 'bootstrap', - url: 'https://getbootstrap.com', - }, - { - name: 'reactstrap', - url: 'https://reactstrap.github.io', - }, - { - name: 'babeljs', - url: 'https://babeljs.io', - }, - { - name: 'webpack', - url: 'https://webpack.js.org', - }, - { - name: 'sass', - url: 'https://sass-lang.com', - }, - { - name: 'eslint', - url: 'https://eslint.org', - }, - { - name: 'prettier', - url: 'https://prettier.io', - }, - { - name: 'pepjs', - url: 'https://github.com/jquery/PEP', - }, - { - name: 'react-inlinesvg', - url: 'https://github.com/gilbarbara/react-inlinesvg', - }, -]; - -const backendCredits: { - name: string; - url: string; -}[] = [ - { - name: 'ASP.NET Core', - url: 'https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core', - }, - { name: 'sqlite', url: 'https://sqlite.org' }, - { - name: 'ImageSharp', - url: 'https://github.com/SixLabors/ImageSharp', - }, -]; - -const About: React.FC = () => { - const { t } = useTranslation(); - - return ( - <> - -

{t('about.author.title')}

- {t('about.author.fullname')} - 杨宇千 -

- {t('about.author.nickname')} - crupest -

- {t('about.author.introduction')} - {t('about.author.introductionContent')} -

- {t('about.author.links')} - - - -

{t('about.site.title')}

- - 01234 - 56 - -

- - {t('about.site.repo')} - -

{t('about.credits.title')}

{t('about.credits.content')}

{t('about.credits.frontend')}

- - {item.name} - -
...

{t('about.credits.backend')}

- - {item.name} - -
...

- - ); -}; - -export default About; +import React from "react"; +import { useTranslation, Trans } from "react-i18next"; + +import authorAvatarUrl from "./author-avatar.png"; +import githubLogoUrl from "./github.png"; + +import AppBar from "../common/AppBar"; + +const frontendCredits: { + name: string; + url: string; +}[] = [ + { + name: "reactjs", + url: "https://reactjs.org", + }, + { + name: "typescript", + url: "https://www.typescriptlang.org", + }, + { + name: "bootstrap", + url: "https://getbootstrap.com", + }, + { + name: "reactstrap", + url: "https://reactstrap.github.io", + }, + { + name: "babeljs", + url: "https://babeljs.io", + }, + { + name: "webpack", + url: "https://webpack.js.org", + }, + { + name: "sass", + url: "https://sass-lang.com", + }, + { + name: "eslint", + url: "https://eslint.org", + }, + { + name: "prettier", + url: "https://prettier.io", + }, + { + name: "pepjs", + url: "https://github.com/jquery/PEP", + }, + { + name: "react-inlinesvg", + url: "https://github.com/gilbarbara/react-inlinesvg", + }, +]; + +const backendCredits: { + name: string; + url: string; +}[] = [ + { + name: "ASP.NET Core", + url: "https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core", + }, + { name: "sqlite", url: "https://sqlite.org" }, + { + name: "ImageSharp", + url: "https://github.com/SixLabors/ImageSharp", + }, +]; + +const About: React.FC = () => { + const { t } = useTranslation(); + + return ( + <> + +

{t("about.author.title")}

+ {t("about.author.fullname")} + 杨宇千 +

+ {t("about.author.nickname")} + crupest +

+ {t("about.author.introduction")} + {t("about.author.introductionContent")} +

+ {t("about.author.links")} + + + +

{t("about.site.title")}

+ + 01234 + 56 + +

+ + {t("about.site.repo")} + +

{t("about.credits.title")}

{t("about.credits.content")}

{t("about.credits.frontend")}

+ + {item.name} + +
...

{t("about.credits.backend")}

+ + {item.name} + +
...

+ + ); +}; + +export default About; diff --git a/Timeline/ClientApp/src/app/about/about.sass b/Timeline/ClientApp/src/app/about/about.sass index f4d00cae..3b5840cd 100644 --- a/Timeline/ClientApp/src/app/about/about.sass +++ b/Timeline/ClientApp/src/app/about/about.sass @@ -1,4 +1,4 @@ -.about-link-icon - @extend .mx-2 - width: 1.2em - height: 1.2em +.about-link-icon + @extend .mx-2 + width: 1.2em + height: 1.2em diff --git a/Timeline/ClientApp/src/app/admin/Admin.tsx b/Timeline/ClientApp/src/app/admin/Admin.tsx index af07dd2b..2f8b2c05 100644 --- a/Timeline/ClientApp/src/app/admin/Admin.tsx +++ b/Timeline/ClientApp/src/app/admin/Admin.tsx @@ -1,78 +1,78 @@ -import React, { Fragment } from 'react'; -import { Nav, NavItem, NavLink } from 'reactstrap'; -import { - Redirect, - Route, - Switch, - useRouteMatch, - useHistory -} from 'react-router'; -import classnames from 'classnames'; - -import AppBar from '../common/AppBar'; -import UserAdmin from './UserAdmin'; - -import { UserWithToken } from '../data/user'; - -interface AdminProps { - user: UserWithToken; -} - -const Admin: React.FC = props => { - const match = useRouteMatch(); - const history = useHistory(); - type TabNames = 'users' | 'more'; - - const tabName = history.location.pathname.replace(match.path + '/', ''); - - function toggle(newTab: TabNames): void { - history.push(`${match.url}/${newTab}`); - } - - const createRoute = ( - name: string, - body: React.ReactNode - ): React.ReactNode => { - return ( - - -

- - {body} - - ); - }; - - return ( - - - - {createRoute('users', )} - {createRoute('more',

More Page Works

)} - - - ); -}; - -export default Admin; +import React, { Fragment } from "react"; +import { Nav, NavItem, NavLink } from "reactstrap"; +import { + Redirect, + Route, + Switch, + useRouteMatch, + useHistory, +} from "react-router"; +import classnames from "classnames"; + +import AppBar from "../common/AppBar"; +import UserAdmin from "./UserAdmin"; + +import { UserWithToken } from "../data/user"; + +interface AdminProps { + user: UserWithToken; +} + +const Admin: React.FC = (props) => { + const match = useRouteMatch(); + const history = useHistory(); + type TabNames = "users" | "more"; + + const tabName = history.location.pathname.replace(match.path + "/", ""); + + function toggle(newTab: TabNames): void { + history.push(`${match.url}/${newTab}`); + } + + const createRoute = ( + name: string, + body: React.ReactNode + ): React.ReactNode => { + return ( + + +

+ + {body} + + ); + }; + + return ( + + + + {createRoute("users", )} + {createRoute("more",

More Page Works

)} + + + ); +}; + +export default Admin; diff --git a/Timeline/ClientApp/src/app/admin/UserAdmin.tsx b/Timeline/ClientApp/src/app/admin/UserAdmin.tsx index a3115073..57eed455 100644 --- a/Timeline/ClientApp/src/app/admin/UserAdmin.tsx +++ b/Timeline/ClientApp/src/app/admin/UserAdmin.tsx @@ -1,464 +1,464 @@ -import React, { useState, useEffect } from 'react'; -import { - ListGroupItem, - Row, - Col, - UncontrolledDropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, - Spinner, - Button, -} from 'reactstrap'; -import axios from 'axios'; - -import OperationDialog from '../common/OperationDialog'; - -import { User, UserWithToken } from '../data/user'; - -const apiBaseUrl = '/api'; - -async function fetchUserList(_token: string): Promise { - const res = await axios.get(`${apiBaseUrl}/users`); - return res.data; -} - -interface CreateUserInfo { - username: string; - password: string; - administrator: boolean; -} - -async function createUser(user: CreateUserInfo, token: string): Promise { - const res = await axios.post( - `${apiBaseUrl}/userop/createuser?token=${token}`, - user - ); - return res.data; -} - -function deleteUser(username: string, token: string): Promise { - return axios.delete(`${apiBaseUrl}/users/${username}?token=${token}`); -} - -function changeUsername( - oldUsername: string, - newUsername: string, - token: string -): Promise { - return axios.patch(`${apiBaseUrl}/users/${oldUsername}?token=${token}`, { - username: newUsername, - }); -} - -function changePassword( - username: string, - newPassword: string, - token: string -): Promise { - return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, { - password: newPassword, - }); -} - -function changePermission( - username: string, - newPermission: boolean, - token: string -): Promise { - return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, { - administrator: newPermission, - }); -} - -const kChangeUsername = 'changeusername'; -const kChangePassword = 'changepassword'; -const kChangePermission = 'changepermission'; -const kDelete = 'delete'; - -type TChangeUsername = typeof kChangeUsername; -type TChangePassword = typeof kChangePassword; -type TChangePermission = typeof kChangePermission; -type TDelete = typeof kDelete; - -type ContextMenuItem = - | TChangeUsername - | TChangePassword - | TChangePermission - | TDelete; - -interface UserCardProps { - onContextMenu: (item: ContextMenuItem) => void; - user: User; -} - -const UserItem: React.FC = (props) => { - const user = props.user; - - const createClickCallback = (item: ContextMenuItem): (() => void) => { - return () => { - props.onContextMenu(item); - }; - }; - - return ( - - - -

{user.username}

- - {user.administrator ? 'administrator' : 'user'} - - - - - - Manage - - - - Change Username - - - Change Password - - - Change Permission - - - Delete - - - - - - - ); -}; - -interface DialogProps { - open: boolean; - close: () => void; -} - -interface CreateUserDialogProps extends DialogProps { - process: (user: CreateUserInfo) => Promise; -} - -const CreateUserDialog: React.FC = (props) => { - return ( - - props.process({ - username: username as string, - password: password as string, - administrator: administrator as boolean, - }) - } - close={props.close} - open={props.open} - /> - ); -}; - -const UsernameLabel: React.FC = (props) => { - return {props.children}; -}; - -interface UserDeleteDialogProps extends DialogProps { - username: string; - process: () => Promise; -} - -const UserDeleteDialog: React.FC = (props) => { - return ( - ( - <> - {'You are deleting user '} - {props.username} - {' !'} - - )} - onProcess={props.process} - /> - ); -}; - -interface UserModifyDialogProps extends DialogProps { - username: string; - process: (value: T) => Promise; -} - -const UserChangeUsernameDialog: React.FC> = ( - props -) => { - return ( - ( - <> - {'You are change the username of user '} - {props.username} - {' !'} - - )} - inputScheme={[{ type: 'text', label: 'New Username' }]} - onProcess={([newUsername]) => { - return props.process(newUsername as string); - }} - /> - ); -}; - -const UserChangePasswordDialog: React.FC> = ( - props -) => { - return ( - ( - <> - {'You are change the password of user '} - {props.username} - {' !'} - - )} - inputScheme={[{ type: 'text', label: 'New Password' }]} - onProcess={([newPassword]) => { - return props.process(newPassword as string); - }} - /> - ); -}; - -interface UserChangePermissionDialogProps extends DialogProps { - username: string; - newPermission: boolean; - process: () => Promise; -} - -const UserChangePermissionDialog: React.FC = ( - props -) => { - return ( - ( - <> - {'You are change user '} - {props.username} - {' to '} - - {props.newPermission ? 'administrator' : 'normal user'} - - {' !'} - - )} - onProcess={props.process} - /> - ); -}; - -interface UserAdminProps { - user: UserWithToken; -} - -const UserAdmin: React.FC = (props) => { - type DialogInfo = - | null - | { - type: 'create'; - } - | { type: TDelete; username: string } - | { - type: TChangeUsername; - username: string; - } - | { - type: TChangePassword; - username: string; - } - | { - type: TChangePermission; - username: string; - newPermission: boolean; - }; - - const [users, setUsers] = useState(null); - const [dialog, setDialog] = useState(null); - - const token = props.user.token; - - useEffect(() => { - let subscribe = true; - void fetchUserList(props.user.token).then((us) => { - if (subscribe) { - setUsers(us); - } - }); - return () => { - subscribe = false; - }; - }, [props.user]); - - let dialogNode: React.ReactNode; - if (dialog) - switch (dialog.type) { - case 'create': - dialogNode = ( - setDialog(null)} - process={async (user) => { - const u = await createUser(user, token); - setUsers((oldUsers) => [...(oldUsers ?? []), u]); - }} - /> - ); - break; - case 'delete': - dialogNode = ( - setDialog(null)} - username={dialog.username} - process={async () => { - await deleteUser(dialog.username, token); - setUsers((oldUsers) => - (oldUsers ?? []).filter((u) => u.username !== dialog.username) - ); - }} - /> - ); - break; - case kChangeUsername: - dialogNode = ( - setDialog(null)} - username={dialog.username} - process={async (newUsername) => { - await changeUsername(dialog.username, newUsername, token); - setUsers((oldUsers) => { - const users = (oldUsers ?? []).slice(); - const findedUser = users.find( - (u) => u.username === dialog.username - ); - if (findedUser) findedUser.username = newUsername; - return users; - }); - }} - /> - ); - break; - case kChangePassword: - dialogNode = ( - setDialog(null)} - username={dialog.username} - process={async (newPassword) => { - await changePassword(dialog.username, newPassword, token); - }} - /> - ); - break; - case kChangePermission: { - const newPermission = dialog.newPermission; - dialogNode = ( - setDialog(null)} - username={dialog.username} - newPermission={newPermission} - process={async () => { - await changePermission(dialog.username, newPermission, token); - setUsers((oldUsers) => { - const users = (oldUsers ?? []).slice(); - const findedUser = users.find( - (u) => u.username === dialog.username - ); - if (findedUser) findedUser.administrator = newPermission; - return users; - }); - }} - /> - ); - break; - } - } - - if (users) { - const userComponents = users.map((user) => { - return ( - { - setDialog( - item === kChangePermission - ? { - type: kChangePermission, - username: user.username, - newPermission: !user.administrator, - } - : { - type: item, - username: user.username, - } - ); - }} - /> - ); - }); - - return ( - <> - - {userComponents} - {dialogNode} - - ); - } else { - return ; - } -}; - -export default UserAdmin; +import React, { useState, useEffect } from "react"; +import { + ListGroupItem, + Row, + Col, + UncontrolledDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Spinner, + Button, +} from "reactstrap"; +import axios from "axios"; + +import OperationDialog from "../common/OperationDialog"; + +import { User, UserWithToken } from "../data/user"; + +const apiBaseUrl = "/api"; + +async function fetchUserList(_token: string): Promise { + const res = await axios.get(`${apiBaseUrl}/users`); + return res.data; +} + +interface CreateUserInfo { + username: string; + password: string; + administrator: boolean; +} + +async function createUser(user: CreateUserInfo, token: string): Promise { + const res = await axios.post( + `${apiBaseUrl}/userop/createuser?token=${token}`, + user + ); + return res.data; +} + +function deleteUser(username: string, token: string): Promise { + return axios.delete(`${apiBaseUrl}/users/${username}?token=${token}`); +} + +function changeUsername( + oldUsername: string, + newUsername: string, + token: string +): Promise { + return axios.patch(`${apiBaseUrl}/users/${oldUsername}?token=${token}`, { + username: newUsername, + }); +} + +function changePassword( + username: string, + newPassword: string, + token: string +): Promise { + return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, { + password: newPassword, + }); +} + +function changePermission( + username: string, + newPermission: boolean, + token: string +): Promise { + return axios.patch(`${apiBaseUrl}/users/${username}?token=${token}`, { + administrator: newPermission, + }); +} + +const kChangeUsername = "changeusername"; +const kChangePassword = "changepassword"; +const kChangePermission = "changepermission"; +const kDelete = "delete"; + +type TChangeUsername = typeof kChangeUsername; +type TChangePassword = typeof kChangePassword; +type TChangePermission = typeof kChangePermission; +type TDelete = typeof kDelete; + +type ContextMenuItem = + | TChangeUsername + | TChangePassword + | TChangePermission + | TDelete; + +interface UserCardProps { + onContextMenu: (item: ContextMenuItem) => void; + user: User; +} + +const UserItem: React.FC = (props) => { + const user = props.user; + + const createClickCallback = (item: ContextMenuItem): (() => void) => { + return () => { + props.onContextMenu(item); + }; + }; + + return ( + + + +

{user.username}

+ + {user.administrator ? "administrator" : "user"} + + + + + + Manage + + + + Change Username + + + Change Password + + + Change Permission + + + Delete + + + + + + + ); +}; + +interface DialogProps { + open: boolean; + close: () => void; +} + +interface CreateUserDialogProps extends DialogProps { + process: (user: CreateUserInfo) => Promise; +} + +const CreateUserDialog: React.FC = (props) => { + return ( + + props.process({ + username: username as string, + password: password as string, + administrator: administrator as boolean, + }) + } + close={props.close} + open={props.open} + /> + ); +}; + +const UsernameLabel: React.FC = (props) => { + return {props.children}; +}; + +interface UserDeleteDialogProps extends DialogProps { + username: string; + process: () => Promise; +} + +const UserDeleteDialog: React.FC = (props) => { + return ( + ( + <> + {"You are deleting user "} + {props.username} + {" !"} + + )} + onProcess={props.process} + /> + ); +}; + +interface UserModifyDialogProps extends DialogProps { + username: string; + process: (value: T) => Promise; +} + +const UserChangeUsernameDialog: React.FC> = ( + props +) => { + return ( + ( + <> + {"You are change the username of user "} + {props.username} + {" !"} + + )} + inputScheme={[{ type: "text", label: "New Username" }]} + onProcess={([newUsername]) => { + return props.process(newUsername as string); + }} + /> + ); +}; + +const UserChangePasswordDialog: React.FC> = ( + props +) => { + return ( + ( + <> + {"You are change the password of user "} + {props.username} + {" !"} + + )} + inputScheme={[{ type: "text", label: "New Password" }]} + onProcess={([newPassword]) => { + return props.process(newPassword as string); + }} + /> + ); +}; + +interface UserChangePermissionDialogProps extends DialogProps { + username: string; + newPermission: boolean; + process: () => Promise; +} + +const UserChangePermissionDialog: React.FC = ( + props +) => { + return ( + ( + <> + {"You are change user "} + {props.username} + {" to "} + + {props.newPermission ? "administrator" : "normal user"} + + {" !"} + + )} + onProcess={props.process} + /> + ); +}; + +interface UserAdminProps { + user: UserWithToken; +} + +const UserAdmin: React.FC = (props) => { + type DialogInfo = + | null + | { + type: "create"; + } + | { type: TDelete; username: string } + | { + type: TChangeUsername; + username: string; + } + | { + type: TChangePassword; + username: string; + } + | { + type: TChangePermission; + username: string; + newPermission: boolean; + }; + + const [users, setUsers] = useState(null); + const [dialog, setDialog] = useState(null); + + const token = props.user.token; + + useEffect(() => { + let subscribe = true; + void fetchUserList(props.user.token).then((us) => { + if (subscribe) { + setUsers(us); + } + }); + return () => { + subscribe = false; + }; + }, [props.user]); + + let dialogNode: React.ReactNode; + if (dialog) + switch (dialog.type) { + case "create": + dialogNode = ( + setDialog(null)} + process={async (user) => { + const u = await createUser(user, token); + setUsers((oldUsers) => [...(oldUsers ?? []), u]); + }} + /> + ); + break; + case "delete": + dialogNode = ( + setDialog(null)} + username={dialog.username} + process={async () => { + await deleteUser(dialog.username, token); + setUsers((oldUsers) => + (oldUsers ?? []).filter((u) => u.username !== dialog.username) + ); + }} + /> + ); + break; + case kChangeUsername: + dialogNode = ( + setDialog(null)} + username={dialog.username} + process={async (newUsername) => { + await changeUsername(dialog.username, newUsername, token); + setUsers((oldUsers) => { + const users = (oldUsers ?? []).slice(); + const findedUser = users.find( + (u) => u.username === dialog.username + ); + if (findedUser) findedUser.username = newUsername; + return users; + }); + }} + /> + ); + break; + case kChangePassword: + dialogNode = ( + setDialog(null)} + username={dialog.username} + process={async (newPassword) => { + await changePassword(dialog.username, newPassword, token); + }} + /> + ); + break; + case kChangePermission: { + const newPermission = dialog.newPermission; + dialogNode = ( + setDialog(null)} + username={dialog.username} + newPermission={newPermission} + process={async () => { + await changePermission(dialog.username, newPermission, token); + setUsers((oldUsers) => { + const users = (oldUsers ?? []).slice(); + const findedUser = users.find( + (u) => u.username === dialog.username + ); + if (findedUser) findedUser.administrator = newPermission; + return users; + }); + }} + /> + ); + break; + } + } + + if (users) { + const userComponents = users.map((user) => { + return ( + { + setDialog( + item === kChangePermission + ? { + type: kChangePermission, + username: user.username, + newPermission: !user.administrator, + } + : { + type: item, + username: user.username, + } + ); + }} + /> + ); + }); + + return ( + <> + + {userComponents} + {dialogNode} + + ); + } else { + return ; + } +}; + +export default UserAdmin; diff --git a/Timeline/ClientApp/src/app/common.ts b/Timeline/ClientApp/src/app/common.ts index 297b4a77..0a2d345f 100644 --- a/Timeline/ClientApp/src/app/common.ts +++ b/Timeline/ClientApp/src/app/common.ts @@ -1,44 +1,44 @@ -import React from 'react'; -import { Observable, Subject } from 'rxjs'; - -// This error is thrown when ui goes wrong with bad logic. -// Such as a variable should not be null, but it does. -// This error should never occur. If it does, it indicates there is some logic bug in codes. -export class UiLogicError extends Error {} - -export function useEventEmiiter(): [() => Observable, () => void] { - const ref = React.useRef | null>(null); - - return React.useMemo(() => { - const getter = (): Subject => { - if (ref.current == null) { - ref.current = new Subject(); - } - return ref.current; - }; - const trigger = (): void => { - getter().next(null); - }; - return [getter, trigger]; - }, []); -} - -export function useValueEventEmiiter(): [ - () => Observable, - (value: T) => void -] { - const ref = React.useRef | null>(null); - - return React.useMemo(() => { - const getter = (): Subject => { - if (ref.current == null) { - ref.current = new Subject(); - } - return ref.current; - }; - const trigger = (value: T): void => { - getter().next(value); - }; - return [getter, trigger]; - }, []); -} +import React from "react"; +import { Observable, Subject } from "rxjs"; + +// This error is thrown when ui goes wrong with bad logic. +// Such as a variable should not be null, but it does. +// This error should never occur. If it does, it indicates there is some logic bug in codes. +export class UiLogicError extends Error {} + +export function useEventEmiiter(): [() => Observable, () => void] { + const ref = React.useRef | null>(null); + + return React.useMemo(() => { + const getter = (): Subject => { + if (ref.current == null) { + ref.current = new Subject(); + } + return ref.current; + }; + const trigger = (): void => { + getter().next(null); + }; + return [getter, trigger]; + }, []); +} + +export function useValueEventEmiiter(): [ + () => Observable, + (value: T) => void +] { + const ref = React.useRef | null>(null); + + return React.useMemo(() => { + const getter = (): Subject => { + if (ref.current == null) { + ref.current = new Subject(); + } + return ref.current; + }; + const trigger = (value: T): void => { + getter().next(value); + }; + return [getter, trigger]; + }, []); +} diff --git a/Timeline/ClientApp/src/app/common/AlertHost.tsx b/Timeline/ClientApp/src/app/common/AlertHost.tsx index 89831073..e22354fa 100644 --- a/Timeline/ClientApp/src/app/common/AlertHost.tsx +++ b/Timeline/ClientApp/src/app/common/AlertHost.tsx @@ -1,96 +1,96 @@ -import React, { useCallback } from 'react'; -import { Alert } from 'reactstrap'; -import without from 'lodash/without'; -import concat from 'lodash/concat'; - -import { - alertService, - AlertInfoEx, - kAlertHostId, - AlertInfo, -} from './alert-service'; -import { useTranslation } from 'react-i18next'; - -interface AutoCloseAlertProps { - alert: AlertInfo; - close: () => void; -} - -export const AutoCloseAlert: React.FC = (props) => { - const { alert } = props; - const { dismissTime } = alert; - - const { t } = useTranslation(); - - React.useEffect(() => { - const tag = - dismissTime === 'never' - ? null - : typeof dismissTime === 'number' - ? window.setTimeout(props.close, dismissTime) - : window.setTimeout(props.close, 5000); - return () => { - if (tag != null) { - window.clearTimeout(tag); - } - }; - }, [dismissTime, props.close]); - - return ( - - {(() => { - const { message } = alert; - if (typeof message === 'function') { - const Message = message; - return ; - } else if (typeof message === 'object' && message.type === 'i18n') { - return t(message.key); - } else return alert.message; - })()} - - ); -}; - -// oh what a bad name! -interface AlertInfoExEx extends AlertInfoEx { - close: () => void; -} - -export const AlertHost: React.FC = () => { - const [alerts, setAlerts] = React.useState([]); - - // react guarantee that state setters are stable, so we don't need to add it to dependency list - - const consume = useCallback((alert: AlertInfoEx): void => { - const alertEx: AlertInfoExEx = { - ...alert, - close: () => { - setAlerts((oldAlerts) => { - return without(oldAlerts, alertEx); - }); - }, - }; - setAlerts((oldAlerts) => { - return concat(oldAlerts, alertEx); - }); - }, []); - - React.useEffect(() => { - alertService.registerConsumer(consume); - return () => { - alertService.unregisterConsumer(consume); - }; - }, [consume]); - - return ( -

- {alerts.map((alert) => { - return ( - - ); - })} -

- ); -}; - -export default AlertHost; +import React, { useCallback } from "react"; +import { Alert } from "reactstrap"; +import without from "lodash/without"; +import concat from "lodash/concat"; + +import { + alertService, + AlertInfoEx, + kAlertHostId, + AlertInfo, +} from "./alert-service"; +import { useTranslation } from "react-i18next"; + +interface AutoCloseAlertProps { + alert: AlertInfo; + close: () => void; +} + +export const AutoCloseAlert: React.FC = (props) => { + const { alert } = props; + const { dismissTime } = alert; + + const { t } = useTranslation(); + + React.useEffect(() => { + const tag = + dismissTime === "never" + ? null + : typeof dismissTime === "number" + ? window.setTimeout(props.close, dismissTime) + : window.setTimeout(props.close, 5000); + return () => { + if (tag != null) { + window.clearTimeout(tag); + } + }; + }, [dismissTime, props.close]); + + return ( + + {(() => { + const { message } = alert; + if (typeof message === "function") { + const Message = message; + return ; + } else if (typeof message === "object" && message.type === "i18n") { + return t(message.key); + } else return alert.message; + })()} + + ); +}; + +// oh what a bad name! +interface AlertInfoExEx extends AlertInfoEx { + close: () => void; +} + +export const AlertHost: React.FC = () => { + const [alerts, setAlerts] = React.useState([]); + + // react guarantee that state setters are stable, so we don't need to add it to dependency list + + const consume = useCallback((alert: AlertInfoEx): void => { + const alertEx: AlertInfoExEx = { + ...alert, + close: () => { + setAlerts((oldAlerts) => { + return without(oldAlerts, alertEx); + }); + }, + }; + setAlerts((oldAlerts) => { + return concat(oldAlerts, alertEx); + }); + }, []); + + React.useEffect(() => { + alertService.registerConsumer(consume); + return () => { + alertService.unregisterConsumer(consume); + }; + }, [consume]); + + return ( +

+ {alerts.map((alert) => { + return ( + + ); + })} +

+ ); +}; + +export default AlertHost; diff --git a/Timeline/ClientApp/src/app/common/AppBar.tsx b/Timeline/ClientApp/src/app/common/AppBar.tsx index 8349aef7..59239696 100644 --- a/Timeline/ClientApp/src/app/common/AppBar.tsx +++ b/Timeline/ClientApp/src/app/common/AppBar.tsx @@ -1,107 +1,107 @@ -import React from 'react'; -import { useHistory, matchPath } from 'react-router'; -import { Link, NavLink } from 'react-router-dom'; -import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from 'reactstrap'; -import { useMediaQuery } from 'react-responsive'; -import { useTranslation } from 'react-i18next'; - -import { useUser, useAvatar } from '../data/user'; - -import TimelineLogo from './TimelineLogo'; -import BlobImage from './BlobImage'; - -const AppBar: React.FC = (_) => { - const history = useHistory(); - const user = useUser(); - const avatar = useAvatar(user?.username); - - const { t } = useTranslation(); - - const isUpMd = useMediaQuery({ - minWidth: getComputedStyle(document.documentElement).getPropertyValue( - '--breakpoint-md' - ), - }); - - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const toggleMenu = React.useCallback((): void => { - setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen); - }, []); - - const isAdministrator = user && user.administrator; - - const rightArea = ( -

- {user != null ? ( - - - - ) : ( - - {t('nav.login')} - - )} -

- ); - - return ( - - - - Timeline - - - {isUpMd ? null : rightArea} - - - - - {isUpMd ? rightArea : null} - - - ); -}; - -export default AppBar; +import React from "react"; +import { useHistory, matchPath } from "react-router"; +import { Link, NavLink } from "react-router-dom"; +import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from "reactstrap"; +import { useMediaQuery } from "react-responsive"; +import { useTranslation } from "react-i18next"; + +import { useUser, useAvatar } from "../data/user"; + +import TimelineLogo from "./TimelineLogo"; +import BlobImage from "./BlobImage"; + +const AppBar: React.FC = (_) => { + const history = useHistory(); + const user = useUser(); + const avatar = useAvatar(user?.username); + + const { t } = useTranslation(); + + const isUpMd = useMediaQuery({ + minWidth: getComputedStyle(document.documentElement).getPropertyValue( + "--breakpoint-md" + ), + }); + + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const toggleMenu = React.useCallback((): void => { + setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen); + }, []); + + const isAdministrator = user && user.administrator; + + const rightArea = ( +

+ {user != null ? ( + + + + ) : ( + + {t("nav.login")} + + )} +

+ ); + + return ( + + + + Timeline + + + {isUpMd ? null : rightArea} + + + + + {isUpMd ? rightArea : null} + + + ); +}; + +export default AppBar; diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/common/BlobImage.tsx index 7e5e2447..8602f550 100644 --- a/Timeline/ClientApp/src/app/common/BlobImage.tsx +++ b/Timeline/ClientApp/src/app/common/BlobImage.tsx @@ -1,29 +1,29 @@ -import React from 'react'; - -import { ExcludeKey } from '../utilities/type'; - -const BlobImage: React.FC< - ExcludeKey, 'src'> & { - blob?: Blob | unknown; - } -> = (props) => { - const { blob, ...otherProps } = props; - - const [url, setUrl] = React.useState(undefined); - - React.useEffect(() => { - if (blob instanceof Blob) { - const url = URL.createObjectURL(blob); - setUrl(url); - return () => { - URL.revokeObjectURL(url); - }; - } else { - setUrl(undefined); - } - }, [blob]); - - return

; -}; - -export default BlobImage; +import React from "react"; + +import { ExcludeKey } from "../utilities/type"; + +const BlobImage: React.FC< + ExcludeKey, "src"> & { + blob?: Blob | unknown; + } +> = (props) => { + const { blob, ...otherProps } = props; + + const [url, setUrl] = React.useState(undefined); + + React.useEffect(() => { + if (blob instanceof Blob) { + const url = URL.createObjectURL(blob); + setUrl(url); + return () => { + URL.revokeObjectURL(url); + }; + } else { + setUrl(undefined); + } + }, [blob]); + + return

; +}; + +export default BlobImage; diff --git a/Timeline/ClientApp/src/app/common/FileInput.tsx b/Timeline/ClientApp/src/app/common/FileInput.tsx index 94f4aa43..3d1bc2b3 100644 --- a/Timeline/ClientApp/src/app/common/FileInput.tsx +++ b/Timeline/ClientApp/src/app/common/FileInput.tsx @@ -1,41 +1,41 @@ -import React from 'react'; -import clsx from 'clsx'; - -import { ExcludeKey } from '../utilities/type'; - -export interface FileInputProps - extends ExcludeKey< - React.InputHTMLAttributes, - 'type' | 'id' - > { - inputId?: string; - labelText: string; - color?: string; - className?: string; -} - -const FileInput: React.FC = props => { - const { inputId, labelText, color, className, ...otherProps } = props; - - const realInputId = React.useMemo(() => { - if (inputId != null) return inputId; - return ( - 'file-input-' + - (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) - ); - }, [inputId]); - - return ( - <> - - - {labelText} - - - ); -}; - -export default FileInput; +import React from "react"; +import clsx from "clsx"; + +import { ExcludeKey } from "../utilities/type"; + +export interface FileInputProps + extends ExcludeKey< + React.InputHTMLAttributes, + "type" | "id" + > { + inputId?: string; + labelText: string; + color?: string; + className?: string; +} + +const FileInput: React.FC = (props) => { + const { inputId, labelText, color, className, ...otherProps } = props; + + const realInputId = React.useMemo(() => { + if (inputId != null) return inputId; + return ( + "file-input-" + + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + ); + }, [inputId]); + + return ( + <> + + + {labelText} + + + ); +}; + +export default FileInput; diff --git a/Timeline/ClientApp/src/app/common/ImageCropper.tsx b/Timeline/ClientApp/src/app/common/ImageCropper.tsx index fb9bb4f9..cd510969 100644 --- a/Timeline/ClientApp/src/app/common/ImageCropper.tsx +++ b/Timeline/ClientApp/src/app/common/ImageCropper.tsx @@ -1,306 +1,306 @@ -import * as React from 'react'; -import clsx from 'clsx'; - -import { UiLogicError } from '../common'; - -export interface Clip { - left: number; - top: number; - width: number; -} - -interface NormailizedClip extends Clip { - height: number; -} - -interface ImageInfo { - width: number; - height: number; - landscape: boolean; - ratio: number; - maxClipWidth: number; - maxClipHeight: number; -} - -interface ImageCropperSavedState { - clip: NormailizedClip; - x: number; - y: number; - pointerId: number; -} - -export interface ImageCropperProps { - clip: Clip | null; - imageUrl: string; - onChange: (clip: Clip) => void; - imageElementCallback?: (element: HTMLImageElement | null) => void; - className?: string; -} - -const ImageCropper = (props: ImageCropperProps): React.ReactElement => { - const { clip, imageUrl, onChange, imageElementCallback, className } = props; - - const [oldState, setOldState] = React.useState( - null - ); - const [imageInfo, setImageInfo] = React.useState(null); - - const normalizeClip = (c: Clip | null | undefined): NormailizedClip => { - if (c == null) { - return { left: 0, top: 0, width: 0, height: 0 }; - } - - return { - left: c.left || 0, - top: c.top || 0, - width: c.width || 0, - height: imageInfo != null ? (c.width || 0) / imageInfo.ratio : 0, - }; - }; - - const c = normalizeClip(clip); - - const imgElementRef = React.useRef(null); - - const onImageRef = React.useCallback( - (e: HTMLImageElement | null) => { - imgElementRef.current = e; - if (imageElementCallback != null && e == null) { - imageElementCallback(null); - } - }, - [imageElementCallback] - ); - - const onImageLoad = React.useCallback( - (e: React.SyntheticEvent) => { - const img = e.currentTarget; - const landscape = img.naturalWidth >= img.naturalHeight; - - const info = { - width: img.naturalWidth, - height: img.naturalHeight, - landscape, - ratio: img.naturalHeight / img.naturalWidth, - maxClipWidth: landscape ? img.naturalHeight / img.naturalWidth : 1, - maxClipHeight: landscape ? 1 : img.naturalWidth / img.naturalHeight, - }; - setImageInfo(info); - onChange({ left: 0, top: 0, width: info.maxClipWidth }); - if (imageElementCallback != null) { - imageElementCallback(img); - } - }, - [onChange, imageElementCallback] - ); - - const onPointerDown = React.useCallback( - (e: React.PointerEvent) => { - if (oldState != null) return; - e.currentTarget.setPointerCapture(e.pointerId); - setOldState({ - x: e.clientX, - y: e.clientY, - clip: c, - pointerId: e.pointerId, - }); - }, - [oldState, c] - ); - - const onPointerUp = React.useCallback( - (e: React.PointerEvent) => { - if (oldState == null || oldState.pointerId !== e.pointerId) return; - e.currentTarget.releasePointerCapture(e.pointerId); - setOldState(null); - }, - [oldState] - ); - - const onPointerMove = React.useCallback( - (e: React.PointerEvent) => { - if (oldState == null) return; - - const oldClip = oldState.clip; - - const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y }; - - const { current: imgElement } = imgElementRef; - - if (imgElement == null) throw new UiLogicError('Image element is null.'); - - const moveRatio = { - x: movement.x / imgElement.width, - y: movement.y / imgElement.height, - }; - - const newRatio = { - x: oldClip.left + moveRatio.x, - y: oldClip.top + moveRatio.y, - }; - if (newRatio.x < 0) { - newRatio.x = 0; - } else if (newRatio.x > 1 - oldClip.width) { - newRatio.x = 1 - oldClip.width; - } - if (newRatio.y < 0) { - newRatio.y = 0; - } else if (newRatio.y > 1 - oldClip.height) { - newRatio.y = 1 - oldClip.height; - } - - onChange({ left: newRatio.x, top: newRatio.y, width: oldClip.width }); - }, - [oldState, onChange] - ); - - const onHandlerPointerMove = React.useCallback( - (e: React.PointerEvent) => { - if (oldState == null) return; - - const oldClip = oldState.clip; - - const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y }; - - const ratio = imageInfo == null ? 1 : imageInfo.ratio; - - const { current: imgElement } = imgElementRef; - - if (imgElement == null) throw new UiLogicError('Image element is null.'); - - const moveRatio = { - x: movement.x / imgElement.width, - y: movement.x / imgElement.width / ratio, - }; - - const newRatio = { - x: oldClip.width + moveRatio.x, - y: oldClip.height + moveRatio.y, - }; - - const maxRatio = { - x: Math.min(1 - oldClip.left, newRatio.x), - y: Math.min(1 - oldClip.top, newRatio.y), - }; - - const maxWidthRatio = Math.min(maxRatio.x, maxRatio.y * ratio); - - let newWidth; - if (newRatio.x < 0) { - newWidth = 0; - } else if (newRatio.x > maxWidthRatio) { - newWidth = maxWidthRatio; - } else { - newWidth = newRatio.x; - } - - onChange({ left: oldClip.left, top: oldClip.top, width: newWidth }); - }, - [imageInfo, oldState, onChange] - ); - - const toPercentage = (n: number): string => `${n}%`; - - // fuck!!! I just can't find a better way to implement this in pure css - const containerStyle: React.CSSProperties = (() => { - if (imageInfo == null) { - return { width: '100%', paddingTop: '100%', height: 0 }; - } else { - if (imageInfo.ratio > 1) { - return { - width: toPercentage(100 / imageInfo.ratio), - paddingTop: '100%', - height: 0, - }; - } else { - return { - width: '100%', - paddingTop: toPercentage(100 * imageInfo.ratio), - height: 0, - }; - } - } - })(); - - return ( -

- ); -}; - -export default ImageCropper; - -export function applyClipToImage( - image: HTMLImageElement, - clip: Clip, - mimeType: string -): Promise { - return new Promise((resolve, reject) => { - const naturalSize = { - width: image.naturalWidth, - height: image.naturalHeight, - }; - const clipArea = { - x: naturalSize.width * clip.left, - y: naturalSize.height * clip.top, - length: naturalSize.width * clip.width, - }; - - const canvas = document.createElement('canvas'); - canvas.width = clipArea.length; - canvas.height = clipArea.length; - const context = canvas.getContext('2d'); - - if (context == null) throw new Error('Failed to create context.'); - - context.drawImage( - image, - clipArea.x, - clipArea.y, - clipArea.length, - clipArea.length, - 0, - 0, - clipArea.length, - clipArea.length - ); - - canvas.toBlob((blob) => { - if (blob == null) { - reject(new Error('canvas.toBlob returns null')); - } else { - resolve(blob); - } - }, mimeType); - }); -} +import * as React from "react"; +import clsx from "clsx"; + +import { UiLogicError } from "../common"; + +export interface Clip { + left: number; + top: number; + width: number; +} + +interface NormailizedClip extends Clip { + height: number; +} + +interface ImageInfo { + width: number; + height: number; + landscape: boolean; + ratio: number; + maxClipWidth: number; + maxClipHeight: number; +} + +interface ImageCropperSavedState { + clip: NormailizedClip; + x: number; + y: number; + pointerId: number; +} + +export interface ImageCropperProps { + clip: Clip | null; + imageUrl: string; + onChange: (clip: Clip) => void; + imageElementCallback?: (element: HTMLImageElement | null) => void; + className?: string; +} + +const ImageCropper = (props: ImageCropperProps): React.ReactElement => { + const { clip, imageUrl, onChange, imageElementCallback, className } = props; + + const [oldState, setOldState] = React.useState( + null + ); + const [imageInfo, setImageInfo] = React.useState(null); + + const normalizeClip = (c: Clip | null | undefined): NormailizedClip => { + if (c == null) { + return { left: 0, top: 0, width: 0, height: 0 }; + } + + return { + left: c.left || 0, + top: c.top || 0, + width: c.width || 0, + height: imageInfo != null ? (c.width || 0) / imageInfo.ratio : 0, + }; + }; + + const c = normalizeClip(clip); + + const imgElementRef = React.useRef(null); + + const onImageRef = React.useCallback( + (e: HTMLImageElement | null) => { + imgElementRef.current = e; + if (imageElementCallback != null && e == null) { + imageElementCallback(null); + } + }, + [imageElementCallback] + ); + + const onImageLoad = React.useCallback( + (e: React.SyntheticEvent) => { + const img = e.currentTarget; + const landscape = img.naturalWidth >= img.naturalHeight; + + const info = { + width: img.naturalWidth, + height: img.naturalHeight, + landscape, + ratio: img.naturalHeight / img.naturalWidth, + maxClipWidth: landscape ? img.naturalHeight / img.naturalWidth : 1, + maxClipHeight: landscape ? 1 : img.naturalWidth / img.naturalHeight, + }; + setImageInfo(info); + onChange({ left: 0, top: 0, width: info.maxClipWidth }); + if (imageElementCallback != null) { + imageElementCallback(img); + } + }, + [onChange, imageElementCallback] + ); + + const onPointerDown = React.useCallback( + (e: React.PointerEvent) => { + if (oldState != null) return; + e.currentTarget.setPointerCapture(e.pointerId); + setOldState({ + x: e.clientX, + y: e.clientY, + clip: c, + pointerId: e.pointerId, + }); + }, + [oldState, c] + ); + + const onPointerUp = React.useCallback( + (e: React.PointerEvent) => { + if (oldState == null || oldState.pointerId !== e.pointerId) return; + e.currentTarget.releasePointerCapture(e.pointerId); + setOldState(null); + }, + [oldState] + ); + + const onPointerMove = React.useCallback( + (e: React.PointerEvent) => { + if (oldState == null) return; + + const oldClip = oldState.clip; + + const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y }; + + const { current: imgElement } = imgElementRef; + + if (imgElement == null) throw new UiLogicError("Image element is null."); + + const moveRatio = { + x: movement.x / imgElement.width, + y: movement.y / imgElement.height, + }; + + const newRatio = { + x: oldClip.left + moveRatio.x, + y: oldClip.top + moveRatio.y, + }; + if (newRatio.x < 0) { + newRatio.x = 0; + } else if (newRatio.x > 1 - oldClip.width) { + newRatio.x = 1 - oldClip.width; + } + if (newRatio.y < 0) { + newRatio.y = 0; + } else if (newRatio.y > 1 - oldClip.height) { + newRatio.y = 1 - oldClip.height; + } + + onChange({ left: newRatio.x, top: newRatio.y, width: oldClip.width }); + }, + [oldState, onChange] + ); + + const onHandlerPointerMove = React.useCallback( + (e: React.PointerEvent) => { + if (oldState == null) return; + + const oldClip = oldState.clip; + + const movement = { x: e.clientX - oldState.x, y: e.clientY - oldState.y }; + + const ratio = imageInfo == null ? 1 : imageInfo.ratio; + + const { current: imgElement } = imgElementRef; + + if (imgElement == null) throw new UiLogicError("Image element is null."); + + const moveRatio = { + x: movement.x / imgElement.width, + y: movement.x / imgElement.width / ratio, + }; + + const newRatio = { + x: oldClip.width + moveRatio.x, + y: oldClip.height + moveRatio.y, + }; + + const maxRatio = { + x: Math.min(1 - oldClip.left, newRatio.x), + y: Math.min(1 - oldClip.top, newRatio.y), + }; + + const maxWidthRatio = Math.min(maxRatio.x, maxRatio.y * ratio); + + let newWidth; + if (newRatio.x < 0) { + newWidth = 0; + } else if (newRatio.x > maxWidthRatio) { + newWidth = maxWidthRatio; + } else { + newWidth = newRatio.x; + } + + onChange({ left: oldClip.left, top: oldClip.top, width: newWidth }); + }, + [imageInfo, oldState, onChange] + ); + + const toPercentage = (n: number): string => `${n}%`; + + // fuck!!! I just can't find a better way to implement this in pure css + const containerStyle: React.CSSProperties = (() => { + if (imageInfo == null) { + return { width: "100%", paddingTop: "100%", height: 0 }; + } else { + if (imageInfo.ratio > 1) { + return { + width: toPercentage(100 / imageInfo.ratio), + paddingTop: "100%", + height: 0, + }; + } else { + return { + width: "100%", + paddingTop: toPercentage(100 * imageInfo.ratio), + height: 0, + }; + } + } + })(); + + return ( +

+ ); +}; + +export default ImageCropper; + +export function applyClipToImage( + image: HTMLImageElement, + clip: Clip, + mimeType: string +): Promise { + return new Promise((resolve, reject) => { + const naturalSize = { + width: image.naturalWidth, + height: image.naturalHeight, + }; + const clipArea = { + x: naturalSize.width * clip.left, + y: naturalSize.height * clip.top, + length: naturalSize.width * clip.width, + }; + + const canvas = document.createElement("canvas"); + canvas.width = clipArea.length; + canvas.height = clipArea.length; + const context = canvas.getContext("2d"); + + if (context == null) throw new Error("Failed to create context."); + + context.drawImage( + image, + clipArea.x, + clipArea.y, + clipArea.length, + clipArea.length, + 0, + 0, + clipArea.length, + clipArea.length + ); + + canvas.toBlob((blob) => { + if (blob == null) { + reject(new Error("canvas.toBlob returns null")); + } else { + resolve(blob); + } + }, mimeType); + }); +} diff --git a/Timeline/ClientApp/src/app/common/LoadingPage.tsx b/Timeline/ClientApp/src/app/common/LoadingPage.tsx index c1bc7105..a849126d 100644 --- a/Timeline/ClientApp/src/app/common/LoadingPage.tsx +++ b/Timeline/ClientApp/src/app/common/LoadingPage.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import { Spinner } from 'reactstrap'; - -const LoadingPage: React.FC = () => { - return ( -

- -

- ); -}; - -export default LoadingPage; +import React from "react"; +import { Spinner } from "reactstrap"; + +const LoadingPage: React.FC = () => { + return ( +

+ +

+ ); +}; + +export default LoadingPage; diff --git a/Timeline/ClientApp/src/app/common/OperationDialog.tsx b/Timeline/ClientApp/src/app/common/OperationDialog.tsx index 501a353e..bca4580c 100644 --- a/Timeline/ClientApp/src/app/common/OperationDialog.tsx +++ b/Timeline/ClientApp/src/app/common/OperationDialog.tsx @@ -1,381 +1,381 @@ -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { - Spinner, - Container, - ModalBody, - Label, - Input, - FormGroup, - FormFeedback, - ModalFooter, - Button, - Modal, - ModalHeader, - FormText, -} from 'reactstrap'; - -import { UiLogicError } from '../common'; - -const DefaultProcessPrompt: React.FC = (_) => { - return ( - - - - ); -}; - -interface DefaultErrorPromptProps { - error?: string; -} - -const DefaultErrorPrompt: React.FC = (props) => { - const { t } = useTranslation(); - - let result =

{t('operationDialog.error')}

; - - if (props.error != null) { - result = ( - <> - {result} -

{props.error}

- - ); - } - - return result; -}; - -export type OperationInputOptionalError = undefined | null | string; - -export interface OperationInputErrorInfo { - [index: number]: OperationInputOptionalError; -} - -export type OperationInputValidator = ( - value: TValue, - values: (string | boolean)[] -) => OperationInputOptionalError | OperationInputErrorInfo; - -export interface OperationTextInputInfo { - type: 'text'; - password?: boolean; - label?: string; - initValue?: string; - textFieldProps?: Omit< - React.InputHTMLAttributes, - 'type' | 'value' | 'onChange' - >; - helperText?: string; - validator?: OperationInputValidator; -} - -export interface OperationBoolInputInfo { - type: 'bool'; - label: string; - initValue?: boolean; -} - -export interface OperationSelectInputInfoOption { - value: string; - label: string; - icon?: React.ReactElement; -} - -export interface OperationSelectInputInfo { - type: 'select'; - label: string; - options: OperationSelectInputInfoOption[]; - initValue?: string; -} - -export type OperationInputInfo = - | OperationTextInputInfo - | OperationBoolInputInfo - | OperationSelectInputInfo; - -interface OperationResult { - type: 'success' | 'failure'; - data: unknown; -} - -interface OperationDialogProps { - open: boolean; - close: () => void; - title: React.ReactNode; - titleColor?: 'default' | 'dangerous' | 'create' | string; - onProcess: (inputs: (string | boolean)[]) => Promise; - inputScheme?: OperationInputInfo[]; - inputPrompt?: string | (() => React.ReactNode); - processPrompt?: () => React.ReactNode; - successPrompt?: (data: unknown) => React.ReactNode; - failurePrompt?: (error: unknown) => React.ReactNode; - onSuccessAndClose?: () => void; -} - -const OperationDialog: React.FC = (props) => { - const inputScheme = props.inputScheme ?? []; - - const { t } = useTranslation(); - - type Step = 'input' | 'process' | OperationResult; - const [step, setStep] = useState('input'); - const [values, setValues] = useState<(boolean | string)[]>( - inputScheme.map((i) => { - if (i.type === 'bool') { - return i.initValue ?? false; - } else if (i.type === 'text' || i.type === 'select') { - return i.initValue ?? ''; - } else { - throw new UiLogicError('Unknown input scheme.'); - } - }) - ); - const [inputError, setInputError] = useState({}); - - const close = (): void => { - if (step !== 'process') { - props.close(); - if ( - typeof step === 'object' && - step.type === 'success' && - props.onSuccessAndClose - ) { - props.onSuccessAndClose(); - } - } else { - console.log('Attempt to close modal when processing.'); - } - }; - - const onConfirm = (): void => { - setStep('process'); - props.onProcess(values).then( - (d: unknown) => { - setStep({ - type: 'success', - data: d, - }); - }, - (e: unknown) => { - setStep({ - type: 'failure', - data: e, - }); - } - ); - }; - - let body: React.ReactNode; - if (step === 'input') { - let inputPrompt = - typeof props.inputPrompt === 'function' - ? props.inputPrompt() - : props.inputPrompt; - inputPrompt =

{inputPrompt}

; - - const updateValue = ( - index: number, - newValue: string | boolean - ): (string | boolean)[] => { - const oldValues = values; - const newValues = oldValues.slice(); - newValues[index] = newValue; - setValues(newValues); - return newValues; - }; - - const testErrorInfo = (errorInfo: OperationInputErrorInfo): boolean => { - for (let i = 0; i < inputScheme.length; i++) { - if (inputScheme[i].type === 'text' && errorInfo[i] != null) { - return true; - } - } - return false; - }; - - const calculateError = ( - oldError: OperationInputErrorInfo, - index: number, - newError: OperationInputOptionalError | OperationInputErrorInfo - ): OperationInputErrorInfo => { - if (newError === undefined) { - return oldError; - } else if (newError === null || typeof newError === 'string') { - return { ...oldError, [index]: newError }; - } else { - const newInputError: OperationInputErrorInfo = { ...oldError }; - for (const [index, error] of Object.entries(newError)) { - if (error !== undefined) { - newInputError[+index] = error as OperationInputOptionalError; - } - } - return newInputError; - } - }; - - const validateAll = (): boolean => { - let newInputError = inputError; - for (let i = 0; i < inputScheme.length; i++) { - const item = inputScheme[i]; - if (item.type === 'text') { - newInputError = calculateError( - newInputError, - i, - item.validator?.(values[i] as string, values) - ); - } - } - const result = !testErrorInfo(newInputError); - setInputError(newInputError); - return result; - }; - - body = ( - <> - - {inputPrompt} - {inputScheme.map((item, index) => { - const value = values[index]; - const error: string | undefined = ((e) => - typeof e === 'string' ? t(e) : undefined)(inputError?.[index]); - - if (item.type === 'text') { - return ( - - {item.label && {t(item.label)}} - { - const v = e.target.value; - const newValues = updateValue(index, v); - setInputError( - calculateError( - inputError, - index, - item.validator?.(v, newValues) - ) - ); - }} - invalid={error != null} - {...item.textFieldProps} - /> - {error != null && {error}} - {item.helperText && {t(item.helperText)}} - - ); - } else if (item.type === 'bool') { - return ( - - { - updateValue( - index, - (e.target as HTMLInputElement).checked - ); - }} - /> - {t(item.label)} - - ); - } else if (item.type === 'select') { - return ( - - {t(item.label)} - { - updateValue(index, event.target.value); - }} - > - {item.options.map((option, i) => { - return ( - - ); - })} - - - ); - } - })} - - - - - - - ); - } else if (step === 'process') { - body = ( - - {props.processPrompt?.() ?? } - - ); - } else { - let content: React.ReactNode; - const result = step; - if (result.type === 'success') { - content = - props.successPrompt?.(result.data) ?? t('operationDialog.success'); - if (typeof content === 'string') - content =

{content}

; - } else { - content = props.failurePrompt?.(result.data) ?? ; - if (typeof content === 'string') - content = ; - } - body = ( - <> - {content} - - - - - ); - } - - const title = typeof props.title === 'string' ? t(props.title) : props.title; - - return ( - - - {title} - - {body} - - ); -}; - -export default OperationDialog; +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { + Spinner, + Container, + ModalBody, + Label, + Input, + FormGroup, + FormFeedback, + ModalFooter, + Button, + Modal, + ModalHeader, + FormText, +} from "reactstrap"; + +import { UiLogicError } from "../common"; + +const DefaultProcessPrompt: React.FC = (_) => { + return ( + + + + ); +}; + +interface DefaultErrorPromptProps { + error?: string; +} + +const DefaultErrorPrompt: React.FC = (props) => { + const { t } = useTranslation(); + + let result =

{t("operationDialog.error")}

; + + if (props.error != null) { + result = ( + <> + {result} +

{props.error}

+ + ); + } + + return result; +}; + +export type OperationInputOptionalError = undefined | null | string; + +export interface OperationInputErrorInfo { + [index: number]: OperationInputOptionalError; +} + +export type OperationInputValidator = ( + value: TValue, + values: (string | boolean)[] +) => OperationInputOptionalError | OperationInputErrorInfo; + +export interface OperationTextInputInfo { + type: "text"; + password?: boolean; + label?: string; + initValue?: string; + textFieldProps?: Omit< + React.InputHTMLAttributes, + "type" | "value" | "onChange" + >; + helperText?: string; + validator?: OperationInputValidator; +} + +export interface OperationBoolInputInfo { + type: "bool"; + label: string; + initValue?: boolean; +} + +export interface OperationSelectInputInfoOption { + value: string; + label: string; + icon?: React.ReactElement; +} + +export interface OperationSelectInputInfo { + type: "select"; + label: string; + options: OperationSelectInputInfoOption[]; + initValue?: string; +} + +export type OperationInputInfo = + | OperationTextInputInfo + | OperationBoolInputInfo + | OperationSelectInputInfo; + +interface OperationResult { + type: "success" | "failure"; + data: unknown; +} + +interface OperationDialogProps { + open: boolean; + close: () => void; + title: React.ReactNode; + titleColor?: "default" | "dangerous" | "create" | string; + onProcess: (inputs: (string | boolean)[]) => Promise; + inputScheme?: OperationInputInfo[]; + inputPrompt?: string | (() => React.ReactNode); + processPrompt?: () => React.ReactNode; + successPrompt?: (data: unknown) => React.ReactNode; + failurePrompt?: (error: unknown) => React.ReactNode; + onSuccessAndClose?: () => void; +} + +const OperationDialog: React.FC = (props) => { + const inputScheme = props.inputScheme ?? []; + + const { t } = useTranslation(); + + type Step = "input" | "process" | OperationResult; + const [step, setStep] = useState("input"); + const [values, setValues] = useState<(boolean | string)[]>( + inputScheme.map((i) => { + if (i.type === "bool") { + return i.initValue ?? false; + } else if (i.type === "text" || i.type === "select") { + return i.initValue ?? ""; + } else { + throw new UiLogicError("Unknown input scheme."); + } + }) + ); + const [inputError, setInputError] = useState({}); + + const close = (): void => { + if (step !== "process") { + props.close(); + if ( + typeof step === "object" && + step.type === "success" && + props.onSuccessAndClose + ) { + props.onSuccessAndClose(); + } + } else { + console.log("Attempt to close modal when processing."); + } + }; + + const onConfirm = (): void => { + setStep("process"); + props.onProcess(values).then( + (d: unknown) => { + setStep({ + type: "success", + data: d, + }); + }, + (e: unknown) => { + setStep({ + type: "failure", + data: e, + }); + } + ); + }; + + let body: React.ReactNode; + if (step === "input") { + let inputPrompt = + typeof props.inputPrompt === "function" + ? props.inputPrompt() + : props.inputPrompt; + inputPrompt =

{inputPrompt}

; + + const updateValue = ( + index: number, + newValue: string | boolean + ): (string | boolean)[] => { + const oldValues = values; + const newValues = oldValues.slice(); + newValues[index] = newValue; + setValues(newValues); + return newValues; + }; + + const testErrorInfo = (errorInfo: OperationInputErrorInfo): boolean => { + for (let i = 0; i < inputScheme.length; i++) { + if (inputScheme[i].type === "text" && errorInfo[i] != null) { + return true; + } + } + return false; + }; + + const calculateError = ( + oldError: OperationInputErrorInfo, + index: number, + newError: OperationInputOptionalError | OperationInputErrorInfo + ): OperationInputErrorInfo => { + if (newError === undefined) { + return oldError; + } else if (newError === null || typeof newError === "string") { + return { ...oldError, [index]: newError }; + } else { + const newInputError: OperationInputErrorInfo = { ...oldError }; + for (const [index, error] of Object.entries(newError)) { + if (error !== undefined) { + newInputError[+index] = error as OperationInputOptionalError; + } + } + return newInputError; + } + }; + + const validateAll = (): boolean => { + let newInputError = inputError; + for (let i = 0; i < inputScheme.length; i++) { + const item = inputScheme[i]; + if (item.type === "text") { + newInputError = calculateError( + newInputError, + i, + item.validator?.(values[i] as string, values) + ); + } + } + const result = !testErrorInfo(newInputError); + setInputError(newInputError); + return result; + }; + + body = ( + <> + + {inputPrompt} + {inputScheme.map((item, index) => { + const value = values[index]; + const error: string | undefined = ((e) => + typeof e === "string" ? t(e) : undefined)(inputError?.[index]); + + if (item.type === "text") { + return ( + + {item.label && {t(item.label)}} + { + const v = e.target.value; + const newValues = updateValue(index, v); + setInputError( + calculateError( + inputError, + index, + item.validator?.(v, newValues) + ) + ); + }} + invalid={error != null} + {...item.textFieldProps} + /> + {error != null && {error}} + {item.helperText && {t(item.helperText)}} + + ); + } else if (item.type === "bool") { + return ( + + { + updateValue( + index, + (e.target as HTMLInputElement).checked + ); + }} + /> + {t(item.label)} + + ); + } else if (item.type === "select") { + return ( + + {t(item.label)} + { + updateValue(index, event.target.value); + }} + > + {item.options.map((option, i) => { + return ( + + ); + })} + + + ); + } + })} + + + + + + + ); + } else if (step === "process") { + body = ( + + {props.processPrompt?.() ?? } + + ); + } else { + let content: React.ReactNode; + const result = step; + if (result.type === "success") { + content = + props.successPrompt?.(result.data) ?? t("operationDialog.success"); + if (typeof content === "string") + content =

{content}

; + } else { + content = props.failurePrompt?.(result.data) ?? ; + if (typeof content === "string") + content = ; + } + body = ( + <> + {content} + + + + + ); + } + + const title = typeof props.title === "string" ? t(props.title) : props.title; + + return ( + + + {title} + + {body} + + ); +}; + +export default OperationDialog; diff --git a/Timeline/ClientApp/src/app/common/SearchInput.tsx b/Timeline/ClientApp/src/app/common/SearchInput.tsx index 46fb00d1..5a0b0eaa 100644 --- a/Timeline/ClientApp/src/app/common/SearchInput.tsx +++ b/Timeline/ClientApp/src/app/common/SearchInput.tsx @@ -1,63 +1,63 @@ -import React, { useCallback } from 'react'; -import clsx from 'clsx'; -import { Spinner, Input, Button } from 'reactstrap'; -import { useTranslation } from 'react-i18next'; - -export interface SearchInputProps { - value: string; - onChange: (value: string) => void; - onButtonClick: () => void; - className?: string; - loading?: boolean; - buttonText?: string; - placeholder?: string; - additionalButton?: React.ReactNode; -} - -const SearchInput: React.FC = (props) => { - const { onChange, onButtonClick } = props; - - const { t } = useTranslation(); - - const onInputChange = useCallback( - (event: React.ChangeEvent): void => { - onChange(event.currentTarget.value); - }, - [onChange] - ); - - const onInputKeyPress = useCallback( - (event: React.KeyboardEvent): void => { - if (event.key === 'Enter') { - onButtonClick(); - } - }, - [onButtonClick] - ); - - return ( -

- -

- {props.additionalButton} -

- {props.loading ? ( - - ) : ( - - )} -

- ); -}; - -export default SearchInput; +import React, { useCallback } from "react"; +import clsx from "clsx"; +import { Spinner, Input, Button } from "reactstrap"; +import { useTranslation } from "react-i18next"; + +export interface SearchInputProps { + value: string; + onChange: (value: string) => void; + onButtonClick: () => void; + className?: string; + loading?: boolean; + buttonText?: string; + placeholder?: string; + additionalButton?: React.ReactNode; +} + +const SearchInput: React.FC = (props) => { + const { onChange, onButtonClick } = props; + + const { t } = useTranslation(); + + const onInputChange = useCallback( + (event: React.ChangeEvent): void => { + onChange(event.currentTarget.value); + }, + [onChange] + ); + + const onInputKeyPress = useCallback( + (event: React.KeyboardEvent): void => { + if (event.key === "Enter") { + onButtonClick(); + } + }, + [onButtonClick] + ); + + return ( +

+ +

+ {props.additionalButton} +

+ {props.loading ? ( + + ) : ( + + )} +

+ ); +}; + +export default SearchInput; diff --git a/Timeline/ClientApp/src/app/common/TimelineLogo.tsx b/Timeline/ClientApp/src/app/common/TimelineLogo.tsx index 1ec62021..27d188fc 100644 --- a/Timeline/ClientApp/src/app/common/TimelineLogo.tsx +++ b/Timeline/ClientApp/src/app/common/TimelineLogo.tsx @@ -1,26 +1,26 @@ -import React, { SVGAttributes } from 'react'; - -export interface TimelineLogoProps extends SVGAttributes { - color?: string; -} - -const TimelineLogo: React.FC = props => { - const { color, ...forwardProps } = props; - const coercedColor = color ?? 'currentcolor'; - return ( - - ); -}; - -export default TimelineLogo; +import React, { SVGAttributes } from "react"; + +export interface TimelineLogoProps extends SVGAttributes { + color?: string; +} + +const TimelineLogo: React.FC = (props) => { + const { color, ...forwardProps } = props; + const coercedColor = color ?? "currentcolor"; + return ( + + ); +}; + +export default TimelineLogo; diff --git a/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx b/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx index 3b721985..29f6a69f 100644 --- a/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx +++ b/Timeline/ClientApp/src/app/common/UserTimelineLogo.tsx @@ -1,26 +1,26 @@ -import React, { SVGAttributes } from 'react'; - -export interface UserTimelineLogoProps extends SVGAttributes { - color?: string; -} - -const UserTimelineLogo: React.FC = props => { - const { color, ...forwardProps } = props; - const coercedColor = color ?? 'currentcolor'; - - return ( - - ); -}; - -export default UserTimelineLogo; +import React, { SVGAttributes } from "react"; + +export interface UserTimelineLogoProps extends SVGAttributes { + color?: string; +} + +const UserTimelineLogo: React.FC = (props) => { + const { color, ...forwardProps } = props; + const coercedColor = color ?? "currentcolor"; + + return ( + + ); +}; + +export default UserTimelineLogo; diff --git a/Timeline/ClientApp/src/app/common/alert-service.ts b/Timeline/ClientApp/src/app/common/alert-service.ts index 957c5e10..e4c0e653 100644 --- a/Timeline/ClientApp/src/app/common/alert-service.ts +++ b/Timeline/ClientApp/src/app/common/alert-service.ts @@ -1,61 +1,61 @@ -import React from 'react'; -import pull from 'lodash/pull'; - -export interface AlertInfo { - type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'; - message: string | React.FC | { type: 'i18n'; key: string }; - dismissTime?: number | 'never'; -} - -export interface AlertInfoEx extends AlertInfo { - id: number; -} - -export type AlertConsumer = (alerts: AlertInfoEx) => void; - -export class AlertService { - private consumers: AlertConsumer[] = []; - private savedAlerts: AlertInfoEx[] = []; - private currentId = 1; - - private produce(alert: AlertInfoEx): void { - for (const consumer of this.consumers) { - consumer(alert); - } - } - - registerConsumer(consumer: AlertConsumer): void { - this.consumers.push(consumer); - if (this.savedAlerts.length !== 0) { - for (const alert of this.savedAlerts) { - this.produce(alert); - } - this.savedAlerts = []; - } - } - - unregisterConsumer(consumer: AlertConsumer): void { - pull(this.consumers, consumer); - } - - push(alert: AlertInfo): void { - const newAlert: AlertInfoEx = { ...alert, id: this.currentId++ }; - if (this.consumers.length === 0) { - this.savedAlerts.push(newAlert); - } else { - this.produce(newAlert); - } - } -} - -export const alertService = new AlertService(); - -export function pushAlert(alert: AlertInfo): void { - alertService.push(alert); -} - -export const kAlertHostId = 'alert-host'; - -export function getAlertHost(): HTMLElement | null { - return document.getElementById(kAlertHostId); -} +import React from "react"; +import pull from "lodash/pull"; + +export interface AlertInfo { + type?: "primary" | "secondary" | "success" | "danger" | "warning" | "info"; + message: string | React.FC | { type: "i18n"; key: string }; + dismissTime?: number | "never"; +} + +export interface AlertInfoEx extends AlertInfo { + id: number; +} + +export type AlertConsumer = (alerts: AlertInfoEx) => void; + +export class AlertService { + private consumers: AlertConsumer[] = []; + private savedAlerts: AlertInfoEx[] = []; + private currentId = 1; + + private produce(alert: AlertInfoEx): void { + for (const consumer of this.consumers) { + consumer(alert); + } + } + + registerConsumer(consumer: AlertConsumer): void { + this.consumers.push(consumer); + if (this.savedAlerts.length !== 0) { + for (const alert of this.savedAlerts) { + this.produce(alert); + } + this.savedAlerts = []; + } + } + + unregisterConsumer(consumer: AlertConsumer): void { + pull(this.consumers, consumer); + } + + push(alert: AlertInfo): void { + const newAlert: AlertInfoEx = { ...alert, id: this.currentId++ }; + if (this.consumers.length === 0) { + this.savedAlerts.push(newAlert); + } else { + this.produce(newAlert); + } + } +} + +export const alertService = new AlertService(); + +export function pushAlert(alert: AlertInfo): void { + alertService.push(alert); +} + +export const kAlertHostId = "alert-host"; + +export function getAlertHost(): HTMLElement | null { + return document.getElementById(kAlertHostId); +} diff --git a/Timeline/ClientApp/src/app/common/alert.sass b/Timeline/ClientApp/src/app/common/alert.sass index c3560b87..5b6e65c2 100644 --- a/Timeline/ClientApp/src/app/common/alert.sass +++ b/Timeline/ClientApp/src/app/common/alert.sass @@ -1,15 +1,15 @@ -.alert-container - position: fixed - z-index: $zindex-popover - -@include media-breakpoint-up(sm) - .alert-container - bottom: 0 - right: 0 - -@include media-breakpoint-down(sm) - .alert-container - bottom: 0 - right: 0 - left: 0 - text-align: center +.alert-container + position: fixed + z-index: $zindex-popover + +@include media-breakpoint-up(sm) + .alert-container + bottom: 0 + right: 0 + +@include media-breakpoint-down(sm) + .alert-container + bottom: 0 + right: 0 + left: 0 + text-align: center diff --git a/Timeline/ClientApp/src/app/common/common.sass b/Timeline/ClientApp/src/app/common/common.sass index 78e6fd14..15d34d7c 100644 --- a/Timeline/ClientApp/src/app/common/common.sass +++ b/Timeline/ClientApp/src/app/common/common.sass @@ -1,33 +1,33 @@ -.image-cropper-container - position: relative - box-sizing: border-box - user-select: none - -.image-cropper-container img - position: absolute - left: 0 - top: 0 - width: 100% - height: 100% - -.image-cropper-mask-container - position: absolute - left: 0 - top: 0 - right: 0 - bottom: 0 - overflow: hidden - -.image-cropper-mask - position: absolute - box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%) - touch-action: none - -.image-cropper-handler - position: absolute - width: 26px - height: 26px - border: black solid 2px - border-radius: 50% - background: white - touch-action: none +.image-cropper-container + position: relative + box-sizing: border-box + user-select: none + +.image-cropper-container img + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + +.image-cropper-mask-container + position: absolute + left: 0 + top: 0 + right: 0 + bottom: 0 + overflow: hidden + +.image-cropper-mask + position: absolute + box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%) + touch-action: none + +.image-cropper-handler + position: absolute + width: 26px + height: 26px + border: black solid 2px + border-radius: 50% + background: white + touch-action: none diff --git a/Timeline/ClientApp/src/app/data/DataHub.ts b/Timeline/ClientApp/src/app/data/DataHub.ts index bfb96d1a..e6be740d 100644 --- a/Timeline/ClientApp/src/app/data/DataHub.ts +++ b/Timeline/ClientApp/src/app/data/DataHub.ts @@ -1,198 +1,198 @@ -import { pull } from 'lodash'; -import { Observable, BehaviorSubject, combineLatest } from 'rxjs'; -import { map } from 'rxjs/operators'; - -export type Subscriber = (data: TData) => void; - -export type WithSyncStatus = T & { syncing: boolean }; - -export class DataLine { - private _current: TData | undefined = undefined; - - private _syncingSubject = new BehaviorSubject(false); - - private _observers: Subscriber[] = []; - - constructor( - private config?: { destroyable?: (value: TData | undefined) => boolean } - ) {} - - private subscribe(subscriber: Subscriber): void { - this._observers.push(subscriber); - if (this._current !== undefined) { - subscriber(this._current); - } - } - - private unsubscribe(subscriber: Subscriber): void { - if (!this._observers.includes(subscriber)) return; - pull(this._observers, subscriber); - } - - getObservable(): Observable { - return new Observable((observer) => { - const f = (data: TData): void => { - observer.next(data); - }; - this.subscribe(f); - - return () => { - this.unsubscribe(f); - }; - }); - } - - getSyncStatusObservable(): Observable { - return this._syncingSubject.asObservable(); - } - - getDataWithSyncStatusObservable(): Observable> { - return combineLatest([ - this.getObservable(), - this.getSyncStatusObservable(), - ]).pipe( - map(([data, syncing]) => ({ - ...data, - syncing, - })) - ); - } - - get value(): TData | undefined { - return this._current; - } - - next(value: TData): void { - this._current = value; - this._observers.forEach((observer) => observer(value)); - } - - get isSyncing(): boolean { - return this._syncingSubject.value; - } - - beginSync(): void { - if (!this._syncingSubject.value) { - this._syncingSubject.next(true); - } - } - - endSync(): void { - if (this._syncingSubject.value) { - this._syncingSubject.next(false); - } - } - - get destroyable(): boolean { - const customDestroyable = this.config?.destroyable; - - return ( - this._observers.length === 0 && - !this._syncingSubject.value && - (customDestroyable != null ? customDestroyable(this._current) : true) - ); - } - - endSyncAndNext(value: TData): void { - this.endSync(); - this.next(value); - } -} - -export class DataHub { - private keyToString: (key: TKey) => string; - private setup?: (key: TKey, line: DataLine) => (() => void) | void; - private destroyable?: (key: TKey, value: TData | undefined) => boolean; - - private readonly subscriptionLineMap = new Map>(); - - private cleanTimerId = 0; - - // setup is called after creating line and if it returns a function as destroyer, then when the line is destroyed the destroyer will be called. - constructor(config?: { - keyToString?: (key: TKey) => string; - setup?: (key: TKey, line: DataLine) => void; - destroyable?: (key: TKey, value: TData | undefined) => boolean; - }) { - this.keyToString = - config?.keyToString ?? - ((value): string => { - if (typeof value === 'string') return value; - else - throw new Error( - 'Default keyToString function only pass string value.' - ); - }); - - this.setup = config?.setup; - this.destroyable = config?.destroyable; - } - - private cleanLines(): void { - const toDelete: string[] = []; - for (const [key, line] of this.subscriptionLineMap.entries()) { - if (line.destroyable) { - toDelete.push(key); - } - } - - if (toDelete.length === 0) return; - - for (const key of toDelete) { - this.subscriptionLineMap.delete(key); - } - - if (this.subscriptionLineMap.size === 0) { - window.clearInterval(this.cleanTimerId); - this.cleanTimerId = 0; - } - } - - private createLine(key: TKey, useSetup = true): DataLine { - const keyString = this.keyToString(key); - const { setup, destroyable } = this; - const newLine = new DataLine({ - destroyable: - destroyable != null ? (value) => destroyable(key, value) : undefined, - }); - this.subscriptionLineMap.set(keyString, newLine); - if (useSetup) { - setup?.(key, newLine); - } - if (this.subscriptionLineMap.size === 1) { - this.cleanTimerId = window.setInterval(this.cleanLines.bind(this), 20000); - } - return newLine; - } - - getObservable(key: TKey): Observable { - return this.getLineOrCreateWithSetup(key).getObservable(); - } - - getSyncStatusObservable(key: TKey): Observable { - return this.getLineOrCreateWithSetup(key).getSyncStatusObservable(); - } - - getDataWithSyncStatusObservable( - key: TKey - ): Observable> { - return this.getLineOrCreateWithSetup(key).getDataWithSyncStatusObservable(); - } - - getLine(key: TKey): DataLine | null { - const keyString = this.keyToString(key); - return this.subscriptionLineMap.get(keyString) ?? null; - } - - getLineOrCreateWithSetup(key: TKey): DataLine { - const keyString = this.keyToString(key); - return this.subscriptionLineMap.get(keyString) ?? this.createLine(key); - } - - getLineOrCreateWithoutSetup(key: TKey): DataLine { - const keyString = this.keyToString(key); - return ( - this.subscriptionLineMap.get(keyString) ?? this.createLine(key, false) - ); - } -} +import { pull } from "lodash"; +import { Observable, BehaviorSubject, combineLatest } from "rxjs"; +import { map } from "rxjs/operators"; + +export type Subscriber = (data: TData) => void; + +export type WithSyncStatus = T & { syncing: boolean }; + +export class DataLine { + private _current: TData | undefined = undefined; + + private _syncingSubject = new BehaviorSubject(false); + + private _observers: Subscriber[] = []; + + constructor( + private config?: { destroyable?: (value: TData | undefined) => boolean } + ) {} + + private subscribe(subscriber: Subscriber): void { + this._observers.push(subscriber); + if (this._current !== undefined) { + subscriber(this._current); + } + } + + private unsubscribe(subscriber: Subscriber): void { + if (!this._observers.includes(subscriber)) return; + pull(this._observers, subscriber); + } + + getObservable(): Observable { + return new Observable((observer) => { + const f = (data: TData): void => { + observer.next(data); + }; + this.subscribe(f); + + return () => { + this.unsubscribe(f); + }; + }); + } + + getSyncStatusObservable(): Observable { + return this._syncingSubject.asObservable(); + } + + getDataWithSyncStatusObservable(): Observable> { + return combineLatest([ + this.getObservable(), + this.getSyncStatusObservable(), + ]).pipe( + map(([data, syncing]) => ({ + ...data, + syncing, + })) + ); + } + + get value(): TData | undefined { + return this._current; + } + + next(value: TData): void { + this._current = value; + this._observers.forEach((observer) => observer(value)); + } + + get isSyncing(): boolean { + return this._syncingSubject.value; + } + + beginSync(): void { + if (!this._syncingSubject.value) { + this._syncingSubject.next(true); + } + } + + endSync(): void { + if (this._syncingSubject.value) { + this._syncingSubject.next(false); + } + } + + get destroyable(): boolean { + const customDestroyable = this.config?.destroyable; + + return ( + this._observers.length === 0 && + !this._syncingSubject.value && + (customDestroyable != null ? customDestroyable(this._current) : true) + ); + } + + endSyncAndNext(value: TData): void { + this.endSync(); + this.next(value); + } +} + +export class DataHub { + private keyToString: (key: TKey) => string; + private setup?: (key: TKey, line: DataLine) => (() => void) | void; + private destroyable?: (key: TKey, value: TData | undefined) => boolean; + + private readonly subscriptionLineMap = new Map>(); + + private cleanTimerId = 0; + + // setup is called after creating line and if it returns a function as destroyer, then when the line is destroyed the destroyer will be called. + constructor(config?: { + keyToString?: (key: TKey) => string; + setup?: (key: TKey, line: DataLine) => void; + destroyable?: (key: TKey, value: TData | undefined) => boolean; + }) { + this.keyToString = + config?.keyToString ?? + ((value): string => { + if (typeof value === "string") return value; + else + throw new Error( + "Default keyToString function only pass string value." + ); + }); + + this.setup = config?.setup; + this.destroyable = config?.destroyable; + } + + private cleanLines(): void { + const toDelete: string[] = []; + for (const [key, line] of this.subscriptionLineMap.entries()) { + if (line.destroyable) { + toDelete.push(key); + } + } + + if (toDelete.length === 0) return; + + for (const key of toDelete) { + this.subscriptionLineMap.delete(key); + } + + if (this.subscriptionLineMap.size === 0) { + window.clearInterval(this.cleanTimerId); + this.cleanTimerId = 0; + } + } + + private createLine(key: TKey, useSetup = true): DataLine { + const keyString = this.keyToString(key); + const { setup, destroyable } = this; + const newLine = new DataLine({ + destroyable: + destroyable != null ? (value) => destroyable(key, value) : undefined, + }); + this.subscriptionLineMap.set(keyString, newLine); + if (useSetup) { + setup?.(key, newLine); + } + if (this.subscriptionLineMap.size === 1) { + this.cleanTimerId = window.setInterval(this.cleanLines.bind(this), 20000); + } + return newLine; + } + + getObservable(key: TKey): Observable { + return this.getLineOrCreateWithSetup(key).getObservable(); + } + + getSyncStatusObservable(key: TKey): Observable { + return this.getLineOrCreateWithSetup(key).getSyncStatusObservable(); + } + + getDataWithSyncStatusObservable( + key: TKey + ): Observable> { + return this.getLineOrCreateWithSetup(key).getDataWithSyncStatusObservable(); + } + + getLine(key: TKey): DataLine | null { + const keyString = this.keyToString(key); + return this.subscriptionLineMap.get(keyString) ?? null; + } + + getLineOrCreateWithSetup(key: TKey): DataLine { + const keyString = this.keyToString(key); + return this.subscriptionLineMap.get(keyString) ?? this.createLine(key); + } + + getLineOrCreateWithoutSetup(key: TKey): DataLine { + const keyString = this.keyToString(key); + return ( + this.subscriptionLineMap.get(keyString) ?? this.createLine(key, false) + ); + } +} diff --git a/Timeline/ClientApp/src/app/data/common.ts b/Timeline/ClientApp/src/app/data/common.ts index 87984e21..8d52abe5 100644 --- a/Timeline/ClientApp/src/app/data/common.ts +++ b/Timeline/ClientApp/src/app/data/common.ts @@ -1,23 +1,23 @@ -import localforage from 'localforage'; - -import { HttpNetworkError } from '../http/common'; - -export const dataStorage = localforage.createInstance({ - name: 'data', - description: 'Database for offline data.', - driver: localforage.INDEXEDDB, -}); - -export class ForbiddenError extends Error { - constructor(message?: string) { - super(message); - } -} - -export function throwIfNotNetworkError(e: unknown): void { - if (!(e instanceof HttpNetworkError)) { - throw e; - } -} - -export type BlobOrStatus = Blob | 'loading' | 'error'; +import localforage from "localforage"; + +import { HttpNetworkError } from "../http/common"; + +export const dataStorage = localforage.createInstance({ + name: "data", + description: "Database for offline data.", + driver: localforage.INDEXEDDB, +}); + +export class ForbiddenError extends Error { + constructor(message?: string) { + super(message); + } +} + +export function throwIfNotNetworkError(e: unknown): void { + if (!(e instanceof HttpNetworkError)) { + throw e; + } +} + +export type BlobOrStatus = Blob | "loading" | "error"; diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts index 216d903c..ed6cffd6 100644 --- a/Timeline/ClientApp/src/app/data/timeline.ts +++ b/Timeline/ClientApp/src/app/data/timeline.ts @@ -1,697 +1,697 @@ -import React from 'react'; -import XRegExp from 'xregexp'; -import { Observable, from, combineLatest, of } from 'rxjs'; -import { map, switchMap, startWith } from 'rxjs/operators'; -import { uniqBy } from 'lodash'; - -import { convertError } from '../utilities/rxjs'; - -import { dataStorage, throwIfNotNetworkError, BlobOrStatus } from './common'; -import { DataHub, WithSyncStatus } from './DataHub'; - -import { UserAuthInfo, checkLogin, userService, userInfoService } from './user'; - -export { kTimelineVisibilities } from '../http/timeline'; - -export type { TimelineVisibility } from '../http/timeline'; - -import { - TimelineVisibility, - HttpTimelineInfo, - HttpTimelinePatchRequest, - HttpTimelinePostPostRequest, - HttpTimelinePostPostRequestContent, - HttpTimelinePostPostRequestTextContent, - HttpTimelinePostPostRequestImageContent, - HttpTimelinePostInfo, - HttpTimelinePostTextContent, - getHttpTimelineClient, - HttpTimelineNotExistError, - HttpTimelineNameConflictError, -} from '../http/timeline'; -import { BlobWithEtag, NotModified, HttpForbiddenError } from '../http/common'; -import { HttpUser } from '../http/user'; - -export type TimelineInfo = HttpTimelineInfo; -export type TimelineChangePropertyRequest = HttpTimelinePatchRequest; -export type TimelineCreatePostRequest = HttpTimelinePostPostRequest; -export type TimelineCreatePostContent = HttpTimelinePostPostRequestContent; -export type TimelineCreatePostTextContent = HttpTimelinePostPostRequestTextContent; -export type TimelineCreatePostImageContent = HttpTimelinePostPostRequestImageContent; - -export type TimelinePostTextContent = HttpTimelinePostTextContent; - -export interface TimelinePostImageContent { - type: 'image'; - data: BlobOrStatus; -} - -export type TimelinePostContent = - | TimelinePostTextContent - | TimelinePostImageContent; - -export interface TimelinePostInfo { - id: number; - content: TimelinePostContent; - time: Date; - lastUpdated: Date; - author: HttpUser; -} - -export const timelineVisibilityTooltipTranslationMap: Record< - TimelineVisibility, - string -> = { - Public: 'timeline.visibilityTooltip.public', - Register: 'timeline.visibilityTooltip.register', - Private: 'timeline.visibilityTooltip.private', -}; - -export class TimelineNotExistError extends Error {} -export class TimelineNameConflictError extends Error {} - -export type TimelineWithSyncStatus = WithSyncStatus< - | { - type: 'cache'; - timeline: TimelineInfo; - } - | { - type: 'offline' | 'synced'; - timeline: TimelineInfo | null; - } ->; - -export type TimelinePostsWithSyncState = WithSyncStatus<{ - type: - | 'cache' - | 'offline' // Sync failed and use cache. - | 'synced' // Sync succeeded. - | 'forbid' // The list is forbidden to see. - | 'notexist'; // The timeline does not exist. - posts: TimelinePostInfo[]; -}>; - -type TimelineData = Omit & { - owner: string; - members: string[]; -}; - -type TimelinePostData = Omit & { - author: string; -}; - -export class TimelineService { - private getCachedTimeline( - timelineName: string - ): Promise { - return dataStorage.getItem(`timeline.${timelineName}`); - } - - private saveTimeline( - timelineName: string, - data: TimelineData - ): Promise { - return dataStorage - .setItem(`timeline.${timelineName}`, data) - .then(); - } - - private convertHttpTimelineToData(timeline: HttpTimelineInfo): TimelineData { - return { - ...timeline, - owner: timeline.owner.username, - members: timeline.members.map((m) => m.username), - }; - } - - private async syncTimeline(timelineName: string): Promise { - const line = this._timelineHub.getLineOrCreateWithoutSetup(timelineName); - if (line.isSyncing) return; - - if (line.value == undefined) { - const cache = await this.getCachedTimeline(timelineName); - if (cache != null) { - line.next({ type: 'cache', timeline: cache }); - } - } - - try { - const httpTimeline = await getHttpTimelineClient().getTimeline( - timelineName - ); - - [httpTimeline.owner, ...httpTimeline.members].forEach( - (user) => void userInfoService.saveUser(user) - ); - - const timeline = this.convertHttpTimelineToData(httpTimeline); - await this.saveTimeline(timelineName, timeline); - line.endSyncAndNext({ type: 'synced', timeline }); - } catch (e) { - if (e instanceof HttpTimelineNotExistError) { - line.endSyncAndNext({ type: 'synced', timeline: null }); - } else { - const cache = await this.getCachedTimeline(timelineName); - if (cache == null) { - line.endSyncAndNext({ type: 'offline', timeline: null }); - } else { - line.endSyncAndNext({ type: 'offline', timeline: cache }); - } - throwIfNotNetworkError(e); - } - } - } - - private _timelineHub = new DataHub< - string, - | { - type: 'cache'; - timeline: TimelineData; - } - | { - type: 'offline' | 'synced'; - timeline: TimelineData | null; - } - >({ - setup: (key) => { - void this.syncTimeline(key); - }, - }); - - getTimeline$(timelineName: string): Observable { - return this._timelineHub.getDataWithSyncStatusObservable(timelineName).pipe( - switchMap((state) => { - const { timeline } = state; - if (timeline != null) { - return combineLatest( - [timeline.owner, ...timeline.members].map((u) => - userInfoService.getUser$(u) - ) - ).pipe( - map((users) => { - return { - ...state, - timeline: { - ...timeline, - owner: users[0], - members: users.slice(1), - }, - }; - }) - ); - } else { - return of(state as TimelineWithSyncStatus); - } - }) - ); - } - - createTimeline(timelineName: string): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient().postTimeline( - { - name: timelineName, - }, - user.token - ) - ).pipe( - convertError(HttpTimelineNameConflictError, TimelineNameConflictError) - ); - } - - changeTimelineProperty( - timelineName: string, - req: TimelineChangePropertyRequest - ): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient() - .patchTimeline(timelineName, req, user.token) - .then((timeline) => { - void this.syncTimeline(timelineName); - return timeline; - }) - ); - } - - deleteTimeline(timelineName: string): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient().deleteTimeline(timelineName, user.token) - ); - } - - addMember(timelineName: string, username: string): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient() - .memberPut(timelineName, username, user.token) - .then(() => { - void this.syncTimeline(timelineName); - }) - ); - } - - removeMember(timelineName: string, username: string): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient() - .memberDelete(timelineName, username, user.token) - .then(() => { - void this.syncTimeline(timelineName); - }) - ); - } - - private convertHttpPostToData(post: HttpTimelinePostInfo): TimelinePostData { - return { - ...post, - author: post.author.username, - }; - } - - private convertHttpPostToDataList( - posts: HttpTimelinePostInfo[] - ): TimelinePostData[] { - return posts.map((post) => this.convertHttpPostToData(post)); - } - - private getCachedPosts( - timelineName: string - ): Promise { - return dataStorage.getItem( - `timeline.${timelineName}.posts` - ); - } - - private savePosts( - timelineName: string, - data: TimelinePostData[] - ): Promise { - return dataStorage - .setItem(`timeline.${timelineName}.posts`, data) - .then(); - } - - private async syncPosts(timelineName: string): Promise { - const line = this._postsHub.getLineOrCreateWithoutSetup(timelineName); - if (line.isSyncing) return; - line.beginSync(); - - if (line.value == null) { - const cache = await this.getCachedPosts(timelineName); - if (cache != null) { - line.next({ type: 'cache', posts: cache }); - } - } - - const now = new Date(); - - const lastUpdatedTime = await dataStorage.getItem( - `timeline.${timelineName}.lastUpdated` - ); - - try { - if (lastUpdatedTime == null) { - const httpPosts = await getHttpTimelineClient().listPost( - timelineName, - userService.currentUser?.token - ); - - uniqBy( - httpPosts.map((post) => post.author), - 'username' - ).forEach((user) => void userInfoService.saveUser(user)); - - const posts = this.convertHttpPostToDataList(httpPosts); - await this.savePosts(timelineName, posts); - await dataStorage.setItem( - `timeline.${timelineName}.lastUpdated`, - now - ); - - line.endSyncAndNext({ type: 'synced', posts }); - } else { - const httpPosts = await getHttpTimelineClient().listPost( - timelineName, - userService.currentUser?.token, - { - modifiedSince: lastUpdatedTime, - includeDeleted: true, - } - ); - - const deletedIds = httpPosts.filter((p) => p.deleted).map((p) => p.id); - const changed = httpPosts.filter( - (p): p is HttpTimelinePostInfo => !p.deleted - ); - - uniqBy( - httpPosts - .map((post) => post.author) - .filter((u): u is HttpUser => u != null), - 'username' - ).forEach((user) => void userInfoService.saveUser(user)); - - const cache = (await this.getCachedPosts(timelineName)) ?? []; - - const posts = cache.filter((p) => !deletedIds.includes(p.id)); - - for (const changedPost of changed) { - const savedChangedPostIndex = posts.findIndex( - (p) => p.id === changedPost.id - ); - if (savedChangedPostIndex === -1) { - posts.push(this.convertHttpPostToData(changedPost)); - } else { - posts[savedChangedPostIndex] = this.convertHttpPostToData( - changedPost - ); - } - } - - await this.savePosts(timelineName, posts); - await dataStorage.setItem( - `timeline.${timelineName}.lastUpdated`, - now - ); - line.endSyncAndNext({ type: 'synced', posts }); - } - } catch (e) { - if (e instanceof HttpTimelineNotExistError) { - line.endSyncAndNext({ type: 'notexist', posts: [] }); - } else if (e instanceof HttpForbiddenError) { - line.endSyncAndNext({ type: 'forbid', posts: [] }); - } else { - const cache = await this.getCachedPosts(timelineName); - if (cache == null) { - line.endSyncAndNext({ type: 'offline', posts: [] }); - } else { - line.endSyncAndNext({ type: 'offline', posts: cache }); - } - throwIfNotNetworkError(e); - } - } - } - - private _postsHub = new DataHub< - string, - { - type: 'cache' | 'offline' | 'synced' | 'forbid' | 'notexist'; - posts: TimelinePostData[]; - } - >({ - setup: (key) => { - void this.syncPosts(key); - }, - }); - - getPosts$(timelineName: string): Observable { - return this._postsHub.getDataWithSyncStatusObservable(timelineName).pipe( - switchMap((state) => { - if (state.posts.length === 0) { - return of({ - ...state, - posts: [], - }); - } - - return combineLatest([ - combineLatest( - state.posts.map((post) => userInfoService.getUser$(post.author)) - ), - combineLatest( - state.posts.map((post) => { - if (post.content.type === 'image') { - return this.getPostData$(timelineName, post.id); - } else { - return of(null); - } - }) - ), - ]).pipe( - map(([authors, datas]) => { - return { - ...state, - posts: state.posts.map((post, i) => { - const { content } = post; - - return { - ...post, - author: authors[i], - content: (() => { - if (content.type === 'text') return content; - else - return { - type: 'image', - data: datas[i], - } as TimelinePostImageContent; - })(), - }; - }), - }; - }) - ); - }) - ); - } - - private getCachedPostData(key: { - timelineName: string; - postId: number; - }): Promise { - return dataStorage.getItem( - `timeline.${key.timelineName}.post.${key.postId}.data` - ); - } - - private savePostData( - key: { - timelineName: string; - postId: number; - }, - data: BlobWithEtag - ): Promise { - return dataStorage - .setItem( - `timeline.${key.timelineName}.post.${key.postId}.data`, - data - ) - .then(); - } - - private async syncPostData(key: { - timelineName: string; - postId: number; - }): Promise { - const line = this._postDataHub.getLineOrCreateWithoutSetup(key); - if (line.isSyncing) return; - line.beginSync(); - - const cache = await this.getCachedPostData(key); - if (line.value == null) { - if (cache != null) { - line.next({ type: 'cache', data: cache.data }); - } - } - - if (cache == null) { - try { - const res = await getHttpTimelineClient().getPostData( - key.timelineName, - key.postId - ); - await this.savePostData(key, res); - line.endSyncAndNext({ data: res.data, type: 'synced' }); - } catch (e) { - line.endSyncAndNext({ type: 'offline' }); - throwIfNotNetworkError(e); - } - } else { - try { - const res = await getHttpTimelineClient().getPostData( - key.timelineName, - key.postId, - cache.etag - ); - if (res instanceof NotModified) { - line.endSyncAndNext({ data: cache.data, type: 'synced' }); - } else { - await this.savePostData(key, res); - line.endSyncAndNext({ data: res.data, type: 'synced' }); - } - } catch (e) { - line.endSyncAndNext({ data: cache.data, type: 'offline' }); - throwIfNotNetworkError(e); - } - } - } - - private _postDataHub = new DataHub< - { timelineName: string; postId: number }, - | { data: Blob; type: 'cache' | 'synced' | 'offline' } - | { data?: undefined; type: 'notexist' | 'offline' } - >({ - keyToString: (key) => `${key.timelineName}.${key.postId}`, - setup: (key) => { - void this.syncPostData(key); - }, - }); - - getPostData$(timelineName: string, postId: number): Observable { - return this._postDataHub.getObservable({ timelineName, postId }).pipe( - map((state): BlobOrStatus => state.data ?? 'error'), - startWith('loading') - ); - } - - createPost( - timelineName: string, - request: TimelineCreatePostRequest - ): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient() - .postPost(timelineName, request, user.token) - .then(() => { - void this.syncPosts(timelineName); - }) - ); - } - - deletePost(timelineName: string, postId: number): Observable { - const user = checkLogin(); - return from( - getHttpTimelineClient() - .deletePost(timelineName, postId, user.token) - .then(() => { - void this.syncPosts(timelineName); - }) - ); - } - - isMemberOf(username: string, timeline: TimelineInfo): boolean { - return timeline.members.findIndex((m) => m.username == username) >= 0; - } - - hasReadPermission( - user: UserAuthInfo | null | undefined, - timeline: TimelineInfo - ): boolean { - if (user != null && user.administrator) return true; - - const { visibility } = timeline; - if (visibility === 'Public') { - return true; - } else if (visibility === 'Register') { - if (user != null) return true; - } else if (visibility === 'Private') { - if ( - user != null && - (user.username === timeline.owner.username || - this.isMemberOf(user.username, timeline)) - ) { - return true; - } - } - return false; - } - - hasPostPermission( - user: UserAuthInfo | null | undefined, - timeline: TimelineInfo - ): boolean { - if (user != null && user.administrator) return true; - - return ( - user != null && - (timeline.owner.username === user.username || - this.isMemberOf(user.username, timeline)) - ); - } - - hasManagePermission( - user: UserAuthInfo | null | undefined, - timeline: TimelineInfo - ): boolean { - if (user != null && user.administrator) return true; - - return user != null && user.username == timeline.owner.username; - } - - hasModifyPostPermission( - user: UserAuthInfo | null | undefined, - timeline: TimelineInfo, - post: TimelinePostInfo - ): boolean { - if (user != null && user.administrator) return true; - - return ( - user != null && - (user.username === timeline.owner.username || - user.username === post.author.username) - ); - } -} - -export const timelineService = new TimelineService(); - -const timelineNameReg = XRegExp('^[-_\\p{L}]*$', 'u'); - -export function validateTimelineName(name: string): boolean { - return timelineNameReg.test(name); -} - -export function useTimelineInfo( - timelineName: string -): TimelineWithSyncStatus | undefined { - const [state, setState] = React.useState( - undefined - ); - React.useEffect(() => { - const subscription = timelineService - .getTimeline$(timelineName) - .subscribe((data) => { - setState(data); - }); - return () => { - subscription.unsubscribe(); - }; - }, [timelineName]); - return state; -} - -export function usePostList( - timelineName: string | null | undefined -): TimelinePostsWithSyncState | undefined { - const [state, setState] = React.useState< - TimelinePostsWithSyncState | undefined - >(undefined); - React.useEffect(() => { - if (timelineName == null) { - setState(undefined); - return; - } - - const subscription = timelineService - .getPosts$(timelineName) - .subscribe((data) => { - setState(data); - }); - return () => { - subscription.unsubscribe(); - }; - }, [timelineName]); - return state; -} - -export async function getAllCachedTimelineNames(): Promise { - const keys = await dataStorage.keys(); - return keys - .filter( - (key) => - key.startsWith('timeline.') && (key.match(/\./g) ?? []).length === 1 - ) - .map((key) => key.substr('timeline.'.length)); -} +import React from "react"; +import XRegExp from "xregexp"; +import { Observable, from, combineLatest, of } from "rxjs"; +import { map, switchMap, startWith } from "rxjs/operators"; +import { uniqBy } from "lodash"; + +import { convertError } from "../utilities/rxjs"; + +import { dataStorage, throwIfNotNetworkError, BlobOrStatus } from "./common"; +import { DataHub, WithSyncStatus } from "./DataHub"; + +import { UserAuthInfo, checkLogin, userService, userInfoService } from "./user"; + +export { kTimelineVisibilities } from "../http/timeline"; + +export type { TimelineVisibility } from "../http/timeline"; + +import { + TimelineVisibility, + HttpTimelineInfo, + HttpTimelinePatchRequest, + HttpTimelinePostPostRequest, + HttpTimelinePostPostRequestContent, + HttpTimelinePostPostRequestTextContent, + HttpTimelinePostPostRequestImageContent, + HttpTimelinePostInfo, + HttpTimelinePostTextContent, + getHttpTimelineClient, + HttpTimelineNotExistError, + HttpTimelineNameConflictError, +} from "../http/timeline"; +import { BlobWithEtag, NotModified, HttpForbiddenError } from "../http/common"; +import { HttpUser } from "../http/user"; + +export type TimelineInfo = HttpTimelineInfo; +export type TimelineChangePropertyRequest = HttpTimelinePatchRequest; +export type TimelineCreatePostRequest = HttpTimelinePostPostRequest; +export type TimelineCreatePostContent = HttpTimelinePostPostRequestContent; +export type TimelineCreatePostTextContent = HttpTimelinePostPostRequestTextContent; +export type TimelineCreatePostImageContent = HttpTimelinePostPostRequestImageContent; + +export type TimelinePostTextContent = HttpTimelinePostTextContent; + +export interface TimelinePostImageContent { + type: "image"; + data: BlobOrStatus; +} + +export type TimelinePostContent = + | TimelinePostTextContent + | TimelinePostImageContent; + +export interface TimelinePostInfo { + id: number; + content: TimelinePostContent; + time: Date; + lastUpdated: Date; + author: HttpUser; +} + +export const timelineVisibilityTooltipTranslationMap: Record< + TimelineVisibility, + string +> = { + Public: "timeline.visibilityTooltip.public", + Register: "timeline.visibilityTooltip.register", + Private: "timeline.visibilityTooltip.private", +}; + +export class TimelineNotExistError extends Error {} +export class TimelineNameConflictError extends Error {} + +export type TimelineWithSyncStatus = WithSyncStatus< + | { + type: "cache"; + timeline: TimelineInfo; + } + | { + type: "offline" | "synced"; + timeline: TimelineInfo | null; + } +>; + +export type TimelinePostsWithSyncState = WithSyncStatus<{ + type: + | "cache" + | "offline" // Sync failed and use cache. + | "synced" // Sync succeeded. + | "forbid" // The list is forbidden to see. + | "notexist"; // The timeline does not exist. + posts: TimelinePostInfo[]; +}>; + +type TimelineData = Omit & { + owner: string; + members: string[]; +}; + +type TimelinePostData = Omit & { + author: string; +}; + +export class TimelineService { + private getCachedTimeline( + timelineName: string + ): Promise { + return dataStorage.getItem(`timeline.${timelineName}`); + } + + private saveTimeline( + timelineName: string, + data: TimelineData + ): Promise { + return dataStorage + .setItem(`timeline.${timelineName}`, data) + .then(); + } + + private convertHttpTimelineToData(timeline: HttpTimelineInfo): TimelineData { + return { + ...timeline, + owner: timeline.owner.username, + members: timeline.members.map((m) => m.username), + }; + } + + private async syncTimeline(timelineName: string): Promise { + const line = this._timelineHub.getLineOrCreateWithoutSetup(timelineName); + if (line.isSyncing) return; + + if (line.value == undefined) { + const cache = await this.getCachedTimeline(timelineName); + if (cache != null) { + line.next({ type: "cache", timeline: cache }); + } + } + + try { + const httpTimeline = await getHttpTimelineClient().getTimeline( + timelineName + ); + + [httpTimeline.owner, ...httpTimeline.members].forEach( + (user) => void userInfoService.saveUser(user) + ); + + const timeline = this.convertHttpTimelineToData(httpTimeline); + await this.saveTimeline(timelineName, timeline); + line.endSyncAndNext({ type: "synced", timeline }); + } catch (e) { + if (e instanceof HttpTimelineNotExistError) { + line.endSyncAndNext({ type: "synced", timeline: null }); + } else { + const cache = await this.getCachedTimeline(timelineName); + if (cache == null) { + line.endSyncAndNext({ type: "offline", timeline: null }); + } else { + line.endSyncAndNext({ type: "offline", timeline: cache }); + } + throwIfNotNetworkError(e); + } + } + } + + private _timelineHub = new DataHub< + string, + | { + type: "cache"; + timeline: TimelineData; + } + | { + type: "offline" | "synced"; + timeline: TimelineData | null; + } + >({ + setup: (key) => { + void this.syncTimeline(key); + }, + }); + + getTimeline$(timelineName: string): Observable { + return this._timelineHub.getDataWithSyncStatusObservable(timelineName).pipe( + switchMap((state) => { + const { timeline } = state; + if (timeline != null) { + return combineLatest( + [timeline.owner, ...timeline.members].map((u) => + userInfoService.getUser$(u) + ) + ).pipe( + map((users) => { + return { + ...state, + timeline: { + ...timeline, + owner: users[0], + members: users.slice(1), + }, + }; + }) + ); + } else { + return of(state as TimelineWithSyncStatus); + } + }) + ); + } + + createTimeline(timelineName: string): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient().postTimeline( + { + name: timelineName, + }, + user.token + ) + ).pipe( + convertError(HttpTimelineNameConflictError, TimelineNameConflictError) + ); + } + + changeTimelineProperty( + timelineName: string, + req: TimelineChangePropertyRequest + ): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient() + .patchTimeline(timelineName, req, user.token) + .then((timeline) => { + void this.syncTimeline(timelineName); + return timeline; + }) + ); + } + + deleteTimeline(timelineName: string): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient().deleteTimeline(timelineName, user.token) + ); + } + + addMember(timelineName: string, username: string): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient() + .memberPut(timelineName, username, user.token) + .then(() => { + void this.syncTimeline(timelineName); + }) + ); + } + + removeMember(timelineName: string, username: string): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient() + .memberDelete(timelineName, username, user.token) + .then(() => { + void this.syncTimeline(timelineName); + }) + ); + } + + private convertHttpPostToData(post: HttpTimelinePostInfo): TimelinePostData { + return { + ...post, + author: post.author.username, + }; + } + + private convertHttpPostToDataList( + posts: HttpTimelinePostInfo[] + ): TimelinePostData[] { + return posts.map((post) => this.convertHttpPostToData(post)); + } + + private getCachedPosts( + timelineName: string + ): Promise { + return dataStorage.getItem( + `timeline.${timelineName}.posts` + ); + } + + private savePosts( + timelineName: string, + data: TimelinePostData[] + ): Promise { + return dataStorage + .setItem(`timeline.${timelineName}.posts`, data) + .then(); + } + + private async syncPosts(timelineName: string): Promise { + const line = this._postsHub.getLineOrCreateWithoutSetup(timelineName); + if (line.isSyncing) return; + line.beginSync(); + + if (line.value == null) { + const cache = await this.getCachedPosts(timelineName); + if (cache != null) { + line.next({ type: "cache", posts: cache }); + } + } + + const now = new Date(); + + const lastUpdatedTime = await dataStorage.getItem( + `timeline.${timelineName}.lastUpdated` + ); + + try { + if (lastUpdatedTime == null) { + const httpPosts = await getHttpTimelineClient().listPost( + timelineName, + userService.currentUser?.token + ); + + uniqBy( + httpPosts.map((post) => post.author), + "username" + ).forEach((user) => void userInfoService.saveUser(user)); + + const posts = this.convertHttpPostToDataList(httpPosts); + await this.savePosts(timelineName, posts); + await dataStorage.setItem( + `timeline.${timelineName}.lastUpdated`, + now + ); + + line.endSyncAndNext({ type: "synced", posts }); + } else { + const httpPosts = await getHttpTimelineClient().listPost( + timelineName, + userService.currentUser?.token, + { + modifiedSince: lastUpdatedTime, + includeDeleted: true, + } + ); + + const deletedIds = httpPosts.filter((p) => p.deleted).map((p) => p.id); + const changed = httpPosts.filter( + (p): p is HttpTimelinePostInfo => !p.deleted + ); + + uniqBy( + httpPosts + .map((post) => post.author) + .filter((u): u is HttpUser => u != null), + "username" + ).forEach((user) => void userInfoService.saveUser(user)); + + const cache = (await this.getCachedPosts(timelineName)) ?? []; + + const posts = cache.filter((p) => !deletedIds.includes(p.id)); + + for (const changedPost of changed) { + const savedChangedPostIndex = posts.findIndex( + (p) => p.id === changedPost.id + ); + if (savedChangedPostIndex === -1) { + posts.push(this.convertHttpPostToData(changedPost)); + } else { + posts[savedChangedPostIndex] = this.convertHttpPostToData( + changedPost + ); + } + } + + await this.savePosts(timelineName, posts); + await dataStorage.setItem( + `timeline.${timelineName}.lastUpdated`, + now + ); + line.endSyncAndNext({ type: "synced", posts }); + } + } catch (e) { + if (e instanceof HttpTimelineNotExistError) { + line.endSyncAndNext({ type: "notexist", posts: [] }); + } else if (e instanceof HttpForbiddenError) { + line.endSyncAndNext({ type: "forbid", posts: [] }); + } else { + const cache = await this.getCachedPosts(timelineName); + if (cache == null) { + line.endSyncAndNext({ type: "offline", posts: [] }); + } else { + line.endSyncAndNext({ type: "offline", posts: cache }); + } + throwIfNotNetworkError(e); + } + } + } + + private _postsHub = new DataHub< + string, + { + type: "cache" | "offline" | "synced" | "forbid" | "notexist"; + posts: TimelinePostData[]; + } + >({ + setup: (key) => { + void this.syncPosts(key); + }, + }); + + getPosts$(timelineName: string): Observable { + return this._postsHub.getDataWithSyncStatusObservable(timelineName).pipe( + switchMap((state) => { + if (state.posts.length === 0) { + return of({ + ...state, + posts: [], + }); + } + + return combineLatest([ + combineLatest( + state.posts.map((post) => userInfoService.getUser$(post.author)) + ), + combineLatest( + state.posts.map((post) => { + if (post.content.type === "image") { + return this.getPostData$(timelineName, post.id); + } else { + return of(null); + } + }) + ), + ]).pipe( + map(([authors, datas]) => { + return { + ...state, + posts: state.posts.map((post, i) => { + const { content } = post; + + return { + ...post, + author: authors[i], + content: (() => { + if (content.type === "text") return content; + else + return { + type: "image", + data: datas[i], + } as TimelinePostImageContent; + })(), + }; + }), + }; + }) + ); + }) + ); + } + + private getCachedPostData(key: { + timelineName: string; + postId: number; + }): Promise { + return dataStorage.getItem( + `timeline.${key.timelineName}.post.${key.postId}.data` + ); + } + + private savePostData( + key: { + timelineName: string; + postId: number; + }, + data: BlobWithEtag + ): Promise { + return dataStorage + .setItem( + `timeline.${key.timelineName}.post.${key.postId}.data`, + data + ) + .then(); + } + + private async syncPostData(key: { + timelineName: string; + postId: number; + }): Promise { + const line = this._postDataHub.getLineOrCreateWithoutSetup(key); + if (line.isSyncing) return; + line.beginSync(); + + const cache = await this.getCachedPostData(key); + if (line.value == null) { + if (cache != null) { + line.next({ type: "cache", data: cache.data }); + } + } + + if (cache == null) { + try { + const res = await getHttpTimelineClient().getPostData( + key.timelineName, + key.postId + ); + await this.savePostData(key, res); + line.endSyncAndNext({ data: res.data, type: "synced" }); + } catch (e) { + line.endSyncAndNext({ type: "offline" }); + throwIfNotNetworkError(e); + } + } else { + try { + const res = await getHttpTimelineClient().getPostData( + key.timelineName, + key.postId, + cache.etag + ); + if (res instanceof NotModified) { + line.endSyncAndNext({ data: cache.data, type: "synced" }); + } else { + await this.savePostData(key, res); + line.endSyncAndNext({ data: res.data, type: "synced" }); + } + } catch (e) { + line.endSyncAndNext({ data: cache.data, type: "offline" }); + throwIfNotNetworkError(e); + } + } + } + + private _postDataHub = new DataHub< + { timelineName: string; postId: number }, + | { data: Blob; type: "cache" | "synced" | "offline" } + | { data?: undefined; type: "notexist" | "offline" } + >({ + keyToString: (key) => `${key.timelineName}.${key.postId}`, + setup: (key) => { + void this.syncPostData(key); + }, + }); + + getPostData$(timelineName: string, postId: number): Observable { + return this._postDataHub.getObservable({ timelineName, postId }).pipe( + map((state): BlobOrStatus => state.data ?? "error"), + startWith("loading") + ); + } + + createPost( + timelineName: string, + request: TimelineCreatePostRequest + ): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient() + .postPost(timelineName, request, user.token) + .then(() => { + void this.syncPosts(timelineName); + }) + ); + } + + deletePost(timelineName: string, postId: number): Observable { + const user = checkLogin(); + return from( + getHttpTimelineClient() + .deletePost(timelineName, postId, user.token) + .then(() => { + void this.syncPosts(timelineName); + }) + ); + } + + isMemberOf(username: string, timeline: TimelineInfo): boolean { + return timeline.members.findIndex((m) => m.username == username) >= 0; + } + + hasReadPermission( + user: UserAuthInfo | null | undefined, + timeline: TimelineInfo + ): boolean { + if (user != null && user.administrator) return true; + + const { visibility } = timeline; + if (visibility === "Public") { + return true; + } else if (visibility === "Register") { + if (user != null) return true; + } else if (visibility === "Private") { + if ( + user != null && + (user.username === timeline.owner.username || + this.isMemberOf(user.username, timeline)) + ) { + return true; + } + } + return false; + } + + hasPostPermission( + user: UserAuthInfo | null | undefined, + timeline: TimelineInfo + ): boolean { + if (user != null && user.administrator) return true; + + return ( + user != null && + (timeline.owner.username === user.username || + this.isMemberOf(user.username, timeline)) + ); + } + + hasManagePermission( + user: UserAuthInfo | null | undefined, + timeline: TimelineInfo + ): boolean { + if (user != null && user.administrator) return true; + + return user != null && user.username == timeline.owner.username; + } + + hasModifyPostPermission( + user: UserAuthInfo | null | undefined, + timeline: TimelineInfo, + post: TimelinePostInfo + ): boolean { + if (user != null && user.administrator) return true; + + return ( + user != null && + (user.username === timeline.owner.username || + user.username === post.author.username) + ); + } +} + +export const timelineService = new TimelineService(); + +const timelineNameReg = XRegExp("^[-_\\p{L}]*$", "u"); + +export function validateTimelineName(name: string): boolean { + return timelineNameReg.test(name); +} + +export function useTimelineInfo( + timelineName: string +): TimelineWithSyncStatus | undefined { + const [state, setState] = React.useState( + undefined + ); + React.useEffect(() => { + const subscription = timelineService + .getTimeline$(timelineName) + .subscribe((data) => { + setState(data); + }); + return () => { + subscription.unsubscribe(); + }; + }, [timelineName]); + return state; +} + +export function usePostList( + timelineName: string | null | undefined +): TimelinePostsWithSyncState | undefined { + const [state, setState] = React.useState< + TimelinePostsWithSyncState | undefined + >(undefined); + React.useEffect(() => { + if (timelineName == null) { + setState(undefined); + return; + } + + const subscription = timelineService + .getPosts$(timelineName) + .subscribe((data) => { + setState(data); + }); + return () => { + subscription.unsubscribe(); + }; + }, [timelineName]); + return state; +} + +export async function getAllCachedTimelineNames(): Promise { + const keys = await dataStorage.keys(); + return keys + .filter( + (key) => + key.startsWith("timeline.") && (key.match(/\./g) ?? []).length === 1 + ) + .map((key) => key.substr("timeline.".length)); +} diff --git a/Timeline/ClientApp/src/app/data/user.ts b/Timeline/ClientApp/src/app/data/user.ts index 419cff18..8aee0c5f 100644 --- a/Timeline/ClientApp/src/app/data/user.ts +++ b/Timeline/ClientApp/src/app/data/user.ts @@ -1,389 +1,389 @@ -import React, { useState, useEffect } from 'react'; -import { BehaviorSubject, Observable, from } from 'rxjs'; -import { map, filter } from 'rxjs/operators'; - -import { UiLogicError } from '../common'; -import { convertError } from '../utilities/rxjs'; -import { pushAlert } from '../common/alert-service'; - -import { dataStorage, throwIfNotNetworkError } from './common'; -import { DataHub } from './DataHub'; - -import { HttpNetworkError, BlobWithEtag, NotModified } from '../http/common'; -import { - getHttpTokenClient, - HttpCreateTokenBadCredentialError, -} from '../http/token'; -import { - getHttpUserClient, - HttpUserNotExistError, - HttpUser, -} from '../http/user'; - -export type User = HttpUser; - -export interface UserAuthInfo { - username: string; - administrator: boolean; -} - -export interface UserWithToken extends User { - token: string; -} - -export interface LoginCredentials { - username: string; - password: string; -} - -export class BadCredentialError { - message = 'login.badCredential'; -} - -const USER_STORAGE_KEY = 'currentuser'; - -export class UserService { - private userSubject = new BehaviorSubject( - undefined - ); - - get user$(): Observable { - return this.userSubject; - } - - get currentUser(): UserWithToken | null | undefined { - return this.userSubject.value; - } - - async checkLoginState(): Promise { - if (this.currentUser !== undefined) { - console.warn("Already checked user. Can't check twice."); - } - - const savedUser = await dataStorage.getItem( - USER_STORAGE_KEY - ); - - if (savedUser == null) { - this.userSubject.next(null); - return null; - } - - this.userSubject.next(savedUser); - - const savedToken = savedUser.token; - try { - const res = await getHttpTokenClient().verify({ token: savedToken }); - const user: UserWithToken = { ...res.user, token: savedToken }; - await dataStorage.setItem(USER_STORAGE_KEY, user); - this.userSubject.next(user); - pushAlert({ - type: 'success', - message: { - type: 'i18n', - key: 'user.welcomeBack', - }, - }); - return user; - } catch (error) { - if (error instanceof HttpNetworkError) { - pushAlert({ - type: 'danger', - message: { type: 'i18n', key: 'user.verifyTokenFailedNetwork' }, - }); - return savedUser; - } else { - await dataStorage.removeItem(USER_STORAGE_KEY); - this.userSubject.next(null); - pushAlert({ - type: 'danger', - message: { type: 'i18n', key: 'user.verifyTokenFailed' }, - }); - return null; - } - } - } - - async login( - credentials: LoginCredentials, - rememberMe: boolean - ): Promise { - if (this.currentUser) { - throw new UiLogicError('Already login.'); - } - try { - const res = await getHttpTokenClient().create({ - ...credentials, - expire: 30, - }); - const user: UserWithToken = { - ...res.user, - token: res.token, - }; - if (rememberMe) { - await dataStorage.setItem(USER_STORAGE_KEY, user); - } - this.userSubject.next(user); - } catch (e) { - if (e instanceof HttpCreateTokenBadCredentialError) { - throw new BadCredentialError(); - } else { - throw e; - } - } - } - - async logout(): Promise { - if (this.currentUser === undefined) { - throw new UiLogicError('Please check user first.'); - } - if (this.currentUser === null) { - throw new UiLogicError('No login.'); - } - await dataStorage.removeItem(USER_STORAGE_KEY); - this.userSubject.next(null); - } - - changePassword( - oldPassword: string, - newPassword: string - ): Observable { - if (this.currentUser == undefined) { - throw new UiLogicError("Not login or checked now, can't log out."); - } - const $ = from( - getHttpUserClient().changePassword( - { - oldPassword, - newPassword, - }, - this.currentUser.token - ) - ); - $.subscribe(() => { - void this.logout(); - }); - return $; - } -} - -export const userService = new UserService(); - -export function useRawUser(): UserWithToken | null | undefined { - const [user, setUser] = useState( - userService.currentUser - ); - useEffect(() => { - const subscription = userService.user$.subscribe((u) => setUser(u)); - return () => { - subscription.unsubscribe(); - }; - }); - return user; -} - -export function useUser(): UserWithToken | null { - const [user, setUser] = useState(() => { - const initUser = userService.currentUser; - if (initUser === undefined) { - throw new UiLogicError( - "This is a logic error in user module. Current user can't be undefined in useUser." - ); - } - return initUser; - }); - useEffect(() => { - const sub = userService.user$.subscribe((u) => { - if (u === undefined) { - throw new UiLogicError( - "This is a logic error in user module. User emitted can't be undefined later." - ); - } - setUser(u); - }); - return () => { - sub.unsubscribe(); - }; - }); - return user; -} - -export function useUserLoggedIn(): UserWithToken { - const user = useUser(); - if (user == null) { - throw new UiLogicError('You assert user has logged in but actually not.'); - } - return user; -} - -export function checkLogin(): UserWithToken { - const user = userService.currentUser; - if (user == null) { - throw new UiLogicError('You must login to perform the operation.'); - } - return user; -} - -export class UserNotExistError extends Error {} - -export class UserInfoService { - async saveUser(user: HttpUser): Promise { - const key = user.username; - const line = this._userHub.getLineOrCreateWithoutSetup(key); - if (line.isSyncing) return; - line.beginSync(); - await this.doSaveUser(user); - line.endSyncAndNext({ user, type: 'synced' }); - } - - private getCachedUser(username: string): Promise { - return dataStorage.getItem(`user.${username}`); - } - - private doSaveUser(user: HttpUser): Promise { - return dataStorage.setItem(`user.${user.username}`, user).then(); - } - - private async syncUser(username: string): Promise { - const line = this._userHub.getLineOrCreateWithoutSetup(username); - if (line.isSyncing) return; - line.beginSync(); - - if (line.value == undefined) { - const cache = await this.getCachedUser(username); - if (cache != null) { - line.next({ user: cache, type: 'cache' }); - } - } - - try { - const res = await getHttpUserClient().get(username); - await this.doSaveUser(res); - line.endSyncAndNext({ user: res, type: 'synced' }); - } catch (e) { - if (e instanceof HttpUserNotExistError) { - line.endSyncAndNext({ type: 'notexist' }); - } else { - const cache = await this.getCachedUser(username); - line.endSyncAndNext({ user: cache ?? undefined, type: 'offline' }); - throwIfNotNetworkError(e); - } - } - } - - private _userHub = new DataHub< - string, - | { user: User; type: 'cache' | 'synced' | 'offline' } - | { user?: undefined; type: 'notexist' | 'offline' } - >({ - setup: (key) => { - void this.syncUser(key); - }, - }); - - getUser$(username: string): Observable { - return this._userHub.getObservable(username).pipe( - map((state) => state?.user), - filter((user): user is User => user != null) - ); - } - - private getCachedAvatar(username: string): Promise { - return dataStorage.getItem(`user.${username}.avatar`); - } - - private saveAvatar(username: string, data: BlobWithEtag): Promise { - return dataStorage - .setItem(`user.${username}.avatar`, data) - .then(); - } - - private async syncAvatar(username: string): Promise { - const line = this._avatarHub.getLineOrCreateWithoutSetup(username); - if (line.isSyncing) return; - line.beginSync(); - - const cache = await this.getCachedAvatar(username); - if (line.value == null) { - if (cache != null) { - line.next({ data: cache.data, type: 'cache' }); - } - } - - if (cache == null) { - try { - const avatar = await getHttpUserClient().getAvatar(username); - await this.saveAvatar(username, avatar); - line.endSyncAndNext({ data: avatar.data, type: 'synced' }); - } catch (e) { - line.endSyncAndNext({ type: 'offline' }); - throwIfNotNetworkError(e); - } - } else { - try { - const res = await getHttpUserClient().getAvatar(username, cache.etag); - if (res instanceof NotModified) { - line.endSyncAndNext({ data: cache.data, type: 'synced' }); - } else { - const avatar = res; - await this.saveAvatar(username, avatar); - line.endSyncAndNext({ data: avatar.data, type: 'synced' }); - } - } catch (e) { - line.endSyncAndNext({ data: cache.data, type: 'offline' }); - throwIfNotNetworkError(e); - } - } - } - - private _avatarHub = new DataHub< - string, - | { data: Blob; type: 'cache' | 'synced' | 'offline' } - | { data?: undefined; type: 'notexist' | 'offline' } - >({ - setup: (key) => { - void this.syncAvatar(key); - }, - }); - - getAvatar$(username: string): Observable { - return this._avatarHub.getObservable(username).pipe( - map((state) => state.data), - filter((blob): blob is Blob => blob != null) - ); - } - - getUserInfo(username: string): Observable { - return from(getHttpUserClient().get(username)).pipe( - convertError(HttpUserNotExistError, UserNotExistError) - ); - } - - async setAvatar(username: string, blob: Blob): Promise { - const user = checkLogin(); - await getHttpUserClient().putAvatar(username, blob, user.token); - this._avatarHub.getLine(username)?.next({ data: blob, type: 'synced' }); - } -} - -export const userInfoService = new UserInfoService(); - -export function useAvatar(username?: string): Blob | undefined { - const [state, setState] = React.useState(undefined); - React.useEffect(() => { - if (username == null) { - setState(undefined); - return; - } - - const subscription = userInfoService - .getAvatar$(username) - .subscribe((blob) => { - setState(blob); - }); - return () => { - subscription.unsubscribe(); - }; - }, [username]); - return state; -} +import React, { useState, useEffect } from "react"; +import { BehaviorSubject, Observable, from } from "rxjs"; +import { map, filter } from "rxjs/operators"; + +import { UiLogicError } from "../common"; +import { convertError } from "../utilities/rxjs"; +import { pushAlert } from "../common/alert-service"; + +import { dataStorage, throwIfNotNetworkError } from "./common"; +import { DataHub } from "./DataHub"; + +import { HttpNetworkError, BlobWithEtag, NotModified } from "../http/common"; +import { + getHttpTokenClient, + HttpCreateTokenBadCredentialError, +} from "../http/token"; +import { + getHttpUserClient, + HttpUserNotExistError, + HttpUser, +} from "../http/user"; + +export type User = HttpUser; + +export interface UserAuthInfo { + username: string; + administrator: boolean; +} + +export interface UserWithToken extends User { + token: string; +} + +export interface LoginCredentials { + username: string; + password: string; +} + +export class BadCredentialError { + message = "login.badCredential"; +} + +const USER_STORAGE_KEY = "currentuser"; + +export class UserService { + private userSubject = new BehaviorSubject( + undefined + ); + + get user$(): Observable { + return this.userSubject; + } + + get currentUser(): UserWithToken | null | undefined { + return this.userSubject.value; + } + + async checkLoginState(): Promise { + if (this.currentUser !== undefined) { + console.warn("Already checked user. Can't check twice."); + } + + const savedUser = await dataStorage.getItem( + USER_STORAGE_KEY + ); + + if (savedUser == null) { + this.userSubject.next(null); + return null; + } + + this.userSubject.next(savedUser); + + const savedToken = savedUser.token; + try { + const res = await getHttpTokenClient().verify({ token: savedToken }); + const user: UserWithToken = { ...res.user, token: savedToken }; + await dataStorage.setItem(USER_STORAGE_KEY, user); + this.userSubject.next(user); + pushAlert({ + type: "success", + message: { + type: "i18n", + key: "user.welcomeBack", + }, + }); + return user; + } catch (error) { + if (error instanceof HttpNetworkError) { + pushAlert({ + type: "danger", + message: { type: "i18n", key: "user.verifyTokenFailedNetwork" }, + }); + return savedUser; + } else { + await dataStorage.removeItem(USER_STORAGE_KEY); + this.userSubject.next(null); + pushAlert({ + type: "danger", + message: { type: "i18n", key: "user.verifyTokenFailed" }, + }); + return null; + } + } + } + + async login( + credentials: LoginCredentials, + rememberMe: boolean + ): Promise { + if (this.currentUser) { + throw new UiLogicError("Already login."); + } + try { + const res = await getHttpTokenClient().create({ + ...credentials, + expire: 30, + }); + const user: UserWithToken = { + ...res.user, + token: res.token, + }; + if (rememberMe) { + await dataStorage.setItem(USER_STORAGE_KEY, user); + } + this.userSubject.next(user); + } catch (e) { + if (e instanceof HttpCreateTokenBadCredentialError) { + throw new BadCredentialError(); + } else { + throw e; + } + } + } + + async logout(): Promise { + if (this.currentUser === undefined) { + throw new UiLogicError("Please check user first."); + } + if (this.currentUser === null) { + throw new UiLogicError("No login."); + } + await dataStorage.removeItem(USER_STORAGE_KEY); + this.userSubject.next(null); + } + + changePassword( + oldPassword: string, + newPassword: string + ): Observable { + if (this.currentUser == undefined) { + throw new UiLogicError("Not login or checked now, can't log out."); + } + const $ = from( + getHttpUserClient().changePassword( + { + oldPassword, + newPassword, + }, + this.currentUser.token + ) + ); + $.subscribe(() => { + void this.logout(); + }); + return $; + } +} + +export const userService = new UserService(); + +export function useRawUser(): UserWithToken | null | undefined { + const [user, setUser] = useState( + userService.currentUser + ); + useEffect(() => { + const subscription = userService.user$.subscribe((u) => setUser(u)); + return () => { + subscription.unsubscribe(); + }; + }); + return user; +} + +export function useUser(): UserWithToken | null { + const [user, setUser] = useState(() => { + const initUser = userService.currentUser; + if (initUser === undefined) { + throw new UiLogicError( + "This is a logic error in user module. Current user can't be undefined in useUser." + ); + } + return initUser; + }); + useEffect(() => { + const sub = userService.user$.subscribe((u) => { + if (u === undefined) { + throw new UiLogicError( + "This is a logic error in user module. User emitted can't be undefined later." + ); + } + setUser(u); + }); + return () => { + sub.unsubscribe(); + }; + }); + return user; +} + +export function useUserLoggedIn(): UserWithToken { + const user = useUser(); + if (user == null) { + throw new UiLogicError("You assert user has logged in but actually not."); + } + return user; +} + +export function checkLogin(): UserWithToken { + const user = userService.currentUser; + if (user == null) { + throw new UiLogicError("You must login to perform the operation."); + } + return user; +} + +export class UserNotExistError extends Error {} + +export class UserInfoService { + async saveUser(user: HttpUser): Promise { + const key = user.username; + const line = this._userHub.getLineOrCreateWithoutSetup(key); + if (line.isSyncing) return; + line.beginSync(); + await this.doSaveUser(user); + line.endSyncAndNext({ user, type: "synced" }); + } + + private getCachedUser(username: string): Promise { + return dataStorage.getItem(`user.${username}`); + } + + private doSaveUser(user: HttpUser): Promise { + return dataStorage.setItem(`user.${user.username}`, user).then(); + } + + private async syncUser(username: string): Promise { + const line = this._userHub.getLineOrCreateWithoutSetup(username); + if (line.isSyncing) return; + line.beginSync(); + + if (line.value == undefined) { + const cache = await this.getCachedUser(username); + if (cache != null) { + line.next({ user: cache, type: "cache" }); + } + } + + try { + const res = await getHttpUserClient().get(username); + await this.doSaveUser(res); + line.endSyncAndNext({ user: res, type: "synced" }); + } catch (e) { + if (e instanceof HttpUserNotExistError) { + line.endSyncAndNext({ type: "notexist" }); + } else { + const cache = await this.getCachedUser(username); + line.endSyncAndNext({ user: cache ?? undefined, type: "offline" }); + throwIfNotNetworkError(e); + } + } + } + + private _userHub = new DataHub< + string, + | { user: User; type: "cache" | "synced" | "offline" } + | { user?: undefined; type: "notexist" | "offline" } + >({ + setup: (key) => { + void this.syncUser(key); + }, + }); + + getUser$(username: string): Observable { + return this._userHub.getObservable(username).pipe( + map((state) => state?.user), + filter((user): user is User => user != null) + ); + } + + private getCachedAvatar(username: string): Promise { + return dataStorage.getItem(`user.${username}.avatar`); + } + + private saveAvatar(username: string, data: BlobWithEtag): Promise { + return dataStorage + .setItem(`user.${username}.avatar`, data) + .then(); + } + + private async syncAvatar(username: string): Promise { + const line = this._avatarHub.getLineOrCreateWithoutSetup(username); + if (line.isSyncing) return; + line.beginSync(); + + const cache = await this.getCachedAvatar(username); + if (line.value == null) { + if (cache != null) { + line.next({ data: cache.data, type: "cache" }); + } + } + + if (cache == null) { + try { + const avatar = await getHttpUserClient().getAvatar(username); + await this.saveAvatar(username, avatar); + line.endSyncAndNext({ data: avatar.data, type: "synced" }); + } catch (e) { + line.endSyncAndNext({ type: "offline" }); + throwIfNotNetworkError(e); + } + } else { + try { + const res = await getHttpUserClient().getAvatar(username, cache.etag); + if (res instanceof NotModified) { + line.endSyncAndNext({ data: cache.data, type: "synced" }); + } else { + const avatar = res; + await this.saveAvatar(username, avatar); + line.endSyncAndNext({ data: avatar.data, type: "synced" }); + } + } catch (e) { + line.endSyncAndNext({ data: cache.data, type: "offline" }); + throwIfNotNetworkError(e); + } + } + } + + private _avatarHub = new DataHub< + string, + | { data: Blob; type: "cache" | "synced" | "offline" } + | { data?: undefined; type: "notexist" | "offline" } + >({ + setup: (key) => { + void this.syncAvatar(key); + }, + }); + + getAvatar$(username: string): Observable { + return this._avatarHub.getObservable(username).pipe( + map((state) => state.data), + filter((blob): blob is Blob => blob != null) + ); + } + + getUserInfo(username: string): Observable { + return from(getHttpUserClient().get(username)).pipe( + convertError(HttpUserNotExistError, UserNotExistError) + ); + } + + async setAvatar(username: string, blob: Blob): Promise { + const user = checkLogin(); + await getHttpUserClient().putAvatar(username, blob, user.token); + this._avatarHub.getLine(username)?.next({ data: blob, type: "synced" }); + } +} + +export const userInfoService = new UserInfoService(); + +export function useAvatar(username?: string): Blob | undefined { + const [state, setState] = React.useState(undefined); + React.useEffect(() => { + if (username == null) { + setState(undefined); + return; + } + + const subscription = userInfoService + .getAvatar$(username) + .subscribe((blob) => { + setState(blob); + }); + return () => { + subscription.unsubscribe(); + }; + }, [username]); + return state; +} diff --git a/Timeline/ClientApp/src/app/home/BoardWithUser.tsx b/Timeline/ClientApp/src/app/home/BoardWithUser.tsx index 3830104f..4910aebe 100644 --- a/Timeline/ClientApp/src/app/home/BoardWithUser.tsx +++ b/Timeline/ClientApp/src/app/home/BoardWithUser.tsx @@ -1,102 +1,102 @@ -import React from 'react'; -import { Row, Col } from 'reactstrap'; -import { useTranslation } from 'react-i18next'; - -import { UserWithToken } from '../data/user'; -import { TimelineInfo } from '../data/timeline'; - -import { getHttpTimelineClient } from '../http/timeline'; - -import TimelineBoard from './TimelineBoard'; -import OfflineBoard from './OfflineBoard'; - -const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { - const { t } = useTranslation(); - - const [ownTimelines, setOwnTimelines] = React.useState< - TimelineInfo[] | 'offline' | 'loading' - >('loading'); - const [joinTimelines, setJoinTimelines] = React.useState< - TimelineInfo[] | 'offline' | 'loading' - >('loading'); - - React.useEffect(() => { - let subscribe = true; - if (ownTimelines === 'loading') { - void getHttpTimelineClient() - .listTimeline({ relate: user.username, relateType: 'own' }) - .then( - (timelines) => { - if (subscribe) { - setOwnTimelines(timelines); - } - }, - () => { - setOwnTimelines('offline'); - } - ); - } - return () => { - subscribe = false; - }; - }, [user, ownTimelines]); - - React.useEffect(() => { - let subscribe = true; - if (joinTimelines === 'loading') { - void getHttpTimelineClient() - .listTimeline({ relate: user.username, relateType: 'join' }) - .then( - (timelines) => { - if (subscribe) { - setJoinTimelines(timelines); - } - }, - () => { - setJoinTimelines('offline'); - } - ); - } - return () => { - subscribe = false; - }; - }, [user, joinTimelines]); - - return ( - - {ownTimelines === 'offline' && joinTimelines === 'offline' ? ( - - { - setOwnTimelines('loading'); - setJoinTimelines('loading'); - }} - /> - - ) : ( - <> - - { - setOwnTimelines('loading'); - }} - /> - - - { - setJoinTimelines('loading'); - }} - /> - - - )} - - ); -}; - -export default BoardWithUser; +import React from "react"; +import { Row, Col } from "reactstrap"; +import { useTranslation } from "react-i18next"; + +import { UserWithToken } from "../data/user"; +import { TimelineInfo } from "../data/timeline"; + +import { getHttpTimelineClient } from "../http/timeline"; + +import TimelineBoard from "./TimelineBoard"; +import OfflineBoard from "./OfflineBoard"; + +const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { + const { t } = useTranslation(); + + const [ownTimelines, setOwnTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + const [joinTimelines, setJoinTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + + React.useEffect(() => { + let subscribe = true; + if (ownTimelines === "loading") { + void getHttpTimelineClient() + .listTimeline({ relate: user.username, relateType: "own" }) + .then( + (timelines) => { + if (subscribe) { + setOwnTimelines(timelines); + } + }, + () => { + setOwnTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [user, ownTimelines]); + + React.useEffect(() => { + let subscribe = true; + if (joinTimelines === "loading") { + void getHttpTimelineClient() + .listTimeline({ relate: user.username, relateType: "join" }) + .then( + (timelines) => { + if (subscribe) { + setJoinTimelines(timelines); + } + }, + () => { + setJoinTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [user, joinTimelines]); + + return ( + + {ownTimelines === "offline" && joinTimelines === "offline" ? ( + + { + setOwnTimelines("loading"); + setJoinTimelines("loading"); + }} + /> + + ) : ( + <> + + { + setOwnTimelines("loading"); + }} + /> + + + { + setJoinTimelines("loading"); + }} + /> + + + )} + + ); +}; + +export default BoardWithUser; diff --git a/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx b/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx index 4b30fcc4..a7dc36be 100644 --- a/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx +++ b/Timeline/ClientApp/src/app/home/BoardWithoutUser.tsx @@ -1,61 +1,61 @@ -import React from 'react'; -import { Row, Col } from 'reactstrap'; - -import { TimelineInfo } from '../data/timeline'; - -import { getHttpTimelineClient } from '../http/timeline'; - -import TimelineBoard from './TimelineBoard'; -import OfflineBoard from './OfflineBoard'; - -const BoardWithoutUser: React.FC = () => { - const [publicTimelines, setPublicTimelines] = React.useState< - TimelineInfo[] | 'offline' | 'loading' - >('loading'); - - React.useEffect(() => { - let subscribe = true; - if (publicTimelines === 'loading') { - void getHttpTimelineClient() - .listTimeline({ visibility: 'Public' }) - .then( - (timelines) => { - if (subscribe) { - setPublicTimelines(timelines); - } - }, - () => { - setPublicTimelines('offline'); - } - ); - } - return () => { - subscribe = false; - }; - }, [publicTimelines]); - - return ( - - {publicTimelines === 'offline' ? ( - - { - setPublicTimelines('loading'); - }} - /> - - ) : ( - - { - setPublicTimelines('loading'); - }} - /> - - )} - - ); -}; - -export default BoardWithoutUser; +import React from "react"; +import { Row, Col } from "reactstrap"; + +import { TimelineInfo } from "../data/timeline"; + +import { getHttpTimelineClient } from "../http/timeline"; + +import TimelineBoard from "./TimelineBoard"; +import OfflineBoard from "./OfflineBoard"; + +const BoardWithoutUser: React.FC = () => { + const [publicTimelines, setPublicTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + + React.useEffect(() => { + let subscribe = true; + if (publicTimelines === "loading") { + void getHttpTimelineClient() + .listTimeline({ visibility: "Public" }) + .then( + (timelines) => { + if (subscribe) { + setPublicTimelines(timelines); + } + }, + () => { + setPublicTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [publicTimelines]); + + return ( + + {publicTimelines === "offline" ? ( + + { + setPublicTimelines("loading"); + }} + /> + + ) : ( + + { + setPublicTimelines("loading"); + }} + /> + + )} + + ); +}; + +export default BoardWithoutUser; diff --git a/Timeline/ClientApp/src/app/home/Home.tsx b/Timeline/ClientApp/src/app/home/Home.tsx index b759fa50..00e6ff5a 100644 --- a/Timeline/ClientApp/src/app/home/Home.tsx +++ b/Timeline/ClientApp/src/app/home/Home.tsx @@ -1,102 +1,102 @@ -import React from 'react'; -import { useHistory } from 'react-router'; -import { Row, Container, Button, Col } from 'reactstrap'; -import { useTranslation } from 'react-i18next'; - -import { useUser } from '../data/user'; - -import AppBar from '../common/AppBar'; -import SearchInput from '../common/SearchInput'; -import BoardWithoutUser from './BoardWithoutUser'; -import BoardWithUser from './BoardWithUser'; -import TimelineCreateDialog from './TimelineCreateDialog'; - -const Home: React.FC = () => { - const history = useHistory(); - - const { t } = useTranslation(); - - const user = useUser(); - - const [navText, setNavText] = React.useState(''); - - const [dialog, setDialog] = React.useState<'create' | null>(null); - - const goto = React.useCallback((): void => { - if (navText === '') { - history.push('users/crupest'); - } else if (navText.startsWith('@')) { - history.push(`users/${navText.slice(1)}`); - } else { - history.push(`timelines/${navText}`); - } - }, [navText, history]); - - return ( - <> - - - - - { - setDialog('create'); - }} - > - {t('home.createButton')} - - ) - } - /> - - - {(() => { - if (user == null) { - return ; - } else { - return ; - } - })()} - - - {dialog === 'create' && ( - { - setDialog(null); - }} - /> - )} - - ); -}; - -export default Home; +import React from "react"; +import { useHistory } from "react-router"; +import { Row, Container, Button, Col } from "reactstrap"; +import { useTranslation } from "react-i18next"; + +import { useUser } from "../data/user"; + +import AppBar from "../common/AppBar"; +import SearchInput from "../common/SearchInput"; +import BoardWithoutUser from "./BoardWithoutUser"; +import BoardWithUser from "./BoardWithUser"; +import TimelineCreateDialog from "./TimelineCreateDialog"; + +const Home: React.FC = () => { + const history = useHistory(); + + const { t } = useTranslation(); + + const user = useUser(); + + const [navText, setNavText] = React.useState(""); + + const [dialog, setDialog] = React.useState<"create" | null>(null); + + const goto = React.useCallback((): void => { + if (navText === "") { + history.push("users/crupest"); + } else if (navText.startsWith("@")) { + history.push(`users/${navText.slice(1)}`); + } else { + history.push(`timelines/${navText}`); + } + }, [navText, history]); + + return ( + <> + + + + + { + setDialog("create"); + }} + > + {t("home.createButton")} + + ) + } + /> + + + {(() => { + if (user == null) { + return ; + } else { + return ; + } + })()} + + + {dialog === "create" && ( + { + setDialog(null); + }} + /> + )} + + ); +}; + +export default Home; diff --git a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx b/Timeline/ClientApp/src/app/home/OfflineBoard.tsx index ca6d2a26..458166ac 100644 --- a/Timeline/ClientApp/src/app/home/OfflineBoard.tsx +++ b/Timeline/ClientApp/src/app/home/OfflineBoard.tsx @@ -1,62 +1,62 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import { Trans } from 'react-i18next'; - -import { getAllCachedTimelineNames } from '../data/timeline'; - -import UserTimelineLogo from '../common/UserTimelineLogo'; -import TimelineLogo from '../common/TimelineLogo'; - -export interface OfflineBoardProps { - onReload: () => void; -} - -const OfflineBoard: React.FC = ({ onReload }) => { - const [timelines, setTimelines] = React.useState([]); - - React.useEffect(() => { - let subscribe = true; - void getAllCachedTimelineNames().then((t) => { - if (subscribe) setTimelines(t); - }); - return () => { - subscribe = false; - }; - }); - - return ( - <> - - 0 - { - onReload(); - e.preventDefault(); - }} - > - 1 - - 2 - - {timelines.map((timeline) => { - const isPersonal = timeline.startsWith('@'); - const url = isPersonal - ? `/users/${timeline.slice(1)}` - : `/timelines/${timeline}`; - return ( -

- {isPersonal ? ( - - ) : ( - - )} - {timeline} -

- ); - })} - - ); -}; - -export default OfflineBoard; +import React from "react"; +import { Link } from "react-router-dom"; +import { Trans } from "react-i18next"; + +import { getAllCachedTimelineNames } from "../data/timeline"; + +import UserTimelineLogo from "../common/UserTimelineLogo"; +import TimelineLogo from "../common/TimelineLogo"; + +export interface OfflineBoardProps { + onReload: () => void; +} + +const OfflineBoard: React.FC = ({ onReload }) => { + const [timelines, setTimelines] = React.useState([]); + + React.useEffect(() => { + let subscribe = true; + void getAllCachedTimelineNames().then((t) => { + if (subscribe) setTimelines(t); + }); + return () => { + subscribe = false; + }; + }); + + return ( + <> + + 0 + { + onReload(); + e.preventDefault(); + }} + > + 1 + + 2 + + {timelines.map((timeline) => { + const isPersonal = timeline.startsWith("@"); + const url = isPersonal + ? `/users/${timeline.slice(1)}` + : `/timelines/${timeline}`; + return ( +

+ {isPersonal ? ( + + ) : ( + + )} + {timeline} +

+ ); + })} + + ); +}; + +export default OfflineBoard; diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx index 8f8f6387..91bf2b77 100644 --- a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx +++ b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx @@ -1,74 +1,74 @@ -import React from 'react'; -import clsx from 'clsx'; -import { Link } from 'react-router-dom'; -import { Spinner } from 'reactstrap'; -import { Trans } from 'react-i18next'; - -import { TimelineInfo } from '../data/timeline'; - -import TimelineLogo from '../common/TimelineLogo'; -import UserTimelineLogo from '../common/UserTimelineLogo'; - -export interface TimelineBoardProps { - title?: string; - timelines: TimelineInfo[] | 'offline' | 'loading'; - onReload: () => void; - className?: string; -} - -const TimelineBoard: React.FC = (props) => { - const { title, timelines, className } = props; - - return ( -

- {title != null &&

{title}

} - {(() => { - if (timelines === 'loading') { - return ( -

- -

- ); - } else if (timelines === 'offline') { - return ( -

- - 0 - { - props.onReload(); - e.preventDefault(); - }} - > - 1 - - 2 - -

- ); - } else { - return timelines.map((timeline) => { - const { name } = timeline; - const isPersonal = name.startsWith('@'); - const url = isPersonal - ? `/users/${timeline.owner.username}` - : `/timelines/${name}`; - return ( -

- {isPersonal ? ( - - ) : ( - - )} - {name} -

- ); - }); - } - })()} -

- ); -}; - -export default TimelineBoard; +import React from "react"; +import clsx from "clsx"; +import { Link } from "react-router-dom"; +import { Spinner } from "reactstrap"; +import { Trans } from "react-i18next"; + +import { TimelineInfo } from "../data/timeline"; + +import TimelineLogo from "../common/TimelineLogo"; +import UserTimelineLogo from "../common/UserTimelineLogo"; + +export interface TimelineBoardProps { + title?: string; + timelines: TimelineInfo[] | "offline" | "loading"; + onReload: () => void; + className?: string; +} + +const TimelineBoard: React.FC = (props) => { + const { title, timelines, className } = props; + + return ( +

+ {title != null &&

{title}

} + {(() => { + if (timelines === "loading") { + return ( +

+ +

+ ); + } else if (timelines === "offline") { + return ( +

+ + 0 + { + props.onReload(); + e.preventDefault(); + }} + > + 1 + + 2 + +

+ ); + } else { + return timelines.map((timeline) => { + const { name } = timeline; + const isPersonal = name.startsWith("@"); + const url = isPersonal + ? `/users/${timeline.owner.username}` + : `/timelines/${name}`; + return ( +

+ {isPersonal ? ( + + ) : ( + + )} + {name} +

+ ); + }); + } + })()} +

+ ); +}; + +export default TimelineBoard; diff --git a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx index 06f908f9..c5ba64e7 100644 --- a/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx +++ b/Timeline/ClientApp/src/app/home/TimelineCreateDialog.tsx @@ -1,54 +1,54 @@ -import React from 'react'; -import { useHistory } from 'react-router'; - -import { validateTimelineName, timelineService } from '../data/timeline'; - -import OperationDialog from '../common/OperationDialog'; - -interface TimelineCreateDialogProps { - open: boolean; - close: () => void; -} - -const TimelineCreateDialog: React.FC = (props) => { - const history = useHistory(); - - let nameSaved: string; - - return ( - { - if (name.length === 0) { - return 'home.createDialog.noEmpty'; - } else if (name.length > 26) { - return 'home.createDialog.tooLong'; - } else if (!validateTimelineName(name)) { - return 'home.createDialog.badFormat'; - } else { - return null; - } - }, - }, - ]} - onProcess={([name]) => { - nameSaved = name as string; - return timelineService.createTimeline(nameSaved).toPromise(); - }} - onSuccessAndClose={() => { - history.push(`timelines/${nameSaved}`); - }} - failurePrompt={(e) => `${e as string}`} - /> - ); -}; - -export default TimelineCreateDialog; +import React from "react"; +import { useHistory } from "react-router"; + +import { validateTimelineName, timelineService } from "../data/timeline"; + +import OperationDialog from "../common/OperationDialog"; + +interface TimelineCreateDialogProps { + open: boolean; + close: () => void; +} + +const TimelineCreateDialog: React.FC = (props) => { + const history = useHistory(); + + let nameSaved: string; + + return ( + { + if (name.length === 0) { + return "home.createDialog.noEmpty"; + } else if (name.length > 26) { + return "home.createDialog.tooLong"; + } else if (!validateTimelineName(name)) { + return "home.createDialog.badFormat"; + } else { + return null; + } + }, + }, + ]} + onProcess={([name]) => { + nameSaved = name as string; + return timelineService.createTimeline(nameSaved).toPromise(); + }} + onSuccessAndClose={() => { + history.push(`timelines/${nameSaved}`); + }} + failurePrompt={(e) => `${e as string}`} + /> + ); +}; + +export default TimelineCreateDialog; diff --git a/Timeline/ClientApp/src/app/home/home.sass b/Timeline/ClientApp/src/app/home/home.sass index 28a2e5f3..f5d6ffc3 100644 --- a/Timeline/ClientApp/src/app/home/home.sass +++ b/Timeline/ClientApp/src/app/home/home.sass @@ -1,13 +1,13 @@ -.timeline-board-item - font-size: 1.1em - @extend .my-2 - .icon - height: 1.3em - @extend .mr-2 - -.timeline-board - @extend .cru-card - @extend .d-flex - @extend .flex-column - @extend .p-3 - min-height: 200px +.timeline-board-item + font-size: 1.1em + @extend .my-2 + .icon + height: 1.3em + @extend .mr-2 + +.timeline-board + @extend .cru-card + @extend .d-flex + @extend .flex-column + @extend .p-3 + min-height: 200px diff --git a/Timeline/ClientApp/src/app/http/common.ts b/Timeline/ClientApp/src/app/http/common.ts index 1f904106..54203d1a 100644 --- a/Timeline/ClientApp/src/app/http/common.ts +++ b/Timeline/ClientApp/src/app/http/common.ts @@ -1,161 +1,161 @@ -import { AxiosError, AxiosResponse } from 'axios'; - -export const apiBaseUrl = '/api'; - -export function base64(blob: Blob): Promise { - return new Promise((resolve) => { - const reader = new FileReader(); - reader.onload = function () { - resolve((reader.result as string).replace(/^data:.+;base64,/, '')); - }; - reader.readAsDataURL(blob); - }); -} - -export function extractStatusCode(error: AxiosError): number | null { - if (error.isAxiosError) { - const code = error?.response?.status; - if (typeof code === 'number') { - return code; - } - } - return null; -} - -export interface CommonErrorResponse { - code: number; - message: string; -} - -export function extractErrorCode( - error: AxiosError -): number | null { - if (error.isAxiosError) { - const code = error.response?.data?.code; - if (typeof code === 'number') { - return code; - } - } - return null; -} - -export class HttpNetworkError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export class HttpForbiddenError extends Error { - constructor(public innerError?: AxiosError) { - super(); - } -} - -export class NotModified {} - -export interface BlobWithEtag { - data: Blob; - etag: string; -} - -export function extractResponseData(res: AxiosResponse): T { - return res.data; -} - -export function catchIfStatusCodeIs< - TResult, - TErrorHandlerResult extends TResult | PromiseLike | null | undefined ->( - statusCode: number, - errorHandler: (error: AxiosError) => TErrorHandlerResult -): (error: AxiosError) => TErrorHandlerResult { - return (error: AxiosError) => { - if (extractStatusCode(error) == statusCode) { - return errorHandler(error); - } else { - throw error; - } - }; -} - -export function convertToIfStatusCodeIs( - statusCode: number, - newErrorType: { - new (innerError: AxiosError): NewError; - } -): (error: AxiosError) => never { - return catchIfStatusCodeIs(statusCode, (error) => { - throw new newErrorType(error); - }); -} - -export function catchIfErrorCodeIs< - TResult, - TErrorHandlerResult extends TResult | PromiseLike | null | undefined ->( - errorCode: number, - errorHandler: (error: AxiosError) => TErrorHandlerResult -): (error: AxiosError) => TErrorHandlerResult { - return (error: AxiosError) => { - if (extractErrorCode(error) == errorCode) { - return errorHandler(error); - } else { - throw error; - } - }; -} -export function convertToIfErrorCodeIs( - errorCode: number, - newErrorType: { - new (innerError: AxiosError): NewError; - } -): (error: AxiosError) => never { - return catchIfErrorCodeIs(errorCode, (error) => { - throw new newErrorType(error); - }); -} - -export function convertToNetworkError( - error: AxiosError -): never { - if (error.isAxiosError && error.response == null) { - throw new HttpNetworkError(error); - } else { - throw error; - } -} - -export function convertToForbiddenError( - error: AxiosError -): never { - if ( - error.isAxiosError && - error.response != null && - (error.response.status == 401 || error.response.status == 403) - ) { - throw new HttpForbiddenError(error); - } else { - throw error; - } -} - -export function convertToNotModified( - error: AxiosError -): NotModified { - if ( - error.isAxiosError && - error.response != null && - error.response.status == 304 - ) { - return new NotModified(); - } else { - throw error; - } -} - -export function convertToBlobWithEtag(res: AxiosResponse): BlobWithEtag { - return { - data: res.data, - etag: (res.headers as Record<'etag', string>)['etag'], - }; -} +import { AxiosError, AxiosResponse } from "axios"; + +export const apiBaseUrl = "/api"; + +export function base64(blob: Blob): Promise { + return new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = function () { + resolve((reader.result as string).replace(/^data:.+;base64,/, "")); + }; + reader.readAsDataURL(blob); + }); +} + +export function extractStatusCode(error: AxiosError): number | null { + if (error.isAxiosError) { + const code = error?.response?.status; + if (typeof code === "number") { + return code; + } + } + return null; +} + +export interface CommonErrorResponse { + code: number; + message: string; +} + +export function extractErrorCode( + error: AxiosError +): number | null { + if (error.isAxiosError) { + const code = error.response?.data?.code; + if (typeof code === "number") { + return code; + } + } + return null; +} + +export class HttpNetworkError extends Error { + constructor(public innerError?: AxiosError) { + super(); + } +} + +export class HttpForbiddenError extends Error { + constructor(public innerError?: AxiosError) { + super(); + } +} + +export class NotModified {} + +export interface BlobWithEtag { + data: Blob; + etag: string; +} + +export function extractResponseData(res: AxiosResponse): T { + return res.data; +} + +export function catchIfStatusCodeIs< + TResult, + TErrorHandlerResult extends TResult | PromiseLike | null | undefined +>( + statusCode: number, + errorHandler: (error: AxiosError) => TErrorHandlerResult +): (error: AxiosError) => TErrorHandlerResult { + return (error: AxiosError) => { + if (extractStatusCode(error) == statusCode) { + return errorHandler(error); + } else { + throw error; + } + }; +} + +export function convertToIfStatusCodeIs( + statusCode: number, + newErrorType: { + new (innerError: AxiosError): NewError; + } +): (error: AxiosError) => never { + return catchIfStatusCodeIs(statusCode, (error) => { + throw new newErrorType(error); + }); +} + +export function catchIfErrorCodeIs< + TResult, + TErrorHandlerResult extends TResult | PromiseLike | null | undefined +>( + errorCode: number, + errorHandler: (error: AxiosError) => TErrorHandlerResult +): (error: AxiosError) => TErrorHandlerResult { + return (error: AxiosError) => { + if (extractErrorCode(error) == errorCode) { + return errorHandler(error); + } else { + throw error; + } + }; +} +export function convertToIfErrorCodeIs( + errorCode: number, + newErrorType: { + new (innerError: AxiosError): NewError; + } +): (error: AxiosError) => never { + return catchIfErrorCodeIs(errorCode, (error) => { + throw new newErrorType(error); + }); +} + +export function convertToNetworkError( + error: AxiosError +): never { + if (error.isAxiosError && error.response == null) { + throw new HttpNetworkError(error); + } else { + throw error; + } +} + +export function convertToForbiddenError( + error: AxiosError +): never { + if ( + error.isAxiosError && + error.response != null && + (error.response.status == 401 || error.response.status == 403) + ) { + throw new HttpForbiddenError(error); + } else { + throw error; + } +} + +export function convertToNotModified( + error: AxiosError +): NotModified { + if ( + error.isAxiosError && + error.response != null && + error.response.status == 304 + ) { + return new NotModified(); + } else { + throw error; + } +} + +export function convertToBlobWithEtag(res: AxiosResponse): BlobWithEtag { + return { + data: res.data, + etag: (res.headers as Record<"etag", string>)["etag"], + }; +} diff --git a/Timeline/ClientApp/src/app/http/mock/common.ts b/Timeline/ClientApp/src/app/http/mock/common.ts index 3dce8117..787d81bd 100644 --- a/Timeline/ClientApp/src/app/http/mock/common.ts +++ b/Timeline/ClientApp/src/app/http/mock/common.ts @@ -1,78 +1,78 @@ -import localforage from 'localforage'; -import { SHA1 } from 'crypto-js'; - -import { HttpNetworkError } from '../common'; - -export const mockStorage = localforage.createInstance({ - name: 'mock-backend', - description: 'Database for mock back end.', - driver: localforage.INDEXEDDB, -}); - -export async function sha1(data: Blob): Promise { - const s = await new Promise((resolve) => { - const fileReader = new FileReader(); - fileReader.readAsBinaryString(data); - fileReader.onload = () => { - resolve(fileReader.result as string); - }; - }); - - return SHA1(s).toString(); -} - -const disableNetworkKey = 'mockServer.disableNetwork'; -const networkLatencyKey = 'mockServer.networkLatency'; - -let disableNetwork: boolean = - localStorage.getItem(disableNetworkKey) === 'true' ? true : false; - -const savedNetworkLatency = localStorage.getItem(networkLatencyKey); - -let networkLatency: number | null = - savedNetworkLatency != null ? Number(savedNetworkLatency) : null; - -Object.defineProperty(window, 'disableNetwork', { - get: () => disableNetwork, - set: (value) => { - if (value) { - disableNetwork = true; - localStorage.setItem(disableNetworkKey, 'true'); - } else { - disableNetwork = false; - localStorage.setItem(disableNetworkKey, 'false'); - } - }, -}); - -Object.defineProperty(window, 'networkLatency', { - get: () => networkLatency, - set: (value) => { - if (typeof value === 'number') { - networkLatency = value; - localStorage.setItem(networkLatencyKey, value.toString()); - } else if (value == null) { - networkLatency = null; - localStorage.removeItem(networkLatencyKey); - } - }, -}); - -export async function mockPrepare(key: string): Promise { - console.log(`Recieve request: ${key}`); - - if (disableNetwork) { - console.warn('Network is disabled for mock server.'); - throw new HttpNetworkError(); - } - if (networkLatency != null) { - await new Promise((resolve) => { - window.setTimeout(() => { - resolve(); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - }, networkLatency! * 1000); - }); - } - - await Promise.resolve(); -} +import localforage from "localforage"; +import { SHA1 } from "crypto-js"; + +import { HttpNetworkError } from "../common"; + +export const mockStorage = localforage.createInstance({ + name: "mock-backend", + description: "Database for mock back end.", + driver: localforage.INDEXEDDB, +}); + +export async function sha1(data: Blob): Promise { + const s = await new Promise((resolve) => { + const fileReader = new FileReader(); + fileReader.readAsBinaryString(data); + fileReader.onload = () => { + resolve(fileReader.result as string); + }; + }); + + return SHA1(s).toString(); +} + +const disableNetworkKey = "mockServer.disableNetwork"; +const networkLatencyKey = "mockServer.networkLatency"; + +let disableNetwork: boolean = + localStorage.getItem(disableNetworkKey) === "true" ? true : false; + +const savedNetworkLatency = localStorage.getItem(networkLatencyKey); + +let networkLatency: number | null = + savedNetworkLatency != null ? Number(savedNetworkLatency) : null; + +Object.defineProperty(window, "disableNetwork", { + get: () => disableNetwork, + set: (value) => { + if (value) { + disableNetwork = true; + localStorage.setItem(disableNetworkKey, "true"); + } else { + disableNetwork = false; + localStorage.setItem(disableNetworkKey, "false"); + } + }, +}); + +Object.defineProperty(window, "networkLatency", { + get: () => networkLatency, + set: (value) => { + if (typeof value === "number") { + networkLatency = value; + localStorage.setItem(networkLatencyKey, value.toString()); + } else if (value == null) { + networkLatency = null; + localStorage.removeItem(networkLatencyKey); + } + }, +}); + +export async function mockPrepare(key: string): Promise { + console.log(`Recieve request: ${key}`); + + if (disableNetwork) { + console.warn("Network is disabled for mock server."); + throw new HttpNetworkError(); + } + if (networkLatency != null) { + await new Promise((resolve) => { + window.setTimeout(() => { + resolve(); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + }, networkLatency! * 1000); + }); + } + + await Promise.resolve(); +} diff --git a/Timeline/ClientApp/src/app/http/mock/install.ts b/Timeline/ClientApp/src/app/http/mock/install.ts index 66174d41..17b7cc13 100644 --- a/Timeline/ClientApp/src/app/http/mock/install.ts +++ b/Timeline/ClientApp/src/app/http/mock/install.ts @@ -1,11 +1,11 @@ -import { setHttpTokenClient } from '../token'; -import { setHttpUserClient } from '../user'; -import { setHttpTimelineClient } from '../timeline'; - -import { MockHttpTokenClient } from './token'; -import { MockHttpUserClient } from './user'; -import { MockHttpTimelineClient } from './timeline'; - -setHttpTokenClient(new MockHttpTokenClient()); -setHttpUserClient(new MockHttpUserClient()); -setHttpTimelineClient(new MockHttpTimelineClient()); +import { setHttpTokenClient } from "../token"; +import { setHttpUserClient } from "../user"; +import { setHttpTimelineClient } from "../timeline"; + +import { MockHttpTokenClient } from "./token"; +import { MockHttpUserClient } from "./user"; +import { MockHttpTimelineClient } from "./timeline"; + +setHttpTokenClient(new MockHttpTokenClient()); +setHttpUserClient(new MockHttpUserClient()); +setHttpTimelineClient(new MockHttpTimelineClient()); diff --git a/Timeline/ClientApp/src/app/http/mock/timeline.ts b/Timeline/ClientApp/src/app/http/mock/timeline.ts index 9434f666..0330b303 100644 --- a/Timeline/ClientApp/src/app/http/mock/timeline.ts +++ b/Timeline/ClientApp/src/app/http/mock/timeline.ts @@ -1,658 +1,658 @@ -import { random, without, range } from 'lodash'; - -import { BlobWithEtag, NotModified } from '../common'; -import { - IHttpTimelineClient, - HttpTimelineInfo, - TimelineVisibility, - HttpTimelineListQuery, - HttpTimelineNotExistError, - HttpTimelinePostRequest, - HttpTimelineNameConflictError, - HttpTimelinePatchRequest, - HttpTimelinePostInfo, - HttpTimelinePostContent, - HttpTimelinePostPostRequest, - HttpTimelinePostNotExistError, - HttpTimelineGenericPostInfo, -} from '../timeline'; -import { HttpUser } from '../user'; - -import { mockStorage, sha1, mockPrepare } from './common'; -import { getUser, MockUserNotExistError, checkToken } from './user'; - -async function getTimelineNameList(): Promise { - return (await mockStorage.getItem('timelines')) ?? []; -} - -async function setTimelineNameList(newOne: string[]): Promise { - await mockStorage.setItem('timelines', newOne); -} - -type TimelinePropertyKey = - | 'uniqueId' - | 'lastModified' - | 'owner' - | 'description' - | 'visibility' - | 'members' - | 'currentPostId'; - -function getTimelinePropertyKey( - name: string, - property: TimelinePropertyKey -): string { - return `timeline.${name}.${property}`; -} - -function getTimelinePropertyValue( - name: string, - property: TimelinePropertyKey -): Promise { - return mockStorage.getItem

{t('about.author.title')}

{t('about.site.title')}

{t('about.credits.title')}

{t("about.author.title")}

{t("about.site.title")}

{t("about.credits.title")}

{inputPrompt}

{inputPrompt}

{title}

{title}

{ - history.push(`/users/${user.username}`); - }} - > - {t('settings.gotoSelf')} -

setDialog('changepassword')} - > - {t('settings.changePassword')} -

{ - setDialog('logout'); - }} - > - {t('settings.logout')} -

{t('settings.languagePrimary')}

{ + history.push(`/users/${user.username}`); + }} + > + {t("settings.gotoSelf")} +

setDialog("changepassword")} + > + {t("settings.changePassword")} +

{ + setDialog("logout"); + }} + > + {t("settings.logout")} +

{t("settings.languagePrimary")}

- {props.timeline.name} -

+ {props.timeline.name} +