Add support for new server news api

src/components/Home/FeedItem.js

@@ -8,14 +8,12 @@ import i18n from 'i18n-js';
 import ImageModal from 'react-native-image-modal';
 import {StackNavigationProp} from '@react-navigation/stack';
 import type {FeedItemType} from '../../screens/Home/HomeScreen';
-
+import NewsSourcesConstants from '../../constants/NewsSourcesConstants';
-const ICON_AMICALE = require('../../../assets/amicale.png');
+import type {NewsSourceType} from '../../constants/NewsSourcesConstants';
 
 type PropsType = {
   navigation: StackNavigationProp,
   item: FeedItemType,
-  title: string,
-  subtitle: string,
   height: number,
 };
 
@@ -23,24 +21,34 @@ type PropsType = {
  * Component used to display a feed item
  */
 class FeedItem extends React.Component<PropsType> {
+  /**
+   * Converts a dateString using Unix Timestamp to a formatted date
+   *
+   * @param dateString {string} The Unix Timestamp representation of a date
+   * @return {string} The formatted output date
+   */
+  static getFormattedDate(dateString: number): string {
+    const date = new Date(dateString * 1000);
+    return date.toLocaleString();
+  }
+
   shouldComponentUpdate(): boolean {
     return false;
   }
 
   onPress = () => {
-    const {props} = this;
+    const {item, navigation} = this.props;
-    props.navigation.navigate('feed-information', {
+    navigation.navigate('feed-information', {
-      data: props.item,
+      data: item,
-      date: props.subtitle,
+      date: FeedItem.getFormattedDate(item.time),
     });
   };
 
   render(): React.Node {
     const {props} = this;
     const {item} = props;
-    const hasImage =
+    const hasImage = item.image !== '' && item.image != null;
-      item.full_picture !== '' && item.full_picture !== undefined;
+    const pageSource: NewsSourceType = NewsSourcesConstants[item.page_id];
-
     const cardMargin = 10;
     const cardHeight = props.height - 2 * cardMargin;
     const imageSize = 250;
@@ -58,12 +66,12 @@ class FeedItem extends React.Component<PropsType> {
         <TouchableRipple style={{flex: 1}} onPress={this.onPress}>
           <View>
             <Card.Title
-              title={props.title}
+              title={pageSource.name}
-              subtitle={props.subtitle}
+              subtitle={FeedItem.getFormattedDate(item.time)}
               left={(): React.Node => (
                 <Image
                   size={48}
-                  source={ICON_AMICALE}
+                  source={pageSource.icon}
                   style={{
                     width: 48,
                     height: 48,
@@ -82,7 +90,7 @@ class FeedItem extends React.Component<PropsType> {
                     height: imageSize,
                   }}
                   source={{
-                    uri: item.full_picture,
+                    uri: item.image,
                   }}
                 />
               </View>

src/constants/NewsSourcesConstants.js

@@ -0,0 +1,20 @@
+// @flow
+
+import ICON_AMICALE from '../../assets/amicale.png';
+import ICON_CAMPUS from '../../assets/android.icon.png';
+
+export type NewsSourceType = {
+  icon: number,
+  name: string,
+};
+
+export default {
+  'amicale.deseleves': {
+    icon: ICON_AMICALE,
+    name: 'Amicale INSA Toulouse',
+  },
+  'campus.insat': {
+    icon: ICON_CAMPUS,
+    name: 'Application Campus',
+  },
+};

src/screens/Home/FeedItemScreen.js

@@ -47,7 +47,7 @@ class FeedItemScreen extends React.Component<PropsType> {
    * Opens the feed item out link in browser or compatible app
    */
   onOutLinkPress = () => {
-    Linking.openURL(this.displayData.permalink_url);
+    Linking.openURL(this.displayData.url);
   };
 
   /**
@@ -70,8 +70,7 @@ class FeedItemScreen extends React.Component<PropsType> {
 
   render(): React.Node {
     const hasImage =
-      this.displayData.full_picture !== '' &&
+      this.displayData.image !== '' && this.displayData.image != null;
-      this.displayData.full_picture != null;
     return (
       <CollapsibleScrollView style={{margin: 5}} hasTab>
         <Card.Title
@@ -95,7 +94,7 @@ class FeedItemScreen extends React.Component<PropsType> {
                 height: 250,
               }}
               source={{
-                uri: this.displayData.full_picture,
+                uri: this.displayData.image,
               }}
             />
           </View>

src/screens/Home/HomeScreen.js

@@ -30,7 +30,6 @@ import type {ServiceItemType} from '../../managers/ServicesManager';
 import {getDisplayEvent, getFutureEvents} from '../../utils/Home';
 // import DATA from "../dashboard_data.json";
 
-const NAME_AMICALE = 'Amicale INSA Toulouse';
 const DATA_URL =
   'https://etud.insa-toulouse.fr/~amicale_app/v2/dashboard/dashboard_data.json';
 const FEED_ITEM_HEIGHT = 500;
@@ -40,11 +39,14 @@ const SECTIONS_ID = ['dashboard', 'news_feed'];
 const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
 
 export type FeedItemType = {
-  full_picture: string,
-  message: string,
-  permalink_url: string,
-  created_time: number,
   id: string,
+  message: string,
+  url: string,
+  image: string | null,
+  video: string | null,
+  link: string | null,
+  time: number,
+  page_id: string,
 };
 
 export type EventType = {
@@ -68,10 +70,10 @@ export type FullDashboardType = {
   available_tutorials: number,
 };
 
+type RawNewsFeedType = {[key: string]: Array<FeedItemType>};
+
 type RawDashboardType = {
-  news_feed: {
+  news_feed: RawNewsFeedType,
-    data: Array<FeedItemType>,
-  },
   dashboard: FullDashboardType,
 };
 
@@ -89,6 +91,9 @@ type StateType = {
  * Class defining the app's home screen
  */
 class HomeScreen extends React.Component<PropsType, StateType> {
+  static sortFeedTime = (a: FeedItemType, b: FeedItemType): number =>
+    b.time - a.time;
+
   isLoggedIn: boolean | null;
 
   fabRef: {current: null | AnimatedFAB};
@@ -121,17 +126,6 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     props.navigation.addListener('state', this.handleNavigationParams);
   }
 
-  /**
-   * Converts a dateString using Unix Timestamp to a formatted date
-   *
-   * @param dateString {string} The Unix Timestamp representation of a date
-   * @return {string} The formatted output date
-   */
-  static getFormattedDate(dateString: number): string {
-    const date = new Date(dateString * 1000);
-    return date.toLocaleString();
-  }
-
   /**
    * Updates login state and navigation parameters on screen focus
    */
@@ -285,8 +279,6 @@ class HomeScreen extends React.Component<PropsType, StateType> {
       <FeedItem
         navigation={props.navigation}
         item={item}
-        title={NAME_AMICALE}
-        subtitle={HomeScreen.getFormattedDate(item.created_time)}
         height={FEED_ITEM_HEIGHT}
       />
     );
@@ -415,7 +407,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     // fetchedData = DATA;
     if (fetchedData != null) {
       if (fetchedData.news_feed != null)
-        this.currentNewFeed = fetchedData.news_feed.data;
+        this.currentNewFeed = this.generateNewsFeed(fetchedData.news_feed);
       if (fetchedData.dashboard != null)
         this.currentDashboard = fetchedData.dashboard;
     }
@@ -458,6 +450,16 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     });
   };
 
+  generateNewsFeed(rawFeed: RawNewsFeedType): Array<FeedItemType> {
+    const finalFeed = [];
+    Object.keys(rawFeed).forEach((key: string) => {
+      const category: Array<FeedItemType> | null = rawFeed[key];
+      if (category != null && category.length > 0) finalFeed.push(...category);
+    });
+    finalFeed.sort(HomeScreen.sortFeedTime);
+    return finalFeed;
+  }
+
   render(): React.Node {
     const {props, state} = this;
     return (