aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src')
-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
9 files changed, 110 insertions, 45 deletions
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/*"]
}
}
}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 17:35:01 +0000