Merge pull request #102 from MathisBurger/feature/translations

Translations

Author: MathisBurger

web/app/dashboard/page.tsx

@@ -2,22 +2,22 @@
 import useCurrentUser from "@/hooks/useCurrentUser";
 import {Container, Title, Text, Card, Grid, Group, Flex} from "@mantine/core";
 import {IconTrophyFilled} from "@tabler/icons-react";
+import {useTranslation} from "react-i18next";
 
 const DashboardPage = () => {
   const { user } = useCurrentUser();
+  const {t} = useTranslation('dashboard');
 
   return (
     <Container fluid>
-      <Title>Welcome back, {user?.username}!</Title>
+      <Title>{t('welcome-back')} {user?.username}!</Title>
         <Card
             shadow="sm"
             padding="xl"
             mt={20}
         >
             <Text mt="xs" c="dimmed" size="sm">
-                Hey, its us again. Please be aware of that this software is totally free to use for you. We do not store
-                any personal data except from your username and password. Nevertheless, we have to pay our fees, for domains
-                and server hosting. So if you want, feel free to support us, because developing this application takes a lot of time.
+                {t('us-again-text')}
             </Text>
         </Card>
         <Grid>
@@ -30,9 +30,8 @@ const DashboardPage = () => {
                     <Group justify="space-between">
                         <IconTrophyFilled color="#bfba40" size={100} />
                         <Flex direction="column">
-                            <Title order={5}>Oleggtro: contributor of year!</Title>
-                            <Text>Throughout the year, Oleggtro has gone above and beyond, consistently sharing insights, knowledge, and support with our community. His dedication and contributions have made a significant impact, enriching our platform and setting a high standard for collaboration.
-                                Thank you, Oleggtro, for your hard work, passion, and unwavering commitment. We are incredibly grateful to have you as part of our team! Here’s to many more achievements together.</Text>
+                            <Title order={5}>{t('ole-title')}</Title>
+                            <Text>{t('ole-text')}</Text>
                         </Flex>
                     </Group>
                 </Card>
@@ -43,14 +42,15 @@ const DashboardPage = () => {
                     padding="xl"
                     mt={20}
                 >
-                    <Title order={2}>Release v0.1.5</Title>
+                    <Title order={2}>Release v0.2.0</Title>
                     <Text>
                         We had some groundbreaking changes within our app for the current release:<br />
-                        - Comments on solutions by the tutor <br/>
-                        - Stage2 spotlight search <br/>
-                        - Bug reporting feature <br/>
-                        - Assignment wishes within the group <br/>
-                        - Assignments without due date
+                        - German translation <br/>
+                        - Login attempt limit <br/>
+                        - Some minor bug fixes <br/>
+                        - Pagination <br/>
+                        - Code View tabs <br/>
+                        - Some administrative & performance updates
                     </Text>
                 </Card>
             </Grid.Col>

web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx

@@ -19,6 +19,7 @@ import AssignmentCompletedByTab from "@/components/assignments/AssignmentComplet
 import CreateOrUpdateQuestionsModal from "@/components/assignments/CreateOrUpdateQuestionsModal";
 import QuestionAnswersDisplay from "@/components/solution/questions/QuestionAnswersDisplay";
 import { useSpotlightStage2 } from "@/hooks/spotlight/stage2";
+import {useTranslation} from "react-i18next";
 
 const AssignmentDetailsPage = ({
   params,
@@ -36,6 +37,7 @@ const AssignmentDetailsPage = ({
     () => api.getAssignmentForGroup(groupId, assignmentId),
     [assignmentId, groupId],
   );
+  const {t} = useTranslation(['common', 'assignment']);
 
   const {addAssignment} = useSpotlightStage2();
 
@@ -48,7 +50,7 @@ const AssignmentDetailsPage = ({
   if (isNaN(groupId) || isNaN(assignmentId)) {
     return (
       <Container fluid>
-        <Title>Invalid Group ID</Title>
+        <Title>{t('invalid-group-id')}</Title>
       </Container>
     );
   }
@@ -70,33 +72,33 @@ const AssignmentDetailsPage = ({
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
           assignment.language !== AssignmentLanguage.QuestionBased && (
             <Button onClick={() => setFileStructureModalOpen(true)}>
-              Code tests
+              {t('assignment:code-tests')}
             </Button>
           )}
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
           assignment.language === AssignmentLanguage.QuestionBased && (
             <Button onClick={() => setQuestionsModalOpen(true)}>
-              Questions
+              {t('assignment:questions')}
             </Button>
           )}
       </Group>
       <Tabs defaultValue="task">
         <Tabs.List>
-          <Tabs.Tab value="task">Task</Tabs.Tab>
+          <Tabs.Tab value="task">{t('assignment:task')}</Tabs.Tab>
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
             assignment.file_structure !== null &&
             assignment.language !== AssignmentLanguage.QuestionBased && (
-              <Tabs.Tab value="codeTests">Code Tests</Tabs.Tab>
+              <Tabs.Tab value="codeTests">{t('assignment:code-tests')}</Tabs.Tab>
             )}
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
             assignment.question_catalogue !== null &&
             assignment.language === AssignmentLanguage.QuestionBased && (
-              <Tabs.Tab value="questions">Questions</Tabs.Tab>
+              <Tabs.Tab value="questions">{t('assignment:questions')}</Tabs.Tab>
             )}
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) && (
             <>
-              <Tabs.Tab value="solutions">Solutions</Tabs.Tab>
-              <Tabs.Tab value="completedBy">Completed by</Tabs.Tab>
+              <Tabs.Tab value="solutions">{t('assignment:solutions')}</Tabs.Tab>
+              <Tabs.Tab value="completedBy">{t('assignment:completed-by')}</Tabs.Tab>
             </>
           )}
         </Tabs.List>

web/app/groups/[groupId]/client.tsx

@@ -17,16 +17,20 @@ import GroupAssignmentsTab from "@/components/assignments/GroupAssignmentsTab";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { isGranted } from "@/service/auth";
 import GroupAssignmentWishesTab from "@/components/group/GroupAssignmentWishesTab";
+import {useTranslation} from "react-i18next";
 
 const MembersComponent: React.FC<{ members: TaskyUser[] }> = ({ members }) => {
+
+  const {t} = useTranslation('common');
+
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "username",
-      label: "Username",
+      label: t('cols.username'),
     },
   ];
 
@@ -43,22 +47,23 @@ export const JoinRequestsComponent: React.FC<{
     () => api.getGroupJoinRequests(group?.id ?? -1, page),
     [group?.id, page],
   );
+  const {t} = useTranslation('common');
 
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "username",
-      label: "Username",
+      label: t('cols.username'),
       getter: (row) => row.requestor.username,
     },
   ];
 
   const actions: EntityListRowAction[] = [
     {
-      name: "Approve",
+      name: t('actions.approve'),
       color: "green",
       onClick: (row) =>
         api.approveGroupJoinRequest(row.group_id, row.id).then(() => {
@@ -68,7 +73,7 @@ export const JoinRequestsComponent: React.FC<{
       auth: [UserRoles.Tutor, UserRoles.Admin],
     },
     {
-      name: "Reject",
+      name: t('actions.reject'),
       color: "red",
       onClick: (row) =>
         api.rejectGroupJoinRequest(row.group_id, row.id).then(() => {
@@ -96,13 +101,14 @@ export const TabsComponent: React.FC<{
   refetch: () => void;
 }> = ({ group, refetch }) => {
   const { user } = useCurrentUser();
+  const {t} = useTranslation('group');
 
   return (
     <Tabs defaultValue="assignments" style={{ marginTop: "2em" }}>
       <Tabs.List>
-        <Tabs.Tab value="assignments">Assignments</Tabs.Tab>
-        <Tabs.Tab value="members">Members</Tabs.Tab>
-        <Tabs.Tab value="assignmentWishes">Assignment Wishes</Tabs.Tab>
+        <Tabs.Tab value="assignments">{t('tabs.assignments')}</Tabs.Tab>
+        <Tabs.Tab value="members">{t('tabs.members')}</Tabs.Tab>
+        <Tabs.Tab value="assignmentWishes">{t('tabs.assignment-wishes')}</Tabs.Tab>
         {isGranted(user, [UserRoles.Admin, UserRoles.Tutor]) && (
           <Tabs.Tab
             value="joinRequests"
@@ -112,7 +118,7 @@ export const TabsComponent: React.FC<{
               ) : null
             }
           >
-            Join Requests
+            {t('tabs.join-requests')}
           </Tabs.Tab>
         )}
       </Tabs.List>

web/app/groups/[groupId]/page.tsx

@@ -7,12 +7,14 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import CentralLoading from "@/components/CentralLoading";
 import {useSpotlightStage2} from "@/hooks/spotlight/stage2";
 import {useEffect} from "react";
+import {useTranslation} from "react-i18next";
 
 const GroupDetailsPage = ({ params }: { params: { groupId: string } }) => {
   const id = parseInt(`${params.groupId}`, 10);
   const api = useApiServiceClient();
   const [group, refetch] = useClientQuery<GroupType>(() => api.getGroup(id));
   const {addGroup} = useSpotlightStage2();
+  const {t} = useTranslation('common');
 
   useEffect(() => {
     if (group) {
@@ -23,7 +25,7 @@ const GroupDetailsPage = ({ params }: { params: { groupId: string } }) => {
   if (isNaN(id)) {
     return (
       <Container fluid>
-        <Title>Invalid Group ID</Title>
+        <Title>{t('invalid-group-id')}</Title>
       </Container>
     );
   }

web/app/groups/displayComponent.tsx

@@ -10,6 +10,7 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import { notifications } from "@mantine/notifications";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { isGranted } from "@/service/auth";
+import {useTranslation} from "react-i18next";
 
 interface DisplayComponentProps {
   groups: MinifiedGroup[];
@@ -23,22 +24,23 @@ const GroupsDisplayComponent = ({
   refetch,
 }: DisplayComponentProps) => {
   const router = useRouter();
+  const {t} = useTranslation(['common', 'group']);
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "title",
-      label: "Title",
+      label: t('group:cols.title'),
     },
     {
       field: "member_count",
-      label: "Members Count",
+      label: t('group:cols.members-count'),
     },
     {
       field: "tutor",
-      label: "Tutor",
+      label: t('group:cols.tutor'),
       getter: (row) => row.tutor.username,
     },
   ];
@@ -48,7 +50,7 @@ const GroupsDisplayComponent = ({
   const actions: EntityListRowAction[] = [
     {
       color: "blue",
-      name: "View",
+      name: t('actions.view'),
       onClick: (row) => router.push(`/groups/${row.id}`),
       auth: [UserRoles.Admin, UserRoles.Tutor, UserRoles.Student],
       authFunc: (row) =>
@@ -58,12 +60,12 @@ const GroupsDisplayComponent = ({
     },
     {
       color: "blue",
-      name: "Request Join",
+      name: t('actions.request-join'),
       onClick: (row) =>
         api.createGroupJoinRequest(row.id).then(() => {
           notifications.show({
-            title: "Join Request created",
-            message: "Created join request on group " + row.title,
+            title: t('messages.join-request-created-title'),
+            message: t('messages.join-request-created-text') + row.title,
           });
           if (refetch) refetch();
         }),

web/app/groups/page.tsx

@@ -5,17 +5,19 @@ import GroupsDisplayComponent from "@/app/groups/displayComponent";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import useClientQuery from "@/hooks/useClientQuery";
 import {useState} from "react";
+import {useTranslation} from "react-i18next";
 
 const GroupsPage = () => {
   const api = useApiServiceClient();
   const [page, setPage] = useState(1);
   const [groups, refetch] = useClientQuery<GroupsResponse>(() =>
     api.getGroups(page),
   [page]);
+  const {t} = useTranslation('group');
 
   return (
     <Container fluid>
-      <Title>Groups</Title>
+      <Title>{t('groups')}</Title>
       <GroupsDisplayComponent
         groups={groups?.groups ?? []}
         page="groups"

web/app/layout.tsx

@@ -21,13 +21,16 @@ import Footer from "@/components/Footer";
 import { publicRoutes } from "@/static/routes";
 import Stage2SpotlightContextWrapper from "@/components/spotlight/Stage2SpotlightContextWrapper";
 import {Stage2Type} from "@/hooks/spotlight/stage2";
+import i18n from "../i18n"
+import CentralLoading from "@/components/CentralLoading";
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
   const pathname = usePathname();
   const showNavbar = useMemo(
     () => publicRoutes.indexOf(pathname) === -1,
@@ -51,6 +54,8 @@ export default function RootLayout({
         console.error(e);
       }
     }
+    i18n.init();
+    setLoading(false);
   }, []);
 
   return (
@@ -67,25 +72,29 @@ export default function RootLayout({
     <CurrentUserContext.Provider value={{ user, setUser }}>
           <MantineProvider theme={{}}>
             <DatesProvider settings={{ timezone: null }}>
-              <Stage2SpotlightContextWrapper>
-                <Notifications />
-                <AppShell
-                    header={{ height: 100 }}
-                    navbar={showNavbar ? { width: 250, breakpoint: "" } : undefined}
-                >
-                  <AppShell.Header>
-                    <Header />
-                  </AppShell.Header>
-                  {showNavbar && (
-                      <AppShell.Navbar>
-                        <Navbar />
-                      </AppShell.Navbar>
-                  )}
-                  <AppShell.Main mb={100}>{children}</AppShell.Main>
-                  <AppShell.Footer><Footer /></AppShell.Footer>
-                </AppShell>
-                <SpotlightWrapper />
-              </Stage2SpotlightContextWrapper>
+              {loading ? (
+                  <CentralLoading />
+              ) : (
+                  <Stage2SpotlightContextWrapper>
+                    <Notifications />
+                    <AppShell
+                        header={{ height: 100 }}
+                        navbar={showNavbar ? { width: 250, breakpoint: "" } : undefined}
+                    >
+                      <AppShell.Header>
+                        <Header />
+                      </AppShell.Header>
+                      {showNavbar && (
+                          <AppShell.Navbar>
+                            <Navbar />
+                          </AppShell.Navbar>
+                      )}
+                      <AppShell.Main mb={100}>{children}</AppShell.Main>
+                      <AppShell.Footer><Footer /></AppShell.Footer>
+                    </AppShell>
+                    <SpotlightWrapper />
+                  </Stage2SpotlightContextWrapper>
+              )}
             </DatesProvider>
           </MantineProvider>
         </CurrentUserContext.Provider>