frontend: Make a workaround fix for standing table scrolling issue

There's an issue where a standings table sometimes scrolls up
unintentionally on animation.
This happens when a pending submit that is visible in a screen is
moved up to offscreen by getting AC, then the scroll position is moved
to the new location of that team's row.

The root cause is unknown yet, and this commit makes a stopgap fix.

Author: tossy310

frontend/src/components/common/AnimatingTable.tsx

@@ -23,6 +23,8 @@ type AnimatingTableProps = {
 type AnimatingTableSnapshot = {
   lastKeyOrder: string[];
   lastKeyToOffsetTop: Map<string, number>;
+  // TODO - this is a workaround to fix scrolling position sometimes moves.
+  scrollPos: number;
 };
 
 export default class AnimatingTable extends React.Component<
@@ -44,7 +46,8 @@ export default class AnimatingTable extends React.Component<
       lastKeyOrder.push(row.dataset.key!);
       lastKeyToOffsetTop.set(row.dataset.key!, row.offsetTop);
     }
-    return { lastKeyOrder, lastKeyToOffsetTop };
+    const scrollPos = document.documentElement.scrollTop;
+    return { lastKeyOrder, lastKeyToOffsetTop, scrollPos };
   }
 
   componentDidUpdate(
@@ -53,7 +56,7 @@ export default class AnimatingTable extends React.Component<
     snapshot: AnimatingTableSnapshot
   ) {
     const { delay = 1000 } = this.props;
-    const { lastKeyOrder, lastKeyToOffsetTop } = snapshot;
+    const { lastKeyOrder, lastKeyToOffsetTop, scrollPos } = snapshot;
     const rows = Array.from(this.ref.current!.children) as HTMLElement[];
 
     // Check if the order changed.
@@ -70,6 +73,11 @@ export default class AnimatingTable extends React.Component<
       }
     }
 
+    // TODO - this is a workaround to fix scrolling position sometimes moves.
+    if (scrollPos) {
+      document.documentElement.scrollTop = scrollPos;
+    }
+
     // Cancel all animations.
     this.timers.clearTimeouts();
     for (const cancel of this.cancels.splice(0)) {

frontend/src/components/standings/StandingsRevealPage.tsx

@@ -17,26 +17,11 @@ import React from 'react';
 import StandingsRevealTable from './StandingsRevealTable';
 import { tr } from '../../i18n';
 
-class ScrollFixer extends React.Component<{}, {}, number> {
-  getSnapshotBeforeUpdate(): number {
-    return document.scrollingElement!.scrollTop;
-  }
-
-  componentDidUpdate(prevProps: {}, prevState: {}, snapshot: number) {
-    document.scrollingElement!.scrollTop = snapshot;
-  }
-
-  render() {
-    return <></>;
-  }
-}
-
 export default function StandingsRevealPage() {
   return (
     <div>
       <h1 className="my-4">{tr('Standings', '順位表')}</h1>
       <StandingsRevealTable />
-      <ScrollFixer />
     </div>
   );
 }