The great refactoring

This massive commit brings the following improvements:
- Completely rewrote the redux store, using async thunks and storing all data in the global store.
- Converted many screens, components and utility files to TypeScript.
- Changed app routing structure. Using Context API to store global Device instance.
- Added a fancy spinner to splash screen.

Prepare for another, smaller refactoring, now that open-polito-api v1.1.0 just released.

App.js

@@ -13,6 +13,8 @@ import 'moment/locale/it';
 
 import store from './src/store/store';
 import moment from 'moment';
+import {Device} from 'open-polito-api';
+import DeviceProvider from './src/context/Device';
 
 let lng = '';
 if (RNLocalize.getLocales()[0].languageCode === 'it') {
@@ -34,6 +36,9 @@ i18n.use(initReactI18next).init({
 
 moment.locale(lng);
 
+// Device instance to pass to Context API for global use
+const defaultDevice = new Device('', 10000, () => {});
+
 export default function App() {
   useEffect(() => {
     RNLocalize.addEventListener('change', setNewLocale);
@@ -55,7 +60,9 @@ export default function App() {
   return (
     <Suspense fallback="Loading...">
       <Provider store={store}>
-        <Router />
+        <DeviceProvider device={defaultDevice}>
+          <Router />
+        </DeviceProvider>
         <FlashMessage position="top" />
       </Provider>
     </Suspense>

package.json

@@ -23,15 +23,15 @@
     "html-entities": "^2.3.2",
     "i18next": "^21.4.2",
     "moment": "^2.29.1",
-    "open-polito-api": "^1.0.21",
+    "open-polito-api": "^1.0.22",
     "react": "17.0.2",
     "react-i18next": "^11.14.2",
     "react-native": "0.66.2",
     "react-native-config": "^1.4.5",
     "react-native-flash-message": "^0.2.0",
     "react-native-fs": "^2.18.0",
     "react-native-gesture-handler": "^1.10.3",
-    "react-native-get-random-values": "^1.7.0",
+    "react-native-get-random-values": "^1.7.2",
     "react-native-keychain": "^8.0.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^2.1.5",
@@ -60,6 +60,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.34",
     "@types/react-native": "^0.66.4",
+    "@types/react-native-vector-icons": "^6.4.10",
     "@types/react-test-renderer": "^17.0.1",
     "@types/uuid": "^8.3.4",
     "babel-jest": "^27.4.6",
@@ -70,4 +71,4 @@
     "ts-jest": "^27.1.3",
     "typescript": "^4.4.4"
   }
-}
+}

src/colors.js → src/colors.ts

@@ -1,3 +1,5 @@
+export type Color = string;
+
 const colors = {
   gradient1: '#0029FF',
   gradient2: '#0010A4',

src/components/CourseOverview.js → src/components/CourseOverview.tsx

@@ -1,7 +1,10 @@
-import React, {useEffect, useState} from 'react';
+import React, {FC, useContext, useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {ScrollView, View} from 'react-native';
 import {useSelector} from 'react-redux';
+import {DeviceContext} from '../context/Device';
+import {CourseData} from '../store/coursesSlice';
+import {RootState} from '../store/store';
 import styles from '../styles';
 import {getRecentCourseMaterial} from '../utils/material';
 import AlertWidget from './AlertWidget';
@@ -10,32 +13,40 @@ import CourseVideos from './CourseVideos';
 import LiveWidget from './LiveWidget';
 import MaterialWidget from './MaterialWidget';
 import TextWidget from './TextWidget';
+import {Cartella, File} from 'open-polito-api/corso';
 
-export default function CourseOverview({courseData, changeTab}) {
+const CourseOverview: FC<{courseData: CourseData; changeTab: Function}> = ({
+  courseData,
+  changeTab,
+}) => {
   const {t} = useTranslation();
 
+  const deviceContext = useContext(DeviceContext);
+
   const [offsetY, setOffsetY] = useState(0);
 
-  const materialTree = useSelector(state => state.material.material);
+  const materialTree = useSelector<RootState, (File | Cartella)[] | undefined>(
+    state =>
+      state.courses.courses.find(
+        course =>
+          courseData.code + courseData.name == course.code + course.name,
+      )?.material,
+  );
 
   const [recentMaterialLength, setRecentMaterialLength] = useState(3);
 
   // Set length of recent material once tree is loaded
   useEffect(() => {
     materialTree &&
-      setRecentMaterialLength(
-        getRecentCourseMaterial(
-          materialTree[courseData.codice + courseData.nome],
-        ).length,
-      );
+      setRecentMaterialLength(getRecentCourseMaterial(materialTree).length);
   }, [materialTree]);
 
   const [shouldAlignHeights, setShouldAlignHeights] = useState(false);
 
   // Once recent material length is computed, set whether to align widget heights
   useEffect(() => {
     setShouldAlignHeights(
-      courseData.avvisi.slice(0, 3).length == recentMaterialLength,
+      (courseData.alerts?.slice(0, 3).length || 0) == recentMaterialLength,
     );
   }, [recentMaterialLength]);
 
@@ -48,14 +59,14 @@ export default function CourseOverview({courseData, changeTab}) {
         ...styles.withHorizontalPadding,
         paddingBottom: offsetY == 0 ? 32 : 16,
       }}>
-      {courseData.live_lessons.map(liveClass => (
+      {courseData.liveClasses?.map(liveClass => (
         <LiveWidget
-          key={liveClass.meeting_id}
+          key={liveClass.meetingID}
           liveClass={liveClass}
-          courseName={courseData.nome}
-          device={courseData.device}
+          courseName={courseData.name}
+          device={deviceContext.device}
         />
-      ))}
+      )) || null}
       <View
         style={{
           flexDirection: 'row',
@@ -64,25 +75,27 @@ export default function CourseOverview({courseData, changeTab}) {
         }}>
         <MaterialWidget
           fullHeight={shouldAlignHeights}
-          courseCode={courseData.codice + courseData.nome}
+          courseID={courseData.code + courseData.name}
           action={() => {
             changeTab('material');
           }}
         />
         <AlertWidget
           fullHeight={shouldAlignHeights}
-          alerts={courseData.avvisi.slice(0, 3)}
+          alerts={courseData.alerts?.slice(0, 3) || []}
           action={() => {
             changeTab('alerts');
           }}
         />
       </View>
       <TextWidget icon="information-outline" name={t('courseInfo')} expandable>
-        <CourseInfo data={courseData.info} />
+        <CourseInfo data={courseData.info || []} />
       </TextWidget>
       {/* <TextWidget name={t('oldVideos')} expandable>
         <CourseVideos videos={courseData.videolezioni} />
       </TextWidget> */}
     </ScrollView>
   );
-}
+};
+
+export default CourseOverview;