From 232a19d7dfe0e3847b3a9a9a9be83485ffb9031c Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 30 May 2020 16:23:25 +0800 Subject: Merge front end to this repo. But I need to wait for aspnet core support for custom port and package manager for dev server. --- Timeline/ClientApp/.babelrc | 19 + Timeline/ClientApp/.editorconfig | 13 + Timeline/ClientApp/.eslintrc.js | 49 + Timeline/ClientApp/.gitignore | 27 + Timeline/ClientApp/.prettierrc.yaml | 1 + Timeline/ClientApp/LICENSE | 21 + Timeline/ClientApp/README.md | 16 + Timeline/ClientApp/package.json | 103 + .../ClientApp/public/android-chrome-192x192.png | Bin 0 -> 8519 bytes .../ClientApp/public/android-chrome-512x512.png | Bin 0 -> 23619 bytes Timeline/ClientApp/public/apple-touch-icon.png | Bin 0 -> 2088 bytes Timeline/ClientApp/public/browserconfig.xml | 9 + Timeline/ClientApp/public/favicon-16x16.png | Bin 0 -> 682 bytes Timeline/ClientApp/public/favicon-32x32.png | Bin 0 -> 821 bytes Timeline/ClientApp/public/favicon.ico | Bin 0 -> 15086 bytes Timeline/ClientApp/public/mstile-144x144.png | Bin 0 -> 2259 bytes Timeline/ClientApp/public/mstile-150x150.png | Bin 0 -> 2240 bytes Timeline/ClientApp/public/mstile-310x150.png | Bin 0 -> 2482 bytes Timeline/ClientApp/public/mstile-310x310.png | Bin 0 -> 4937 bytes Timeline/ClientApp/public/mstile-70x70.png | Bin 0 -> 1561 bytes Timeline/ClientApp/public/safari-pinned-tab.svg | 25 + Timeline/ClientApp/public/site.webmanifest | 22 + Timeline/ClientApp/src/App.tsx | 84 + Timeline/ClientApp/src/about/About.tsx | 200 + Timeline/ClientApp/src/about/about.scss | 4 + Timeline/ClientApp/src/about/author-avatar.png | Bin 0 -> 12038 bytes Timeline/ClientApp/src/admin/Admin.tsx | 78 + Timeline/ClientApp/src/admin/UserAdmin.tsx | 458 + Timeline/ClientApp/src/common/AlertHost.tsx | 75 + Timeline/ClientApp/src/common/AppBar.tsx | 107 + Timeline/ClientApp/src/common/CollapseButton.tsx | 105 + Timeline/ClientApp/src/common/FileInput.tsx | 41 + Timeline/ClientApp/src/common/ImageCropper.tsx | 294 + Timeline/ClientApp/src/common/LoadingPage.tsx | 12 + Timeline/ClientApp/src/common/OperationDialog.tsx | 380 + Timeline/ClientApp/src/common/SearchInput.tsx | 63 + Timeline/ClientApp/src/common/TimelineLogo.tsx | 26 + Timeline/ClientApp/src/common/UserTimelineLogo.tsx | 26 + Timeline/ClientApp/src/common/alert-service.ts | 59 + Timeline/ClientApp/src/common/alert.scss | 20 + Timeline/ClientApp/src/common/common.scss | 38 + Timeline/ClientApp/src/config.ts | 12 + Timeline/ClientApp/src/data/base64.ts | 9 + Timeline/ClientApp/src/data/common.ts | 20 + Timeline/ClientApp/src/data/timeline.ts | 344 + Timeline/ClientApp/src/data/user.ts | 215 + Timeline/ClientApp/src/helper.ts | 35 + Timeline/ClientApp/src/home/Home.tsx | 155 + Timeline/ClientApp/src/home/TimelineBoard.tsx | 54 + .../src/home/TimelineBoardAreaWithUser.tsx | 36 + .../src/home/TimelineBoardAreaWithoutUser.tsx | 26 + .../ClientApp/src/home/TimelineCreateDialog.tsx | 60 + Timeline/ClientApp/src/home/home.scss | 21 + Timeline/ClientApp/src/i18n.ts | 80 + Timeline/ClientApp/src/index.scss | 89 + Timeline/ClientApp/src/index.tsx | 15 + Timeline/ClientApp/src/locales/en/translation.ts | 172 + Timeline/ClientApp/src/locales/scheme.ts | 158 + Timeline/ClientApp/src/locales/zh/translation.ts | 169 + Timeline/ClientApp/src/settings/Settings.tsx | 200 + Timeline/ClientApp/src/timeline/Timeline.tsx | 87 + .../src/timeline/TimelineDeleteDialog.tsx | 59 + .../ClientApp/src/timeline/TimelineInfoCard.tsx | 112 + Timeline/ClientApp/src/timeline/TimelineItem.tsx | 113 + Timeline/ClientApp/src/timeline/TimelineMember.tsx | 194 + Timeline/ClientApp/src/timeline/TimelinePage.tsx | 39 + .../src/timeline/TimelinePageTemplate.tsx | 271 + .../src/timeline/TimelinePageTemplateUI.tsx | 147 + Timeline/ClientApp/src/timeline/TimelinePageUI.tsx | 22 + .../ClientApp/src/timeline/TimelinePostEdit.tsx | 205 + .../src/timeline/TimelinePropertyChangeDialog.tsx | 70 + Timeline/ClientApp/src/timeline/timeline-ui.scss | 27 + Timeline/ClientApp/src/timeline/timeline.scss | 119 + Timeline/ClientApp/src/type-utilities.ts | 1 + Timeline/ClientApp/src/typings.d.ts | 24 + Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx | 305 + .../ClientApp/src/user/ChangeNicknameDialog.tsx | 28 + Timeline/ClientApp/src/user/Login.tsx | 146 + Timeline/ClientApp/src/user/User.tsx | 70 + Timeline/ClientApp/src/user/UserInfoCard.tsx | 126 + Timeline/ClientApp/src/user/UserPage.tsx | 20 + Timeline/ClientApp/src/user/api.ts | 78 + Timeline/ClientApp/src/user/user-page.scss | 13 + .../ClientApp/tsconfig-for-webpack-config.json | 13 + Timeline/ClientApp/tsconfig.json | 25 + Timeline/ClientApp/webpack.common.ts | 59 + Timeline/ClientApp/webpack.config.dev.ts | 68 + Timeline/ClientApp/webpack.config.prod.dev.ts | 15 + Timeline/ClientApp/webpack.config.prod.ts | 59 + Timeline/ClientApp/yarn.lock | 8788 ++++++++++++++++++++ Timeline/Routes/ApiRoutePrefixConvention.cs | 45 + Timeline/Startup.cs | 45 +- Timeline/Timeline.csproj | 110 +- 93 files changed, 15692 insertions(+), 56 deletions(-) create mode 100644 Timeline/ClientApp/.babelrc create mode 100644 Timeline/ClientApp/.editorconfig create mode 100644 Timeline/ClientApp/.eslintrc.js create mode 100644 Timeline/ClientApp/.gitignore create mode 100644 Timeline/ClientApp/.prettierrc.yaml create mode 100644 Timeline/ClientApp/LICENSE create mode 100644 Timeline/ClientApp/README.md create mode 100644 Timeline/ClientApp/package.json create mode 100644 Timeline/ClientApp/public/android-chrome-192x192.png create mode 100644 Timeline/ClientApp/public/android-chrome-512x512.png create mode 100644 Timeline/ClientApp/public/apple-touch-icon.png create mode 100644 Timeline/ClientApp/public/browserconfig.xml create mode 100644 Timeline/ClientApp/public/favicon-16x16.png create mode 100644 Timeline/ClientApp/public/favicon-32x32.png create mode 100644 Timeline/ClientApp/public/favicon.ico create mode 100644 Timeline/ClientApp/public/mstile-144x144.png create mode 100644 Timeline/ClientApp/public/mstile-150x150.png create mode 100644 Timeline/ClientApp/public/mstile-310x150.png create mode 100644 Timeline/ClientApp/public/mstile-310x310.png create mode 100644 Timeline/ClientApp/public/mstile-70x70.png create mode 100644 Timeline/ClientApp/public/safari-pinned-tab.svg create mode 100644 Timeline/ClientApp/public/site.webmanifest create mode 100644 Timeline/ClientApp/src/App.tsx create mode 100644 Timeline/ClientApp/src/about/About.tsx create mode 100644 Timeline/ClientApp/src/about/about.scss create mode 100644 Timeline/ClientApp/src/about/author-avatar.png create mode 100644 Timeline/ClientApp/src/admin/Admin.tsx create mode 100644 Timeline/ClientApp/src/admin/UserAdmin.tsx create mode 100644 Timeline/ClientApp/src/common/AlertHost.tsx create mode 100644 Timeline/ClientApp/src/common/AppBar.tsx create mode 100644 Timeline/ClientApp/src/common/CollapseButton.tsx create mode 100644 Timeline/ClientApp/src/common/FileInput.tsx create mode 100644 Timeline/ClientApp/src/common/ImageCropper.tsx create mode 100644 Timeline/ClientApp/src/common/LoadingPage.tsx create mode 100644 Timeline/ClientApp/src/common/OperationDialog.tsx create mode 100644 Timeline/ClientApp/src/common/SearchInput.tsx create mode 100644 Timeline/ClientApp/src/common/TimelineLogo.tsx create mode 100644 Timeline/ClientApp/src/common/UserTimelineLogo.tsx create mode 100644 Timeline/ClientApp/src/common/alert-service.ts create mode 100644 Timeline/ClientApp/src/common/alert.scss create mode 100644 Timeline/ClientApp/src/common/common.scss create mode 100644 Timeline/ClientApp/src/config.ts create mode 100644 Timeline/ClientApp/src/data/base64.ts create mode 100644 Timeline/ClientApp/src/data/common.ts create mode 100644 Timeline/ClientApp/src/data/timeline.ts create mode 100644 Timeline/ClientApp/src/data/user.ts create mode 100644 Timeline/ClientApp/src/helper.ts create mode 100644 Timeline/ClientApp/src/home/Home.tsx create mode 100644 Timeline/ClientApp/src/home/TimelineBoard.tsx create mode 100644 Timeline/ClientApp/src/home/TimelineBoardAreaWithUser.tsx create mode 100644 Timeline/ClientApp/src/home/TimelineBoardAreaWithoutUser.tsx create mode 100644 Timeline/ClientApp/src/home/TimelineCreateDialog.tsx create mode 100644 Timeline/ClientApp/src/home/home.scss create mode 100644 Timeline/ClientApp/src/i18n.ts create mode 100644 Timeline/ClientApp/src/index.scss create mode 100644 Timeline/ClientApp/src/index.tsx create mode 100644 Timeline/ClientApp/src/locales/en/translation.ts create mode 100644 Timeline/ClientApp/src/locales/scheme.ts create mode 100644 Timeline/ClientApp/src/locales/zh/translation.ts create mode 100644 Timeline/ClientApp/src/settings/Settings.tsx create mode 100644 Timeline/ClientApp/src/timeline/Timeline.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelineDeleteDialog.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelineInfoCard.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelineItem.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelineMember.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelinePage.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelinePageUI.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx create mode 100644 Timeline/ClientApp/src/timeline/TimelinePropertyChangeDialog.tsx create mode 100644 Timeline/ClientApp/src/timeline/timeline-ui.scss create mode 100644 Timeline/ClientApp/src/timeline/timeline.scss create mode 100644 Timeline/ClientApp/src/type-utilities.ts create mode 100644 Timeline/ClientApp/src/typings.d.ts create mode 100644 Timeline/ClientApp/src/user/ChangeAvatarDialog.tsx create mode 100644 Timeline/ClientApp/src/user/ChangeNicknameDialog.tsx create mode 100644 Timeline/ClientApp/src/user/Login.tsx create mode 100644 Timeline/ClientApp/src/user/User.tsx create mode 100644 Timeline/ClientApp/src/user/UserInfoCard.tsx create mode 100644 Timeline/ClientApp/src/user/UserPage.tsx create mode 100644 Timeline/ClientApp/src/user/api.ts create mode 100644 Timeline/ClientApp/src/user/user-page.scss create mode 100644 Timeline/ClientApp/tsconfig-for-webpack-config.json create mode 100644 Timeline/ClientApp/tsconfig.json create mode 100644 Timeline/ClientApp/webpack.common.ts create mode 100644 Timeline/ClientApp/webpack.config.dev.ts create mode 100644 Timeline/ClientApp/webpack.config.prod.dev.ts create mode 100644 Timeline/ClientApp/webpack.config.prod.ts create mode 100644 Timeline/ClientApp/yarn.lock create mode 100644 Timeline/Routes/ApiRoutePrefixConvention.cs (limited to 'Timeline') diff --git a/Timeline/ClientApp/.babelrc b/Timeline/ClientApp/.babelrc new file mode 100644 index 00000000..5a82470b --- /dev/null +++ b/Timeline/ClientApp/.babelrc @@ -0,0 +1,19 @@ +{ + "presets": [ + "@babel/env", + "@babel/preset-react", + "@babel/preset-typescript" + ], + "plugins": [ + "@babel/plugin-syntax-dynamic-import", + "@babel/plugin-proposal-class-properties", + "@babel/plugin-proposal-optional-chaining", + "@babel/plugin-proposal-nullish-coalescing-operator", + [ + "@babel/plugin-proposal-decorators", + { + "decoratorsBeforeExport": true + } + ] + ] +} \ No newline at end of file diff --git a/Timeline/ClientApp/.editorconfig b/Timeline/ClientApp/.editorconfig new file mode 100644 index 00000000..fc0b1223 --- /dev/null +++ b/Timeline/ClientApp/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*.ts] +tab_width = 2 + +[*.tsx] +tab_width = 2 + +[*.css] +tab_width = 2 + +[*.scss] +tab_width = 2 diff --git a/Timeline/ClientApp/.eslintrc.js b/Timeline/ClientApp/.eslintrc.js new file mode 100644 index 00000000..e1cd037e --- /dev/null +++ b/Timeline/ClientApp/.eslintrc.js @@ -0,0 +1,49 @@ +module.exports = { + env: { + browser: true, + es6: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/recommended-requiring-type-checking', + 'prettier', + 'prettier/react', + 'prettier/@typescript-eslint', + 'plugin:react-hooks/recommended', + ], + globals: { + Atomics: 'readonly', + SharedArrayBuffer: 'readonly', + }, + parser: '@typescript-eslint/parser', + parserOptions: { + project: ['./tsconfig.json', './tsconfig-for-webpack-config.json'], + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 2018, + sourceType: 'module', + }, + plugins: ['react', '@typescript-eslint', 'react-hooks'], + settings: { + react: { + version: 'detect', + }, + }, + rules: { + 'react/prop-types': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], + '@typescript-eslint/explicit-function-return-type': [ + 'warn', + { + allowExpressions: true, + allowTypedFunctionExpressions: true, + allowHigherOrderFunctions: true, + }, + ], + }, +}; diff --git a/Timeline/ClientApp/.gitignore b/Timeline/ClientApp/.gitignore new file mode 100644 index 00000000..e7a6cf65 --- /dev/null +++ b/Timeline/ClientApp/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +.vscode + +dist \ No newline at end of file diff --git a/Timeline/ClientApp/.prettierrc.yaml b/Timeline/ClientApp/.prettierrc.yaml new file mode 100644 index 00000000..e871b731 --- /dev/null +++ b/Timeline/ClientApp/.prettierrc.yaml @@ -0,0 +1 @@ +singleQuote: true diff --git a/Timeline/ClientApp/LICENSE b/Timeline/ClientApp/LICENSE new file mode 100644 index 00000000..c5dd66a5 --- /dev/null +++ b/Timeline/ClientApp/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 杨宇千 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Timeline/ClientApp/README.md b/Timeline/ClientApp/README.md new file mode 100644 index 00000000..9b265493 --- /dev/null +++ b/Timeline/ClientApp/README.md @@ -0,0 +1,16 @@ +# Welcome to Timeline! + +[![Build Status](https://dev.azure.com/crupest-web/Timeline/_apis/build/status/crupest.Timeline-React?branchName=master)](https://dev.azure.com/crupest-web/Timeline/_build/latest?definitionId=8&branchName=master) +[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=crupest/Timeline-React)](https://dependabot.com) + +This is the first web app front-end of [me](https://github.com/crupest). + +It is written with [React](https://reactjs.org/) and [Typescript](https://www.typescriptlang.org/). + +The final product is hosting on my [Tencent Cloud](https://cloud.tencent.com/) Cloud Virtual Machine on https://www.crupest.xyz. + +Feel free to comment by opening an issue. + +### jibber-jabber + +I used to write the website with Angular, you can find the old project [here](https://github.com/crupest/Timeline-App), in which I build full unit tests and CI/CD. But I finally gave up for the complexity. Then I turned to flutter to build an Android app, which can be found [here](https://github.com/crupest/Timeline-Flutter). But as time passed by, it turned out that it is simpler than Angular but still very complicated. In the end, I got here and met React. First I use [Create React App](https://github.com/facebook/create-react-app) to bootstrap this and later turn to manually configured Webpack. I also adopt the [Material-UI](https://material-ui.com/). diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json new file mode 100644 index 00000000..2c9f682d --- /dev/null +++ b/Timeline/ClientApp/package.json @@ -0,0 +1,103 @@ +{ + "name": "timeline", + "version": "0.1.0", + "private": true, + "homepage": "https://crupest.xyz", + "dependencies": { + "@fortawesome/fontawesome-free": "^5.13.0", + "axios": "^0.19.0", + "bootstrap": "^4.5.0", + "classnames": "^2.2.6", + "clsx": "^1.0.4", + "core-js": "^3.6.5", + "i18next": "^19.4.5", + "i18next-browser-languagedetector": "^4.2.0", + "lodash": "^4.17.15", + "pepjs": "^0.5.2", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-hot-loader": "^4.12.21", + "react-i18next": "^11.5.0", + "react-responsive": "^8.0.3", + "react-router-dom": "^5.2.0", + "reactstrap": "^8.4.1", + "regenerator-runtime": "^0.13.5", + "rxjs": "^6.5.5", + "xregexp": "^4.3.0" + }, + "scripts": { + "start": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack-dev-server --config ./webpack.config.dev.ts", + "start-prod": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --config ./webpack.config.prod.dev.ts && http-server dist -p 3000", + "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack --config ./webpack.config.prod.ts", + "lint": "eslint src/ --ext .js --ext .jsx --ext .ts --ext .tsx" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@babel/core": "^7.10.1", + "@babel/plugin-proposal-class-properties": "^7.10.1", + "@babel/plugin-proposal-decorators": "^7.10.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1", + "@babel/plugin-proposal-optional-chaining": "^7.10.1", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "@babel/preset-env": "^7.10.1", + "@babel/preset-react": "^7.10.1", + "@babel/preset-typescript": "^7.10.1", + "@hot-loader/react-dom": "^16.13.0", + "@types/classnames": "^2.2.10", + "@types/copy-webpack-plugin": "^5.0.1", + "@types/html-webpack-plugin": "^3.2.3", + "@types/lodash": "^4.14.153", + "@types/node": "^14.0.6", + "@types/react": "^16.9.35", + "@types/react-dom": "^16.9.8", + "@types/react-responsive": "^8.0.2", + "@types/react-router-dom": "^5.1.5", + "@types/reactstrap": "^8.4.2", + "@types/webpack": "^4.41.14", + "@types/webpack-dev-server": "^3.11.0", + "@types/webpack-env": "^1.15.2", + "@types/xregexp": "^4.3.0", + "@typescript-eslint/eslint-plugin": "^2.34.0", + "@typescript-eslint/parser": "^2.34.0", + "autoprefixer": "^9.8.0", + "babel-loader": "^8.1.0", + "clean-webpack-plugin": "^3.0.0", + "copy-webpack-plugin": "^5.0.4", + "cross-env": "^7.0.2", + "css-loader": "^3.5.3", + "eslint": "^6.7.1", + "eslint-config-prettier": "^6.11.0", + "eslint-plugin-prettier": "^3.1.3", + "eslint-plugin-react": "^7.20.0", + "eslint-plugin-react-hooks": "^4.0.4", + "file-loader": "^6.0.0", + "fork-ts-checker-webpack-plugin": "^4.1.6", + "html-webpack-plugin": "^3.2.0", + "html-webpack-template": "^6.2.0", + "http-server": "^0.12.3", + "image-webpack-loader": "^6.0.0", + "postcss-loader": "^3.0.0", + "prettier": "^2.0.5", + "sass": "^1.26.7", + "sass-loader": "^8.0.2", + "style-loader": "^1.2.1", + "ts-node": "^8.10.2", + "tsconfig-paths": "^3.9.0", + "typescript": "^3.9.3", + "url-loader": "^4.1.0", + "webpack": "^4.43.0", + "webpack-cli": "^3.3.9", + "webpack-dev-server": "^3.11.0" + } +} diff --git a/Timeline/ClientApp/public/android-chrome-192x192.png b/Timeline/ClientApp/public/android-chrome-192x192.png new file mode 100644 index 00000000..da9b6b81 Binary files /dev/null and b/Timeline/ClientApp/public/android-chrome-192x192.png differ diff --git a/Timeline/ClientApp/public/android-chrome-512x512.png b/Timeline/ClientApp/public/android-chrome-512x512.png new file mode 100644 index 00000000..fa84e055 Binary files /dev/null and b/Timeline/ClientApp/public/android-chrome-512x512.png differ diff --git a/Timeline/ClientApp/public/apple-touch-icon.png b/Timeline/ClientApp/public/apple-touch-icon.png new file mode 100644 index 00000000..d5a3fb45 Binary files /dev/null and b/Timeline/ClientApp/public/apple-touch-icon.png differ diff --git a/Timeline/ClientApp/public/browserconfig.xml b/Timeline/ClientApp/public/browserconfig.xml new file mode 100644 index 00000000..a47e5a5b --- /dev/null +++ b/Timeline/ClientApp/public/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #2d89ef + + + diff --git a/Timeline/ClientApp/public/favicon-16x16.png b/Timeline/ClientApp/public/favicon-16x16.png new file mode 100644 index 00000000..6c978995 Binary files /dev/null and b/Timeline/ClientApp/public/favicon-16x16.png differ diff --git a/Timeline/ClientApp/public/favicon-32x32.png b/Timeline/ClientApp/public/favicon-32x32.png new file mode 100644 index 00000000..bbde902f Binary files /dev/null and b/Timeline/ClientApp/public/favicon-32x32.png differ diff --git a/Timeline/ClientApp/public/favicon.ico b/Timeline/ClientApp/public/favicon.ico new file mode 100644 index 00000000..d4cd3db6 Binary files /dev/null and b/Timeline/ClientApp/public/favicon.ico differ diff --git a/Timeline/ClientApp/public/mstile-144x144.png b/Timeline/ClientApp/public/mstile-144x144.png new file mode 100644 index 00000000..61eaaf43 Binary files /dev/null and b/Timeline/ClientApp/public/mstile-144x144.png differ diff --git a/Timeline/ClientApp/public/mstile-150x150.png b/Timeline/ClientApp/public/mstile-150x150.png new file mode 100644 index 00000000..85fa83ee Binary files /dev/null and b/Timeline/ClientApp/public/mstile-150x150.png differ diff --git a/Timeline/ClientApp/public/mstile-310x150.png b/Timeline/ClientApp/public/mstile-310x150.png new file mode 100644 index 00000000..41889953 Binary files /dev/null and b/Timeline/ClientApp/public/mstile-310x150.png differ diff --git a/Timeline/ClientApp/public/mstile-310x310.png b/Timeline/ClientApp/public/mstile-310x310.png new file mode 100644 index 00000000..cddce02e Binary files /dev/null and b/Timeline/ClientApp/public/mstile-310x310.png differ diff --git a/Timeline/ClientApp/public/mstile-70x70.png b/Timeline/ClientApp/public/mstile-70x70.png new file mode 100644 index 00000000..52f59d43 Binary files /dev/null and b/Timeline/ClientApp/public/mstile-70x70.png differ diff --git a/Timeline/ClientApp/public/safari-pinned-tab.svg b/Timeline/ClientApp/public/safari-pinned-tab.svg new file mode 100644 index 00000000..8886ebcc --- /dev/null +++ b/Timeline/ClientApp/public/safari-pinned-tab.svg @@ -0,0 +1,25 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + diff --git a/Timeline/ClientApp/public/site.webmanifest b/Timeline/ClientApp/public/site.webmanifest new file mode 100644 index 00000000..6746fe59 --- /dev/null +++ b/Timeline/ClientApp/public/site.webmanifest @@ -0,0 +1,22 @@ +{ + "$schema": "http://json.schemastore.org/web-manifest", + + "name": "Timeline", + "short_name": "Timeline", + "description": "Record your life in Timeline! Created by crupest.", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/Timeline/ClientApp/src/App.tsx b/Timeline/ClientApp/src/App.tsx new file mode 100644 index 00000000..d3cfbd8a --- /dev/null +++ b/Timeline/ClientApp/src/App.tsx @@ -0,0 +1,84 @@ +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 { checkUserLoginState, useOptionalUser } 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 user = useOptionalUser(); + + React.useEffect(() => { + checkUserLoginState(); + }, []); + + let body; + if (user === undefined) { + body = ; + } else { + body = ( + }> + + + + + + + + + + + + + + + + + + + + {user && user.administrator && ( + + + + )} + + + + + + ); + } + + return ( + <> + {body} + + + ); +}; + +export default hot(App); diff --git a/Timeline/ClientApp/src/about/About.tsx b/Timeline/ClientApp/src/about/About.tsx new file mode 100644 index 00000000..70cc653f --- /dev/null +++ b/Timeline/ClientApp/src/about/About.tsx @@ -0,0 +1,200 @@ +import React from 'react'; +import { useTranslation, Trans } from 'react-i18next'; + +import authorAvatarUrl from './author-avatar.png'; + +import AppBar from '../common/AppBar'; + +const frontendCredits: { + name: string; + url: string; + icon?: string; +}[] = [ + { + name: 'reactjs', + url: 'https://reactjs.org', + icon: 'react', + }, + { + name: 'typescript', + url: 'https://www.typescriptlang.org', + }, + { + name: 'bootstrap', + url: 'https://getbootstrap.com', + icon: 'bootstrap', + }, + { + 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', + icon: 'sass', + }, + { + name: 'fontawesome', + url: 'https://fontawesome.com', + icon: 'font-awesome-flag', + }, + { + name: 'eslint', + url: 'https://eslint.org', + }, + { + name: 'prettier', + url: 'https://prettier.io', + }, + { + name: 'pepjs', + url: 'https://github.com/jquery/PEP', + }, + { + name: 'cross-env', + url: 'https://github.com/kentcdodds/cross-env', + }, +]; + +const backendCredits: { + name: string; + url: string; + icon?: 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.frontendRepo')} + +

+

+ + {t('about.site.backendRepo')} + +

+
+
+

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

+

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

+

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

+ +

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

+ +
+
+ + ); +}; + +export default About; diff --git a/Timeline/ClientApp/src/about/about.scss b/Timeline/ClientApp/src/about/about.scss new file mode 100644 index 00000000..b097aa89 --- /dev/null +++ b/Timeline/ClientApp/src/about/about.scss @@ -0,0 +1,4 @@ +.about-link-icon { + @extend .mx-2; + font-size: 1.2em; +} diff --git a/Timeline/ClientApp/src/about/author-avatar.png b/Timeline/ClientApp/src/about/author-avatar.png new file mode 100644 index 00000000..d890d8d0 Binary files /dev/null and b/Timeline/ClientApp/src/about/author-avatar.png differ diff --git a/Timeline/ClientApp/src/admin/Admin.tsx b/Timeline/ClientApp/src/admin/Admin.tsx new file mode 100644 index 00000000..af07dd2b --- /dev/null +++ b/Timeline/ClientApp/src/admin/Admin.tsx @@ -0,0 +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; diff --git a/Timeline/ClientApp/src/admin/UserAdmin.tsx b/Timeline/ClientApp/src/admin/UserAdmin.tsx new file mode 100644 index 00000000..afef79c9 --- /dev/null +++ b/Timeline/ClientApp/src/admin/UserAdmin.tsx @@ -0,0 +1,458 @@ +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'; +import { apiBaseUrl } from '../config'; + +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: 'delete'; 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; + 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(); + users.find( + (u) => u.username === dialog.username + )!.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(); + users.find( + (u) => u.username === dialog.username + )!.administrator = newPermission; + return users; + }); + }} + /> + ); + break; + } + } + + if (users) { + const userComponents = users.map((user) => { + return ( + { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const dialogInfo: any = { + type: item, + username: user.username, + }; + if (item === 'changepermission') { + dialogInfo.newPermission = !user.administrator; + } + setDialog(dialogInfo); + }} + /> + ); + }); + + return ( + <> + + {userComponents} + {dialogNode} + + ); + } else { + return ; + } +}; + +export default UserAdmin; diff --git a/Timeline/ClientApp/src/common/AlertHost.tsx b/Timeline/ClientApp/src/common/AlertHost.tsx new file mode 100644 index 00000000..2d9dbb13 --- /dev/null +++ b/Timeline/ClientApp/src/common/AlertHost.tsx @@ -0,0 +1,75 @@ +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'; + +interface AutoCloseAlertProps { + alert: AlertInfo; + close: () => void; +} + +export const AutoCloseAlert: React.FC = (props) => { + const { alert } = props; + + React.useEffect(() => { + const tag = window.setTimeout(props.close, 5000); + return () => window.clearTimeout(tag); + }, [props.close]); + + 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/common/AppBar.tsx b/Timeline/ClientApp/src/common/AppBar.tsx new file mode 100644 index 00000000..39794b0f --- /dev/null +++ b/Timeline/ClientApp/src/common/AppBar.tsx @@ -0,0 +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 } from '../data/user'; +import { useOptionalVersionedAvatarUrl } from '../user/api'; + +import TimelineLogo from './TimelineLogo'; + +const AppBar: React.FC<{}> = (_) => { + const history = useHistory(); + const user = useUser(); + const avatarUrl = useOptionalVersionedAvatarUrl(user?._links?.avatar); + + 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/common/CollapseButton.tsx b/Timeline/ClientApp/src/common/CollapseButton.tsx new file mode 100644 index 00000000..03f42e73 --- /dev/null +++ b/Timeline/ClientApp/src/common/CollapseButton.tsx @@ -0,0 +1,105 @@ +import React from 'react'; + +export interface CollapseButtonProps { + collapse: boolean; + toggle: (visibility: boolean) => void; + className?: string; +} + +const CollapseButton: React.FC = (props) => { + const { toggle, collapse, className } = props; + + const onClick = React.useCallback(() => { + toggle(!collapse); + }, [toggle, collapse]); + + return ( + + {(() => { + if (collapse) { + return ( + <> + + + + + + ); + } else { + return ( + <> + + + + + + ); + } + })()} + + ); +}; + +export default CollapseButton; diff --git a/Timeline/ClientApp/src/common/FileInput.tsx b/Timeline/ClientApp/src/common/FileInput.tsx new file mode 100644 index 00000000..d434f0fa --- /dev/null +++ b/Timeline/ClientApp/src/common/FileInput.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import clsx from 'clsx'; + +import { ExcludeKey } from '../type-utilities'; + +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 ( + <> + + + + ); +}; + +export default FileInput; diff --git a/Timeline/ClientApp/src/common/ImageCropper.tsx b/Timeline/ClientApp/src/common/ImageCropper.tsx new file mode 100644 index 00000000..3ef35b44 --- /dev/null +++ b/Timeline/ClientApp/src/common/ImageCropper.tsx @@ -0,0 +1,294 @@ +import * as React from 'react'; +import clsx from 'clsx'; + +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 imgElement = React.useRef(null); + + const onImageRef = React.useCallback( + (e: HTMLImageElement | null) => { + imgElement.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 moveRatio = { + x: movement.x / imgElement.current!.width, + y: movement.y / imgElement.current!.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 moveRatio = { + x: movement.x / imgElement.current!.width, + y: movement.x / imgElement.current!.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] + ); + + // 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: 100 / imageInfo.ratio + '%', + paddingTop: '100%', + height: 0, + }; + } else { + return { + width: '100%', + paddingTop: 100 * imageInfo.ratio + '%', + height: 0, + }; + } + } + })(); + + return ( +
+ to crop +
+
+
+
+
+ ); +}; + +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/common/LoadingPage.tsx b/Timeline/ClientApp/src/common/LoadingPage.tsx new file mode 100644 index 00000000..c1bc7105 --- /dev/null +++ b/Timeline/ClientApp/src/common/LoadingPage.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Spinner } from 'reactstrap'; + +const LoadingPage: React.FC = () => { + return ( +
+ +
+ ); +}; + +export default LoadingPage; diff --git a/Timeline/ClientApp/src/common/OperationDialog.tsx b/Timeline/ClientApp/src/common/OperationDialog.tsx new file mode 100644 index 00000000..e7b6612c --- /dev/null +++ b/Timeline/ClientApp/src/common/OperationDialog.tsx @@ -0,0 +1,380 @@ +import React, { useState, InputHTMLAttributes } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Spinner, + Container, + ModalBody, + Label, + Input, + FormGroup, + FormFeedback, + ModalFooter, + Button, + Modal, + ModalHeader, + FormText +} from 'reactstrap'; + +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 Error('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 => { + setStep({ + type: 'success', + data: d + }); + }, + e => { + 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) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (newInputError as any)[index] = error; + } + } + 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 && } + { + 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 + ); + }} + /> + + + ); + } else if (item.type === 'select') { + return ( + + + { + 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/common/SearchInput.tsx b/Timeline/ClientApp/src/common/SearchInput.tsx new file mode 100644 index 00000000..46fb00d1 --- /dev/null +++ b/Timeline/ClientApp/src/common/SearchInput.tsx @@ -0,0 +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; diff --git a/Timeline/ClientApp/src/common/TimelineLogo.tsx b/Timeline/ClientApp/src/common/TimelineLogo.tsx new file mode 100644 index 00000000..1ec62021 --- /dev/null +++ b/Timeline/ClientApp/src/common/TimelineLogo.tsx @@ -0,0 +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; diff --git a/Timeline/ClientApp/src/common/UserTimelineLogo.tsx b/Timeline/ClientApp/src/common/UserTimelineLogo.tsx new file mode 100644 index 00000000..3b721985 --- /dev/null +++ b/Timeline/ClientApp/src/common/UserTimelineLogo.tsx @@ -0,0 +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; diff --git a/Timeline/ClientApp/src/common/alert-service.ts b/Timeline/ClientApp/src/common/alert-service.ts new file mode 100644 index 00000000..305752eb --- /dev/null +++ b/Timeline/ClientApp/src/common/alert-service.ts @@ -0,0 +1,59 @@ +import pull from 'lodash/pull'; + +export interface AlertInfo { + type?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'; + message: string; +} + +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/common/alert.scss b/Timeline/ClientApp/src/common/alert.scss new file mode 100644 index 00000000..09877727 --- /dev/null +++ b/Timeline/ClientApp/src/common/alert.scss @@ -0,0 +1,20 @@ +.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/common/common.scss b/Timeline/ClientApp/src/common/common.scss new file mode 100644 index 00000000..5998c086 --- /dev/null +++ b/Timeline/ClientApp/src/common/common.scss @@ -0,0 +1,38 @@ +.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/config.ts b/Timeline/ClientApp/src/config.ts new file mode 100644 index 00000000..2f088a10 --- /dev/null +++ b/Timeline/ClientApp/src/config.ts @@ -0,0 +1,12 @@ +export const apiBaseUrl = (function () { + if (process.env.TIMELINE_USEDEVAPI) { + console.log('process.env.TIMELINE_USEDEVAPI is set, use dev api server!'); + return 'http://localhost:5000'; + } else if (process.env.NODE_ENV === 'production') { + console.log('Production mode!'); + return 'https://api.crupest.xyz'; + } else { + console.log('Development mode!'); + return 'http://localhost:5000'; + } +})(); diff --git a/Timeline/ClientApp/src/data/base64.ts b/Timeline/ClientApp/src/data/base64.ts new file mode 100644 index 00000000..6d846527 --- /dev/null +++ b/Timeline/ClientApp/src/data/base64.ts @@ -0,0 +1,9 @@ +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); + }); +} diff --git a/Timeline/ClientApp/src/data/common.ts b/Timeline/ClientApp/src/data/common.ts new file mode 100644 index 00000000..61db8bd2 --- /dev/null +++ b/Timeline/ClientApp/src/data/common.ts @@ -0,0 +1,20 @@ +import { AxiosError } from 'axios'; + +export function extractStatusCode(error: AxiosError): number | null { + const code = error.response && error.response.status; + if (typeof code === 'number') { + return code; + } else { + return null; + } +} + +export function extractErrorCode(error: AxiosError): number | null { + const code = + error.response && error.response.data && error.response.data.code; + if (typeof code === 'number') { + return code; + } else { + return null; + } +} diff --git a/Timeline/ClientApp/src/data/timeline.ts b/Timeline/ClientApp/src/data/timeline.ts new file mode 100644 index 00000000..bc5e1658 --- /dev/null +++ b/Timeline/ClientApp/src/data/timeline.ts @@ -0,0 +1,344 @@ +import axios from 'axios'; +import XRegExp from 'xregexp'; + +import { base64 } from './base64'; +import { apiBaseUrl } from '../config'; +import { User, UserAuthInfo, getCurrentUser, UserWithToken } from './user'; + +export const kTimelineVisibilities = ['Public', 'Register', 'Private'] as const; + +export type TimelineVisibility = typeof kTimelineVisibilities[number]; + +export const timelineVisibilityTooltipTranslationMap: Record< + TimelineVisibility, + string +> = { + Public: 'timeline.visibilityTooltip.public', + Register: 'timeline.visibilityTooltip.register', + Private: 'timeline.visibilityTooltip.private', +}; + +export interface TimelineInfo { + name: string; + description: string; + owner: User; + visibility: TimelineVisibility; + members: User[]; + _links: { + posts: string; + }; +} + +export interface TimelinePostTextContent { + type: 'text'; + text: string; +} + +export interface TimelinePostImageContent { + type: 'image'; + url: string; +} + +export type TimelinePostContent = + | TimelinePostTextContent + | TimelinePostImageContent; + +export interface TimelinePostInfo { + id: number; + content: TimelinePostContent; + time: Date; + author: User; +} + +export interface CreatePostRequestTextContent { + type: 'text'; + text: string; +} + +export interface CreatePostRequestImageContent { + type: 'image'; + data: Blob; +} + +export type CreatePostRequestContent = + | CreatePostRequestTextContent + | CreatePostRequestImageContent; + +export interface CreatePostRequest { + content: CreatePostRequestContent; + time?: Date; +} + +// TODO: Remove in the future +export interface TimelineChangePropertyRequest { + visibility?: TimelineVisibility; + description?: string; +} + +export interface PersonalTimelineChangePropertyRequest { + visibility?: TimelineVisibility; + description?: string; +} + +export interface OrdinaryTimelineChangePropertyRequest { + // not supported by server now + // name?: string; + visibility?: TimelineVisibility; + description?: string; +} + +//-------------------- begin: internal model -------------------- + +interface RawTimelinePostTextContent { + type: 'text'; + text: string; +} + +interface RawTimelinePostImageContent { + type: 'image'; + url: string; +} + +type RawTimelinePostContent = + | RawTimelinePostTextContent + | RawTimelinePostImageContent; + +interface RawTimelinePostInfo { + id: number; + content: RawTimelinePostContent; + time: string; + author: User; +} + +interface RawCreatePostRequestTextContent { + type: 'text'; + text: string; +} + +interface RawCreatePostRequestImageContent { + type: 'text'; + data: string; +} + +type RawCreatePostRequestContent = + | RawCreatePostRequestTextContent + | RawCreatePostRequestImageContent; + +interface RawCreatePostRequest { + content: RawCreatePostRequestContent; + time?: string; +} + +//-------------------- end: internal model -------------------- + +function processRawTimelinePostInfo( + raw: RawTimelinePostInfo, + token?: string +): TimelinePostInfo { + return { + ...raw, + content: (() => { + if (raw.content.type === 'image' && token != null) { + return { + ...raw.content, + url: raw.content.url + '?token=' + token, + }; + } + return raw.content; + })(), + time: new Date(raw.time), + }; +} + +type TimelineUrlResolver = (name: string) => string; + +export class TimelineServiceTemplate< + TTimeline extends TimelineInfo, + TChangePropertyRequest +> { + private checkUser(): UserWithToken { + const user = getCurrentUser(); + if (user == null) { + throw new Error('You must login to perform the operation.'); + } + return user; + } + + constructor(private urlResolver: TimelineUrlResolver) {} + + changeProperty( + name: string, + req: TChangePropertyRequest + ): Promise { + const user = this.checkUser(); + + return axios + .patch(`${this.urlResolver(name)}?token=${user.token}`, req) + .then((res) => res.data); + } + + fetch(name: string): Promise { + return axios + .get(`${this.urlResolver(name)}`) + .then((res) => res.data); + } + + fetchPosts(name: string): Promise { + const token = getCurrentUser()?.token; + return axios + .get( + token == null + ? `${this.urlResolver(name)}/posts` + : `${this.urlResolver(name)}/posts?token=${token}` + ) + .then((res) => res.data.map((p) => processRawTimelinePostInfo(p, token))); + } + + createPost( + name: string, + request: CreatePostRequest + ): Promise { + const user = this.checkUser(); + + const rawReq: Promise = new Promise< + RawCreatePostRequestContent + >((resolve) => { + if (request.content.type === 'image') { + base64(request.content.data).then((d) => + resolve({ + ...request.content, + data: d, + } as RawCreatePostRequestImageContent) + ); + } else { + resolve(request.content); + } + }).then((content) => { + const rawReq: RawCreatePostRequest = { + content, + }; + if (request.time != null) { + rawReq.time = request.time.toISOString(); + } + return rawReq; + }); + + return rawReq + .then((req) => + axios.post( + `${this.urlResolver(name)}/posts?token=${user.token}`, + req + ) + ) + .then((res) => processRawTimelinePostInfo(res.data, user.token)); + } + + deletePost(name: string, id: number): Promise { + const user = this.checkUser(); + + return axios.delete( + `${this.urlResolver(name)}/posts/${id}?token=${user.token}` + ); + } + + addMember(name: string, username: string): Promise { + const user = this.checkUser(); + + return axios.put( + `${this.urlResolver(name)}/members/${username}?token=${user.token}` + ); + } + + removeMember(name: string, username: string): Promise { + const user = this.checkUser(); + + return axios.delete( + `${this.urlResolver(name)}/members/${username}?token=${user.token}` + ); + } + + isMemberOf(username: string, timeline: TTimeline): boolean { + return timeline.members.findIndex((m) => m.username == username) >= 0; + } + + hasReadPermission( + user: UserAuthInfo | null | undefined, + timeline: TTimeline + ): 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 && this.isMemberOf(user.username, timeline)) { + return true; + } + } + return false; + } + + hasPostPermission( + user: UserAuthInfo | null | undefined, + timeline: TTimeline + ): 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: TTimeline + ): boolean { + if (user != null && user.administrator) return true; + + return user != null && user.username == timeline.owner.username; + } + + hasModifyPostPermission( + user: UserAuthInfo | null | undefined, + timeline: TTimeline, + post: TimelinePostInfo + ): boolean { + if (user != null && user.administrator) return true; + + return ( + user != null && + (user.username === timeline.owner.username || + user.username === post.author.username) + ); + } +} + +export type PersonalTimelineService = TimelineServiceTemplate< + TimelineInfo, + PersonalTimelineChangePropertyRequest +>; + +export const personalTimelineService: PersonalTimelineService = new TimelineServiceTemplate< + TimelineInfo, + PersonalTimelineChangePropertyRequest +>((name) => `${apiBaseUrl}/timelines/@${name}`); + +export type OrdinaryTimelineService = TimelineServiceTemplate< + TimelineInfo, + OrdinaryTimelineChangePropertyRequest +>; + +export const ordinaryTimelineService: OrdinaryTimelineService = new TimelineServiceTemplate< + TimelineInfo, + TimelineChangePropertyRequest +>((name) => `${apiBaseUrl}/timelines/${name}`); + +const timelineNameReg = XRegExp('^[-_\\p{L}]*$', 'u'); + +export function validateTimelineName(name: string): boolean { + return timelineNameReg.test(name); +} diff --git a/Timeline/ClientApp/src/data/user.ts b/Timeline/ClientApp/src/data/user.ts new file mode 100644 index 00000000..755aecf6 --- /dev/null +++ b/Timeline/ClientApp/src/data/user.ts @@ -0,0 +1,215 @@ +import axios, { AxiosError } from 'axios'; +import { useState, useEffect } from 'react'; +import { BehaviorSubject, Observable } from 'rxjs'; + +import { apiBaseUrl } from '../config'; +import { pushAlert } from '../common/alert-service'; +import { i18nPromise } from '../i18n'; + +export interface UserAuthInfo { + username: string; + administrator: boolean; +} + +export interface User { + username: string; + administrator: boolean; + nickname: string; + _links: { + avatar: string; + timeline: string; + }; +} + +export interface UserWithToken extends User { + token: string; +} + +interface CreateTokenRequest { + username: string; + password: string; +} + +interface CreateTokenResponse { + token: string; + user: User; +} + +interface VerifyTokenRequest { + token: string; +} + +interface VerifyTokenResponse { + user: User; +} + +export type LoginCredentials = CreateTokenRequest; + +const userSubject = new BehaviorSubject( + undefined +); + +export const user$: Observable = userSubject; + +export function getCurrentUser(): UserWithToken | null | undefined { + return userSubject.value; +} + +const kCreateTokenUrl = '/token/create'; +const kVerifyTokenUrl = '/token/verify'; +const createTokenUrl = apiBaseUrl + kCreateTokenUrl; +const verifyTokenUrl = apiBaseUrl + kVerifyTokenUrl; + +function verifyToken(token: string): Promise { + return axios + .post(verifyTokenUrl, { + token: token + } as VerifyTokenRequest) + .then(res => res.data.user); +} + +const TOKEN_STORAGE_KEY = 'token'; + +export function checkUserLoginState(): Promise { + if (getCurrentUser() !== undefined) + throw new Error("Already checked user. Can't check twice."); + + const savedToken = window.localStorage.getItem(TOKEN_STORAGE_KEY); + if (savedToken) { + return verifyToken(savedToken) + .then( + u => { + const user: UserWithToken = { + ...u, + token: savedToken + }; + i18nPromise.then(t => { + pushAlert({ + type: 'success', + message: t('user.welcomeBack') + }); + }); + return user; + }, + (e: AxiosError) => { + if (e.response != null) { + window.localStorage.removeItem(TOKEN_STORAGE_KEY); + i18nPromise.then(t => { + pushAlert({ + type: 'danger', + message: t('user.verifyTokenFailed') + }); + }); + } else { + i18nPromise.then(t => { + pushAlert({ + type: 'danger', + message: t('user.verifyTokenFailedNetwork') + }); + }); + } + + return null; + } + ) + .then(u => { + userSubject.next(u); + return u; + }); + } + userSubject.next(null); + return Promise.resolve(null); +} + +export class BadCredentialError { + constructor(public innerError: Error) {} + + message = 'login.badCredential'; +} + +export function userLogin( + credentials: LoginCredentials, + rememberMe: boolean +): Promise { + if (getCurrentUser()) { + throw new Error('Already login.'); + } + return axios + .post(createTokenUrl, { ...credentials, expire: 30 }) + .catch(e => { + const error = e as AxiosError; + if (error.response?.data?.code === 11010101) { + throw new BadCredentialError(e); + } + throw e; + }) + .then(res => { + const body = res.data; + const token = body.token; + if (rememberMe) { + window.localStorage.setItem(TOKEN_STORAGE_KEY, token); + } + const user = { + ...body.user, + token + }; + userSubject.next(user); + return user; + }); +} + +export function userLogout(): void { + if (getCurrentUser() === undefined) { + throw new Error('Please check user first.'); + } + if (getCurrentUser() === null) { + throw new Error('No login.'); + } + window.localStorage.removeItem(TOKEN_STORAGE_KEY); + userSubject.next(null); +} + +export function useOptionalUser(): UserWithToken | null | undefined { + const [user, setUser] = useState( + userSubject.value + ); + useEffect(() => { + const sub = user$.subscribe(u => setUser(u)); + return () => { + sub.unsubscribe(); + }; + }); + return user; +} + +export function useUser(): UserWithToken | null { + const [user, setUser] = useState(() => { + const initUser = userSubject.value; + if (initUser === undefined) { + throw new Error( + "This is a logic error in user module. Current user can't be undefined in useUser." + ); + } + return initUser; + }); + useEffect(() => { + const sub = user$.subscribe(u => { + if (u === undefined) { + throw new Error( + "This is a logic error in user module. User emitted can't be undefined later." + ); + } + setUser(u); + }); + return () => { + sub.unsubscribe(); + }; + }); + return user; +} + +export function fetchUser(username: string): Promise { + return axios + .get(`${apiBaseUrl}/users/${username}`) + .then(res => res.data); +} diff --git a/Timeline/ClientApp/src/helper.ts b/Timeline/ClientApp/src/helper.ts new file mode 100644 index 00000000..904dcbbe --- /dev/null +++ b/Timeline/ClientApp/src/helper.ts @@ -0,0 +1,35 @@ +//copied from https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter +export function updateQueryString( + key: string, + value?: string | null, + url?: string +): string { + if (!url) url = window.location.href; + const re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi'); + let hash; + + if (re.test(url)) { + if (typeof value !== 'undefined' && value !== null) { + return url.replace(re, '$1' + key + '=' + value + '$2$3'); + } else { + hash = url.split('#'); + url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, ''); + if (typeof hash[1] !== 'undefined' && hash[1] !== null) { + url += '#' + hash[1]; + } + return url; + } + } else { + if (typeof value !== 'undefined' && value !== null) { + const separator = url.includes('?') ? '&' : '?'; + hash = url.split('#'); + url = hash[0] + separator + key + '=' + value; + if (typeof hash[1] !== 'undefined' && hash[1] !== null) { + url += '#' + hash[1]; + } + return url; + } else { + return url; + } + } +} diff --git a/Timeline/ClientApp/src/home/Home.tsx b/Timeline/ClientApp/src/home/Home.tsx new file mode 100644 index 00000000..25398a0a --- /dev/null +++ b/Timeline/ClientApp/src/home/Home.tsx @@ -0,0 +1,155 @@ +import React from 'react'; +import { useHistory } from 'react-router'; +import { Row, Container, Button, Col } from 'reactstrap'; +import { useTranslation } from 'react-i18next'; +import axios from 'axios'; + +import { apiBaseUrl } from '../config'; +import { useUser } from '../data/user'; +import { TimelineInfo } from '../data/timeline'; + +import AppBar from '../common/AppBar'; +import SearchInput from '../common/SearchInput'; +import TimelineBoardAreaWithoutUser from './TimelineBoardAreaWithoutUser'; +import TimelineBoardAreaWithUser from './TimelineBoardAreaWithUser'; +import TimelineCreateDialog from './TimelineCreateDialog'; + +const Home: React.FC = (_) => { + const history = useHistory(); + + const { t } = useTranslation(); + + const user = useUser(); + + const [navText, setNavText] = React.useState(''); + + const [publicTimelines, setPublicTimelines] = React.useState< + TimelineInfo[] | undefined + >(undefined); + const [ownTimelines, setOwnTimelines] = React.useState< + TimelineInfo[] | undefined + >(undefined); + const [joinTimelines, setJoinTimelines] = React.useState< + TimelineInfo[] | undefined + >(undefined); + + React.useEffect(() => { + let subscribe = true; + if (user == null) { + setOwnTimelines(undefined); + setJoinTimelines(undefined); + axios + .get(`${apiBaseUrl}/timelines?visibility=public`) + .then((res) => { + if (subscribe) { + setPublicTimelines(res.data); + } + }); + } else { + setPublicTimelines(undefined); + axios + .get( + `${apiBaseUrl}/timelines?relate=${user.username}&relateType=own` + ) + .then((res) => { + if (subscribe) { + setOwnTimelines(res.data); + } + }); + axios + .get( + `${apiBaseUrl}/timelines?relate=${user.username}&relateType=join` + ) + .then((res) => { + if (subscribe) { + setJoinTimelines(res.data); + } + }); + } + return () => { + subscribe = false; + }; + }, [user]); + + 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]); + + const openCreateDialog = React.useCallback(() => { + setDialog('create'); + }, []); + + const closeDialog = React.useCallback(() => { + setDialog(null); + }, []); + + return ( + <> + + + + + + {t('home.createButton')} + + ) + } + /> + + + {(() => { + if (user == null) { + return ( + + ); + } else { + return ( + + ); + } + })()} + + + {dialog === 'create' && } + + ); +}; + +export default Home; diff --git a/Timeline/ClientApp/src/home/TimelineBoard.tsx b/Timeline/ClientApp/src/home/TimelineBoard.tsx new file mode 100644 index 00000000..38a5fcf8 --- /dev/null +++ b/Timeline/ClientApp/src/home/TimelineBoard.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import clsx from 'clsx'; +import { Link } from 'react-router-dom'; +import { Spinner } from 'reactstrap'; + +import { TimelineInfo } from '../data/timeline'; + +import TimelineLogo from '../common/TimelineLogo'; +import UserTimelineLogo from '../common/UserTimelineLogo'; + +export interface TimelineBoardProps { + title?: string; + timelines?: TimelineInfo[]; + className?: string; +} + +const TimelineBoard: React.FC = props => { + const { title, timelines, className } = props; + + return ( +
+ {title != null &&

{title}

} + {(() => { + if (timelines == null) { + return ( +
+ +
+ ); + } 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/home/TimelineBoardAreaWithUser.tsx b/Timeline/ClientApp/src/home/TimelineBoardAreaWithUser.tsx new file mode 100644 index 00000000..a8603b9e --- /dev/null +++ b/Timeline/ClientApp/src/home/TimelineBoardAreaWithUser.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Row, Col } from 'reactstrap'; +import { useTranslation } from 'react-i18next'; + +import TimelineBoard from './TimelineBoard'; +import { TimelineInfo } from '../data/timeline'; + +interface TimelineBoardAreaWithUserProps { + ownTimelines?: TimelineInfo[]; + joinTimelines?: TimelineInfo[]; +} + +const TimelineBoardAreaWithUser: React.FC = ( + props +) => { + const { t } = useTranslation(); + + return ( + + + + + + + + + ); +}; + +export default TimelineBoardAreaWithUser; diff --git a/Timeline/ClientApp/src/home/TimelineBoardAreaWithoutUser.tsx b/Timeline/ClientApp/src/home/TimelineBoardAreaWithoutUser.tsx new file mode 100644 index 00000000..dc05ff09 --- /dev/null +++ b/Timeline/ClientApp/src/home/TimelineBoardAreaWithoutUser.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Row, Col } from 'reactstrap'; + +import { TimelineInfo } from '../data/timeline'; + +import TimelineBoard from './TimelineBoard'; + +interface TimelineBoardAreaWithoutUserProps { + publicTimelines?: TimelineInfo[]; +} + +const TimelineBoardAreaWithoutUser: React.FC = ( + props +) => { + const { publicTimelines } = props; + + return ( + + + + + + ); +}; + +export default TimelineBoardAreaWithoutUser; diff --git a/Timeline/ClientApp/src/home/TimelineCreateDialog.tsx b/Timeline/ClientApp/src/home/TimelineCreateDialog.tsx new file mode 100644 index 00000000..30d29bc8 --- /dev/null +++ b/Timeline/ClientApp/src/home/TimelineCreateDialog.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { useHistory } from 'react-router'; +import axios from 'axios'; + +import { apiBaseUrl } from '../config'; +import { useUser } from '../data/user'; +import { validateTimelineName } from '../data/timeline'; + +import OperationDialog from '../common/OperationDialog'; + +interface TimelineCreateDialogProps { + open: boolean; + close: () => void; +} + +const TimelineCreateDialog: React.FC = props => { + const history = useHistory(); + const user = useUser()!; + + 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 axios.post(`${apiBaseUrl}/timelines?token=${user.token}`, { + name + }); + }} + onSuccessAndClose={() => { + history.push(`timelines/${nameSaved}`); + }} + failurePrompt={e => (e as object).toString()} + /> + ); +}; + +export default TimelineCreateDialog; diff --git a/Timeline/ClientApp/src/home/home.scss b/Timeline/ClientApp/src/home/home.scss new file mode 100644 index 00000000..8e40e597 --- /dev/null +++ b/Timeline/ClientApp/src/home/home.scss @@ -0,0 +1,21 @@ +.timeline-item-icon { + width: 1em; + height: 1em; +} + +.timeline-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/i18n.ts b/Timeline/ClientApp/src/i18n.ts new file mode 100644 index 00000000..9f3a0801 --- /dev/null +++ b/Timeline/ClientApp/src/i18n.ts @@ -0,0 +1,80 @@ +import i18n, { BackendModule, ResourceKey } from 'i18next'; +import LanguageDetector from 'i18next-browser-languagedetector'; +import { initReactI18next } from 'react-i18next'; + +const backend: BackendModule = { + type: 'backend', + async read(language, namespace, callback) { + function error(message: string): void { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + callback(new Error(message), false as any); + } + + function success(result: ResourceKey): void { + callback(null, result); + } + + if (namespace !== 'translation') { + error("Namespace must be 'translation'."); + } + + if (language === 'en') { + const res = ( + await import( + /* webpackChunkName: "locales-en" */ './locales/en/translation' + ) + ).default; + success(res); + } else if (language === 'zh') { + const res = ( + await import( + /* webpackChunkName: "locales-zh" */ './locales/zh/translation' + ) + ).default; + success(res); + } else { + error(`Language ${language} is not supported.`); + } + }, + init() {}, // eslint-disable-line @typescript-eslint/no-empty-function + create() {} // eslint-disable-line @typescript-eslint/no-empty-function +}; + +export const i18nPromise = i18n + .use(LanguageDetector) + .use(backend) + .use(initReactI18next) // bind react-i18next to the instance + .init({ + fallbackLng: 'en', + lowerCaseLng: true, + + debug: process.env.NODE_ENV === 'development', + + interpolation: { + escapeValue: false // not needed for react!! + } + + // react i18next special options (optional) + // override if needed - omit if ok with defaults + /* + react: { + bindI18n: 'languageChanged', + bindI18nStore: '', + transEmptyNodeValue: '', + transSupportBasicHtmlNodes: true, + transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'], + useSuspense: true, + } + */ + }); + +if (module.hot) { + module.hot.accept( + ['./locales/en/translation', './locales/zh/translation'], + () => { + i18n.reloadResources(); + } + ); +} + +export default i18n; diff --git a/Timeline/ClientApp/src/index.scss b/Timeline/ClientApp/src/index.scss new file mode 100644 index 00000000..9f3d3444 --- /dev/null +++ b/Timeline/ClientApp/src/index.scss @@ -0,0 +1,89 @@ +@import '~bootstrap/scss/bootstrap'; +$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; +@import '~@fortawesome/fontawesome-free/scss/fontawesome'; +@import '~@fortawesome/fontawesome-free/scss/solid'; +@import '~@fortawesome/fontawesome-free/scss/brands'; + +@import './common/common.scss'; +@import './common/alert.scss'; +@import './home/home.scss'; +@import './about/about.scss'; +@import './timeline/timeline.scss'; +@import './timeline/timeline-ui.scss'; +@import './user/user-page.scss'; + +body { + margin: 0; +} + +#app { + display: flex; + flex-direction: column; +} + +small { + line-height: 1.2; +} + +.width-1px { + width: 1px; +} + +.flex-fix-length { + flex-grow: 0; + flex-shrink: 0; +} + +.position-lt { + left: 0; + top: 0; +} + +.position-rb { + right: 0; + bottom: 0; +} + +.app-bar { + z-index: 1035; +} + +.avatar { + width: 60px; +} + +.avatar.large { + width: 100px; +} + +.avatar.small { + width: 40px; +} + +.mt-appbar { + margin-top: 56px; +} + +.icon-button { + font-size: 20px; +} + +.large-icon { + font-size: 26px; +} + +textarea { + resize: none; +} + +.white-space-no-wrap { + white-space: nowrap; +} + +.cru-card { + @extend .shadow; + @extend .border; + @extend .border-primary; + @extend .rounded; + @extend .bg-light; +} diff --git a/Timeline/ClientApp/src/index.tsx b/Timeline/ClientApp/src/index.tsx new file mode 100644 index 00000000..0c66dda0 --- /dev/null +++ b/Timeline/ClientApp/src/index.tsx @@ -0,0 +1,15 @@ +import 'regenerator-runtime'; +import 'core-js/modules/es.promise'; +import 'core-js/modules/es.array.iterator'; +import 'pepjs'; + +import React from 'react'; +import ReactDOM from 'react-dom'; + +import './index.scss'; + +import './i18n'; + +import App from './App'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/Timeline/ClientApp/src/locales/en/translation.ts b/Timeline/ClientApp/src/locales/en/translation.ts new file mode 100644 index 00000000..86fd6d52 --- /dev/null +++ b/Timeline/ClientApp/src/locales/en/translation.ts @@ -0,0 +1,172 @@ +import TranslationResource from '../scheme'; + +const translation: TranslationResource = { + welcome: 'Welcome!', + search: 'Search', + nav: { + settings: 'Settings', + login: 'Login', + about: 'About', + }, + chooseImage: 'Choose a image', + loadImageError: 'Failed to load image.', + home: { + go: 'Go!', + allTimeline: 'All Timelines', + joinTimeline: 'Joined Timelines', + ownTimeline: 'Owned Timelines', + createButton: 'Create Timeline', + createDialog: { + title: 'Create Timeline!', + name: 'Name', + nameFormat: + 'Name must consist of only letter including non-English letter, digit, hyphen(-) and underline(_) and be no longer than 26.', + badFormat: 'Bad format.', + noEmpty: 'Empty is not allowed.', + tooLong: 'Too long.', + }, + }, + operationDialog: { + retry: 'Retry', + nextStep: 'Next', + previousStep: 'Previous', + confirm: 'Confirm', + cancel: 'Cancel', + ok: 'OK!', + processing: 'Processing...', + success: 'Success!', + error: 'An error occured.', + }, + timeline: { + messageCantSee: 'Sorry, you are not allowed to see this timeline.😅', + userNotExist: 'The user does not exist!', + timelineNotExist: 'The timeline does not exist!', + manage: 'Manage', + memberButton: 'Member', + send: 'Send', + deletePostFailed: 'Failed to delete post.', + sendPostFailed: 'Failed to send post.', + visibility: { + public: 'public to everyone', + register: 'only registed people can see', + private: 'only members can see', + }, + visibilityTooltip: { + public: + 'Everyone including those without accounts can see content of the timeline.', + register: + 'Only those who have an account and logined can see content of the timeline.', + private: 'Only members of this timeline can see content of the timeline.', + }, + dialogChangeProperty: { + title: 'Change Timeline Properties', + visibility: 'Visibility', + description: 'Description', + }, + member: { + alreadyMember: 'The user is already a member.', + add: 'Add', + remove: 'Remove', + }, + manageItem: { + nickname: 'Nickname', + avatar: 'Avatar', + property: 'Timeline Property', + member: 'Timeline Member', + delete: 'Delete Timeline', + }, + deleteDialog: { + title: 'Delete Timeline', + inputPrompt: + 'This is a dangerous action. If you are sure to delete timeline<1>{{name}}, please input its name below and click confirm button.', + notMatch: 'Name does not match.', + }, + }, + user: { + username: 'username', + password: 'password', + login: 'login', + rememberMe: 'Remember Me', + welcomeBack: 'Welcome back!', + verifyTokenFailed: 'User login info is expired. Please login again!', + verifyTokenFailedNetwork: + 'Verifying user login info failed. Please check your network and refresh page!', + }, + login: { + emptyUsername: "Username can't be empty.", + emptyPassword: "Password can't be empty.", + badCredential: 'Username or password is invalid.', + alreadyLogin: 'Already login! Redirect to home page in 3s!', + }, + userPage: { + dialogChangeNickname: { + title: 'Change Nickname', + inputLabel: 'New nickname', + }, + dialogChangeAvatar: { + title: 'Change Avatar', + previewImgAlt: 'preview', + prompt: { + select: 'Please select a picture.', + crop: 'Please crop the picture.', + processingCrop: 'Cropping picture...', + uploading: 'Uploading...', + preview: 'Please preview avatar', + }, + upload: 'upload', + }, + }, + settings: { + subheaders: { + account: 'Account', + customization: 'Customization', + }, + languagePrimary: 'Choose display language.', + languageSecondary: + 'You language preference will be saved locally. Next time you visit this page, last language option will be used.', + changePassword: "Change account's password.", + logout: 'Log out this account.', + gotoSelf: + 'Click here to go to timeline of myself to change nickname and avatar.', + dialogChangePassword: { + title: 'Change Password', + prompt: + 'You are changing your password. You need to input the correct old password. After change, you need to login again and all old login will be invalid.', + inputOldPassword: 'Old password', + inputNewPassword: 'New password', + inputRetypeNewPassword: 'Retype new password', + errorEmptyOldPassword: "Old password can't be empty.", + errorEmptyNewPassword: "New password can't be empty.", + errorRetypeNotMatch: 'Password retyped does not match.', + }, + }, + about: { + author: { + title: 'Site Developer', + fullname: 'Fullname: ', + nickname: 'Nickname: ', + introduction: 'Introduction: ', + introductionContent: 'A programmer coding based on coincidence', + links: 'Links: ', + }, + site: { + title: 'Site Information', + content: + 'The name of this site is <1>Timeline, which is a Web App with <3>timeline as its core concept. Its frontend and backend are both developed by <5>me, and open source on GitHub. It is relatively easy to deploy it on your own server, which is also one of my goals. Welcome to comment anything in GitHub repository.', + frontendRepo: 'Frontend GitHub Repo', + backendRepo: 'Backend GitHub Repo', + }, + credits: { + title: 'Credits', + content: + 'Timeline is works standing on shoulders of gaints. Special appreciation for many open source projects listed below or not. Related licenses could be found in GitHub repository.', + frontend: 'Frontend: ', + backend: 'Backend: ', + }, + }, + admin: { + title: 'admin', + }, +}; + +export default translation; diff --git a/Timeline/ClientApp/src/locales/scheme.ts b/Timeline/ClientApp/src/locales/scheme.ts new file mode 100644 index 00000000..6517e7b7 --- /dev/null +++ b/Timeline/ClientApp/src/locales/scheme.ts @@ -0,0 +1,158 @@ +export default interface TranslationResource { + welcome: string; + search: string; + chooseImage: string; + loadImageError: string; + nav: { + settings: string; + login: string; + about: string; + }; + home: { + go: string; + allTimeline: string; + joinTimeline: string; + ownTimeline: string; + createButton: string; + createDialog: { + title: string; + name: string; + nameFormat: string; + badFormat: string; + noEmpty: string; + tooLong: string; + }; + }; + operationDialog: { + retry: string; + nextStep: string; + previousStep: string; + confirm: string; + cancel: string; + ok: string; + processing: string; + success: string; + error: string; + }; + timeline: { + messageCantSee: string; + userNotExist: string; + timelineNotExist: string; + manage: string; + memberButton: string; + send: string; + deletePostFailed: string; + sendPostFailed: string; + visibility: { + public: string; + register: string; + private: string; + }; + visibilityTooltip: { + public: string; + register: string; + private: string; + }; + dialogChangeProperty: { + title: string; + visibility: string; + description: string; + }; + member: { + alreadyMember: string; + add: string; + remove: string; + }; + manageItem: { + nickname: string; + avatar: string; + property: string; + member: string; + delete: string; + }; + deleteDialog: { + title: string; + inputPrompt: string; + notMatch: string; + }; + }; + user: { + username: string; + password: string; + login: string; + rememberMe: string; + welcomeBack: string; + verifyTokenFailed: string; + verifyTokenFailedNetwork: string; + }; + login: { + emptyUsername: string; + emptyPassword: string; + badCredential: string; + alreadyLogin: string; + }; + userPage: { + dialogChangeNickname: { + title: string; + inputLabel: string; + }; + dialogChangeAvatar: { + title: string; + previewImgAlt: string; + prompt: { + select: string; + crop: string; + processingCrop: string; + preview: string; + uploading: string; + }; + upload: string; + }; + }; + settings: { + subheaders: { + account: string; + customization: string; + }; + languagePrimary: string; + languageSecondary: string; + changePassword: string; + logout: string; + gotoSelf: string; + dialogChangePassword: { + title: string; + prompt: string; + inputOldPassword: string; + inputNewPassword: string; + inputRetypeNewPassword: string; + errorEmptyOldPassword: string; + errorEmptyNewPassword: string; + errorRetypeNotMatch: string; + }; + }; + about: { + author: { + title: string; + fullname: string; + nickname: string; + introduction: string; + introductionContent: string; + links: string; + }; + site: { + title: string; + content: string; + frontendRepo: string; + backendRepo: string; + }; + credits: { + title: string; + content: string; + frontend: string; + backend: string; + }; + }; + admin: { + title: string; + }; +} diff --git a/Timeline/ClientApp/src/locales/zh/translation.ts b/Timeline/ClientApp/src/locales/zh/translation.ts new file mode 100644 index 00000000..259cfd23 --- /dev/null +++ b/Timeline/ClientApp/src/locales/zh/translation.ts @@ -0,0 +1,169 @@ +import TranslationResource from '../scheme'; + +const translation: TranslationResource = { + welcome: '欢迎！', + search: '搜索', + nav: { + settings: '设置', + login: '登陆', + about: '关于', + }, + chooseImage: '选择一个图片', + loadImageError: '加载图片失败', + home: { + go: '冲！', + allTimeline: '所有的时间线', + joinTimeline: '加入的时间线', + ownTimeline: '拥有的时间线', + createButton: '创建时间线', + createDialog: { + title: '创建时间线！', + name: '名字', + nameFormat: + '名字只能由字母、汉字、数字、下划线（_）和连字符（-）构成，且长度不能超过26.', + badFormat: '格式错误', + noEmpty: '不能为空', + tooLong: '太长了', + }, + }, + operationDialog: { + retry: '重试', + nextStep: '下一步', + previousStep: '上一步', + confirm: '确定', + cancel: '取消', + ok: '好的！', + processing: '处理中...', + success: '成功！', + error: '出错啦！', + }, + timeline: { + messageCantSee: '不好意思，你没有权限查看这个时间线。😅', + userNotExist: '该用户不存在！', + timelineNotExist: '该时间线不存在！', + manage: '管理', + memberButton: '成员', + send: '发送', + deletePostFailed: '删除消息失败。', + sendPostFailed: '发送消息失败。', + visibility: { + public: '对所有人公开', + register: '仅注册可见', + private: '仅成员可见', + }, + visibilityTooltip: { + public: '所有人都可以看到这个时间线的内容，包括没有注册的人。', + register: '只有拥有本网站的账号且登陆了的人才能看到这个时间线的内容。', + private: '只有这个时间线的成员可以看到这个时间线的内容。', + }, + dialogChangeProperty: { + title: '修改时间线属性', + visibility: '可见性', + description: '描述', + }, + member: { + alreadyMember: '该用户已经是一个成员。', + add: '添加', + remove: '移除', + }, + manageItem: { + nickname: '昵称', + avatar: '头像', + property: '时间线属性', + member: '时间线成员', + delete: '删除时间线', + }, + deleteDialog: { + title: '删除时间线', + inputPrompt: + '这是一个危险的操作。如果您确认要删除时间线<1>{{name}}，请在下面输入它的名字并点击确认。', + notMatch: '名字不匹配', + }, + }, + user: { + username: '用户名', + password: '密码', + login: '登录', + rememberMe: '记住我', + welcomeBack: '欢迎回来！', + verifyTokenFailed: '用户登录信息已过期，请重新登陆！', + verifyTokenFailedNetwork: + '验证用户登录信息失败，请检查网络连接并刷新页面！', + }, + login: { + emptyUsername: '用户名不能为空。', + emptyPassword: '密码不能为空。', + badCredential: '用户名或密码错误。', + alreadyLogin: '已经登陆，三秒后导航到首页！', + }, + userPage: { + dialogChangeNickname: { + title: '更改昵称', + inputLabel: '新昵称', + }, + dialogChangeAvatar: { + title: '修改头像', + previewImgAlt: '预览', + prompt: { + select: '请选择一个图片', + crop: '请裁剪图片', + processingCrop: '正在裁剪图片', + uploading: '正在上传', + preview: '请预览图片', + }, + upload: '上传', + }, + }, + settings: { + subheaders: { + account: '账户', + customization: '个性化', + }, + languagePrimary: '选择显示的语言。', + languageSecondary: + '您的语言偏好将会存储在本地，下次浏览时将自动使用上次保存的语言选项。', + changePassword: '更改账号的密码。', + logout: '注销此账号。', + gotoSelf: '点击前往个人时间线修改昵称和头像！', + dialogChangePassword: { + title: '修改密码', + prompt: + '您正在修改密码，您需要输入正确的旧密码。成功修改后您需要重新登陆，而且以前所有的登录都会失效。', + inputOldPassword: '旧密码', + inputNewPassword: '新密码', + inputRetypeNewPassword: '再次输入新密码', + errorEmptyOldPassword: '旧密码不能为空。', + errorEmptyNewPassword: '新密码不能为空', + errorRetypeNotMatch: '两次输入的密码不一致', + }, + }, + about: { + author: { + title: '网站作者', + fullname: '姓名：', + nickname: '昵称：', + introduction: '简介：', + introductionContent: '一个基于巧合编程的代码爱好者。', + links: '链接：', + }, + site: { + title: '网站信息', + content: + '这个网站的名字叫 <1>Timeline，是一个以<3>时间线为核心概念的 Web App . 它的前端和后端都是由<5>我开发，并且在 GitHub 上开源。大家可以相对轻松的把它们部署在自己的服务器上，这也是我的目标之一。欢迎大家前往 GitHub 仓库提出任何意见。', + frontendRepo: '前端 GitHub 仓库', + backendRepo: '后端 GitHub 仓库', + }, + credits: { + title: '鸣谢', + content: + 'Timeline 是站在巨人肩膀上的作品，感谢以下列出的和其他未列出的许多开源项目，相关 License 请在 GitHub 仓库中查看。', + frontend: '前端：', + backend: '后端：', + }, + }, + admin: { + title: '管理', + }, +}; + +export default translation; diff --git a/Timeline/ClientApp/src/settings/Settings.tsx b/Timeline/ClientApp/src/settings/Settings.tsx new file mode 100644 index 00000000..b3996fdc --- /dev/null +++ b/Timeline/ClientApp/src/settings/Settings.tsx @@ -0,0 +1,200 @@ +import React, { useState } from 'react'; +import { useHistory } from 'react-router'; +import { useTranslation } from 'react-i18next'; +import axios, { AxiosError } from 'axios'; +import { Container, Row, Col, Input } from 'reactstrap'; + +import { apiBaseUrl } from '../config'; + +import { useUser, userLogout } from '../data/user'; + +import AppBar from '../common/AppBar'; +import OperationDialog, { + OperationInputErrorInfo, +} from '../common/OperationDialog'; + +interface ChangePasswordDialogProps { + open: boolean; + close: () => void; +} + +async function changePassword( + oldPassword: string, + newPassword: string, + token: string +): Promise { + const url = `${apiBaseUrl}/userop/changepassword?token=${token}`; + try { + await axios.post(url, { + oldPassword, + newPassword, + }); + } catch (e) { + const error = e as AxiosError; + if ( + error.response && + error.response.status === 400 && + error.response.data && + error.response.data.message + ) { + throw error.response.data.message; + } + throw e; + } +} + +const ChangePasswordDialog: React.FC = (props) => { + const user = useUser()!; + const history = useHistory(); + const { t } = useTranslation(); + + const [redirect, setRedirect] = useState(false); + + return ( + + v === '' + ? 'settings.dialogChangePassword.errorEmptyOldPassword' + : null, + }, + { + type: 'text', + label: t('settings.dialogChangePassword.inputNewPassword'), + password: true, + validator: (v, values) => { + const error: OperationInputErrorInfo = {}; + error[1] = + v === '' + ? 'settings.dialogChangePassword.errorEmptyNewPassword' + : null; + if (v === values[2]) { + error[2] = null; + } else { + if (values[2] !== '') { + error[2] = 'settings.dialogChangePassword.errorRetypeNotMatch'; + } + } + return error; + }, + }, + { + type: 'text', + label: t('settings.dialogChangePassword.inputRetypeNewPassword'), + password: true, + validator: (v, values) => + v !== values[1] + ? 'settings.dialogChangePassword.errorRetypeNotMatch' + : null, + }, + ]} + onProcess={async ([oldPassword, newPassword]) => { + await changePassword( + oldPassword as string, + newPassword as string, + user.token + ); + userLogout(); + setRedirect(true); + }} + close={() => { + props.close(); + if (redirect) { + history.push('/login'); + } + }} + /> + ); +}; + +const Settings: React.FC = (_) => { + const { i18n, t } = useTranslation(); + const user = useUser(); + const history = useHistory(); + + const [dialog, setDialog] = useState(null); + + const language = i18n.language.slice(0, 2); + + return ( + <> + + + {user ? ( + <> + + +
{ + history.push(`/users/${user.username}`); + }} + > + {t('settings.gotoSelf')} +
+ + + + +
setDialog('changepassword')} + > + {t('settings.changePassword')} +
+ + + + +
{ + userLogout(); + history.push('/'); + }} + > + {t('settings.logout')} +
+ + + + ) : null} + + +
{t('settings.languagePrimary')}
+

{t('settings.languageSecondary')}

+ + + { + i18n.changeLanguage(e.target.value); + }} + > + + + + + + {dialog === 'changepassword' ? ( + { + setDialog(null); + }} + /> + ) : null} + + + ); +}; + +export default Settings; diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx new file mode 100644 index 00000000..defca4c3 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/Timeline.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import clsx from 'clsx'; +import { Container } from 'reactstrap'; + +import { TimelinePostInfo } from '../data/timeline'; +import { useUser } from '../data/user'; +import { useAvatarVersion } from '../user/api'; + +import TimelineItem from './TimelineItem'; + +export interface TimelinePostInfoEx extends TimelinePostInfo { + deletable: boolean; +} + +export type TimelineDeleteCallback = (index: number, id: number) => void; + +export interface TimelineProps { + className?: string; + posts: TimelinePostInfoEx[]; + onDelete: TimelineDeleteCallback; +} + +const Timeline: React.FC = (props) => { + const user = useUser(); + const avatarVersion = useAvatarVersion(); + + const { posts, onDelete } = props; + + const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState< + number + >(-1); + + const onItemClick = React.useCallback(() => { + setIndexShowDeleteButton(-1); + }, []); + + const onToggleDelete = React.useMemo(() => { + return posts.map((post, i) => { + return post.deletable + ? () => { + setIndexShowDeleteButton((oldIndexShowDeleteButton) => { + return oldIndexShowDeleteButton !== i ? i : -1; + }); + } + : undefined; + }); + }, [posts]); + + const onItemDelete = React.useMemo(() => { + return posts.map((post, i) => { + return () => { + onDelete(i, post.id); + }; + }); + }, [posts, onDelete]); + + return ( +
+ + {(() => { + const length = posts.length; + return posts.map((post, i) => { + const av: number | undefined = + user != null && user.username === post.author.username + ? avatarVersion + : undefined; + + return ( + + ); + }); + })()} + +
+ ); +}; + +export default Timeline; diff --git a/Timeline/ClientApp/src/timeline/TimelineDeleteDialog.tsx b/Timeline/ClientApp/src/timeline/TimelineDeleteDialog.tsx new file mode 100644 index 00000000..2b682a6b --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelineDeleteDialog.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import axios from 'axios'; +import { useHistory } from 'react-router'; +import { Trans } from 'react-i18next'; + +import { apiBaseUrl } from '../config'; +import { useUser } from '../data/user'; +import OperationDialog from '../common/OperationDialog'; + +interface TimelineDeleteDialog { + open: boolean; + name: string; + close: () => void; +} + +const TimelineDeleteDialog: React.FC = props => { + const user = useUser()!; + const history = useHistory(); + + const { name } = props; + + return ( + { + return ( + + 0{{ name }}2 + + ); + }} + inputScheme={[ + { + type: 'text', + validator: value => { + if (value !== name) { + return 'timeline.deleteDialog.notMatch'; + } else { + return null; + } + } + } + ]} + onProcess={() => { + return axios.delete( + `${apiBaseUrl}/timelines/${name}?token=${user.token}` + ); + }} + onSuccessAndClose={() => { + history.replace('/'); + }} + /> + ); +}; + +export default TimelineDeleteDialog; diff --git a/Timeline/ClientApp/src/timeline/TimelineInfoCard.tsx b/Timeline/ClientApp/src/timeline/TimelineInfoCard.tsx new file mode 100644 index 00000000..2ce7c378 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelineInfoCard.tsx @@ -0,0 +1,112 @@ +import React from 'react'; +import clsx from 'clsx'; +import { + Dropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, +} from 'reactstrap'; +import { useTranslation } from 'react-i18next'; +import { fromEvent } from 'rxjs'; + +import { + timelineVisibilityTooltipTranslationMap, + TimelineInfo, +} from '../data/timeline'; +import { TimelineCardComponentProps } from './TimelinePageTemplateUI'; + +export type OrdinaryTimelineManageItem = 'delete'; + +export type TimelineInfoCardProps = TimelineCardComponentProps< + TimelineInfo, + OrdinaryTimelineManageItem +>; + +const TimelineInfoCard: React.FC = (props) => { + const { onHeight, onManage } = props; + + const { t } = useTranslation(); + + const containerRef = React.useRef(null!); + + const notifyHeight = React.useCallback((): void => { + if (onHeight) { + onHeight(containerRef.current.getBoundingClientRect().height); + } + }, [onHeight]); + + React.useEffect(() => { + const subscription = fromEvent(window, 'resize').subscribe(notifyHeight); + return () => subscription.unsubscribe(); + }); + + const [manageDropdownOpen, setManageDropdownOpen] = React.useState( + false + ); + const toggleManageDropdown = React.useCallback( + (): void => setManageDropdownOpen((old) => !old), + [] + ); + const onManageProperty = React.useCallback( + (): void => onManage!('property'), + [onManage] + ); + const onManageDelete = React.useCallback((): void => onManage!('delete'), [ + onManage, + ]); + + return ( +
+

+ {props.timeline.name} +

+
+ + {props.timeline.owner.nickname} + + @{props.timeline.owner.username} + +
+

{props.timeline.description}

+ + {t(timelineVisibilityTooltipTranslationMap[props.timeline.visibility])} + +
+ {props.onManage != null ? ( + + + {t('timeline.manage')} + + + + {t('timeline.manageItem.property')} + + + {t('timeline.manageItem.member')} + + + + {t('timeline.manageItem.delete')} + + + + ) : ( + + )} +
+
+ ); +}; + +export default TimelineInfoCard; diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx new file mode 100644 index 00000000..402d51d9 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import clsx from 'clsx'; +import { Row, Col } from 'reactstrap'; +import { Link } from 'react-router-dom'; + +import { TimelinePostInfo } from '../data/timeline'; +import { useAvatarUrlWithGivenVersion } from '../user/api'; + +export interface TimelineItemProps { + post: TimelinePostInfo; + showDeleteButton?: boolean; + current?: boolean; + toggleMore?: () => void; + onDelete?: () => void; + onClick?: () => void; + avatarVersion?: number; +} + +const TimelineItem: React.FC = (props) => { + const { i18n } = useTranslation(); + + const current = props.current === true; + + const { toggleMore: toggleDelete } = props; + + const avatarUrl = useAvatarUrlWithGivenVersion( + props.avatarVersion, + props.post.author._links.avatar + ); + + const onOpenMore = React.useMemo< + React.MouseEventHandler | undefined + >(() => { + if (toggleDelete == null) { + return undefined; + } else { + return (e) => { + toggleDelete(); + e.stopPropagation(); + }; + } + }, [toggleDelete]); + + return ( + + +
+
+
+
+
+ {current &&
} + + + +
+ + + {props.post.time.toLocaleString(i18n.languages)} + + + {props.post.author.nickname} + + +
+ {props.toggleMore != null ? ( +
+ +
+ ) : null} + +

+ + + + {(() => { + const { content } = props.post; + if (content.type === 'text') { + return content.text; + } else { + return ( + + ); + } + })()} +

+ + {props.showDeleteButton ? ( +
+ +
+ ) : undefined} + + ); +}; + +export default TimelineItem; diff --git a/Timeline/ClientApp/src/timeline/TimelineMember.tsx b/Timeline/ClientApp/src/timeline/TimelineMember.tsx new file mode 100644 index 00000000..eac8d417 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelineMember.tsx @@ -0,0 +1,194 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { User } from '../data/user'; + +import SearchInput from '../common/SearchInput'; +import { + Container, + ListGroup, + ListGroupItem, + Modal, + Row, + Col, + Button +} from 'reactstrap'; + +export interface TimelineMemberCallbacks { + onCheckUser: (username: string) => Promise; + onAddUser: (user: User) => Promise; + onRemoveUser: (username: string) => void; +} + +export interface TimelineMemberProps { + members: User[]; + edit: TimelineMemberCallbacks | null | undefined; +} + +const TimelineMember: React.FC = props => { + const { t } = useTranslation(); + + const [userSearchText, setUserSearchText] = useState(''); + const [userSearchState, setUserSearchState] = useState< + | { + type: 'user'; + data: User; + } + | { type: 'error'; data: string } + | { type: 'loading' } + | { type: 'init' } + >({ type: 'init' }); + + const members = props.members; + + return ( + + + {members.map((member, index) => ( + + + + + + + {member.nickname} + + {'@' + member.username} + + + {(() => { + if (index === 0) { + return null; + } + const onRemove = props.edit?.onRemoveUser; + if (onRemove == null) { + return null; + } + return ( + + ); + })()} + + + ))} + + {(() => { + const edit = props.edit; + if (edit != null) { + return ( + <> + { + setUserSearchText(v); + }} + loading={userSearchState.type === 'loading'} + onButtonClick={() => { + if (userSearchText === '') { + setUserSearchState({ + type: 'error', + data: 'login.emptyUsername' + }); + return; + } + + setUserSearchState({ type: 'loading' }); + edit.onCheckUser(userSearchText).then( + u => { + if (u == null) { + setUserSearchState({ + type: 'error', + data: 'timeline.userNotExist' + }); + } else { + setUserSearchState({ type: 'user', data: u }); + } + }, + e => { + setUserSearchState({ + type: 'error', + data: e.toString() + }); + } + ); + }} + /> + {(() => { + if (userSearchState.type === 'user') { + const u = userSearchState.data; + const addable = + members.findIndex(m => m.username === u.username) === -1; + return ( + <> + {!addable ? ( +

{t('timeline.member.alreadyMember')}

+ ) : null} + + + + + + + {u.nickname} + + {'@' + u.username} + + + + + + + ); + } else if (userSearchState.type === 'error') { + return ( +

{t(userSearchState.data)}

+ ); + } + })()} + + ); + } else { + return null; + } + })()} + + ); +}; + +export default TimelineMember; + +export interface TimelineMemberDialogProps extends TimelineMemberProps { + open: boolean; + onClose: () => void; +} + +export const TimelineMemberDialog: React.FC = props => { + return ( + + + + ); +}; diff --git a/Timeline/ClientApp/src/timeline/TimelinePage.tsx b/Timeline/ClientApp/src/timeline/TimelinePage.tsx new file mode 100644 index 00000000..5adebe1f --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelinePage.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { useParams } from 'react-router'; + +import { ordinaryTimelineService } from '../data/timeline'; + +import TimelinePageUI from './TimelinePageUI'; +import TimelinePageTemplate from '../timeline/TimelinePageTemplate'; +import { OrdinaryTimelineManageItem } from './TimelineInfoCard'; +import TimelineDeleteDialog from './TimelineDeleteDialog'; + +const TimelinePage: React.FC = _ => { + const { name } = useParams<{ name: string }>(); + + const [dialog, setDialog] = React.useState( + null + ); + + let dialogElement: React.ReactElement | undefined; + if (dialog === 'delete') { + dialogElement = ( + setDialog(null)} name={name} /> + ); + } + + return ( + <> + setDialog(item)} + service={ordinaryTimelineService} + notFoundI18nKey="timeline.timelineNotExist" + /> + {dialogElement} + + ); +}; + +export default TimelinePage; diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx new file mode 100644 index 00000000..3660ad78 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx @@ -0,0 +1,271 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { AxiosError } from 'axios'; +import concat from 'lodash/concat'; +import without from 'lodash/without'; + +import { ExcludeKey } from '../type-utilities'; +import { useUser, fetchUser } from '../data/user'; +import { pushAlert } from '../common/alert-service'; +import { extractStatusCode, extractErrorCode } from '../data/common'; +import { + TimelineServiceTemplate, + TimelineInfo, + TimelineChangePropertyRequest, +} from '../data/timeline'; + +import { TimelinePostInfoEx, TimelineDeleteCallback } from './Timeline'; +import { TimelineMemberDialog } from './TimelineMember'; +import TimelinePropertyChangeDialog from './TimelinePropertyChangeDialog'; +import { TimelinePageTemplateUIProps } from './TimelinePageTemplateUI'; +import { TimelinePostSendCallback } from './TimelinePostEdit'; + +export interface TimelinePageTemplateProps< + TManageItem, + TTimeline extends TimelineInfo +> { + name: string; + onManage: (item: TManageItem) => void; + service: TimelineServiceTemplate; + UiComponent: React.ComponentType< + ExcludeKey< + TimelinePageTemplateUIProps, + 'CardComponent' + > + >; + dataVersion?: number; + notFoundI18nKey: string; +} + +export default function TimelinePageTemplate< + TManageItem, + TTimeline extends TimelineInfo +>( + props: TimelinePageTemplateProps +): React.ReactElement | null { + const { t } = useTranslation(); + + const { name } = props; + + const user = useUser(); + + const [dialog, setDialog] = React.useState( + null + ); + const [timeline, setTimeline] = React.useState( + undefined + ); + const [posts, setPosts] = React.useState< + TimelinePostInfoEx[] | 'forbid' | undefined + >(undefined); + const [error, setError] = React.useState(undefined); + + const service = props.service; + + React.useEffect(() => { + let subscribe = true; + service.fetch(name).then( + (ti) => { + if (subscribe) { + setTimeline(ti); + if (!service.hasReadPermission(user, ti)) { + setPosts('forbid'); + } else { + service.fetchPosts(name).then( + (data) => { + if (subscribe) { + setPosts( + data.map((post) => ({ + ...post, + deletable: service.hasModifyPostPermission( + user, + ti, + post + ), + })) + ); + } + }, + (error) => { + if (subscribe) { + setError(error.toString()); + } + } + ); + } + } + }, + (error: AxiosError) => { + if (subscribe) { + if ( + extractStatusCode(error) === 404 || + extractErrorCode(error) === 11020101 + ) { + setError(t(props.notFoundI18nKey)); + } else { + setError(error.toString()); + } + } + } + ); + return () => { + subscribe = false; + }; + }, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]); + + React.useEffect(() => { + if (posts != null) { + window.scrollTo( + 0, + document.body.scrollHeight || document.documentElement.scrollHeight + ); + } + }, [posts]); + + const closeDialog = React.useCallback((): void => { + setDialog(null); + }, []); + + let dialogElement: React.ReactElement | undefined; + + if (dialog === 'property') { + dialogElement = ( + { + return service.changeProperty(name, req).then((newTimeline) => { + setTimeline(newTimeline); + }); + }} + /> + ); + } else if (dialog === 'member') { + dialogElement = ( + { + return fetchUser(u).catch((e) => { + if ( + extractStatusCode(e) === 404 || + extractErrorCode(e) === 11020101 + ) { + return Promise.resolve(null); + } else { + return Promise.reject(e); + } + }); + }, + onAddUser: (u) => { + return service.addMember(name, u.username).then((_) => { + setTimeline({ + ...timeline!, + members: concat(timeline!.members, u), + }); + }); + }, + onRemoveUser: (u) => { + service.removeMember(name, u).then((_) => { + setTimeline({ + ...timeline!, + members: without( + timeline!.members, + timeline!.members.find((m) => m.username === u) + ), + }); + }); + }, + } + : null + } + /> + ); + } + + const { UiComponent } = props; + + const onDelete: TimelineDeleteCallback = React.useCallback( + (index, id) => { + service.deletePost(name, id).then( + (_) => { + setPosts((oldPosts) => + without( + oldPosts as TimelinePostInfoEx[], + (oldPosts as TimelinePostInfoEx[])[index] + ) + ); + }, + () => { + pushAlert({ + type: 'danger', + message: t('timeline.deletePostFailed'), + }); + } + ); + }, + [service, name, t] + ); + + const onPost: TimelinePostSendCallback = React.useCallback( + (req) => { + return service.createPost(name, req).then((newPost) => { + setPosts((oldPosts) => + concat(oldPosts as TimelinePostInfoEx[], { + ...newPost, + deletable: true, + }) + ); + }); + }, + [service, name] + ); + + const onManageProp = props.onManage; + + const onManage = React.useCallback( + (item: 'property' | TManageItem) => { + if (item === 'property') { + setDialog(item); + } else { + onManageProp(item); + } + }, + [onManageProp] + ); + + const onMember = React.useCallback(() => { + setDialog('member'); + }, []); + + return ( + <> + + {dialogElement} + + ); +} diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx new file mode 100644 index 00000000..d96b3260 --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx @@ -0,0 +1,147 @@ +import React from 'react'; +import { Spinner } from 'reactstrap'; +import { useTranslation } from 'react-i18next'; + +import { getAlertHost } from '../common/alert-service'; + +import Timeline, { + TimelinePostInfoEx, + TimelineDeleteCallback, +} from './Timeline'; +import AppBar from '../common/AppBar'; +import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit'; +import CollapseButton from '../common/CollapseButton'; + +export interface TimelineCardComponentProps { + timeline: TTimeline; + onManage?: (item: TManageItems | 'property') => void; + onMember: () => void; + className?: string; + onHeight?: (height: number) => void; +} + +export interface TimelinePageTemplateUIProps { + avatarKey?: string | number; + timeline?: TTimeline; + posts?: TimelinePostInfoEx[] | 'forbid'; + CardComponent: React.ComponentType< + TimelineCardComponentProps + >; + onMember: () => void; + onManage?: (item: TManageItems | 'property') => void; + onPost?: TimelinePostSendCallback; + onDelete: TimelineDeleteCallback; + error?: string; +} + +export default function TimelinePageTemplateUI( + props: TimelinePageTemplateUIProps +): React.ReactElement | null { + const { t } = useTranslation(); + + const bottomSpaceRef = React.useRef(null); + + const onPostEditHeightChange = React.useCallback((height: number): void => { + const { current: bottomSpaceDiv } = bottomSpaceRef; + if (bottomSpaceDiv != null) { + bottomSpaceDiv.style.height = height + 'px'; + } + if (height === 0) { + const alertHost = getAlertHost(); + if (alertHost != null) { + alertHost.style.removeProperty('margin-bottom'); + } + } else { + const alertHost = getAlertHost(); + if (alertHost != null) { + alertHost.style.marginBottom = height + 'px'; + } + } + }, []); + + const [cardHeight, setCardHeight] = React.useState(0); + + const onCardHeightChange = React.useCallback((height: number) => { + setCardHeight(height); + }, []); + + const [infoCardCollapse, setInfoCardCollapse] = React.useState( + false + ); + const toggleInfoCardCollapse = React.useCallback((collapse) => { + setInfoCardCollapse(collapse); + }, []); + + let body: React.ReactElement; + + if (props.error != null) { + body =

{t(props.error)}

; + } else { + if (props.timeline != null) { + let timelineBody: React.ReactElement; + if (props.posts != null) { + if (props.posts === 'forbid') { + timelineBody = ( +

{t('timeline.messageCantSee')}

+ ); + } else { + timelineBody = ( + + ); + if (props.onPost != null) { + timelineBody = ( + <> + {timelineBody} +
+ + + ); + } + } + } else { + timelineBody = ; + } + const { CardComponent } = props; + + body = ( + <> +
+ + +
+ {timelineBody} + + ); + } else { + body = ; + } + } + + return ( + <> + +
+ {body} +
+ + ); +} diff --git a/Timeline/ClientApp/src/timeline/TimelinePageUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageUI.tsx new file mode 100644 index 00000000..01a230af --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelinePageUI.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import { ExcludeKey } from '../type-utilities'; +import { TimelineInfo } from '../data/timeline'; + +import TimelinePageTemplateUI, { + TimelinePageTemplateUIProps +} from './TimelinePageTemplateUI'; +import TimelineInfoCard, { + OrdinaryTimelineManageItem +} from './TimelineInfoCard'; + +export type TimelinePageUIProps = ExcludeKey< + TimelinePageTemplateUIProps, + 'CardComponent' +>; + +const TimelinePageUI: React.FC = props => { + return ; +}; + +export default TimelinePageUI; diff --git a/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx new file mode 100644 index 00000000..fe1fda9b --- /dev/null +++ b/Timeline/ClientApp/src/timeline/TimelinePostEdit.tsx @@ -0,0 +1,205 @@ +import React from 'react'; +import clsx from 'clsx'; +import { Container, Button, Spinner, Row, Col } from 'reactstrap'; +import { useTranslation } from 'react-i18next'; + +import { pushAlert } from '../common/alert-service'; +import { CreatePostRequest } from '../data/timeline'; + +import FileInput from '../common/FileInput'; + +interface TimelinePostEditImageProps { + onSelect: (blob: Blob | null) => void; +} + +const TimelinePostEditImage: React.FC = (props) => { + const { onSelect } = props; + const { t } = useTranslation(); + + const [file, setFile] = React.useState(null); + const [fileUrl, setFileUrl] = React.useState(null); + const [error, setError] = React.useState(null); + + React.useEffect(() => { + if (file != null) { + const url = URL.createObjectURL(file); + setFileUrl(url); + return () => { + URL.revokeObjectURL(url); + }; + } + }, [file]); + + const onInputChange: React.ChangeEventHandler = React.useCallback( + (e) => { + const files = e.target.files; + if (files == null || files.length === 0) { + setFile(null); + setFileUrl(null); + } else { + setFile(files[0]); + } + onSelect(null); + setError(null); + }, + [onSelect] + ); + + const onImgLoad = React.useCallback(() => { + onSelect(file); + }, [onSelect, file]); + + const onImgError = React.useCallback(() => { + setError('loadImageError'); + }, []); + + return ( + <> + + {fileUrl && error == null && ( + + )} + {error != null &&
{t(error)}
} + + ); +}; + +export type TimelinePostSendCallback = ( + content: CreatePostRequest +) => Promise; + +export interface TimelinePostEditProps { + className?: string; + onPost: TimelinePostSendCallback; + onHeightChange?: (height: number) => void; +} + +const TimelinePostEdit: React.FC = (props) => { + const { onPost } = props; + + const { t } = useTranslation(); + + const [state, setState] = React.useState<'input' | 'process'>('input'); + const [kind, setKind] = React.useState<'text' | 'image'>('text'); + const [text, setText] = React.useState(''); + const [imageBlob, setImageBlob] = React.useState(null); + + const canSend = kind === 'text' || (kind === 'image' && imageBlob != null); + + React.useEffect(() => { + if (props.onHeightChange) { + props.onHeightChange( + document.getElementById('timeline-post-edit-area')!.clientHeight + ); + } + return () => { + if (props.onHeightChange) { + props.onHeightChange(0); + } + }; + }); + + const toggleKind = React.useCallback(() => { + setKind((oldKind) => (oldKind === 'text' ? 'image' : 'text')); + setImageBlob(null); + }, []); + + const onSend = React.useCallback(() => { + setState('process'); + + const req: CreatePostRequest = + kind === 'text' + ? { + content: { + type: 'text', + text: text, + }, + } + : { + content: { + type: 'image', + data: imageBlob!, + }, + }; + + onPost(req).then( + (_) => { + if (kind === 'text') { + setText(''); + } + setState('input'); + setKind('text'); + }, + (_) => { + pushAlert({ + type: 'danger', + message: t('timeline.sendPostFailed'), + }); + setState('input'); + } + ); + }, [onPost, kind, text, imageBlob, t]); + + const onImageSelect = React.useCallback((blob: Blob | null) => { + setImageBlob(blob); + }, []); + + return ( + + + + {kind === 'text' ? ( +