corona-school · josefacastillo · Mar 1, 2025 · Mar 1, 2025 · Jonasdoubleyou · Mar 3, 2025
diff --git a/src/lang/ar.json b/src/lang/ar.json
@@ -2396,6 +2396,9 @@
     "since": "منذ",
     "till": "حتى",
     "logout": "تسجيل الخروج",
+    "sortBy": "Sortieren nach",
+    "updatedAt": "Zuletzt aktualisiert",
+    "lectureDate": "Kurstermin",
     "forStudents": {
         "tabs": {
             "handbook": "يدوي",

diff --git a/src/lang/de.json b/src/lang/de.json
@@ -255,6 +255,9 @@
     "grade": "Klasse",
     "since": "seit",
     "till": "bis",
+    "sortBy": "Sortieren nach",
+    "updatedAt": "Zuletzt aktualisiert",
+    "lectureDate": "Kurstermin",
     "lernfair": {
         "languages": {
             "albanisch": "Albanisch",

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -2400,6 +2400,9 @@
     "since": "since",
     "till": "to",
     "logout": "Log out",
+    "sortBy": "Sort by",
+    "updatedAt": "Last Updated",
+    "lectureDate": "Lecture Date",
     "forStudents": {
         "tabs": {
             "handbook": "Manual",

diff --git a/src/lang/ru.json b/src/lang/ru.json
@@ -2400,6 +2400,9 @@
     "since": "с",
     "till": "до",
     "logout": "Выход из системы",
+    "sortBy": "Sortieren nach",
+    "updatedAt": "Zuletzt aktualisiert",
+    "lectureDate": "Kurstermin",
     "forStudents": {
         "tabs": {
             "handbook": "Руководство",

diff --git a/src/lang/tr.json b/src/lang/tr.json
@@ -2400,6 +2400,9 @@
     "since": "beri",
     "till": "kadar",
     "logout": "Oturumu kapat",
+    "sortBy": "Sortieren nach",
+    "updatedAt": "Zuletzt aktualisiert",
+    "lectureDate": "Kurstermin",
     "forStudents": {
         "tabs": {
             "handbook": "Manuel",

diff --git a/src/lang/uk.json b/src/lang/uk.json
@@ -2400,6 +2400,9 @@
     "since": "з тих пір, як",
     "till": "до тих пір, поки",
     "logout": "Вийдіть з системи",
+    "sortBy": "Sortieren nach",
+    "updatedAt": "Zuletzt aktualisiert",
+    "lectureDate": "Kurstermin",
     "forStudents": {
         "tabs": {
             "handbook": "Посібник",

diff --git a/src/pages/student/CourseGroups.tsx b/src/pages/student/CourseGroups.tsx
@@ -6,10 +6,11 @@ import { getTrafficStatus, getTrafficStatusText } from '../../Utility';
 import AlertMessage from '../../widgets/AlertMessage';
 import AppointmentCard from '../../widgets/AppointmentCard';
 import HSection from '../../widgets/HSection';
+import { useState } from 'react';
 
 type SubsetSubcourse = Pick<
     Subcourse,
-    'id' | 'course' | 'nextLecture' | 'lectures' | 'maxParticipants' | 'participantsCount' | 'minGrade' | 'maxGrade' | 'isParticipant'
+    'id' | 'course' | 'nextLecture' | 'lectures' | 'maxParticipants' | 'participantsCount' | 'minGrade' | 'maxGrade' | 'isParticipant' | 'updatedAt'
 >;
 
 type GroupProps = {
@@ -21,6 +22,22 @@ type GroupProps = {
 const CourseGroups: React.FC<GroupProps> = ({ currentCourses, draftCourses, pastCourses }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const [sortedCourses, setSortedCourses] = useState({
+        current: currentCourses,
+        draft: draftCourses,
+        past: pastCourses,
+    });
+
+    function sortBy(section: 'current' | 'draft' | 'past' | undefined, value: 'updatedAt' | 'start') {
+        if (!section) return;
+        setSortedCourses((prev) => ({
+            ...prev,
+            [section]: [...prev[section]!].sort((a, b) => {
+                const getDate = (course: SubsetSubcourse) => new Date(value === 'updatedAt' ? course.updatedAt : course.nextLecture?.start ?? 0).getTime();
+                return value === 'updatedAt' ? getDate(b) - getDate(a) : getDate(a) - getDate(b);
+            }),
+        }));
+    }
 
     const renderSubcourse = (subcourse: SubsetSubcourse, index: number, showDate: boolean = true, readonly: boolean = false, inPast: boolean = false) => (
         <div>
@@ -51,25 +68,25 @@ const CourseGroups: React.FC<GroupProps> = ({ currentCourses, draftCourses, past
     return (
         <Stack space={5}>
             <Box>
-                <HSection scrollable title={t('matching.group.helper.course.tabs.tab1.current')}>
-                    {((currentCourses?.length ?? 0) > 0 &&
-                        currentCourses?.map((subcourse: any, index: number) => {
+                <HSection scrollable title={t('matching.group.helper.course.tabs.tab1.current')} showSort section={'current'} sortBy={sortBy}>
+                    {((sortedCourses.current?.length ?? 0) > 0 &&
+                        sortedCourses.current?.map((subcourse: any, index: number) => {
                             return renderSubcourse(subcourse, index);
                         })) || <AlertMessage content={t('course.empty.nocourses')} />}
                 </HSection>
             </Box>
             <Box>
-                <HSection scrollable title={t('matching.group.helper.course.tabs.tab1.draft')}>
-                    {((draftCourses?.length ?? 0) > 0 &&
-                        draftCourses?.map((subcourse: any, index: number) => {
+                <HSection scrollable title={t('matching.group.helper.course.tabs.tab1.draft')} showSort section={'draft'} sortBy={sortBy}>
+                    {((sortedCourses.draft?.length ?? 0) > 0 &&
+                        sortedCourses.draft?.map((subcourse: any, index: number) => {
                             return renderSubcourse(subcourse, index);
                         })) || <AlertMessage content={t('course.empty.noremissionordraft')} />}
                 </HSection>
             </Box>
             <Box>
-                <HSection scrollable title={t('matching.group.helper.course.tabs.tab1.past')}>
-                    {((pastCourses?.length ?? 0) > 0 &&
-                        pastCourses?.map((subcourse: any, index: number) => {
+                <HSection scrollable title={t('matching.group.helper.course.tabs.tab1.past')} section={'past'} sortBy={sortBy}>
+                    {((sortedCourses.past?.length ?? 0) > 0 &&
+                        sortedCourses.past?.map((subcourse: any, index: number) => {
                             return renderSubcourse(subcourse, index, true, false, true);
                         })) || <AlertMessage content={t('course.empty.nopastcourses')} />}
                 </HSection>

diff --git a/src/pages/student/StudentGroup.tsx b/src/pages/student/StudentGroup.tsx
@@ -54,6 +54,7 @@ const StudentGroup: React.FC = () => {
                                 start
                                 duration
                             }
+                            updatedAt
                             course {
                                 courseState
                                 name

diff --git a/src/widgets/HSection.tsx b/src/widgets/HSection.tsx
@@ -1,13 +1,16 @@
-import { Box, Heading, Link, Row, Stack, useBreakpointValue, useTheme } from 'native-base';
+import { Box, Heading, Link, Row, Select, Stack, useBreakpointValue, useTheme } from 'native-base';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
     title?: string;
+    section?: 'draft' | 'current' | 'past';
     referenceTitle?: string;
     showAll?: boolean;
+    showSort?: boolean;
     children: ReactNode | ReactNode[];
     onShowAll?: () => any;
+    sortBy?: (section: 'draft' | 'current' | 'past' | undefined, value: 'updatedAt' | 'start') => any;
     smallTitle?: boolean;
     isDark?: boolean;
     scrollable?: boolean;
@@ -18,12 +21,15 @@ type Props = {
 
 const HSection: React.FC<Props> = ({
     title,
+    section,
     referenceTitle,
     isDark = false,
     showAll = false,
+    showSort = false,
     scrollable = true,
     children,
     onShowAll,
+    sortBy,
     marginBottom,
     wrap,
     smallTitle,
@@ -45,11 +51,21 @@ const HSection: React.FC<Props> = ({
                 paddingY={space['0.5']}
             >
                 {title && (
-                    <Heading color={isDark ? 'lightText' : 'primary.900'} flex="1" fontSize={smallTitle ? fontSizes['md'] : fontSizes['xl']}>
+                    <Heading color={isDark ? 'lightText' : 'primary.900'} flex="8" fontSize={smallTitle ? fontSizes['md'] : fontSizes['xl']}>
                         {title}
                     </Heading>
                 )}
-                {showAll && <Link onPress={onShowAll}>{referenceTitle ? referenceTitle : t('all')}</Link>}
+                {showAll && (
+                    <Link onPress={onShowAll} flex="1">
+                        {referenceTitle ? referenceTitle : t('all')}
+                    </Link>
+                )}
+                {showSort && (
+                    <Select placeholder={t('sortBy')} flex="2" onValueChange={(value) => sortBy && sortBy(section, value as 'updatedAt' | 'start')}>
+                        <Select.Item label={t('updatedAt')} value="updatedAt" />
+                        <Select.Item label={t('lectureDate')} value="start" />
+                    </Select>
+                )}
             </Stack>
             <Row
                 flexWrap={wrap ? 'wrap' : 'nowrap'}