Convert more pages to TypeScript

Parlance.ClientApp/src/AppRoutes.jsx

@@ -5,7 +5,7 @@ import Spinner from "./components/Spinner";
 
 const Administration = lazy(() => import("./pages/Administration"));
 const Account = lazy(() => import("./pages/Account/index"));
-const Projects = lazy(() => import("./pages/Projects"));
+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"));

Parlance.ClientApp/src/components/PreloadingBlock.tsx

@@ -4,7 +4,7 @@ import { CSSProperties, ReactElement, ReactNode } from "react";
 interface PreloadingBlockProps {
     className?: string;
     children?: ReactNode;
-    width?: number | null;
+    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

Parlance.ClientApp/src/components/modals/glossary/AddToGlossaryModal.tsx

@@ -1,18 +1,18 @@
 import { ReactElement, useId, useState } from "react";
 import Modal from "../../Modal";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import {
     HorizontalLayout,
     VerticalLayout,
     VerticalSpacer,
 } from "../../Layouts";
 import LineEdit from "../../LineEdit";
 import {
-    Glossary,
+    ConnectedGlossary,
     GlossaryItem,
     PartOfSpeech,
     PartOfSpeechTranslationString,
-} from "../../../interfaces/glossary";
+} from "@/interfaces/glossary";
 import SelectableList from "../../SelectableList";
 
 import Styles from "./AddToGlossaryModal.module.css";
@@ -25,7 +25,7 @@ import ErrorText from "../../ErrorText";
 
 interface AddToGlossaryModalProps {
     initialTerm?: string;
-    connectedGlossaries: Glossary[];
+    connectedGlossaries: ConnectedGlossary[];
     language: string;
     onGlossaryItemAdded: (item: GlossaryItem) => void;
 }
@@ -39,7 +39,7 @@ export default function AddToGlossaryModal({
     const [term, setTerm] = useState<string>(initialTerm || "");
     const [pos, setPos] = useState<PartOfSpeech>(PartOfSpeech.Unknown);
     const [translation, setTranslation] = useState<string>("");
-    const [addGlossary, setAddGlossary] = useState<Glossary>(
+    const [addGlossary, setAddGlossary] = useState<ConnectedGlossary>(
         connectedGlossaries[0],
     );
     const [regionAgnostic, setRegionAgnostic] = useState<boolean>(true);

Parlance.ClientApp/src/helpers/Fetch.ts

@@ -114,7 +114,10 @@ class Fetch {
      * @param {string} url url to perform API request
      * @param {function} resultCallback Callback to call when the result is ready containing raw fetch data
      */
-    static get<T>(url: string, resultCallback = () => {}): Promise<T> {
+    static get<T>(
+        url: string,
+        resultCallback = (result: WebFetchResponse) => {},
+    ): Promise<T> {
         return Fetch.performRequest("GET", url, resultCallback) as Promise<T>;
     }
 

Parlance.ClientApp/src/interfaces/glossary.ts

@@ -12,6 +12,11 @@ export interface Glossary {
     usedByProjects: number;
 }
 
+export interface ConnectedGlossary {
+    id: string;
+    name: string;
+}
+
 export interface GlossaryItem {
     id: string;
     term: string;

Parlance.ClientApp/src/interfaces/projects.ts

@@ -48,7 +48,7 @@ export interface BaseEntry {
     context: string;
     source: string;
     oldSourceString?: string;
-    translation: TranslationEntry[];
+    translation: TranslationEntry;
 }
 
 interface SingularTranslationEntry {
@@ -73,11 +73,49 @@ interface PluralEntry extends BaseEntry {
 
 export type Entry = SingularEntry | PluralEntry;
 export type TranslationEntry =
-    | SingularTranslationEntry
-    | PluralTranslationEntry;
+    | [SingularTranslationEntry]
+    | PluralTranslationEntry[];
 
 export interface AssistantSuggestion {
     type: string;
     source: string;
     translation: string;
 }
+
+export interface PartialProjectResponse {
+    completionData: CompletionData;
+    name: string;
+    systemName: string;
+    deadline: number | null;
+}
+
+export interface ProjectResponse {
+    completionData: CompletionData;
+    name: string;
+    deadline: number | null;
+    isProjectManager: boolean;
+    canManage: boolean;
+    subprojects: {
+        completionData: CompletionData;
+        systemName: string;
+        name: string;
+    }[];
+}
+
+export interface SubprojectResponse {
+    completionData: CompletionData;
+    translationFileType: string;
+    name: string;
+    preferRegionAgnosticLanguage: boolean;
+    projectName: string;
+    availableLanguages: LanguageMeta[];
+}
+
+export interface SubprojectLanguageResponse {
+    completionData: CompletionData;
+    projectName: string;
+    subprojectName: string;
+    language: string;
+    canEdit: boolean;
+    openThreads: Thread[];
+}

Parlance.ClientApp/src/interfaces/versionControl.ts

@@ -0,0 +1,12 @@
+export interface VersionControlState {
+    latestLocalCommit: Commit;
+    latestRemoteCommit: Commit;
+    ahead: number;
+    behind: number;
+    changedFiles: string[];
+}
+
+export interface Commit {
+    commitIdentifier: string;
+    commitMessage: string;
+}

Parlance.ClientApp/src/pages/Projects/ProjectListing.jsx → Parlance.ClientApp/src/pages/Projects/ProjectListing.tsx

@@ -6,14 +6,14 @@ import SelectableList from "../../components/SelectableList";
 import { useNavigate } from "react-router-dom";
 import TranslationProgressIndicator from "../../components/TranslationProgressIndicator";
 import { useTranslation } from "react-i18next";
-import { VerticalSpacer } from "../../components/Layouts";
 import ErrorCover from "../../components/ErrorCover";
 import { calculateDeadline } from "../../helpers/Misc";
+import { PartialProjectResponse } from "../../interfaces/projects";
 
 export default function ProjectListing() {
-    const [projects, setProjects] = useState([]);
+    const [projects, setProjects] = useState<PartialProjectResponse[]>([]);
     const [done, setDone] = useState(false);
-    const [error, setError] = useState(false);
+    const [error, setError] = useState<any>(false);
     const navigate = useNavigate();
     const { t } = useTranslation();
 
@@ -42,17 +42,25 @@ export default function ProjectListing() {
                         items={
                             done
                                 ? projects
-                                      .sort(
-                                          (a, b) =>
-                                              calculateDeadline(a.deadline).ms -
-                                              calculateDeadline(b.deadline).ms,
+                                      .sort((a, b) =>
+                                          calculateDeadline(
+                                              a.deadline ?? undefined,
+                                          )
+                                              .ms.subtract(
+                                                  calculateDeadline(
+                                                      b.deadline ?? undefined,
+                                                  ).ms,
+                                              )
+                                              .asMilliseconds(),
                                       )
                                       .map(p => ({
                                           contents: (
                                               <TranslationProgressIndicator
                                                   title={p.name}
                                                   data={p.completionData}
-                                                  deadline={p.deadline}
+                                                  deadline={
+                                                      p.deadline ?? undefined
+                                                  }
                                               />
                                           ),
                                           onClick: () => navigate(p.systemName),

Parlance.ClientApp/src/pages/Projects/Subprojects/Languages/LanguageListing.jsx → Parlance.ClientApp/src/pages/Projects/Subprojects/Languages/LanguageListing.tsx

@@ -11,26 +11,33 @@ import Modal from "../../../../components/Modal";
 import { useTranslation } from "react-i18next";
 import ErrorModal from "../../../../components/modals/ErrorModal";
 import LoadingModal from "../../../../components/modals/LoadingModal";
-import { VerticalSpacer } from "../../../../components/Layouts";
 import BackButton from "../../../../components/BackButton";
 import ErrorCover from "../../../../components/ErrorCover";
 import Hero from "../../../../components/Hero";
+import {
+    CompletionData,
+    LanguageMeta,
+    SubprojectResponse,
+} from "@/interfaces/projects";
 
 export default function LanguageListing() {
     const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
     const { project, subproject } = useParams();
-    const [subprojectData, setSubprojectData] = useState({});
-    const [languages, setLanguages] = useState([]);
+    const [subprojectData, setSubprojectData] = useState<SubprojectResponse>(
+        // @ts-expect-error
+        {},
+    );
+    const [languages, setLanguages] = useState<LanguageMeta[]>([]);
     const [done, setDone] = useState(false);
-    const [error, setError] = useState();
+    const [error, setError] = useState<any>();
     const navigate = useNavigate();
     const { t } = useTranslation();
 
     UserManager.on("currentUserChanged", forceUpdate);
 
     const updateProjects = async () => {
         try {
-            let subprojectData = await Fetch.get(
+            let subprojectData = await Fetch.get<SubprojectResponse>(
                 `/api/projects/${project}/${subproject}`,
             );
             setSubprojectData(subprojectData);
@@ -45,26 +52,26 @@ export default function LanguageListing() {
         updateProjects();
     }, []);
 
-    const seenLanguages = [];
+    const seenLanguages: string[] = [];
     const showLanguages = [
         ...languages,
         ...(UserManager.currentUser?.languagePermissions?.map(language => ({
             language,
-            completionData: {},
+            completionData: {} as CompletionData,
         })) || []),
     ]
         .filter(x => {
             if (seenLanguages.includes(x.language)) return false;
             seenLanguages.push(x.language);
             return true;
         })
-        .sort(
-            (a, b) =>
-                i18n.humanReadableLocale(a.language) >
-                i18n.humanReadableLocale(b.language),
+        .sort((a, b) =>
+            i18n
+                .humanReadableLocale(a.language)
+                .localeCompare(i18n.humanReadableLocale(b.language)),
         );
 
-    const translationClicked = language => {
+    const translationClicked = (language: string) => {
         if (languages.some(l => l.language === language)) {
             navigate(language);
         } else {
@@ -105,12 +112,14 @@ export default function LanguageListing() {
     const myLanguages =
         UserManager.currentUser?.languagePermissions &&
         showLanguages.filter(lang =>
-            UserManager.currentUser.languagePermissions.includes(lang.language),
+            UserManager.currentUser!.languagePermissions.includes(
+                lang.language,
+            ),
         );
     const otherLanguages = UserManager.currentUser?.languagePermissions
         ? showLanguages.filter(
               lang =>
-                  !UserManager.currentUser.languagePermissions.includes(
+                  !UserManager.currentUser!.languagePermissions.includes(
                       lang.language,
                   ),
           )

Parlance.ClientApp/src/pages/Projects/Subprojects/Languages/Translation/TranslationEditor/EditorInterfaces.ts

@@ -11,7 +11,7 @@ export type PushUpdateFunction = (
 ) => Promise<void>;
 
 export interface TranslationUpdate {
-    translationStrings: TranslationEntry[];
+    translationStrings: TranslationEntry;
     forceUpdate?: boolean;
 }