Merge pull request #1381 from crupest/front-dev

Re-bootstrap front end.

80 files changed, 138 insertions, 311 deletions

diff --git a/FrontEnd/src/@types/non-ts-files.d.ts b/FrontEnd/src/@types/non-ts-files.d.ts
new file mode 100644
index 00000000..9f43dc9b
--- /dev/null
+++ b/FrontEnd/src/@types/non-ts-files.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const url: string;
+  export default url;
+}
diff --git a/FrontEnd/src/@types/parcel-env.d.ts b/FrontEnd/src/@types/parcel-env.d.ts
new file mode 100644
index 00000000..f9bc1f6b
--- /dev/null
+++ b/FrontEnd/src/@types/parcel-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="parcel-env" />
diff --git a/FrontEnd/src/@types/vite-env.d.ts b/FrontEnd/src/@types/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/FrontEnd/src/@types/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/FrontEnd/src/App.tsx b/FrontEnd/src/App.tsx
index 18f6cd97..cfdab229 100644
--- a/FrontEnd/src/App.tsx
+++ b/FrontEnd/src/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import AppBar from "./views/common/AppBar";
diff --git a/FrontEnd/src/i18n.ts b/FrontEnd/src/i18n.ts
index 6a38e5b4..9bf8721f 100644
--- a/FrontEnd/src/i18n.ts
+++ b/FrontEnd/src/i18n.ts
@@ -1,43 +1,34 @@
-import i18n, { BackendModule, ResourceKey } from "i18next";
+import i18n, { BackendModule } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
 const backend: BackendModule = {
   type: "backend",
   read(language, namespace, callback) {
-    function error(message: string): void {
-      callback(new Error(message), false);
-    }
-
-    function success(result: ResourceKey): void {
-      callback(null, result);
-    }
-
-    const promise = (() => {
+    (async () => {
       if (namespace === "translation") {
         if (language === "en") {
-          return import("./locales/en/translation.json");
+          return await import("./locales/en/translation.json");
         } else if (language === "zh") {
-          return import("./locales/zh/translation.json");
+          return await import("./locales/zh/translation.json");
         } else {
-          error(`Language ${language} is not supported.`);
+          throw Error(`Language ${language} is not supported.`);
         }
       } else if (namespace === "admin") {
         if (language === "en") {
-          return import("./locales/en/admin.json");
+          return await import("./locales/en/admin.json");
         } else if (language === "zh") {
-          return import("./locales/zh/admin.json");
+          return await import("./locales/zh/admin.json");
         } else {
-          error(`Language ${language} is not supported.`);
+          throw Error(`Language ${language} is not supported.`);
         }
       } else {
-        error(`Namespace ${namespace} is not supported.`);
+        throw Error(`Namespace ${namespace} is not supported.`);
       }
-    })();
-
-    if (promise) {
-      void promise.then((d) => success(d.default));
-    }
+    })().then(
+      (resources) => callback(null, resources.default),
+      (error: Error) => callback(error, null),
+    );
   },
   init() {}, // eslint-disable-line @typescript-eslint/no-empty-function
   create() {}, // eslint-disable-line @typescript-eslint/no-empty-function
@@ -51,7 +42,7 @@ export const i18nPromise = i18n
     fallbackLng: false,
     lowerCaseLng: true,
 
-    debug: import.meta.env.DEV,
+    debug: process.env.NODE_ENV === "development",
 
     interpolation: {
       escapeValue: false, // not needed for react!!
@@ -71,8 +62,8 @@ export const i18nPromise = i18n
     */
   });
 
-if (import.meta.hot) {
-  import.meta.hot.accept(
+if (module.hot) {
+  module.hot.accept(
     [
       "./locales/en/translation.json",
       "./locales/zh/translation.json",
@@ -81,7 +72,7 @@ if (import.meta.hot) {
     ],
     () => {
       void i18n.reloadResources();
-    }
+    },
   );
 }
 
diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index 97759b8a..419ccb8c 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -1,6 +1,6 @@
-@import "bootstrap/dist/css/bootstrap-reboot.css";

-@import "bootstrap/dist/css/bootstrap-grid.css";

-@import "bootstrap-icons/font/bootstrap-icons.css";

+@import "npm:bootstrap/dist/css/bootstrap-reboot.css";

+@import "npm:bootstrap/dist/css/bootstrap-grid.css";

+@import "npm:bootstrap-icons/font/bootstrap-icons.css";

 

 @import "./views/common/index.css";

 

diff --git a/FrontEnd/src/index.tsx b/FrontEnd/src/index.tsx
index 2affb277..ba61d357 100644
--- a/FrontEnd/src/index.tsx
+++ b/FrontEnd/src/index.tsx
@@ -1,16 +1,14 @@
 import "regenerator-runtime";
 import "core-js/modules/es.promise";
 import "core-js/modules/es.array.iterator";
-import "pepjs";
 
-import React from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import "./index.css";
 
 import "./i18n";
 import "./palette";
-import "./service-worker";
 
 import App from "./App";
 
@@ -18,7 +16,7 @@ const container = document.getElementById("app");
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/FrontEnd/src/service-worker.tsx b/FrontEnd/src/service-worker.tsx
deleted file mode 100644
index e4af54e1..00000000
--- a/FrontEnd/src/service-worker.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-import { pushAlert } from "./services/alert";
-
-import Button from "./views/common/button/Button";
-
-if (import.meta.env.PROD && "serviceWorker" in navigator) {
-  let isThisTriggerUpgrade = false;
-
-  const upgradeSuccessLocalStorageKey = "TIMELINE_UPGRADE_SUCCESS";
-
-  if (window.localStorage.getItem(upgradeSuccessLocalStorageKey)) {
-    pushAlert({
-      message: "serviceWorker.upgradeSuccess",
-      type: "success",
-    });
-    window.localStorage.removeItem(upgradeSuccessLocalStorageKey);
-  }
-
-  void import("workbox-window").then(({ Workbox, messageSW }) => {
-    const wb = new Workbox("/sw.js");
-    let registration: ServiceWorkerRegistration | undefined;
-
-    // externalactivated is not usable but I still use its name.
-    wb.addEventListener("controlling", () => {
-      const upgradeReload = (): void => {
-        window.localStorage.setItem(upgradeSuccessLocalStorageKey, "true");
-        window.location.reload();
-      };
-
-      if (isThisTriggerUpgrade) {
-        upgradeReload();
-      } else {
-        const Message: React.FC = () => {
-          const { t } = useTranslation();
-          return (
-            <>
-              {t("serviceWorker.externalActivatedPrompt")}
-              <Button
-                text="serviceWorker.reloadNow"
-                color="success"
-                onClick={upgradeReload}
-              />
-            </>
-          );
-        };
-
-        pushAlert({
-          customMessage: <Message />,
-          dismissTime: "never",
-          type: "primary",
-        });
-      }
-    });
-
-    wb.addEventListener("activated", (event) => {
-      if (!event.isUpdate) {
-        pushAlert({
-          message: "serviceWorker.availableOffline",
-          type: "success",
-        });
-      }
-    });
-
-    // Add an event listener to detect when the registered
-    // service worker has installed but is waiting to activate.
-    wb.addEventListener("waiting", (): void => {
-      const upgrade = (): void => {
-        isThisTriggerUpgrade = true;
-        if (registration && registration.waiting) {
-          // Send a message to the waiting service worker,
-          // instructing it to activate.
-          // Note: for this to work, you have to add a message
-          // listener in your service worker. See below.
-          void messageSW(registration.waiting, { type: "SKIP_WAITING" });
-        }
-      };
-
-      const UpgradeMessage: React.FC = () => {
-        const { t } = useTranslation();
-        return (
-          <>
-            {t("serviceWorker.upgradePrompt")}
-            <Button
-              text="serviceWorker.upgradeNow"
-              color="success"
-              onClick={upgrade}
-            />
-          </>
-        );
-      };
-
-      pushAlert({
-        customMessage: <UpgradeMessage />,
-        dismissTime: "never",
-        type: "success",
-      });
-    });
-
-    void wb.register().then((reg) => {
-      registration = reg;
-    });
-  });
-}
diff --git a/FrontEnd/src/services/TimelinePostBuilder.ts b/FrontEnd/src/services/TimelinePostBuilder.ts
index 0e49bdc5..83d63abe 100644
--- a/FrontEnd/src/services/TimelinePostBuilder.ts
+++ b/FrontEnd/src/services/TimelinePostBuilder.ts
@@ -117,8 +117,8 @@ export default class TimelinePostBuilder {
           base64(image.file).then((data) => ({
             contentType: image.file.type,
             data,
-          }))
-        )
+          })),
+        ),
       )),
     ];
   }
diff --git a/FrontEnd/src/services/alert.ts b/FrontEnd/src/services/alert.ts
index abe56315..42b14451 100644
--- a/FrontEnd/src/services/alert.ts
+++ b/FrontEnd/src/services/alert.ts
@@ -1,4 +1,3 @@
-import React from "react";
 import pull from "lodash/pull";
 
 import { I18nText } from "@/common";
diff --git a/FrontEnd/src/services/timeline.ts b/FrontEnd/src/services/timeline.ts
index 58dc9be6..707c956f 100644
--- a/FrontEnd/src/services/timeline.ts
+++ b/FrontEnd/src/services/timeline.ts
@@ -22,7 +22,7 @@ export const timelineVisibilityTooltipTranslationMap: Record<
 
 export function getTimelinePostUpdate$(
   owner: string,
-  timeline: string
+  timeline: string,
 ): Observable<{ update: boolean; state: HubConnectionState }> {
   return new Observable((subscriber) => {
     subscriber.next({
@@ -76,7 +76,7 @@ export function getTimelinePostUpdate$(
       return connection.invoke(
         "SubscribeTimelinePostChangeV2",
         owner,
-        timeline
+        timeline,
       );
     });
 
diff --git a/FrontEnd/src/sw.ts b/FrontEnd/src/sw.ts
deleted file mode 100644
index a43ff9e5..00000000
--- a/FrontEnd/src/sw.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/// <reference lib="webworker" />
-
-import { precacheAndRoute, matchPrecache } from "workbox-precaching";
-import { registerRoute, setDefaultHandler } from "workbox-routing";
-import {
-  NetworkFirst,
-  NetworkOnly,
-  StaleWhileRevalidate,
-} from "workbox-strategies";
-import { CacheableResponsePlugin } from "workbox-cacheable-response";
-import { ExpirationPlugin } from "workbox-expiration";
-
-declare let self: ServiceWorkerGlobalScope;
-
-self.addEventListener("message", (event) => {
-  if (event.data && (event.data as { type: string }).type === "SKIP_WAITING") {
-    void self.skipWaiting();
-  }
-});
-
-precacheAndRoute(self.__WB_MANIFEST);
-
-const networkOnly = new NetworkOnly();
-
-registerRoute(new RegExp("/swagger/?.*"), new NetworkOnly());
-
-registerRoute(new RegExp("/api/token/?.*"), new NetworkOnly());
-registerRoute(new RegExp("/api/search/?.*"), new NetworkOnly());
-
-registerRoute(
-  new RegExp("/api/users/.+/avatar"),
-  new StaleWhileRevalidate({
-    cacheName: "avatars",
-    plugins: [
-      new CacheableResponsePlugin({
-        statuses: [200],
-      }),
-      new ExpirationPlugin({
-        maxAgeSeconds: 60 * 60 * 24 * 30 * 3, // 3 months
-      }),
-    ],
-  })
-);
-
-registerRoute(
-  new RegExp("/api/?.*"),
-  new NetworkFirst({
-    plugins: [
-      new CacheableResponsePlugin({
-        statuses: [200],
-      }),
-    ],
-  })
-);
-
-setDefaultHandler((options) => {
-  const { request } = options;
-
-  if (request instanceof Request && request.destination === "document")
-    return matchPrecache("/index.html").then((r) =>
-      r == null ? Response.error() : r
-    );
-  else return networkOnly.handle(options);
-});
diff --git a/FrontEnd/src/utilities/hooks/useClickOutside.ts b/FrontEnd/src/utilities/hooks/useClickOutside.ts
index 4b2f0e5c..6dcbf7b3 100644
--- a/FrontEnd/src/utilities/hooks/useClickOutside.ts
+++ b/FrontEnd/src/utilities/hooks/useClickOutside.ts
@@ -1,17 +1,17 @@
-import React from "react";
+import { useRef, useEffect } from "react";
 
 export default function useClickOutside(
   element: HTMLElement | null | undefined,
   onClickOutside: () => void,
   nextTick?: boolean
 ): void {
-  const onClickOutsideRef = React.useRef<() => void>(onClickOutside);
+  const onClickOutsideRef = useRef<() => void>(onClickOutside);
 
-  React.useEffect(() => {
+  useEffect(() => {
     onClickOutsideRef.current = onClickOutside;
   }, [onClickOutside]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (element != null) {
       const handler = (event: MouseEvent): void => {
         let e: HTMLElement | null = event.target as HTMLElement;
diff --git a/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts b/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts
index c0b6ce2c..339a12b8 100644
--- a/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts
+++ b/FrontEnd/src/utilities/hooks/useReverseScrollPositionRemember.ts
@@ -1,6 +1,6 @@
 // Not used now!!! But preserved for future use.
 
-import React from "react";
+import { useEffect } from "react";
 
 let on = false;
 
@@ -43,7 +43,7 @@ const resizeObserver = new ResizeObserver(() => {
 });
 
 export default function useReverseScrollPositionRemember(): void {
-  React.useEffect(() => {
+  useEffect(() => {
     if (on) return;
     on = true;
     window.addEventListener("scroll", scrollListener);
diff --git a/FrontEnd/src/utilities/hooks/useScrollToBottom.ts b/FrontEnd/src/utilities/hooks/useScrollToBottom.ts
index f6780d9f..216746f4 100644
--- a/FrontEnd/src/utilities/hooks/useScrollToBottom.ts
+++ b/FrontEnd/src/utilities/hooks/useScrollToBottom.ts
@@ -1,4 +1,4 @@
-import React from "react";
+import { useRef, useEffect } from "react";
 import { fromEvent } from "rxjs";
 import { filter, throttleTime } from "rxjs/operators";
 
@@ -10,9 +10,9 @@ function useScrollToBottom(
     throttle: 1000,
   }
 ): void {
-  const handlerRef = React.useRef<(() => void) | null>(null);
+  const handlerRef = useRef<(() => void) | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     handlerRef.current = handler;
 
     return () => {
@@ -20,7 +20,7 @@ function useScrollToBottom(
     };
   }, [handler]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const subscription = fromEvent(window, "scroll")
       .pipe(
         filter(
diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx
index c7c225b8..093da894 100644
--- a/FrontEnd/src/views/about/index.tsx
+++ b/FrontEnd/src/views/about/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation, Trans } from "react-i18next";
 
 import authorAvatarUrl from "./author-avatar.png";
@@ -57,7 +56,7 @@ const backendCredits: {
   },
 ];
 
-const AboutPage: React.FC = () => {
+export default function AboutPage() {
   const { t } = useTranslation();
 
   return (
@@ -141,6 +140,4 @@ const AboutPage: React.FC = () => {
       </Card>
     </div>
   );
-};
-
-export default AboutPage;
+}
diff --git a/FrontEnd/src/views/admin/Admin.tsx b/FrontEnd/src/views/admin/Admin.tsx
index e8d86487..986c36b4 100644
--- a/FrontEnd/src/views/admin/Admin.tsx
+++ b/FrontEnd/src/views/admin/Admin.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
diff --git a/FrontEnd/src/views/admin/AdminNav.tsx b/FrontEnd/src/views/admin/AdminNav.tsx
index 49817cf8..b7385e5c 100644
--- a/FrontEnd/src/views/admin/AdminNav.tsx
+++ b/FrontEnd/src/views/admin/AdminNav.tsx
@@ -1,9 +1,8 @@
-import React from "react";
 import { useLocation } from "react-router-dom";
 
 import Tabs from "../common/tab/Tabs";
 
-const AdminNav: React.FC<{ className?: string }> = ({ className }) => {
+export function AdminNav({ className }: { className?: string }) {
   const location = useLocation();
   const name = location.pathname.split("/")[2] ?? "user";
 
@@ -25,6 +24,6 @@ const AdminNav: React.FC<{ className?: string }> = ({ className }) => {
       ]}
     />
   );
-};
+}
 
 export default AdminNav;
diff --git a/FrontEnd/src/views/admin/MoreAdmin.tsx b/FrontEnd/src/views/admin/MoreAdmin.tsx
index 218ac5fb..d49d211f 100644
--- a/FrontEnd/src/views/admin/MoreAdmin.tsx
+++ b/FrontEnd/src/views/admin/MoreAdmin.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const MoreAdmin: React.FC = () => {
   return <>More...</>;
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index fbcc28ba..f7337c81 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
+import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import classnames from "classnames";
 
diff --git a/FrontEnd/src/views/admin/index.tsx b/FrontEnd/src/views/admin/index.tsx
index 49da6586..0467711d 100644
--- a/FrontEnd/src/views/admin/index.tsx
+++ b/FrontEnd/src/views/admin/index.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import { lazy } from "react";
 
-const Admin = React.lazy(
+const Admin = lazy(
   () => import(/* webpackChunkName: "admin" */ "./Admin")
 );
 
diff --git a/FrontEnd/src/views/center/CenterBoards.tsx b/FrontEnd/src/views/center/CenterBoards.tsx
index e95f4cb8..a8be2c29 100644
--- a/FrontEnd/src/views/center/CenterBoards.tsx
+++ b/FrontEnd/src/views/center/CenterBoards.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { highlightTimelineUsername } from "@/common";
diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index 68a887a4..b3ccdf8c 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { Link } from "react-router-dom";
 
diff --git a/FrontEnd/src/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/views/center/TimelineCreateDialog.tsx
index 2afc7221..b0e2f59e 100644
--- a/FrontEnd/src/views/center/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/views/center/TimelineCreateDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
 import { validateTimelineName } from "@/services/timeline";
diff --git a/FrontEnd/src/views/center/index.tsx b/FrontEnd/src/views/center/index.tsx
index 283925b9..77af2c20 100644
--- a/FrontEnd/src/views/center/index.tsx
+++ b/FrontEnd/src/views/center/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useUserLoggedIn } from "@/services/user";
diff --git a/FrontEnd/src/views/common/AppBar.tsx b/FrontEnd/src/views/common/AppBar.tsx
index 208da3f7..278c70fd 100644
--- a/FrontEnd/src/views/common/AppBar.tsx
+++ b/FrontEnd/src/views/common/AppBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Link, NavLink } from "react-router-dom";
@@ -11,7 +11,7 @@ import UserAvatar from "./user/UserAvatar";
 
 import "./AppBar.css";
 
-const AppBar: React.FC = (_) => {
+const AppBar: React.FC = () => {
   const { t } = useTranslation();
 
   const user = useUser();
diff --git a/FrontEnd/src/views/common/BlobImage.tsx b/FrontEnd/src/views/common/BlobImage.tsx
index 0dd25c52..5e050ebe 100644
--- a/FrontEnd/src/views/common/BlobImage.tsx
+++ b/FrontEnd/src/views/common/BlobImage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const BlobImage: React.FC<
   Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & {
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index 7e2eb575..ebbce77e 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React from "react";
+import * as React from "react";
 
 import "./Card.css";
 
diff --git a/FrontEnd/src/views/common/ImageCropper.tsx b/FrontEnd/src/views/common/ImageCropper.tsx
index 4262e18f..04e17415 100644
--- a/FrontEnd/src/views/common/ImageCropper.tsx
+++ b/FrontEnd/src/views/common/ImageCropper.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 
 import { UiLogicError } from "@/common";
diff --git a/FrontEnd/src/views/common/LoadFailReload.tsx b/FrontEnd/src/views/common/LoadFailReload.tsx
index a80e7b76..81ba1f67 100644
--- a/FrontEnd/src/views/common/LoadFailReload.tsx
+++ b/FrontEnd/src/views/common/LoadFailReload.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Trans } from "react-i18next";
 
 export interface LoadFailReloadProps {
diff --git a/FrontEnd/src/views/common/LoadingPage.tsx b/FrontEnd/src/views/common/LoadingPage.tsx
index 8c1e681a..35ee1aa8 100644
--- a/FrontEnd/src/views/common/LoadingPage.tsx
+++ b/FrontEnd/src/views/common/LoadingPage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import Spinner from "./Spinner";
 
diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index 0b1eb8e1..9d644ab7 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 
diff --git a/FrontEnd/src/views/common/Skeleton.tsx b/FrontEnd/src/views/common/Skeleton.tsx
index 58d34215..3b149db9 100644
--- a/FrontEnd/src/views/common/Skeleton.tsx
+++ b/FrontEnd/src/views/common/Skeleton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import range from "lodash/range";
 
diff --git a/FrontEnd/src/views/common/Spinner.tsx b/FrontEnd/src/views/common/Spinner.tsx
index 4c735fef..e99a9d1b 100644
--- a/FrontEnd/src/views/common/Spinner.tsx
+++ b/FrontEnd/src/views/common/Spinner.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 
 import { PaletteColorType } from "@/palette";
diff --git a/FrontEnd/src/views/common/TimelineLogo.tsx b/FrontEnd/src/views/common/TimelineLogo.tsx
index 27d188fc..e06ed0f5 100644
--- a/FrontEnd/src/views/common/TimelineLogo.tsx
+++ b/FrontEnd/src/views/common/TimelineLogo.tsx
@@ -1,4 +1,5 @@
-import React, { SVGAttributes } from "react";
+import { SVGAttributes } from "react";
+import * as React from "react";
 
 export interface TimelineLogoProps extends SVGAttributes<SVGElement> {
   color?: string;
diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/views/common/alert/AlertHost.tsx
index 92db78fa..42074781 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/views/common/alert/AlertHost.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import without from "lodash/without";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 1e4163ff..c5976909 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index a6377708..b42c5b3a 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 74d7dd36..3ba56277 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -1,15 +1,15 @@
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 
 import { PaletteColorType } from "@/palette";
 
 import "./IconButton.css";
 
-export type IconButtonProps = {
+export interface IconButtonProps extends React.ComponentPropsWithRef<"i"> {
   icon: string;
   color?: PaletteColorType;
   large?: boolean;
-} & React.ComponentPropsWithRef<"i">;
+}
 
 export default function IconButton(props: IconButtonProps): JSX.Element {
   const { icon, color, className, large, ...otherProps } = props;
@@ -21,7 +21,7 @@ export default function IconButton(props: IconButtonProps): JSX.Element {
         large && "large",
         "bi-" + icon,
         color ? "cru-" + color : "cru-primary",
-        className
+        className,
       )}
       {...otherProps}
     />
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 2764f92e..fceaec27 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
@@ -7,13 +7,13 @@ import { PaletteColorType } from "@/palette";
 
 import Spinner from "../Spinner";
 
-function LoadingButton(
-  props: {
-    color?: PaletteColorType;
-    text?: I18nText;
-    loading?: boolean;
-  } & React.ComponentPropsWithoutRef<"button">
-): JSX.Element {
+interface LoadingButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+  color?: PaletteColorType;
+  text?: I18nText;
+  loading?: boolean;
+}
+
+function LoadingButton(props: LoadingButtonProps): JSX.Element {
   const { t } = useTranslation();
 
   const { color, text, loading, className, children, ...otherProps } = props;
@@ -27,7 +27,7 @@ function LoadingButton(
       className={classNames(
         "cru-" + (color ?? "primary"),
         "cru-button outline",
-        className
+        className,
       )}
       {...otherProps}
     >
diff --git a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
index 3817ce1e..8c2cea5a 100644
--- a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import { convertI18nText, I18nText } from "@/common";
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import Button from "../button/Button";
diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
index ca733e3d..c755950d 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom";
 import { CSSTransition } from "react-transition-group";
 
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index ef76f2f2..6368fc0a 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { createPortal } from "react-dom";
 import classnames from "classnames";
 import { CSSTransition } from "react-transition-group";
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
index b0ffdac9..71be030a 100644
--- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { TwitterPicker } from "react-color";
 import classNames from "classnames";
diff --git a/FrontEnd/src/views/common/input/InputPanel.tsx b/FrontEnd/src/views/common/input/InputPanel.tsx
index c76b8d45..234ed267 100644
--- a/FrontEnd/src/views/common/input/InputPanel.tsx
+++ b/FrontEnd/src/views/common/input/InputPanel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { TwitterPicker } from "react-color";
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index d2f65391..de3b1664 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index b8f24978..74ca7aba 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React from "react";
+import * as React from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
diff --git a/FrontEnd/src/views/common/tab/TabPages.tsx b/FrontEnd/src/views/common/tab/TabPages.tsx
index 677f558a..cdb988e0 100644
--- a/FrontEnd/src/views/common/tab/TabPages.tsx
+++ b/FrontEnd/src/views/common/tab/TabPages.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { I18nText, UiLogicError } from "@/common";
 
diff --git a/FrontEnd/src/views/common/tab/Tabs.tsx b/FrontEnd/src/views/common/tab/Tabs.tsx
index 701b4073..3e3ef6fa 100644
--- a/FrontEnd/src/views/common/tab/Tabs.tsx
+++ b/FrontEnd/src/views/common/tab/Tabs.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classnames from "classnames";
diff --git a/FrontEnd/src/views/common/user/UserAvatar.tsx b/FrontEnd/src/views/common/user/UserAvatar.tsx
index 9e822528..fcff8c69 100644
--- a/FrontEnd/src/views/common/user/UserAvatar.tsx
+++ b/FrontEnd/src/views/common/user/UserAvatar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { getHttpUserClient } from "@/http/user";
 
diff --git a/FrontEnd/src/views/home/TimelineListView.tsx b/FrontEnd/src/views/home/TimelineListView.tsx
index 7bffba76..fbcdc9b0 100644
--- a/FrontEnd/src/views/home/TimelineListView.tsx
+++ b/FrontEnd/src/views/home/TimelineListView.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
diff --git a/FrontEnd/src/views/home/WebsiteIntroduction.tsx b/FrontEnd/src/views/home/WebsiteIntroduction.tsx
index aea7b4b2..e843c325 100644
--- a/FrontEnd/src/views/home/WebsiteIntroduction.tsx
+++ b/FrontEnd/src/views/home/WebsiteIntroduction.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
diff --git a/FrontEnd/src/views/home/index.tsx b/FrontEnd/src/views/home/index.tsx
index d734b2b7..3c80fb0c 100644
--- a/FrontEnd/src/views/home/index.tsx
+++ b/FrontEnd/src/views/home/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
 import { highlightTimelineUsername } from "@/common";
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 3ea505bb..cc1d9865 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useTranslation, Trans } from "react-i18next";
 
@@ -9,7 +9,7 @@ import LoadingButton from "../common/button/LoadingButton";
 
 import "./index.css";
 
-const LoginPage: React.FC = (_) => {
+const LoginPage: React.FC = () => {
   const { t } = useTranslation();
 
   const navigate = useNavigate();
diff --git a/FrontEnd/src/views/register/index.tsx b/FrontEnd/src/views/register/index.tsx
index d8530fcf..c1b95ff7 100644
--- a/FrontEnd/src/views/register/index.tsx
+++ b/FrontEnd/src/views/register/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
diff --git a/FrontEnd/src/views/search/index.tsx b/FrontEnd/src/views/search/index.tsx
index ee448e77..58257465 100644
--- a/FrontEnd/src/views/search/index.tsx
+++ b/FrontEnd/src/views/search/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Link } from "react-router-dom";
diff --git a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
index 4c9a3afb..ddca342a 100644
--- a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { AxiosError } from "axios";
 
diff --git a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx
index f104818f..8cd881ce 100644
--- a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx
@@ -1,6 +1,6 @@
 import { getHttpUserClient } from "@/http/user";
 import { useUser } from "@/services/user";
-import React from "react";
+import * as React from "react";
 
 import OperationDialog from "../common/dailog/OperationDialog";
 
diff --git a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx
index fe5868e2..bfc03e5e 100644
--- a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx
+++ b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
+import * as React from "react";
 import { useNavigate } from "react-router-dom";
 
 import { userService } from "@/services/user";
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index 31726dc2..ccaf86d2 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
+import * as React from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
@@ -70,7 +71,7 @@ function SettingItemContainer({
         "row settings-item mx-0",
         first && "first",
         onClick && "clickable",
-        className
+        className,
       )}
       onClick={onClick}
     >
@@ -133,7 +134,7 @@ const SelectSettingsItem: React.FC<SelectSettingItemProps> = ({
   );
 };
 
-const SettingsPage: React.FC = (_) => {
+const SettingsPage: React.FC = () => {
   const { i18n } = useTranslation();
   const user = useUser();
   const navigate = useNavigate();
@@ -148,7 +149,7 @@ const SettingsPage: React.FC = (_) => {
   >(null);
 
   const [registerCode, setRegisterCode] = useState<undefined | null | string>(
-    undefined
+    undefined,
   );
 
   const [bookmarkVisibility, setBookmarkVisibility] =
diff --git a/FrontEnd/src/views/timeline/CollapseButton.tsx b/FrontEnd/src/views/timeline/CollapseButton.tsx
index b8d06916..374ccc2e 100644
--- a/FrontEnd/src/views/timeline/CollapseButton.tsx
+++ b/FrontEnd/src/views/timeline/CollapseButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import IconButton from "../common/button/IconButton";
 
diff --git a/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx b/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx
index c8478557..2b820454 100644
--- a/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx
+++ b/FrontEnd/src/views/timeline/ConnectionStatusBadge.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { HubConnectionState } from "@microsoft/signalr";
 import { useTranslation } from "react-i18next";
diff --git a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
index 9ab40e54..a4f7924e 100644
--- a/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline/MarkdownPostEdit.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
 
diff --git a/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx
index d000093d..90ec82cc 100644
--- a/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx
+++ b/FrontEnd/src/views/timeline/PostPropertyChangeDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
diff --git a/FrontEnd/src/views/timeline/Timeline.tsx b/FrontEnd/src/views/timeline/Timeline.tsx
index b10f1c74..3a7fbd00 100644
--- a/FrontEnd/src/views/timeline/Timeline.tsx
+++ b/FrontEnd/src/views/timeline/Timeline.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { useScrollToBottom } from "@/utilities/hooks";
 import { HubConnectionState } from "@microsoft/signalr";
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index bcfcf180..5c9a7d1f 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import classnames from "classnames";
 import { HubConnectionState } from "@microsoft/signalr";
diff --git a/FrontEnd/src/views/timeline/TimelineDateLabel.tsx b/FrontEnd/src/views/timeline/TimelineDateLabel.tsx
index 80968ee2..5f4ac706 100644
--- a/FrontEnd/src/views/timeline/TimelineDateLabel.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDateLabel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import TimelineLine from "./TimelineLine";
 
 export interface TimelineDateItemProps {
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
index 3a339622..77dfdaaf 100644
--- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 
diff --git a/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx b/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx
index 8638ad46..5e0728d4 100644
--- a/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx
+++ b/FrontEnd/src/views/timeline/TimelineEmptyItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 
 import TimelineLine, { TimelineLineProps } from "./TimelineLine";
diff --git a/FrontEnd/src/views/timeline/TimelineLine.tsx b/FrontEnd/src/views/timeline/TimelineLine.tsx
index 0a828b32..4a87e6e0 100644
--- a/FrontEnd/src/views/timeline/TimelineLine.tsx
+++ b/FrontEnd/src/views/timeline/TimelineLine.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 
 export interface TimelineLineProps {
diff --git a/FrontEnd/src/views/timeline/TimelineLoading.tsx b/FrontEnd/src/views/timeline/TimelineLoading.tsx
index f55482fe..f876cba9 100644
--- a/FrontEnd/src/views/timeline/TimelineLoading.tsx
+++ b/FrontEnd/src/views/timeline/TimelineLoading.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import TimelineEmptyItem from "./TimelineEmptyItem";
 
diff --git a/FrontEnd/src/views/timeline/TimelineMember.tsx b/FrontEnd/src/views/timeline/TimelineMember.tsx
index 27355081..a353ae21 100644
--- a/FrontEnd/src/views/timeline/TimelineMember.tsx
+++ b/FrontEnd/src/views/timeline/TimelineMember.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { convertI18nText, I18nText } from "@/common";
diff --git a/FrontEnd/src/views/timeline/TimelinePostContentView.tsx b/FrontEnd/src/views/timeline/TimelinePostContentView.tsx
index 9e50e5cb..9ed192e5 100644
--- a/FrontEnd/src/views/timeline/TimelinePostContentView.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostContentView.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 import { marked } from "marked";
 
diff --git a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
index f1c5b22c..38e72264 100644
--- a/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostEdit.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { UiLogicError } from "@/common";
@@ -161,7 +161,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
       case "image":
         if (image == null) {
           throw new UiLogicError(
-            "Content type is image but image blob is null."
+            "Content type is image but image blob is null.",
           );
         }
         requestData = {
@@ -187,10 +187,10 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
           setKind("text");
           onPosted(data);
         },
-        (_) => {
+        () => {
           setProcess(false);
           onPostError();
-        }
+        },
       );
   };
 
diff --git a/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx b/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx
index de0e7e43..d2f7bd72 100644
--- a/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostEditCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 
 import Card from "../common/Card";
diff --git a/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx b/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx
index 82834e95..1ef0a287 100644
--- a/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostEditNoLogin.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Trans } from "react-i18next";
 import { Link } from "react-router-dom";
 
diff --git a/FrontEnd/src/views/timeline/TimelinePostListView.tsx b/FrontEnd/src/views/timeline/TimelinePostListView.tsx
index f6649e9e..f878b004 100644
--- a/FrontEnd/src/views/timeline/TimelinePostListView.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostListView.tsx
@@ -1,4 +1,5 @@
-import React, { Fragment } from "react";
+import { Fragment } from "react";
+import * as React from "react";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
diff --git a/FrontEnd/src/views/timeline/TimelinePostView.tsx b/FrontEnd/src/views/timeline/TimelinePostView.tsx
index ca6ee2c5..584f0a68 100644
--- a/FrontEnd/src/views/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePostView.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import classnames from "classnames";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
diff --git a/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx
index 18f557c6..afd9a32d 100644
--- a/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelinePropertyChangeDialog.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import {
   getHttpTimelineClient,
diff --git a/FrontEnd/src/views/timeline/index.tsx b/FrontEnd/src/views/timeline/index.tsx
index cb9fb46f..1dffdcc1 100644
--- a/FrontEnd/src/views/timeline/index.tsx
+++ b/FrontEnd/src/views/timeline/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useParams } from "react-router-dom";
 
 import { UiLogicError } from "@/common";