Merge pull request #69

Convert FE to TypeScript
vicr123 · Jul 11, 2024 · fd5b9d4 · fd5b9d4
2 parents 07ca456 + 6d0aa5a
commit fd5b9d4
Show file tree

Hide file tree

Showing 86 changed files with 1,165 additions and 650 deletions.
diff --git a/Parlance.ClientApp/package-lock.json b/Parlance.ClientApp/package-lock.json
diff --git a/Parlance.ClientApp/package.json b/Parlance.ClientApp/package.json
@@ -55,8 +55,11 @@
     "workbox-streams": "^6.5.3"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
+    "@types/diff": "^5.2.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/react-transition-group": "^4.4.10",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
@@ -77,7 +80,7 @@
   "scripts": {
     "dev": "node genlangindex.js && vite",
     "build": "node genlangindex.js && vite build",
-    "lint": "prettier . --check",
+    "lint": "tsc --noEmit && prettier . --check",
     "preview": "vite preview"
   },
   "eslintConfig": {

diff --git a/Parlance.ClientApp/src/App.test.jsx b/Parlance.ClientApp/src/App.test.jsx
diff --git a/Parlance.ClientApp/src/App.jsx → Parlance.ClientApp/src/App.tsx b/Parlance.ClientApp/src/App.jsx → Parlance.ClientApp/src/App.tsx
@@ -7,8 +7,9 @@ import Styles from "./App.module.css";
 import { useTranslation } from "react-i18next";
 import i18n from "./helpers/i18n";
 import { ServerInformationProvider } from "./context/ServerInformationContext";
+import { TextDirection } from "@/interfaces/misc";
 
-function ErrorIndicator({ error }) {
+function ErrorIndicator({ error }: { error: any }) {
     const { t } = useTranslation();
 
     return (
@@ -18,10 +19,17 @@ function ErrorIndicator({ error }) {
     );
 }
 
-export default class App extends Component {
+interface AppProps {}
+
+interface AppState {
+    error: any;
+    dir: TextDirection;
+}
+
+export default class App extends Component<AppProps, AppState> {
     static displayName = App.name;
 
-    constructor(props) {
+    constructor(props: AppProps) {
         super(props);
 
         this.state = {
@@ -63,7 +71,7 @@ export default class App extends Component {
         );
     }
 
-    componentDidCatch(error, errorInfo) {
+    componentDidCatch(error: any, errorInfo: any) {
         console.log(error);
         this.setState({
             error: error,

diff --git a/Parlance.ClientApp/src/AppRoutes.jsx → Parlance.ClientApp/src/AppRoutes.tsx b/Parlance.ClientApp/src/AppRoutes.jsx → Parlance.ClientApp/src/AppRoutes.tsx
@@ -1,12 +1,12 @@
-import { Home } from "./pages/Home/index";
+import { Home } from "@/pages/Home";
 import UnknownPage from "./pages/UnknownPage";
 import { lazy } from "react";
 import Spinner from "./components/Spinner";
 
-const Administration = lazy(() => import("./pages/Administration"));
-const Account = lazy(() => import("./pages/Account"));
-const Projects = lazy(() => import("./pages/Projects"));
-const Languages = lazy(() => import("./pages/Languages"));
+const Administration = lazy(() => import("./pages/Administration/index"));
+const Account = lazy(() => import("./pages/Account/index"));
+const Projects = lazy(() => import("./pages/Projects/index"));
+const Languages = lazy(() => import("./pages/Languages/index"));
 const Glossaries = lazy(() => import("./pages/Glossaries"));
 const EmailUnsubscribe = lazy(() => import("./pages/EmailUnsubscribe"));
 

diff --git a/Parlance.ClientApp/src/checks.d.ts b/Parlance.ClientApp/src/checks.d.ts
@@ -0,0 +1,16 @@
+type CheckSeverity = "error" | "warn";
+
+interface CheckResult {
+    checkSeverity: CheckSeverity;
+    message: string;
+}
+
+export function checkTranslation(
+    source: string,
+    translation: string,
+    checkSuite: string,
+): CheckResult[];
+
+export function mostSevereType(
+    checks: (CheckSeverity | CheckResult)[],
+): CheckSeverity;
diff --git a/Parlance.ClientApp/src/components/ErrorCover.tsx b/Parlance.ClientApp/src/components/ErrorCover.tsx
@@ -4,8 +4,8 @@ import SilentInformation from "./SilentInformation";
 import { ReactNode, useEffect, useState } from "react";
 
 interface CustomError {
-    title: string;
-    text: string;
+    title?: string;
+    text?: string;
 }
 
 interface ErrorCoverProps {
@@ -38,8 +38,8 @@ export default function ErrorCover({ error, children }: ErrorCoverProps) {
         })();
     }, [error]);
 
-    const title = customError?.title ?? t("ERROR");
-    const text = customError?.text ?? t("ERROR_PROMPT");
+    const title = customError?.title ?? t("ERROR")!;
+    const text = customError?.text ?? t("ERROR_PROMPT")!;
 
     return (
         <div className={Styles.cover}>

diff --git a/...ntApp/src/components/KeyboardShortcut.jsx → ...ntApp/src/components/KeyboardShortcut.tsx b/...ntApp/src/components/KeyboardShortcut.jsx → ...ntApp/src/components/KeyboardShortcut.tsx
@@ -1,10 +1,15 @@
 import Styles from "./KeyboardShortcut.module.css";
+import { KeyboardShortcut as KeyboardShortcutType } from "@/pages/Projects/Subprojects/Languages/Translation/TranslationEditor/KeyboardShortcuts";
 
-function KeyboardShortcutPart({ text }) {
+function KeyboardShortcutPart({ text }: { text: string }) {
     return <div className={Styles.shortcut}>{text}</div>;
 }
 
-export default function KeyboardShortcut({ shortcut }) {
+export default function KeyboardShortcut({
+    shortcut,
+}: {
+    shortcut: readonly KeyboardShortcutType[];
+}) {
     let isMac = navigator.userAgent.toLowerCase().includes("mac");
     const resolvedShortcut = shortcut[0].map(key => {
         if (isMac) {

diff --git a/Parlance.ClientApp/src/components/Modal.tsx b/Parlance.ClientApp/src/components/Modal.tsx
@@ -78,11 +78,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
                                 );
                             } else {
                                 // deprecated
-                                // @ts-ignore
                                 return (
                                     <div
                                         onClick={this.props.onButtonClick?.bind(
                                             this,
+                                            // @ts-ignore
                                             button,
                                         )}
                                         className={Styles.ModalButton}
@@ -102,6 +102,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     private renderModalList() {
         // @ts-ignore
         let children = React.Children.toArray(this.props.children).filter(
+            // @ts-ignore
             child => child.type?.displayName === "ModalList",
         );
 
@@ -111,6 +112,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     private renderModalText() {
         // @ts-ignore
         let children = React.Children.toArray(this.props.children).filter(
+            // @ts-ignore
             child => child.type?.displayName !== "ModalList",
         );
 

diff --git a/Parlance.ClientApp/src/components/ModalList.tsx b/Parlance.ClientApp/src/components/ModalList.tsx
@@ -5,7 +5,9 @@ interface ModalListProps {
     children?: ModalListItem | ModalListItem[];
 }
 
-interface ModalListItem {
+type ModalListItem = ModalListItemInterface | undefined;
+
+interface ModalListItemInterface {
     type?: "destructive";
     onClick: () => void;
     dir?: "rtl" | "ltr";
@@ -25,6 +27,8 @@ function ModalList({ children }: ModalListProps) {
     return (
         <div className={Styles.ModalList}>
             {items?.map((item, index) => {
+                if (!item) return null;
+
                 let styles = [Styles.ModalListItem];
                 if (item.type === "destructive")
                     styles.push(Styles.DestructiveListItem);

diff --git a/Parlance.ClientApp/src/components/PageContainer.jsx b/Parlance.ClientApp/src/components/PageContainer.jsx
diff --git a/Parlance.ClientApp/src/components/PageContainer.module.css b/Parlance.ClientApp/src/components/PageContainer.module.css
diff --git a/Parlance.ClientApp/src/components/PreloadingBlock.tsx b/Parlance.ClientApp/src/components/PreloadingBlock.tsx
@@ -3,8 +3,8 @@ import { CSSProperties, ReactElement, ReactNode } from "react";
 
 interface PreloadingBlockProps {
     className?: string;
-    children: ReactNode;
-    width?: number;
+    children?: ReactNode;
+    width?: number | "auto" | null;
 }
 
 export default function PreloadingBlock({
@@ -13,7 +13,13 @@ export default function PreloadingBlock({
     width = 100,
 }: PreloadingBlockProps): ReactElement {
     let style: CSSProperties = {};
-    if (width) style.width = `${width}%`;
+    if (width) {
+        if (width === "auto") {
+            style.width = "auto";
+        } else {
+            style.width = `${width}%`;
+        }
+    }
 
     return (
         <div

diff --git a/Parlance.ClientApp/src/components/SelectableList.tsx b/Parlance.ClientApp/src/components/SelectableList.tsx
@@ -15,7 +15,7 @@ interface SelectableListItemObject {
     type?: "destructive";
 }
 
-type SelectableListItem = SelectableListItemObject | string;
+export type SelectableListItem = SelectableListItemObject | string;
 
 interface SelectableListOneItemProps {
     children?: React.ReactElement;
@@ -32,7 +32,7 @@ type SelectableListProps =
     | SelectableListMultiItemProps;
 
 interface SelectableListLocaleProps {
-    locales: string[];
+    locales?: string[];
     onLocaleSelected: (locale: string) => void;
 }
 

diff --git a/Parlance.ClientApp/src/components/TranslationProgressIndicator.module.css b/Parlance.ClientApp/src/components/TranslationProgressIndicator.module.css
@@ -62,6 +62,9 @@
 .metricValue {
 }
 
+.remain {
+}
+
 .metricTitle {
     text-transform: uppercase;
     font-size: 8pt;