fix: Typescript check (#21)

* fix: typescript check error

* fix: typescript check error

* fix: typescript check error

* fix: typescript check error

* fix: typescript check error

frontend/components/ProjectDialog.tsx

@@ -12,17 +12,17 @@ import {
   ModalBody,
   ModalFooter,
 } from '@nextui-org/react';
-import { ProjectType, ProjectsMessages } from '@/types/project';
+import { ProjectType, ProjectDialogMessages } from '@/types/project';
 
 type Props = {
   isOpen: boolean;
   editingProject: ProjectType | null;
   onCancel: () => void;
   onSubmit: (name: string, detail: string, isPublic: boolean) => void;
-  messages: ProjectsMessages;
+  projectDialogMessages: ProjectDialogMessages;
 };
 
-export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubmit, messages }: Props) {
+export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubmit, projectDialogMessages }: Props) {
   const [projectName, setProjectName] = useState({
     text: editingProject ? editingProject.name : '',
     isInvalid: false,
@@ -83,7 +83,7 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
       setProjectName({
         text: '',
         isInvalid: true,
-        errorMessage: messages.pleaseEnter,
+        errorMessage: projectDialogMessages.pleaseEnter,
       });
 
       return;
@@ -101,11 +101,11 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
       }}
     >
       <ModalContent>
-        <ModalHeader className="flex flex-col gap-1">{messages.project}</ModalHeader>
+        <ModalHeader className="flex flex-col gap-1">{projectDialogMessages.project}</ModalHeader>
         <ModalBody>
           <Input
             type="text"
-            label={messages.projectName}
+            label={projectDialogMessages.projectName}
             value={projectName.text}
             isInvalid={projectName.isInvalid}
             errorMessage={projectName.errorMessage}
@@ -117,7 +117,7 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
             }}
           />
           <Textarea
-            label={messages.projectDetail}
+            label={projectDialogMessages.projectDetail}
             value={projectDetail.text}
             isInvalid={projectDetail.isInvalid}
             errorMessage={projectDetail.errorMessage}
@@ -129,16 +129,16 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
             }}
           />
           <Checkbox isSelected={isProjectPublic} onValueChange={setIsProjectPublic}>
-            {messages.public}
+            {projectDialogMessages.public}
           </Checkbox>
-          <div className="text-small text-default-500">{messages.ifYouMakePublic}</div>
+          <div className="text-small text-default-500">{projectDialogMessages.ifYouMakePublic}</div>
         </ModalBody>
         <ModalFooter>
           <Button variant="light" onPress={onCancel}>
-            {messages.close}
+            {projectDialogMessages.close}
           </Button>
           <Button color="primary" onPress={validate}>
-            {editingProject ? messages.update : messages.create}
+            {editingProject ? projectDialogMessages.update : projectDialogMessages.create}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/components/UserAvatar.tsx

@@ -10,7 +10,7 @@ export default function PublicityChip({ context }: Props) {
   return context.isSignedIn() ? (
     <Avatar
       size={16}
-      name={context.token.user.username}
+      name={context.token!.user!.username}
       variant="beam"
       colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
     />

frontend/config/selection.ts

@@ -1,14 +1,15 @@
+import { AutomationStatusType, GlobalRoleType, MemberRoleType, TemplateType } from '@/types/base';
 import { RunStatusType, TestRunCaseStatusType } from '@/types/status';
 import { TestTypeType } from '@/types/testType';
 import { PriorityType } from '@/types/priority';
+import { LocaleType } from '@/types/locale';
 
-const roles = [{ uid: 'administrator' }, { uid: 'user' }];
+const roles: GlobalRoleType[] = [{ uid: 'administrator' }, { uid: 'user' }];
-
+const memberRoles: MemberRoleType[] = [{ uid: 'manager' }, { uid: 'developer' }, { uid: 'reporter' }];
-const memberRoles = [{ uid: 'manager' }, { uid: 'developer' }, { uid: 'reporter' }];
 
 const categoricalPalette = ['#fba91e', '#6ea56c', '#3ac6e1', '#feda2f', '#f15f47', '#244470', '#9c80bb', '#f595a6'];
 
-const locales = [
+const locales: LocaleType[] = [
   { code: 'en', name: 'English' },
   { code: 'ja', name: '日本語' },
 ];
@@ -59,14 +60,14 @@ const testTypes: TestTypeType[] = [
   { uid: 'manual', chartColor: categoricalPalette[4] },
 ];
 
-const automationStatus = [
+const automationStatus: AutomationStatusType[] = [
-  { name: 'Automated', uid: 'automated' },
+  { uid: 'automated' },
-  { name: 'Automation Not Required', uid: 'automation-not-required' },
+  { uid: 'automation-not-required' },
-  { name: 'Cannot Be Automated', uid: 'cannot-be-automated' },
+  { uid: 'cannot-be-automated' },
-  { name: 'Obsolete', uid: 'obsolete' },
+  { uid: 'obsolete' },
 ];
 
-const templates = [{ uid: 'text' }, { uid: 'step' }];
+const templates: TemplateType[] = [{ uid: 'text' }, { uid: 'step' }];
 
 export {
   roles,

frontend/messages/en.json

@@ -35,6 +35,18 @@
     "automated": "Automated",
     "manual": "Manual"
   },
+  "ProjectDialog": {
+    "project": "Project",
+    "project_name": "Project Name",
+    "project_detail": "Project Detail",
+    "public": "Public",
+    "private": "Private",
+    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
+    "close": "Close",
+    "create": "Create",
+    "update": "Update",
+    "please_enter": "Please enter project name"
+  },
   "Index": {
     "get_started": "Get Started",
     "demo": "Demo",
@@ -114,21 +126,14 @@
   },
   "Projects": {
     "projectList": "Project List",
-    "project": "Project",
     "new_project": "New Project",
     "id": "ID",
     "publicity": "Publicity",
+    "public": "Public",
+    "private": "Private",
     "name": "Name",
     "detail": "Detail",
     "last_update": "Last update",
-    "project_name": "Project Name",
-    "project_detail": "Project Detail",
-    "public": "Public",
-    "private": "Private",
-    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
-    "close": "Close",
-    "create": "Create",
-    "please_enter": "Please enter project name",
     "no_projects_found": "No projects found"
   },
   "Project": {
@@ -283,11 +288,8 @@
     "project_detail": "Project Detail",
     "project_owner": "Project Owner",
     "edit_project": "Edit Project",
-    "project": "Project",
     "publicity": "Publicity",
     "public": "Public",
-    "private": "Private",
-    "if_you_make_public": "Making a project public makes it visible to users who are not project members.",
     "update": "Update",
     "delete_project": "Delete Project",
     "delete": "Delete",

frontend/messages/ja.json

@@ -36,6 +36,18 @@
     "automated": "自動",
     "manual": "手動"
   },
+  "ProjectDialog": {
+    "project": "プロジェクト",
+    "project_name": "プロジェクト名",
+    "project_detail": "プロジェクト詳細",
+    "public": "パブリック",
+    "private": "プライベート",
+    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
+    "close": "閉じる",
+    "create": "作成",
+    "update": "更新",
+    "please_enter": "プロジェクト名を入力してください"
+  },
   "Index": {
     "get_started": "テスト管理を始める",
     "demo": "デモ",
@@ -115,21 +127,14 @@
   },
   "Projects": {
     "projectList": "プロジェクト一覧",
-    "project": "プロジェクト",
     "new_project": "新規プロジェクト",
     "id": "ID",
     "publicity": "公開",
+    "public": "パブリック",
+    "private": "プライベート",
     "name": "名前",
     "detail": "詳細",
     "last_update": "最終更新",
-    "project_name": "プロジェクト名",
-    "project_detail": "プロジェクト詳細",
-    "public": "パブリック",
-    "private": "プライベート",
-    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
-    "close": "閉じる",
-    "create": "作成",
-    "please_enter": "プロジェクト名を入力してください",
     "no_projects_found": "プロジェクトがありません"
   },
   "Project": {
@@ -284,12 +289,9 @@
     "project_detail": "プロジェクト詳細",
     "project_owner": "所有者",
     "edit_project": "プロジェクトの編集",
-    "project": "プロジェクト",
     "publicity": "公開",
     "public": "パブリック",
     "private": "プライベート",
-    "if_you_make_public": "プロジェクトをパブリックにすると、プロジェクトメンバーではないユーザーからも見えるようになります。",
-    "update": "更新",
     "delete_project": "プロジェクトの削除",
     "delete": "削除",
     "close": "閉じる",

frontend/next.config.js

@@ -3,13 +3,6 @@ const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  typescript: {
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    ignoreBuildErrors: true,
-  },
   output: 'standalone',
 };
 

frontend/src/app/[locale]/DropdownAccount.tsx

@@ -18,7 +18,11 @@ export default function DropdownAccount({ messages, locale, onItemPress }: Props
   const context = useContext(TokenContext);
 
   const signOut = () => {
-    context.setToken(null);
+    context.setToken({
+      access_token: '',
+      expires_at: 0,
+      user: null,
+    });
     context.removeTokenFromLocalStorage();
     router.push(`/`, { locale: locale });
   };
@@ -74,7 +78,7 @@ export default function DropdownAccount({ messages, locale, onItemPress }: Props
           startContent={<UserAvatar context={context} />}
           endContent={<ChevronDown size={16} />}
         >
-          {context.isSignedIn() ? context.token.user.username : messages.signIn}
+          {context.isSignedIn() ? context.token!.user!.username : messages.signIn}
         </Button>
       </DropdownTrigger>
       {context.isSignedIn() ? (

frontend/src/app/[locale]/Header.tsx

@@ -1,7 +1,8 @@
 import { useTranslations } from 'next-intl';
 import HeaderNavbarMenu from './HeaderNavbarMenu';
+import { LocaleCodeType } from '@/types/locale';
 
-export default function Header(params: { locale: string }) {
+export default function Header(params: { locale: LocaleCodeType }) {
   const t = useTranslations('Header');
   const messages = {
     projects: t('projects'),

frontend/src/app/[locale]/HeaderNavbarMenu.tsx

@@ -23,6 +23,7 @@ import { locales } from '@/config/selection';
 import DropdownAccount from './DropdownAccount';
 import DropdownLanguage from './DropdownLanguage';
 import UserAvatar from '@/components/UserAvatar';
+import { LocaleCodeType } from '@/types/locale';
 
 type NabbarMenuMessages = {
   projects: string;
@@ -39,7 +40,7 @@ type NabbarMenuMessages = {
 
 type Props = {
   messages: NabbarMenuMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function HeaderNavbarMenu({ messages, locale }: Props) {
@@ -202,7 +203,11 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
                 title={messages.signOut}
                 startContent={<ArrowRightFromLine size={16} />}
                 onPress={() => {
-                  context.setToken(null);
+                  context.setToken({
+                    access_token: '',
+                    expires_at: 0,
+                    user: null,
+                  });
                   context.removeTokenFromLocalStorage();
                   router.push(`/`, { locale: locale });
                   setIsMenuOpen(false);

frontend/src/app/[locale]/PaneMainTitle.tsx

@@ -3,9 +3,10 @@ import { Button, Link as NextUiLink } from '@nextui-org/react';
 import { MoveUpRight } from 'lucide-react';
 import { Link } from '@/src/navigation';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
 
 type Props = {
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function MainTitle({ locale }: Props) {

frontend/src/app/[locale]/account/AccountPage.tsx

@@ -7,6 +7,7 @@ import Avatar from 'boring-avatars';
 import { fetchMyProjects } from '@/utils/projectsControl';
 import { ProjectType } from '@/types/project';
 import PublicityChip from '@/components/PublicityChip';
+import { LocaleCodeType } from '@/types/locale';
 
 type AccountPageMessages = {
   yourProjects: string;
@@ -17,7 +18,7 @@ type AccountPageMessages = {
 
 type Props = {
   messages: AccountPageMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function AccountPage({ messages, locale }: Props) {
@@ -50,13 +51,13 @@ export default function AccountPage({ messages, locale }: Props) {
               <CardHeader className="flex gap-6">
                 <Avatar
                   size={48}
-                  name={context.token.user.username}
+                  name={context.token!.user!.username}
                   variant="beam"
                   colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
                 />
                 <div className="flex flex-col">
-                  <p className="text-xl font-bold">{context.token.user.username}</p>
+                  <p className="text-xl font-bold">{context.token!.user!.username}</p>
-                  <p className="text-lg text-default-500">{context.token.user.email}</p>
+                  <p className="text-lg text-default-500">{context.token!.user!.email}</p>
                 </div>
               </CardHeader>
             </Card>

frontend/src/app/[locale]/account/authControl.ts

@@ -77,9 +77,4 @@ function generateRandomEmail() {
   return `${randomString}@example.com`;
 }
 
-function getRandomAvatarPath() {
+export { signUp, signIn, signInAsGuest };
-  const randomIndex = Math.floor(Math.random() * avatars.length);
-  return avatars[randomIndex];
-}
-
-export { signUp, signIn, signInAsGuest, getRandomAvatarPath };

frontend/src/app/[locale]/account/authPage.tsx

@@ -11,12 +11,13 @@ import { isValidEmail, isValidPassword } from './validate';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/navigation';
 import Config from '@/config/config';
+import { LocaleCodeType } from '@/types/locale';
 const isDemoSite = Config.isDemoSite;
 
 type Props = {
-  isSignup: Boolean;
+  isSignup: boolean;
   messages: AuthMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function AuthPage({ isSignup, messages, locale }: Props) {

frontend/src/app/[locale]/account/page.tsx

@@ -1,6 +1,9 @@
 import { useTranslations } from 'next-intl';
 import AccountPage from './AccountPage';
-export default function Page(params: { locale: string }) {
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
+
+export default function Page({ params }: PageType) {
   const t = useTranslations('Auth');
   const messages = {
     yourProjects: t('your_projects'),
@@ -9,5 +12,5 @@ export default function Page(params: { locale: string }) {
     noProjectsFound: t('no_projects_found'),
   };
 
-  return <AccountPage messages={messages} locale={params.locale} />;
+  return <AccountPage messages={messages} locale={params.locale as LocaleCodeType} />;
 }

frontend/src/app/[locale]/account/signin/page.tsx

@@ -1,7 +1,9 @@
+import { PageType } from '@/types/base';
 import AuthPage from '../authPage';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
 
-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
   const t = useTranslations('Auth');
   const messages = {
     title: t('signin'),
@@ -24,7 +26,7 @@ export default function Page(params: { locale: string }) {
   };
   return (
     <>
-      <AuthPage isSignup={false} messages={messages} locale={params.locale} />
+      <AuthPage isSignup={false} messages={messages} locale={params.locale as LocaleCodeType} />
     </>
   );
 }

frontend/src/app/[locale]/account/signup/page.tsx

@@ -1,7 +1,9 @@
+import { PageType } from '@/types/base';
 import AuthPage from '../authPage';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
 
-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
   const t = useTranslations('Auth');
   const messages = {
     title: t('signup'),
@@ -24,7 +26,7 @@ export default function Page(params: { locale: string }) {
   };
   return (
     <>
-      <AuthPage isSignup={true} messages={messages} locale={params.locale} />
+      <AuthPage isSignup={true} messages={messages} locale={params.locale as LocaleCodeType} />
     </>
   );
 }

frontend/src/app/[locale]/admin/AdminPage.tsx

@@ -5,11 +5,12 @@ import { UserType, AdminMessages } from '@/types/user';
 import { TokenContext } from '@/utils/TokenProvider';
 import UsersTable from './UsersTable';
 import Config from '@/config/config';
+import { LocaleCodeType } from '@/types/locale';
 const apiServer = Config.apiServer;
 
 type Props = {
   messages: AdminMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 async function fetchUsers(jwt: string) {
@@ -62,7 +63,7 @@ export default function AdminPage({ messages, locale }: Props) {
         <h3 className="font-bold">{messages.userManagement}</h3>
       </div>
 
-      <UsersTable users={users} messages={messages} locale={locale} />
+      <UsersTable users={users} messages={messages} />
     </div>
   );
 }

frontend/src/app/[locale]/admin/UsersTable.tsx

@@ -7,10 +7,9 @@ import Avatar from 'boring-avatars';
 type Props = {
   users: UserType[];
   messages: AdminMessages;
-  locale: string;
 };
 
-export default function UsersTable({ users, messages, locale }: Props) {
+export default function UsersTable({ users, messages }: Props) {
   const headerColumns = [
     { name: messages.avatar, uid: 'avatar', sortable: false },
     { name: messages.id, uid: 'id', sortable: true },
@@ -34,7 +33,7 @@ export default function UsersTable({ users, messages, locale }: Props) {
     });
   }, [sortDescriptor, users]);
 
-  const renderCell = useCallback((user: UserType, columnKey: Key) => {
+  const renderCell = useCallback((user: UserType, columnKey: string) => {
     const cellValue = user[columnKey as keyof UserType];
 
     switch (columnKey) {
@@ -54,7 +53,8 @@ export default function UsersTable({ users, messages, locale }: Props) {
       case 'name':
         return cellValue;
       case 'role':
-        return <span>{messages[roles[cellValue].uid]}</span>;
+        return <span>{messages[roles[cellValue as number].uid]}</span>;
+
       default:
         return cellValue;
     }
@@ -101,7 +101,9 @@ export default function UsersTable({ users, messages, locale }: Props) {
         </TableHeader>
         <TableBody emptyContent={messages.noUsersFound} items={sortedItems}>
           {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
+            </TableRow>
           )}
         </TableBody>
       </Table>

frontend/src/app/[locale]/admin/page.tsx

@@ -1,7 +1,9 @@
 import { useTranslations } from 'next-intl';
 import AdminPage from './AdminPage';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
 
-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
   const t = useTranslations('Admin');
   const messages = {
     admin: t('admin'),
@@ -18,7 +20,7 @@ export default function Page(params: { locale: string }) {
 
   return (
     <div className="w-full flex items-center justify-center">
-      <AdminPage messages={messages} locale={params.locale} />
+      <AdminPage messages={messages} locale={params.locale as LocaleCodeType} />
     </div>
   );
 }

frontend/src/app/[locale]/layout.tsx

@@ -5,8 +5,9 @@ import Header from './Header';
 import clsx from 'clsx';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
 
-export async function generateMetadata({ params: { locale } }) {
+export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
   const t = await getTranslations({ locale, namespace: 'Header' });
   return {
     title: t('title'),
@@ -24,7 +25,7 @@ export default function RootLayout({
   params: { locale },
 }: {
   children: React.ReactNode;
-  params: { locale: string };
+  params: { locale: LocaleCodeType };
 }) {
   const t = useTranslations('Toast');
   const toastMessages = {

frontend/src/app/[locale]/page.tsx

@@ -4,8 +4,10 @@ import { title, subtitle } from '@/components/primitives';
 import PaneMainTitle from './PaneMainTitle';
 import PaneMainFeatures from './PaneMainFeatures';
 import DemoImage from './DemoImage';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
 
-export default function Home(params: { locale: string }) {
+export default function Home({ params }: PageType) {
   const t = useTranslations('Index');
 
   const demoImages = [
@@ -35,7 +37,7 @@ export default function Home(params: { locale: string }) {
     <section className="mx-auto max-w-screen-xl my-12">
       <div className="flex flex-wrap">
         <div className="w-full md:w-7/12 order-last md:order-first p-4">
-          <PaneMainTitle locale={params.locale} />
+          <PaneMainTitle locale={params.locale as LocaleCodeType} />
         </div>
 
         <div className="w-full md:w-5/12 p-4">

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -3,17 +3,19 @@ import { useEffect, useState, useContext } from 'react';
 import { Button } from '@nextui-org/react';
 import { Plus } from 'lucide-react';
 import { TokenContext } from '@/utils/TokenProvider';
-import { ProjectType, ProjectsMessages } from '@/types/project';
+import { ProjectDialogMessages, ProjectType, ProjectsMessages } from '@/types/project';
 import ProjectsTable from './ProjectsTable';
 import ProjectDialog from '@/components/ProjectDialog';
 import { fetchProjects, createProject } from '@/utils/projectsControl';
+import { LocaleCodeType } from '@/types/locale';
 
 export type Props = {
   messages: ProjectsMessages;
-  locale: string;
+  projectDialogMessages: ProjectDialogMessages;
+  locale: LocaleCodeType;
 };
 
-export default function ProjectsPage({ messages, locale }: Props) {
+export default function ProjectsPage({ messages, projectDialogMessages, locale }: Props) {
   const context = useContext(TokenContext);
   const [projects, setProjects] = useState<ProjectType[]>([]);
 
@@ -73,7 +75,7 @@ export default function ProjectsPage({ messages, locale }: Props) {
         editingProject={editingProject}
         onCancel={closeDialog}
         onSubmit={onSubmit}
-        messages={messages}
+        projectDialogMessages={projectDialogMessages}
       />
     </div>
   );

frontend/src/app/[locale]/projects/ProjectsTable.tsx

@@ -1,14 +1,15 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, ReactNode } from 'react';
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react';
 import { Link, NextUiLinkClasses } from '@/src/navigation';
 import { ProjectType, ProjectsMessages } from '@/types/project';
 import dayjs from 'dayjs';
 import PublicityChip from '@/components/PublicityChip';
+import { LocaleCodeType } from '@/types/locale';
 
 type Props = {
   projects: ProjectType[];
   messages: ProjectsMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function ProjectsTable({ projects, messages, locale }: Props) {
@@ -38,21 +39,23 @@ export default function ProjectsTable({ projects, messages, locale }: Props) {
     return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
   };
 
-  const renderCell = useCallback((project: ProjectType, columnKey: Key) => {
+  const renderCell = useCallback((project: ProjectType, columnKey: string): ReactNode => {
     const cellValue = project[columnKey as keyof ProjectType];
 
     switch (columnKey) {
       case 'id':
-        return <span>{cellValue}</span>;
+        return <span>{cellValue as number}</span>;
       case 'isPublic':
-        return <PublicityChip isPublic={cellValue} publicText={messages.public} privateText={messages.private} />;
+        return (
+          <PublicityChip isPublic={cellValue as boolean} publicText={messages.public} privateText={messages.private} />
+        );
       case 'name':
         const maxLength = 30;
         const truncatedDetail = truncateText(project.detail, maxLength);
         return (
           <div>
             <Link href={`/projects/${project.id}/home`} locale={locale} className={NextUiLinkClasses}>
-              {cellValue}
+              {cellValue as string}
             </Link>
             <div className="text-xs text-default-500">
               <div>{truncatedDetail}</div>
@@ -60,9 +63,9 @@ export default function ProjectsTable({ projects, messages, locale }: Props) {
           </div>
         );
       case 'updatedAt':
-        return <span>{dayjs(cellValue).format('YYYY/MM/DD HH:mm')}</span>;
+        return <span>{dayjs(cellValue as number).format('YYYY/MM/DD HH:mm')}</span>;
       default:
-        return cellValue;
+        return cellValue as string;
     }
   }, []);
 
@@ -107,7 +110,9 @@ export default function ProjectsTable({ projects, messages, locale }: Props) {
         </TableHeader>
         <TableBody emptyContent={messages.noProjectsFound} items={sortedItems}>
           {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
+            </TableRow>
           )}
         </TableBody>
       </Table>

frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx

@@ -33,7 +33,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
         return;
       }
       try {
-        const folders: FolderType[] = await fetchFolders(context.token.access_token, projectId);
+        const folders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
         setFolders(folders);
 
         // no folder on project

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx

@@ -7,13 +7,14 @@ import { CaseType, CasesMessages } from '@/types/case';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import CaseDialog from './CaseDialog';
 import { PriorityMessages } from '@/types/priority';
+import { LocaleCodeType } from '@/types/locale';
 
 type Props = {
   projectId: string;
   folderId: string;
   messages: CasesMessages;
   priorityMessages: PriorityMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function CasesPane({ projectId, folderId, messages, priorityMessages, locale }: Props) {
@@ -67,7 +68,7 @@ export default function CasesPane({ projectId, folderId, messages, priorityMessa
 
   const onConfirm = async () => {
     if (deleteCaseIds.length > 0) {
-      await deleteCases(context.token.access_token, deleteCaseIds, projectId);
+      await deleteCases(context.token.access_token, deleteCaseIds, Number(projectId));
       setCases(cases.filter((entry) => !deleteCaseIds.includes(entry.id)));
       closeDeleteConfirmDialog();
     }

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, ReactNode } from 'react';
 import {
   Table,
   TableHeader,
@@ -15,10 +15,11 @@ import {
   SortDescriptor,
 } from '@nextui-org/react';
 import { Link, NextUiLinkClasses } from '@/src/navigation';
-import { Plus, MoreVertical, Trash, Circle } from 'lucide-react';
+import { Plus, MoreVertical, Trash } from 'lucide-react';
 import { CaseType, CasesMessages } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
 import TestCasePriority from '@/components/TestCasePriority';
+import { LocaleCodeType } from '@/types/locale';
 
 type Props = {
   projectId: string;
@@ -29,7 +30,7 @@ type Props = {
   onDeleteCases: (caseIds: number[]) => void;
   messages: CasesMessages;
   priorityMessages: PriorityMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function TestCaseTable({
@@ -73,12 +74,12 @@ export default function TestCaseTable({
     onDeleteCase(deleteCaseId);
   };
 
-  const renderCell = useCallback((testCase: CaseType, columnKey: Key) => {
+  const renderCell = useCallback((testCase: CaseType, columnKey: string): ReactNode => {
     const cellValue = testCase[columnKey as keyof CaseType];
 
     switch (columnKey) {
       case 'id':
-        return <span>{cellValue}</span>;
+        return <span>{cellValue as number}</span>;
       case 'title':
         return (
           <Button size="sm" variant="light" className="data-[hover=true]:bg-transparent">
@@ -87,12 +88,12 @@ export default function TestCaseTable({
               locale={locale}
               className={NextUiLinkClasses}
             >
-              {cellValue}
+              {cellValue as string}
             </Link>
           </Button>
         );
       case 'priority':
-        return <TestCasePriority priorityValue={cellValue} priorityMessages={priorityMessages} />;
+        return <TestCasePriority priorityValue={cellValue as number} priorityMessages={priorityMessages} />;
       case 'actions':
         return (
           <Dropdown>
@@ -113,7 +114,7 @@ export default function TestCaseTable({
           </Dropdown>
         );
       default:
-        return cellValue;
+        return cellValue as string;
     }
   }, []);
 
@@ -152,7 +153,7 @@ export default function TestCaseTable({
       <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
         <h3 className="font-bold">{messages.testCaseList}</h3>
         <div>
-          {(selectedKeys.size > 0 || selectedKeys === 'all') && (
+          {((selectedKeys !== 'all' && selectedKeys.size > 0) || selectedKeys === 'all') && (
             <Button
               startContent={<Trash size={16} />}
               size="sm"
@@ -200,7 +201,9 @@ export default function TestCaseTable({
         </TableHeader>
         <TableBody emptyContent={messages.noCasesFound} items={sortedItems}>
           {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
+            </TableRow>
           )}
         </TableBody>
       </Table>

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx

@@ -9,7 +9,7 @@ type Props = {
   attachments: AttachmentType[];
   onAttachmentDownload: (attachmentId: number, downloadFileName: string) => void;
   onAttachmentDelete: (attachmentId: number) => void;
-  onFilesDrop: (event: DragEvent) => void;
+  onFilesDrop: (event: DragEvent<HTMLElement>) => void;
   onFilesInput: (event: ChangeEvent) => void;
   messages: CaseMessages;
 };

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, ChangeEvent, DragEvent } from 'react';
 import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip } from '@nextui-org/react';
 import { useRouter } from '@/src/navigation';
 import { Save, Plus, ArrowLeft, Circle } from 'lucide-react';
@@ -134,13 +134,22 @@ export default function CaseEditor({
     }
   };
 
-  const handleDrop = async (event: DragEvent) => {
+  const handleDrop = (event: DragEvent<HTMLElement>) => {
     event.preventDefault();
-    handleFetchCreateAttachments(Number(caseId), event.dataTransfer.files);
+    if (event.dataTransfer) {
+      const filesArray = Array.from(event.dataTransfer.files);
+      handleFetchCreateAttachments(Number(caseId), filesArray);
+    }
   };
 
-  const handleInput = (event: DragEvent) => {
+  const handleInput = (event: ChangeEvent) => {
-    handleFetchCreateAttachments(Number(caseId), event.target.files);
+    if (event.target) {
+      const input = event.target as HTMLInputElement;
+      if (input.files) {
+        const filesArray = Array.from(input.files);
+        handleFetchCreateAttachments(Number(caseId), filesArray);
+      }
+    }
   };
 
   const handleFetchCreateAttachments = async (caseId: number, files: File[]) => {
@@ -149,10 +158,16 @@ export default function CaseEditor({
     if (newAttachments) {
       const newAttachmentsWithJoinTable = [];
       newAttachments.forEach((attachment: AttachmentType) => {
-        attachment.caseAttachments = { AttachmentId: attachment.id };
+        attachment.caseAttachments = {
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          caseId: 0,
+          attachmentId: attachment.id,
+        };
         newAttachmentsWithJoinTable.push(attachment);
       });
       const updatedAttachments = testCase.Attachments;
+      if (updatedAttachments) {
         updatedAttachments.push(...newAttachments);
 
         setTestCase({
@@ -160,17 +175,19 @@ export default function CaseEditor({
           Attachments: updatedAttachments,
         });
       }
+    }
   };
 
   const onAttachmentDelete = async (attachmentId: number) => {
     await fetchDeleteAttachment(attachmentId);
-
+    if (testCase.Attachments) {
       const filteredAttachments = testCase.Attachments.filter((attachment) => attachment.id !== attachmentId);
 
       setTestCase({
         ...testCase,
         Attachments: filteredAttachments,
       });
+    }
   };
 
   useEffect(() => {
@@ -261,10 +278,12 @@ export default function CaseEditor({
             size="sm"
             variant="bordered"
             selectedKeys={[priorities[testCase.priority].uid]}
-            onSelectionChange={(e) => {
+            onSelectionChange={(newSelection) => {
-              const selectedUid = e.anchorKey;
+              if (newSelection !== 'all' && newSelection.size !== 0) {
+                const selectedUid = Array.from(newSelection)[0];
                 const index = priorities.findIndex((priority) => priority.uid === selectedUid);
                 setTestCase({ ...testCase, priority: index });
+              }
             }}
             startContent={
               <Circle size={8} color={priorities[testCase.priority].color} fill={priorities[testCase.priority].color} />
@@ -285,10 +304,12 @@ export default function CaseEditor({
             size="sm"
             variant="bordered"
             selectedKeys={[testTypes[testCase.type].uid]}
-            onSelectionChange={(e) => {
+            onSelectionChange={(newSelection) => {
-              const selectedUid = e.anchorKey;
+              if (newSelection !== 'all' && newSelection.size !== 0) {
+                const selectedUid = Array.from(newSelection)[0];
                 const index = testTypes.findIndex((type) => type.uid === selectedUid);
                 setTestCase({ ...testCase, type: index });
+              }
             }}
             label={messages.type}
             className="mt-3 max-w-xs"
@@ -306,10 +327,12 @@ export default function CaseEditor({
             size="sm"
             variant="bordered"
             selectedKeys={[templates[testCase.template].uid]}
-            onSelectionChange={(e) => {
+            onSelectionChange={(newSelection) => {
-              const selectedUid = e.anchorKey;
+              if (newSelection !== 'all' && newSelection.size !== 0) {
+                const selectedUid = Array.from(newSelection)[0];
                 const index = templates.findIndex((template) => template.uid === selectedUid);
                 setTestCase({ ...testCase, template: index });
+              }
             }}
             label={messages.template}
             className="mt-3 max-w-xs"
@@ -365,10 +388,12 @@ export default function CaseEditor({
                 {messages.newStep}
               </Button>
             </div>
+            {testCase.Steps && (
               <CaseStepsEditor
                 isDisabled={!context.isProjectDeveloper(Number(projectId))}
                 steps={testCase.Steps}
                 onStepUpdate={(stepId, changeStep) => {
+                  if (testCase.Steps) {
                     setTestCase({
                       ...testCase,
                       Steps: testCase.Steps.map((step) => {
@@ -379,16 +404,19 @@ export default function CaseEditor({
                         }
                       }),
                     });
+                  }
                 }}
                 onStepPlus={onPlusClick}
                 onStepDelete={onDeleteClick}
                 messages={messages}
               />
+            )}
           </div>
         )}
 
         <Divider className="my-6" />
         <h6 className="font-bold">{messages.attachments}</h6>
+        {testCase.Attachments && (
           <CaseAttachmentsEditor
             isDisabled={!context.isProjectDeveloper(Number(projectId))}
             attachments={testCase.Attachments}
@@ -400,6 +428,7 @@ export default function CaseEditor({
             onFilesInput={handleInput}
             messages={messages}
           />
+        )}
       </div>
     </>
   );

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx

@@ -1,6 +1,7 @@
 import { PriorityMessages } from '@/types/priority';
 import CasesPane from './CasesPane';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
 
 export default function Page({ params }: { params: { projectId: string; folderId: string; locale: string } }) {
   const t = useTranslations('Cases');
@@ -36,7 +37,7 @@ export default function Page({ params }: { params: { projectId: string; folderId
       <CasesPane
         projectId={params.projectId}
         folderId={params.folderId}
-        locale={params.locale}
+        locale={params.locale as LocaleCodeType}
         messages={messages}
         priorityMessages={priorityMessages}
       />

frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx

@@ -3,7 +3,6 @@ import { useState, useEffect, useContext } from 'react';
 import { title, subtitle } from '@/components/primitives';
 import { Card, CardBody, Chip, Divider } from '@nextui-org/react';
 import { Folder, Clipboard, FlaskConical } from 'lucide-react';
-import { CaseTypeCountType, CasePriorityCountType } from '@/types/case';
 import { ProgressSeriesType } from '@/types/run';
 import { HomeMessages } from './page';
 import { TokenContext } from '@/utils/TokenProvider';
@@ -16,6 +15,8 @@ import TestProgressBarChart from './TestProgressColumnChart';
 import { TestRunCaseStatusMessages } from '@/types/status';
 import { TestTypeMessages } from '@/types/testType';
 import { PriorityMessages } from '@/types/priority';
+import { ProjectType } from '@/types/project';
+import { CasePriorityCountType, CaseTypeCountType } from '@/types/chart';
 
 const apiServer = Config.apiServer;
 
@@ -59,19 +60,24 @@ export function ProjectHome({
 }: Props) {
   const context = useContext(TokenContext);
   const { theme, setTheme } = useTheme();
-  const [project, setProject] = useState({
+  const [project, setProject] = useState<ProjectType>({
+    id: 0,
     name: '',
     detail: '',
-    Folders: [{ Cases: [] }],
+    isPublic: false,
-    Runs: [{ RunCases: [] }],
+    userId: 0,
+    createdAt: '',
+    updatedAt: '',
+    Folders: [],
+    Runs: [],
   });
   const [folderNum, setFolderNum] = useState(0);
   const [caseNum, setCaseNum] = useState(0);
   const [runNum, setRunNum] = useState(0);
-  const [typesCounts, setTypesCounts] = useState<CaseTypeCountType[]>();
+  const [typesCounts, setTypesCounts] = useState<CaseTypeCountType[]>([]);
-  const [priorityCounts, setPriorityCounts] = useState<CasePriorityCountType[]>();
+  const [priorityCounts, setPriorityCounts] = useState<CasePriorityCountType[]>([]);
-  const [progressCategories, setProgressCategories] = useState<string[]>();
+  const [progressCategories, setProgressCategories] = useState<string[]>([]);
-  const [progressSeries, setProgressSeries] = useState<ProgressSeriesType[]>();
+  const [progressSeries, setProgressSeries] = useState<ProgressSeriesType[]>([]);
 
   useEffect(() => {
     async function fetchDataEffect() {
@@ -92,6 +98,9 @@ export function ProjectHome({
 
   useEffect(() => {
     async function aggregate() {
+      if (!project) {
+        return;
+      }
       const { folderNum, runNum, caseNum } = aggregateBasicInfo(project);
       setFolderNum(folderNum);
       setRunNum(runNum);

frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx

@@ -2,18 +2,19 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { priorities } from '@/config/selection';
-import { CasePriorityCountType } from '@/types/case';
+import { CasePriorityCountType } from '@/types/chart';
 import { PriorityMessages } from '@/types/priority';
+import { ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type Props = {
   priorityCounts: CasePriorityCountType[];
   priorityMessages: PriorityMessages;
-  theme: string;
+  theme: string | undefined;
 };
 
 export default function TestPriorityDonutChart({ priorityCounts, priorityMessages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
     series: [],
     options: {
       labels: [],

frontend/src/app/[locale]/projects/[projectId]/home/TestProgressColumnChart.tsx

@@ -3,16 +3,17 @@ import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { ProgressSeriesType } from '@/types/run';
 import { testRunCaseStatus } from '@/config/selection';
+import { ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type Props = {
   progressSeries: ProgressSeriesType[];
   progressCategories: string[];
-  theme: string;
+  theme: string | undefined;
 };
 
 export default function TestProgressBarChart({ progressSeries, progressCategories, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
     series: [],
     options: {
       labels: [],

frontend/src/app/[locale]/projects/[projectId]/home/TestTypesDonutChart.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import { testTypes } from '@/config/selection';
-import { CaseTypeCountType } from '@/types/case';
 import { TestTypeMessages } from '@/types/testType';
+import { CaseTypeCountType, ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type Props = {
   typesCounts: CaseTypeCountType[];
   testTypeMessages: TestTypeMessages;
-  theme: string;
+  theme: string | undefined;
 };
 
 export default function TestTypesDonutChart({ typesCounts, testTypeMessages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
     series: [],
     options: {
       labels: [],

frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts

@@ -1,6 +1,7 @@
 import { ProjectType } from '@/types/project';
 import { testTypes, priorities, testRunCaseStatus } from '@/config/selection';
 import { TestRunCaseStatusMessages } from '@/types/status';
+import { CasePriorityCountType, CaseTypeCountType } from '@/types/chart';
 
 // aggregate folder, case, run mum
 function aggregateBasicInfo(project: ProjectType) {
@@ -15,48 +16,58 @@ function aggregateBasicInfo(project: ProjectType) {
   return { folderNum, runNum, caseNum };
 }
 
-// aggregate test types of each case
+function aggregateTestType(project: ProjectType): CaseTypeCountType[] {
-function aggregateTestType(project: ProjectType) {
+  // count how many test cases are for each type
-  const typesCounts = {};
+  const typesCounts: number[] = testTypes.map((entry) => {
+    return 0;
+  });
   project.Folders.forEach((folder) => {
     folder.Cases.forEach((testcase) => {
       const type = testcase.type;
-      typesCounts[type] = (typesCounts[type] || 0) + 1;
+      typesCounts[type]++;
     });
   });
 
-  const result = [];
+  const result: CaseTypeCountType[] = [];
   for (let type = 0; type <= testTypes.length; type++) {
-    result.push({ type: type, count: typesCounts[type] || 0 });
+    result.push({ type: type, count: typesCounts[type] });
   }
 
   return result;
 }
 
 function aggregateTestPriority(project: ProjectType) {
-  const priorityCounts = {};
+  // count how many test cases are for each priority
+  const priorityCounts: number[] = priorities.map((entry) => {
+    return 0;
+  });
   project.Folders.forEach((folder) => {
     folder.Cases.forEach((testcase) => {
       const priority = testcase.priority;
-      priorityCounts[priority] = (priorityCounts[priority] || 0) + 1;
+      priorityCounts[priority]++;
     });
   });
 
-  const result = [];
+  const result: CasePriorityCountType[] = [];
   for (let priority = 0; priority <= priorities.length; priority++) {
-    result.push({ priority: priority, count: priorityCounts[priority] || 0 });
+    result.push({ priority: priority, count: priorityCounts[priority] });
   }
 
   return result;
 }
 
 function aggregateProgress(project: ProjectType, testRunCaseStatusMessages: TestRunCaseStatusMessages) {
-  let series = testRunCaseStatus.map((status) => {
+  type ChartSeries = { name: string; data: number[] };
+  let series: ChartSeries[] = testRunCaseStatus.map((status) => {
     return { name: testRunCaseStatusMessages[status.uid], data: [] };
   });
-  let categories = [];
+  let categories: string[] = [];
 
   project.Runs.forEach((run) => {
+    if (!run.RunCases) {
+      return;
+    }
+
     run.RunCases.forEach((runCase) => {
       const createdAtDate = new Date(runCase.createdAt);
       const dateString = createdAtDate.toISOString().slice(0, 10);
@@ -72,6 +83,10 @@ function aggregateProgress(project: ProjectType, testRunCaseStatusMessages: Test
   });
 
   project.Runs.forEach((run) => {
+    if (!run.RunCases) {
+      return;
+    }
+
     run.RunCases.forEach((runCase) => {
       const createdAtDate = new Date(runCase.createdAt);
       const dateString = createdAtDate.toISOString().slice(0, 10);

frontend/src/app/[locale]/projects/[projectId]/layout.tsx

@@ -1,3 +1,4 @@
+import { ProjectMessages } from '@/types/project';
 import Sidebar from './Sidebar';
 import { useTranslations } from 'next-intl';
 
@@ -9,7 +10,7 @@ export default function SidebarLayout({
   params: { locale: string };
 }) {
   const t = useTranslations('Project');
-  const messages = {
+  const messages: ProjectMessages = {
     home: t('home'),
     testCases: t('test_cases'),
     testRuns: t('test_runs'),

frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx

@@ -2,18 +2,18 @@
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Input, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
-import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
 import { UserType } from '@/types/user';
 import { searchUsers } from '@/utils/usersControl';
 import CandidatesTable from './CandidatesTable';
+import { MembersMessages } from '@/types/member';
 
 type Props = {
   isOpen: boolean;
   projectId: string;
   onCancel: () => void;
   onAddMember: (memberAdded: UserType) => void;
-  messages: SettingsMessages;
+  messages: MembersMessages;
 };
 
 export default function AddMemberDialog({ isOpen, projectId, onCancel, onAddMember, messages }: Props) {

frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx

@@ -1,24 +1,24 @@
 import { useMemo, useCallback } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
 import { UserType } from '@/types/user';
-import { SettingsMessages } from '@/types/settings';
 import Avatar from 'boring-avatars';
+import { MembersMessages } from '@/types/member';
 
 type Props = {
   candidates: UserType[];
   onAddPress: (userAdded: UserType) => void;
-  messages: SettingsMessages;
+  messages: MembersMessages;
 };
 
 export default function MembersTable({ candidates, onAddPress, messages }: Props) {
   const headerColumns = [
-    { name: messages.avatar, uid: 'avatar' },
+    { name: messages.avatar, uid: 'avatar', sortable: false },
-    { name: messages.email, uid: 'email' },
+    { name: messages.email, uid: 'email', sortable: false },
-    { name: messages.username, uid: 'username' },
+    { name: messages.username, uid: 'username', sortable: false },
-    { name: messages.add, uid: 'add' },
+    { name: messages.add, uid: 'add', sortable: false },
   ];
 
-  const renderCell = useCallback((candidate: UserType, columnKey: Key) => {
+  const renderCell = useCallback((candidate: UserType, columnKey: string) => {
     const cellValue = candidate[columnKey as keyof UserType];
 
     switch (columnKey) {
@@ -81,7 +81,9 @@ export default function MembersTable({ candidates, onAddPress, messages }: Props
         </TableHeader>
         <TableBody emptyContent={messages.noMembersFound} items={candidates}>
           {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
+            </TableRow>
           )}
         </TableBody>
       </Table>

frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx

@@ -40,11 +40,13 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
   }, [context]);
 
   const handleAddMember = async (userAdded: UserType) => {
-    const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
+    if (userAdded.id) {
+      const newMember = await addMember(context.token.access_token, userAdded.id, Number(projectId));
       newMember.User = userAdded;
       const updateMembers = [...members];
       updateMembers.push(newMember);
       setMembers(updateMembers);
+    }
 
     setIsDialogOpen(false);
   };
@@ -64,14 +66,15 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
 
   const onConfirm = async () => {
     if (deleteMemberId) {
-      await deleteMember(context.token.access_token, deleteMemberId, projectId);
+      await deleteMember(context.token.access_token, deleteMemberId, Number(projectId));
       setMembers(members.filter((member) => member.User.id !== deleteMemberId));
       closeDeleteConfirmDialog();
     }
   };
 
   const handleChangeRole = async (userEdit: UserType, role: number) => {
-    await updateMember(context.token.access_token, userEdit.id, projectId, role);
+    if (userEdit.id) {
+      await updateMember(context.token.access_token, userEdit.id, Number(projectId), role);
       setMembers((prevMembers) => {
         return prevMembers.map((member) => {
           if (member.User.id === userEdit.id) {
@@ -80,6 +83,7 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
           return member;
         });
       });
+    }
   };
 
   return (

frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, ReactNode } from 'react';
 import {
   Button,
   Table,
@@ -15,16 +15,16 @@ import {
 } from '@nextui-org/react';
 import { ChevronDown } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
-import { SettingsMessages } from '@/types/settings';
 import { memberRoles } from '@/config/selection';
 import Avatar from 'boring-avatars';
+import { MembersMessages } from '@/types/member';
 
 type Props = {
   members: MemberType[];
   isDisabled: boolean;
   onChangeRole: (userEdit: UserType, role: number) => void;
   onDeleteMember: (deletedUserId: number) => void;
-  messages: SettingsMessages;
+  messages: MembersMessages;
 };
 
 export default function MembersTable({ members, isDisabled, onChangeRole, onDeleteMember, messages }: Props) {
@@ -42,17 +42,17 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
   });
 
   const sortedItems = useMemo(() => {
-    return [...members].sort((a: UserType, b: UserType) => {
+    return [...members].sort((a: MemberType, b: MemberType) => {
-      const first = a[sortDescriptor.column as keyof UserType] as number;
+      const first = a[sortDescriptor.column as keyof MemberType] as number;
-      const second = b[sortDescriptor.column as keyof UserType] as number;
+      const second = b[sortDescriptor.column as keyof MemberType] as number;
       const cmp = first < second ? -1 : first > second ? 1 : 0;
 
       return sortDescriptor.direction === 'descending' ? -cmp : cmp;
     });
   }, [sortDescriptor, members]);
 
-  const renderCell = (member: UserType, columnKey: Key) => {
+  const renderCell = (member: MemberType, columnKey: string) => {
-    const cellValue = member[columnKey as keyof UserType];
+    const cellValue = member[columnKey as keyof MemberType];
 
     switch (columnKey) {
       case 'avatar':
@@ -73,7 +73,7 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
           <Dropdown>
             <DropdownTrigger>
               <Button size="sm" isDisabled={isDisabled} variant="light" endContent={<ChevronDown size={16} />}>
-                <span className="w-12">{messages[memberRoles[cellValue].uid]}</span>
+                <span className="w-12">{messages[memberRoles[cellValue as number].uid]}</span>
               </Button>
             </DropdownTrigger>
             <DropdownMenu aria-label="test case actions">
@@ -92,7 +92,11 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
             isDisabled={isDisabled}
             color="danger"
             variant="light"
-            onClick={() => onDeleteMember(member.User.id)}
+            onClick={() => {
+              if (member.User.id) {
+                onDeleteMember(member.User.id);
+              }
+            }}
           >
             {messages.deleteMember}
           </Button>
@@ -143,7 +147,9 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
         </TableHeader>
         <TableBody emptyContent={messages.noMembersFound} items={sortedItems}>
           {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string) as ReactNode}</TableCell>}
+            </TableRow>
           )}
         </TableBody>
       </Table>

frontend/src/app/[locale]/projects/[projectId]/members/membersControl.ts

@@ -24,7 +24,7 @@ async function fetchProjectMembers(jwt: string, projectId: string) {
   }
 }
 
-async function addMember(jwt: string, userId: string, projectId: string) {
+async function addMember(jwt: string, userId: number, projectId: number) {
   const fetchOptions = {
     method: 'POST',
     headers: {
@@ -47,7 +47,7 @@ async function addMember(jwt: string, userId: string, projectId: string) {
   }
 }
 
-async function deleteMember(jwt: string, userId: string, projectId: string) {
+async function deleteMember(jwt: string, userId: number, projectId: number) {
   const fetchOptions = {
     method: 'DELETE',
     headers: {
@@ -68,7 +68,7 @@ async function deleteMember(jwt: string, userId: string, projectId: string) {
   }
 }
 
-async function updateMember(jwt: string, userId: string, projectId: string, role: number) {
+async function updateMember(jwt: string, userId: number, projectId: number, role: number) {
   const fetchOptions = {
     method: 'PUT',
     headers: {

frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx

@@ -8,10 +8,11 @@ import { RunType, RunsMessages } from '@/types/run';
 import RunDialog from './RunDialog';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { TokenContext } from '@/utils/TokenProvider';
+import { LocaleCodeType } from '@/types/locale';
 
 type Props = {
   projectId: string;
-  locale: string;
+  locale: LocaleCodeType;
   messages: RunsMessages;
 };
 

frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, ReactNode } from 'react';
 import {
   Table,
   TableHeader,
@@ -17,6 +17,7 @@ import { Link, NextUiLinkClasses } from '@/src/navigation';
 import { MoreVertical } from 'lucide-react';
 import { RunsMessages, RunType } from '@/types/run';
 import dayjs from 'dayjs';
+import { LocaleCodeType } from '@/types/locale';
 
 type Props = {
   projectId: string;
@@ -24,7 +25,7 @@ type Props = {
   runs: RunType[];
   onDeleteRun: (runId: number) => void;
   messages: RunsMessages;
-  locale: string;
+  locale: LocaleCodeType;
 };
 
 export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, messages, locale }: Props) {
@@ -63,19 +64,19 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
     return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
   };
 
-  const renderCell = (run: RunType, columnKey: Key) => {
+  const renderCell = (run: RunType, columnKey: string) => {
     const cellValue = run[columnKey as keyof RunType];
 
     switch (columnKey) {
       case 'id':
-        return <span>{cellValue}</span>;
+        return <span>{cellValue as number}</span>;
       case 'name':
         const maxLength = 30;
         const truncatedDescription = truncateText(run.description, maxLength);
         return (
           <div>
             <Link href={`/projects/${projectId}/runs/${run.id}`} locale={locale} className={NextUiLinkClasses}>
-              {cellValue}
+              {cellValue as string}
             </Link>
             <div className="text-xs text-default-500">
               <div>{truncatedDescription}</div>
@@ -83,7 +84,7 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
           </div>
         );
       case 'updatedAt':
-        return <span>{dayjs(cellValue).format('YYYY/MM/DD HH:mm')}</span>;
+        return <span>{dayjs(cellValue as string).format('YYYY/MM/DD HH:mm')}</span>;
       case 'actions':
         return (
           <Dropdown>
@@ -145,7 +146,9 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
         </TableHeader>
         <TableBody emptyContent={messages.noRunsFound} items={sortedItems}>
           {(item) => (
-            <TableRow key={item.id}>{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}</TableRow>
+            <TableRow key={item.id}>
+              {(columnKey) => <TableCell>{renderCell(item, columnKey as string) as ReactNode}</TableCell>}
+            </TableRow>
           )}
         </TableBody>
       </Table>

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -77,7 +77,7 @@ export default function RunEditor({
   const { theme, setTheme } = useTheme();
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState<FolderType[]>([]);
-  const [runStatusCounts, setRunStatusCounts] = useState<RunStatusCountType[]>();
+  const [runStatusCounts, setRunStatusCounts] = useState<RunStatusCountType[]>([]);
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
   const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
   const [testCases, setTestCases] = useState<CaseType[]>([]);
@@ -256,10 +256,12 @@ export default function RunEditor({
                 size="sm"
                 variant="bordered"
                 selectedKeys={[testRunStatus[testRun.state].uid]}
-                onSelectionChange={(e) => {
+                onSelectionChange={(newSelection) => {
-                  const selectedUid = e.anchorKey;
+                  if (newSelection !== 'all' && newSelection.size !== 0) {
+                    const selectedUid = Array.from(newSelection)[0];
                     const index = testRunStatus.findIndex((template) => template.uid === selectedUid);
                     setTestRun({ ...testRun, state: index });
+                  }
                 }}
                 label={messages.status}
                 className="mt-3 max-w-xs"
@@ -278,7 +280,7 @@ export default function RunEditor({
         <div className="flex items-center justify-between">
           <h6 className="h-8 font-bold">{messages.selectTestCase}</h6>
           <div>
-            {(selectedKeys.size > 0 || selectedKeys === 'all') && (
+            {(selectedKeys === 'all' || selectedKeys.size > 0) && (
               <Dropdown>
                 <DropdownTrigger>
                   <Button

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic';
 import { testRunCaseStatus } from '@/config/selection';
 import { RunStatusCountType } from '@/types/run';
 import { TestRunCaseStatusMessages } from '@/types/status';
+import { ChartDataType } from '@/types/chart';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type Props = {
@@ -13,7 +14,7 @@ type Props = {
 };
 
 export default function RunProgressDounut({ statusCounts, testRunCaseStatusMessages, theme }: Props) {
-  const [chartData, setChartData] = useState({
+  const [chartData, setChartData] = useState<ChartDataType>({
     series: [],
     options: {
       labels: [],

frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx

@@ -1,3 +1,4 @@
+import { LocaleCodeType } from '@/types/locale';
 import RunsPage from './RunsPage';
 import { useTranslations } from 'next-intl';
 
@@ -27,7 +28,7 @@ export default function Page({ params }: { params: { projectId: string; locale:
 
   return (
     <>
-      <RunsPage projectId={params.projectId} locale={params.locale} messages={messages} />
+      <RunsPage projectId={params.projectId} locale={params.locale as LocaleCodeType} messages={messages} />
     </>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/runs/runsControl.ts

@@ -246,6 +246,8 @@ async function updateRunCases(jwt: string, runId: number, testCases: CaseType[])
         runId: runId,
         status: itr.RunCases[0].status,
         editState: itr.RunCases[0].editState,
+        createdAt: '0',
+        updatedAt: '0',
       });
     }
   });

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -7,7 +7,7 @@ import { Pencil, Trash } from 'lucide-react';
 import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
 import { deleteProject, fetchProject, updateProject } from '@/utils/projectsControl';
-import { ProjectType } from '@/types/project';
+import { ProjectDialogMessages, ProjectType } from '@/types/project';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
 import { useRouter } from '@/src/navigation';
 import ProjectDialog from '@/components/ProjectDialog';
@@ -17,10 +17,11 @@ import { findUser } from '@/utils/usersControl';
 type Props = {
   projectId: string;
   messages: SettingsMessages;
+  projectDialogMessages: ProjectDialogMessages;
   locale: string;
 };
 
-export default function SettingsPage({ projectId, messages, locale }: Props) {
+export default function SettingsPage({ projectId, messages, projectDialogMessages, locale }: Props) {
   const context = useContext(TokenContext);
   const router = useRouter();
   const [project, setProject] = useState<ProjectType>({
@@ -152,7 +153,7 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
         editingProject={project}
         onCancel={() => setIsProjectDialogOpen(false)}
         onSubmit={onSubmit}
-        messages={messages}
+        projectDialogMessages={projectDialogMessages}
       />
 
       <DeleteConfirmDialog

frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx

@@ -1,29 +1,46 @@
+import { ProjectDialogMessages } from '@/types/project';
 import SettingsPage from './SettingsPage';
 import { useTranslations } from 'next-intl';
+import { SettingsMessages } from '@/types/settings';
 
 export default function Page({ params }: { params: { projectId: string; locale: string } }) {
   const t = useTranslations('Settings');
-  const messages = {
+  const messages: SettingsMessages = {
     projectManagement: t('project_management'),
     projectName: t('project_name'),
     projectDetail: t('project_detail'),
     projectOwner: t('project_owner'),
     editProject: t('edit_project'),
-    project: t('project'),
-    ifYouMakePublic: t('if_you_make_public'),
     public: t('public'),
     publicity: t('publicity'),
     private: t('private'),
-    update: t('update'),
     deleteProject: t('delete_project'),
     delete: t('delete'),
     close: t('close'),
     areYouSure: t('are_you_sure'),
   };
 
+  const projectDialogMessages: ProjectDialogMessages = {
+    project: t('project'),
+    projectName: t('project_name'),
+    projectDetail: t('project_detail'),
+    public: t('public'),
+    private: t('private'),
+    ifYouMakePublic: t('if_you_make_public'),
+    close: t('close'),
+    create: t('create'),
+    update: t('update'),
+    pleaseEnter: t('please_enter'),
+  };
+
   return (
     <>
-      <SettingsPage projectId={params.projectId} messages={messages} locale={params.locale} />
+      <SettingsPage
+        projectId={params.projectId}
+        messages={messages}
+        projectDialogMessages={projectDialogMessages}
+        locale={params.locale}
+      />
     </>
   );
 }

frontend/src/app/[locale]/projects/page.tsx

@@ -1,17 +1,26 @@
+import { PageType } from '@/types/base';
 import ProjectsPage from './ProjectsPage';
 import { useTranslations } from 'next-intl';
+import { LocaleCodeType } from '@/types/locale';
+import { ProjectDialogMessages, ProjectsMessages } from '@/types/project';
 
-export default function Page(params: { locale: string }) {
+export default function Page({ params }: PageType) {
   const t = useTranslations('Projects');
-  const messages = {
+  const messages: ProjectsMessages = {
     projectList: t('projectList'),
-    project: t('project'),
     newProject: t('new_project'),
     id: t('id'),
     publicity: t('publicity'),
+    public: t('public'),
+    private: t('private'),
     name: t('name'),
     detail: t('detail'),
     lastUpdate: t('last_update'),
+    noProjectsFound: t('no_projects_found'),
+  };
+
+  const projectDialogMessages: ProjectDialogMessages = {
+    project: t('project'),
     projectName: t('project_name'),
     projectDetail: t('project_detail'),
     public: t('public'),
@@ -19,12 +28,17 @@ export default function Page(params: { locale: string }) {
     ifYouMakePublic: t('if_you_make_public'),
     close: t('close'),
     create: t('create'),
+    update: t('update'),
     pleaseEnter: t('please_enter'),
-    noProjectsFound: t('no_projects_found'),
   };
+
   return (
     <>
-      <ProjectsPage messages={messages} locale={params.locale} />
+      <ProjectsPage
+        messages={messages}
+        projectDialogMessages={projectDialogMessages}
+        locale={params.locale as LocaleCodeType}
+      />
     </>
   );
 }

frontend/src/i18n.ts

@@ -1,7 +1,8 @@
 import { notFound } from 'next/navigation';
 import { getRequestConfig } from 'next-intl/server';
+import { LocaleCodeType } from '@/types/locale';
 
-const locales = ['en', 'ja'];
+const locales: LocaleCodeType[] = ['en', 'ja'];
 
 export default getRequestConfig(async ({ locale }) => {
   if (!locales.includes(locale as any)) notFound();

frontend/types/base.ts

@@ -0,0 +1,21 @@
+export type PageType = {
+  params: {
+    locale: string;
+  };
+};
+
+export type GlobalRoleType = {
+  uid: 'administrator' | 'user';
+};
+
+export type MemberRoleType = {
+  uid: 'manager' | 'developer' | 'reporter';
+};
+
+export type AutomationStatusType = {
+  uid: 'automated' | 'automation-not-required' | 'cannot-be-automated' | 'obsolete';
+};
+
+export type TemplateType = {
+  uid: 'text' | 'step';
+};

frontend/types/case.ts

@@ -45,8 +45,8 @@ type RunCaseType = {
 type CaseAttachmentType = {
   createdAt: Date;
   updatedAt: Date;
-  CaseId: number;
+  caseId: number;
-  AttachmentId: number;
+  attachmentId: number;
 };
 
 type AttachmentType = {
@@ -59,16 +59,6 @@ type AttachmentType = {
   caseAttachments: CaseAttachmentType;
 };
 
-type CaseTypeCountType = {
-  type: number;
-  count: number;
-};
-
-type CasePriorityCountType = {
-  priority: number;
-  count: number;
-};
-
 type CasesMessages = {
   testCaseList: string;
   id: string;
@@ -97,6 +87,7 @@ type CaseMessages = {
   pleaseEnterTitle: string;
   description: string;
   testCaseDescription: string;
+  priority: string;
   type: string;
   template: string;
   testDetail: string;
@@ -119,12 +110,4 @@ type CaseMessages = {
   areYouSureLeave: string;
 };
 
-export type {
+export type { CaseType, StepType, AttachmentType, CasesMessages, CaseMessages };
-  CaseType,
-  StepType,
-  AttachmentType,
-  CaseTypeCountType,
-  CasePriorityCountType,
-  CasesMessages,
-  CaseMessages,
-};

frontend/types/chart.ts

@@ -0,0 +1,16 @@
+import { ApexOptions } from 'apexcharts';
+
+export type ChartDataType = {
+  series: ApexOptions['series'];
+  options: ApexOptions;
+};
+
+export type CaseTypeCountType = {
+  type: number;
+  count: number;
+};
+
+export type CasePriorityCountType = {
+  priority: number;
+  count: number;
+};

frontend/types/locale.ts

@@ -0,0 +1,6 @@
+export type LocaleCodeType = 'en' | 'ja';
+
+export type LocaleType = {
+  code: LocaleCodeType;
+  name: string;
+};

frontend/types/project.ts

@@ -13,14 +13,8 @@ export type ProjectType = {
   Runs: RunType[]; // additional property
 };
 
-export type ProjectsMessages = {
+export type ProjectDialogMessages = {
-  projectList: string;
+  project: string;
-  newProject: string;
-  id: string;
-  publicity: string;
-  name: string;
-  detail: string;
-  lastUpdate: string;
   projectName: string;
   projectDetail: string;
   public: string;
@@ -28,7 +22,20 @@ export type ProjectsMessages = {
   ifYouMakePublic: string;
   close: string;
   create: string;
+  update: string;
   pleaseEnter: string;
+};
+
+export type ProjectsMessages = {
+  projectList: string;
+  newProject: string;
+  id: string;
+  publicity: string;
+  public: string;
+  private: string;
+  name: string;
+  detail: string;
+  lastUpdate: string;
   noProjectsFound: string;
 };
 
@@ -36,5 +43,6 @@ export type ProjectMessages = {
   home: string;
   testCases: string;
   testRuns: string;
+  members: string;
   settings: string;
 };

frontend/types/run.ts

@@ -7,6 +7,7 @@ type RunType = {
   projectId: number;
   createdAt: string;
   updatedAt: string;
+  RunCases?: RunCaseType[];
 };
 
 type RunCaseType = {
@@ -15,6 +16,8 @@ type RunCaseType = {
   caseId: number;
   status: number;
   editState: 'notChanged' | 'changed' | 'new' | 'deleted';
+  createdAt: string;
+  updatedAt: string;
 };
 
 type RunStatusCountType = {

frontend/types/settings.ts

@@ -4,12 +4,9 @@ export type SettingsMessages = {
   projectDetail: string;
   projectOwner: string;
   editProject: string;
-  project: string;
   publicity: string;
   public: string;
   private: string;
-  ifYouMakePublic: string;
-  update: string;
   deleteProject: string;
   delete: string;
   close: string;

frontend/types/toast.ts

@@ -8,5 +8,5 @@ export type ToastMessages = {
 };
 
 export type ToastContextType = {
-  showToast: (text: string, mode: string) => {};
+  showToast: (text: string, mode: string) => void;
 };

frontend/types/user.ts

@@ -1,3 +1,4 @@
+import { LocaleCodeType } from './locale';
 import { ToastMessages } from './toast';
 
 export type UserType = {
@@ -10,8 +11,8 @@ export type UserType = {
 };
 
 export type TokenProps = {
-  toastMessages: ToastMessages;
+  toastMessages?: ToastMessages;
-  locale: string;
+  locale?: LocaleCodeType;
   children?: React.ReactNode;
 };
 
@@ -73,6 +74,8 @@ export type AdminMessages = {
   username: string;
   role: string;
   noUsersFound: string;
+  administrator: string;
+  user: string;
 };
 
 export type AccountDropDownMessages = {

frontend/utils/TokenProvider.tsx

@@ -136,10 +136,14 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
     const ret = tokenCheckSignInPage(token, pathname);
     if (!ret.ok) {
       if (ret.reason === 'notoken') {
+        if (toastMessages) {
           toastContext.showToast(toastMessages.needSignedIn, 'error');
+        }
       } else if (ret.reason === 'expired') {
+        if (toastMessages) {
           toastContext.showToast(toastMessages.sessionExpired, 'error');
         }
+      }
 
       router.push(ret.redirectPath, { locale: locale });
     }