aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--BackEnd/Timeline/Timeline.csproj2
-rw-r--r--FrontEnd/package.json21
-rw-r--r--FrontEnd/src/app/App.tsx12
-rw-r--r--FrontEnd/src/app/index.tsx4
-rw-r--r--FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts45
-rw-r--r--FrontEnd/src/app/utilities/useScrollToTop.ts49
-rw-r--r--FrontEnd/src/app/views/about/index.tsx8
-rw-r--r--FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx16
-rw-r--r--FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx11
-rw-r--r--FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx2
-rw-r--r--FrontEnd/src/tsconfig.json8
-rw-r--r--FrontEnd/webpack.common.js16
-rw-r--r--FrontEnd/webpack.config.dev.js22
13 files changed, 125 insertions, 91 deletions
diff --git a/BackEnd/Timeline/Timeline.csproj b/BackEnd/Timeline/Timeline.csproj
index 0d0c08a0..e32e3889 100644
--- a/BackEnd/Timeline/Timeline.csproj
+++ b/BackEnd/Timeline/Timeline.csproj
@@ -11,7 +11,7 @@
<SpaRoot>ClientApp\</SpaRoot>
- <Version>0.3.0</Version>
+ <Version>0.4.0</Version>
<GenerateDocumentationFile>true</GenerateDocumentationFile>
<IncludeOpenAPIAnalyzers>true</IncludeOpenAPIAnalyzers>
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 308f367d..1f35c428 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -1,6 +1,6 @@
{
"name": "timeline",
- "version": "0.3.0",
+ "version": "0.4.0",
"private": true,
"homepage": "https://timeline.crupest.life",
"keywords": [],
@@ -19,11 +19,10 @@
"lodash": "^4.17.21",
"pepjs": "^0.5.3",
"react": "^17.0.1",
- "react-bootstrap": "^2.0.0-alpha.2",
+ "react-bootstrap": "^2.0.0-beta.0",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-i18next": "^11.10.0",
- "react-inlinesvg": "^2.3.0",
"react-responsive": "^8.2.0",
"react-router": "^5.2.0",
"react-router-bootstrap": "^0.25.0",
@@ -58,19 +57,10 @@
]
},
"devDependencies": {
- "@babel/core": "^7.14.3",
- "@babel/plugin-proposal-class-properties": "^7.12.13",
- "@babel/plugin-proposal-decorators": "^7.14.2",
- "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
- "@babel/plugin-proposal-optional-chaining": "^7.14.2",
- "@babel/plugin-syntax-dynamic-import": "^7.8.3",
- "@babel/preset-env": "^7.14.4",
- "@babel/preset-react": "^7.13.13",
- "@babel/preset-typescript": "^7.13.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-beta.9",
"@types/color": "^3.0.1",
"@types/lodash": "^4.14.170",
- "@types/node": "^15.6.1",
+ "@types/node": "^15.9.0",
"@types/react": "^17.0.9",
"@types/react-color": "^3.0.4",
"@types/react-dom": "^17.0.6",
@@ -83,8 +73,6 @@
"@types/xregexp": "^4.4.0",
"@typescript-eslint/eslint-plugin": "^4.26.0",
"@typescript-eslint/parser": "^4.26.0",
- "babel-loader": "^8.2.2",
- "babel-plugin-transform-builtin-extend": "^1.1.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^9.0.0",
"css-loader": "^5.2.6",
@@ -101,6 +89,7 @@
"postcss-preset-env": "^6.7.0",
"prettier": "^2.3.0",
"react-refresh": "^0.10.0",
+ "react-refresh-typescript": "^2.0.1",
"sass": "^1.34.0",
"sass-loader": "^12.0.0",
"style-loader": "^2.0.0",
@@ -110,7 +99,7 @@
"webpack": "^5.38.1",
"webpack-chain": "^6.5.1",
"webpack-cli": "^4.7.0",
- "webpack-dev-server": "^3.11.2",
+ "webpack-dev-server": "^4.0.0-beta.3",
"workbox-webpack-plugin": "^6.1.5"
}
}
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index 6431ebbb..a4363ff5 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import AppBar from "./views/common/AppBar";
@@ -13,7 +13,7 @@ import TimelinePage from "./views/timeline";
import Search from "./views/search";
import AlertHost from "./views/common/alert/AlertHost";
-import { userService, useRawUser } from "./services/user";
+import { useRawUser } from "./services/user";
const NoMatch: React.FC = () => {
return <div>Ah-oh, 404!</div>;
@@ -23,13 +23,9 @@ const LazyAdmin = React.lazy(
() => import(/* webpackChunkName: "admin" */ "./views/admin/Admin")
);
-const App: React.FC = () => {
+function App(): ReactElement | null {
const user = useRawUser();
- React.useEffect(() => {
- void userService.checkLoginState();
- }, []);
-
if (user === undefined) {
return <LoadingPage />;
} else {
@@ -82,6 +78,6 @@ const App: React.FC = () => {
</React.Suspense>
);
}
-};
+}
export default App;
diff --git a/FrontEnd/src/app/index.tsx b/FrontEnd/src/app/index.tsx
index 64a2cd1f..fb0c8899 100644
--- a/FrontEnd/src/app/index.tsx
+++ b/FrontEnd/src/app/index.tsx
@@ -14,4 +14,8 @@ import App from "./App";
import "./palette";
+import { userService } from "./services/user";
+
+void userService.checkLoginState();
+
ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
index c86ffa74..a97d7660 100644
--- a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
+++ b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts
@@ -2,6 +2,10 @@ import React from "react";
let on = false;
+let reverseScrollPosition = getReverseScrollPosition();
+let reverseScrollToPosition: number | null = null;
+let lastScrollPosition = window.scrollY;
+
export function getReverseScrollPosition(): number {
if (document.documentElement.scrollHeight <= window.innerHeight) {
return 0;
@@ -20,22 +24,47 @@ export function scrollToReverseScrollPosition(reversePosition: number): void {
const old = document.documentElement.style.scrollBehavior;
document.documentElement.style.scrollBehavior = "auto";
- window.scrollTo(
- 0,
- document.documentElement.scrollHeight - window.innerHeight - reversePosition
- );
+ const newPosition =
+ document.documentElement.scrollHeight -
+ window.innerHeight -
+ reversePosition;
+
+ reverseScrollToPosition = newPosition;
+
+ window.scrollTo(0, newPosition);
document.documentElement.style.scrollBehavior = old;
}
-let scrollPosition = getReverseScrollPosition();
-
const scrollListener = (): void => {
- scrollPosition = getReverseScrollPosition();
+ if (
+ reverseScrollToPosition != null &&
+ Math.abs(window.scrollY - reverseScrollToPosition) > 50
+ ) {
+ console.log(
+ `Reverse scroll position coerce. Required: ${reverseScrollToPosition}. Actual: ${window.scrollY}.`
+ );
+ scrollToReverseScrollPosition(reverseScrollPosition);
+ return;
+ }
+ if (
+ reverseScrollToPosition == null &&
+ Math.abs(window.scrollY - lastScrollPosition) > 1000
+ ) {
+ console.log(
+ `Scroll jump detected. New: ${window.scrollY}. Old: ${lastScrollPosition}.`
+ );
+ scrollToReverseScrollPosition(reverseScrollPosition);
+ return;
+ }
+
+ reverseScrollToPosition = null;
+ lastScrollPosition = window.scrollY;
+ reverseScrollPosition = getReverseScrollPosition();
};
const resizeObserver = new ResizeObserver(() => {
- scrollToReverseScrollPosition(scrollPosition);
+ scrollToReverseScrollPosition(reverseScrollPosition);
});
export default function useReverseScrollPositionRemember(): void {
diff --git a/FrontEnd/src/app/utilities/useScrollToTop.ts b/FrontEnd/src/app/utilities/useScrollToTop.ts
new file mode 100644
index 00000000..da63cb0a
--- /dev/null
+++ b/FrontEnd/src/app/utilities/useScrollToTop.ts
@@ -0,0 +1,49 @@
+import React from "react";
+import { fromEvent } from "rxjs";
+import { filter, throttleTime, tap } from "rxjs/operators";
+
+function useScrollToTop(
+ handler: () => void,
+ enable = true,
+ option = {
+ maxOffset: 50,
+ throttle: 1000,
+ }
+): void {
+ const handlerRef = React.useRef<(() => void) | null>(null);
+
+ React.useEffect(() => {
+ handlerRef.current = handler;
+
+ return () => {
+ handlerRef.current = null;
+ };
+ }, [handler]);
+
+ React.useEffect(() => {
+ const subscription = fromEvent(window, "scroll")
+ .pipe(
+ tap(() => {
+ console.log(
+ `Scroll event fired: ${window.scrollY}, time: ${Date.now()}.`
+ );
+ }),
+ filter(() => {
+ return window.scrollY <= option.maxOffset;
+ }),
+ throttleTime(option.throttle)
+ )
+ .subscribe(() => {
+ if (enable) {
+ console.log(`Fire scroll to top event, time: ${Date.now()}.`);
+ handlerRef.current?.();
+ }
+ });
+
+ return () => {
+ subscription.unsubscribe();
+ };
+ }, [enable, option.maxOffset, option.throttle]);
+}
+
+export default useScrollToTop;
diff --git a/FrontEnd/src/app/views/about/index.tsx b/FrontEnd/src/app/views/about/index.tsx
index d63b6996..a8a53a97 100644
--- a/FrontEnd/src/app/views/about/index.tsx
+++ b/FrontEnd/src/app/views/about/index.tsx
@@ -25,10 +25,6 @@ const frontendCredits: {
url: "https://react-bootstrap.github.io",
},
{
- name: "babeljs",
- url: "https://babeljs.io",
- },
- {
name: "webpack",
url: "https://webpack.js.org",
},
@@ -48,10 +44,6 @@ const frontendCredits: {
name: "pepjs",
url: "https://github.com/jquery/PEP",
},
- {
- name: "react-inlinesvg",
- url: "https://github.com/gilbarbara/react-inlinesvg",
- },
];
const backendCredits: {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index 69fd9207..37f02a82 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -1,8 +1,9 @@
import React from "react";
-import { fromEvent } from "rxjs";
import { HttpTimelinePostInfo } from "@/http/timeline";
+import useScrollToTop from "@/utilities/useScrollToTop";
+
import TimelinePostListView from "./TimelinePostListView";
export interface TimelinePagedPostListViewProps {
@@ -25,16 +26,9 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
: posts.slice(-lastViewCount);
}, [posts, lastViewCount]);
- React.useEffect(() => {
- if (lastViewCount < posts.length) {
- const subscription = fromEvent(window, "scroll").subscribe(() => {
- if (window.scrollY === 0) {
- setLastViewCount(lastViewCount + 10);
- }
- });
- return () => subscription.unsubscribe();
- }
- }, [lastViewCount, posts]);
+ useScrollToTop(() => {
+ setLastViewCount(lastViewCount + 10);
+ }, lastViewCount < posts.length);
return (
<TimelinePostListView
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index c9fec919..2f778ab1 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -28,15 +28,18 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
React.useState<boolean>(false);
const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- const cardRef = React.useRef<HTMLDivElement>(null!);
+ const cardRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const cardIntersectionObserver = new IntersectionObserver(([e]) => {
if (e.intersectionRatio > 0) {
- cardRef.current.style.animationName = "timeline-post-enter";
+ if (cardRef.current != null) {
+ cardRef.current.style.animationName = "timeline-post-enter";
+ }
}
});
- cardIntersectionObserver.observe(cardRef.current);
+ if (cardRef.current) {
+ cardIntersectionObserver.observe(cardRef.current);
+ }
return () => {
cardIntersectionObserver.disconnect();
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index f38485eb..70f72025 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -72,7 +72,7 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
if (newDescription !== timeline.description) {
req.description = newDescription;
}
- const nc = newColor ?? "#007bff";
+ const nc = newColor ?? "";
if (nc !== timeline.color) {
req.color = nc;
}
diff --git a/FrontEnd/src/tsconfig.json b/FrontEnd/src/tsconfig.json
index 1855f5cd..21989043 100644
--- a/FrontEnd/src/tsconfig.json
+++ b/FrontEnd/src/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "esnext",
+ "target": "ES6",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -11,13 +11,11 @@
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "preserve",
+ "jsx": "react",
"sourceMap": true,
"baseUrl": "./",
"paths": {
- "@/*": [
- "app/*"
- ]
+ "@/*": ["app/*"]
}
}
}
diff --git a/FrontEnd/webpack.common.js b/FrontEnd/webpack.common.js
index e957a399..94cdf694 100644
--- a/FrontEnd/webpack.common.js
+++ b/FrontEnd/webpack.common.js
@@ -7,27 +7,15 @@ const config = new Config();
config.entry("index").add(path.resolve(__dirname, "src/app/index.tsx"));
config.module
- .rule("ts")
- .test(/\.ts(x?)$/)
+ .rule("jsts")
+ .test(/\.[jt]sx?$/)
.exclude.add(/node_modules/)
.end()
- .use("babel")
- .loader("babel-loader")
- .end()
.use("ts")
.loader("ts-loader")
.end();
config.module
- .rule("js")
- .test(/\.js(x?)$/)
- .exclude.add(/node_modules/)
- .end()
- .use("babel")
- .loader("babel-loader")
- .end();
-
-config.module
.rule("css")
.test(/\.css$/)
.use("css")
diff --git a/FrontEnd/webpack.config.dev.js b/FrontEnd/webpack.config.dev.js
index a657861b..4c6031c7 100644
--- a/FrontEnd/webpack.config.dev.js
+++ b/FrontEnd/webpack.config.dev.js
@@ -1,22 +1,18 @@
const path = require("path");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const ReactRefreshTypeScript = require("react-refresh-typescript");
const config = require("./webpack.common");
config.mode("development");
config.module
- .rule("ts")
- .use("babel")
+ .rule("jsts")
+ .use("ts")
.options({
- plugins: ["react-refresh/babel"],
- });
-
-config.module
- .rule("js")
- .use("babel")
- .options({
- plugins: ["react-refresh/babel"],
+ getCustomTransformers: () => ({
+ before: [ReactRefreshTypeScript()],
+ }),
});
config.module
@@ -35,11 +31,7 @@ config.module
config.devtool("eval-cheap-module-source-map");
-config.devServer
- .contentBase(path.resolve(__dirname, "public/"))
- .port(3000)
- .historyApiFallback(true)
- .hot(true);
+config.devServer.port(3000).historyApiFallback(true).hot(true);
config.plugin("react-refresh").use(new ReactRefreshWebpackPlugin());
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-30 23:01:15 +0000