feat(courses): add external links in course info tab (#485)

* feat(link-course): create the section external links course in CourseInfoScreen.tsx

* feat(course-screen-info): add text, and change some controls when the status is loading, Ref #301

* feat(course-info): changed the layout of the links and the text , Ref #301

* fix(courses): fix translations and link indexes

* chore: update api spec

---------

Co-authored-by: FabrizioCostaMedich <fabrizio.costamedich@gmail.com>
Co-authored-by: Emanuele Coricciati <ema@MacBook-Air-di-Emanuele.local>
Co-authored-by: Cristina Ferrian <54667563+Bri74@users.noreply.github.com>

assets/translations/en.json

@@ -314,6 +314,9 @@
     "agendaSectionEmptyState": "This course has no entries in the agenda",
     "agendaSectionTitle": "This course in the agenda",
     "creditsLabel": "Credits",
+    "linkDefaultTitle": "Link to",
+    "linksSectionEmptyState": "There are no links related to the course",
+    "linksSectionTitle": "Useful links",
     "moreSectionTitle": "More",
     "staffSectionTitle": "Staff",
     "teacherLabel": "Teacher",

assets/translations/it.json

@@ -314,6 +314,9 @@
     "agendaSectionEmptyState": "Non ci sono eventi relativi a questo corso",
     "agendaSectionTitle": "Questo corso nell'agenda",
     "creditsLabel": "Crediti",
+    "linkDefaultTitle": "Collegamento a",
+    "linksSectionEmptyState": "Non ci sono link relativi al corso",
+    "linksSectionTitle": "Link utili",
     "moreSectionTitle": "Altro",
     "staffSectionTitle": "Docenti",
     "teacherLabel": "Docente",

package.json

@@ -28,7 +28,7 @@
     "@miblanchard/react-native-slider": "^2.2.0",
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
     "@orama/orama": "^2.0.0-beta.8",
-    "@polito/api-client": "^1.0.0-ALPHA.62",
+    "@polito/api-client": "^1.0.0-ALPHA.63",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-clipboard/clipboard": "^1.12.1",
     "@react-native-community/blur": "^4.3.0",

src/features/courses/screens/CourseInfoScreen.tsx

@@ -1,8 +1,15 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import {
+  Linking,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
 
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { Card } from '@lib/ui/components/Card';
 import { Grid } from '@lib/ui/components/Grid';
 import { Icon } from '@lib/ui/components/Icon';
@@ -18,6 +25,7 @@ import { SectionHeader } from '@lib/ui/components/SectionHeader';
 import { StatefulMenuView } from '@lib/ui/components/StatefulMenuView';
 import { Text } from '@lib/ui/components/Text';
 import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
+import { useTheme } from '@lib/ui/hooks/useTheme';
 import { Theme } from '@lib/ui/types/Theme';
 import { Person } from '@polito/api-client/models/Person';
 import { useNavigation } from '@react-navigation/native';
@@ -45,6 +53,7 @@ export const CourseInfoScreen = () => {
   const { t } = useTranslation();
   const courseId = useCourseContext();
   const styles = useStylesheet(createStyles);
+  const { fontSizes } = useTheme();
   const [staff, setStaff] = useState<StaffMember[]>([]);
   const { data: editions } = useGetCourseEditions(courseId);
   const courseQuery = useGetCourse(courseId);
@@ -90,7 +99,6 @@ export const CourseInfoScreen = () => {
       ) === undefined,
     [courseId, queryClient],
   );
-
   const isGuideDisabled = useOfflineDisabled(isGuideDataMissing);
 
   return (
@@ -205,6 +213,30 @@ export const CourseInfoScreen = () => {
             ))}
           </OverviewList>
         </Section>
+
+        <Section>
+          <SectionHeader title={t('courseInfoTab.linksSectionTitle')} />
+          <OverviewList
+            indented
+            loading={!courseQuery?.data}
+            emptyStateText={
+              isOffline && courseQuery.isLoading
+                ? t('common.cacheMiss')
+                : t('courseInfoTab.linksSectionEmptyState')
+            }
+          >
+            {courseQuery.data?.links.map(link => (
+              <ListItem
+                key={link.url}
+                leadingItem={<Icon icon={faLink} size={fontSizes.xl} />}
+                title={link.description ?? t('courseInfoTab.linkDefaultTitle')}
+                subtitle={link.url}
+                onPress={() => Linking.openURL(link.url)}
+              />
+            ))}
+          </OverviewList>
+        </Section>
+
         <Section>
           <SectionHeader title={t('courseInfoTab.moreSectionTitle')} />
           <OverviewList>