Implement simple share function of detail screens

donni106 · donni106 · commit 83e814596b7b · 2019-06-03T17:20:22.000+02:00
- https://docs.expo.io/versions/v32.0.0/react-native/share - created share helper function - added params for shareContent to navigation params, that will be used for share dialog opened from DetailScreen - created `shareMessage()` helper to build the message to share - refactored `getQuery` to `/queries/index.js` to use everywhere from one place - added missing line trimming of HtmlView in DetailScreen
diff --git a/src/helpers/index.js b/src/helpers/index.js
@@ -1,3 +1,4 @@
 export * from './htmlViewHelper';
 export * from './linkHelper';
 export * from './momentHelper';
+export * from './shareHelper';
diff --git a/src/helpers/shareHelper.js b/src/helpers/shareHelper.js
@@ -0,0 +1,52 @@
+import { Share } from 'react-native';
+
+import appJson from '../../app.json';
+import { momentFormat } from './momentHelper';
+
+// https://facebook.github.io/react-native/docs/share
+export const openShare = async ({ message, title, url }) => {
+  try {
+    const result = await Share.share(
+      {
+        message,
+        title,
+        url // iOS only
+      },
+      {
+        dialogTitle: 'Teilen', // Android only
+        subject: title // iOS only - a subject to share via email
+      }
+    );
+
+    if (result.action === Share.sharedAction) {
+      if (result.activityType) {
+        // shared with activity type of result.activityType
+      } else {
+        // shared
+      }
+    } else if (result.action === Share.dismissedAction) {
+      // dismissed
+    }
+  } catch (error) {
+    alert(error.message);
+  }
+};
+
+export const shareMessage = (data, query) => {
+  const buildMessage = (query) => {
+    switch (query) {
+    case 'eventRecord':
+      return `${momentFormat(data.createdAt)} | ${data.dataProvider && data.dataProvider.name}: ${
+        data.title
+      }`;
+    case 'newsItem':
+      return `${momentFormat(data.publishedAt)} | ${data.dataProvider &&
+          data.dataProvider.name}: ${data.contentBlocks[0].title}`;
+    case 'pointsOfInterest':
+      return data.name;
+    }
+  };
+
+  // TODO: real deep link instead of test
+  return `[${appJson.expo.name}] ${buildMessage(query)}\n\n${appJson.expo.slug}://test`;
+};
diff --git a/src/queries/index.js b/src/queries/index.js
@@ -1,3 +1,32 @@
+import {
+  GET_EVENT_RECORD,
+  GET_EVENT_RECORDS,
+  GET_NEWS_ITEM,
+  GET_NEWS_ITEMS,
+  GET_POINT_OF_INTEREST,
+  GET_POINTS_OF_INTEREST,
+  GET_PUBLIC_JSON_FILE
+} from '../queries';
+
+export const getQuery = (query) => {
+  switch (query) {
+  case 'eventRecord':
+    return GET_EVENT_RECORD;
+  case 'eventRecords':
+    return GET_EVENT_RECORDS;
+  case 'newsItems':
+    return GET_NEWS_ITEMS;
+  case 'newsItem':
+    return GET_NEWS_ITEM;
+  case 'pointOfInterest':
+    return GET_POINT_OF_INTEREST;
+  case 'pointsOfInterest':
+    return GET_POINTS_OF_INTEREST;
+  case 'publicJsonFile':
+    return GET_PUBLIC_JSON_FILE;
+  }
+};
+
 export * from './eventRecords';
 export * from './newsItems';
 export * from './pointsOfInterest';
diff --git a/src/screens/DetailScreen.js b/src/screens/DetailScreen.js
@@ -15,12 +15,14 @@ import {
   Wrapper,
   WrapperRow
 } from '../components';
-import { GET_EVENT_RECORD, GET_NEWS_ITEM, GET_POINT_OF_INTEREST } from '../queries';
+import { getQuery } from '../queries';
 import { arrowLeft, drawerMenu, share } from '../icons';
-import { momentFormat } from '../helpers';
+import { momentFormat, openShare, trimNewLines } from '../helpers';
 
 export class DetailScreen extends React.Component {
   static navigationOptions = ({ navigation }) => {
+    const shareContent = navigation.getParam('shareContent', '');
+
     return {
       headerLeft: (
         <View>
@@ -31,7 +33,7 @@ export class DetailScreen extends React.Component {
       ),
       headerRight: (
         <WrapperRow>
-          <TouchableOpacity onPress={() => alert('Share')}>
+          <TouchableOpacity onPress={() => shareContent && openShare(shareContent)}>
             <Icon icon={share(colors.lightestText)} style={styles.iconLeft} />
           </TouchableOpacity>
           <TouchableOpacity onPress={() => navigation.openDrawer()}>
@@ -49,17 +51,6 @@ export class DetailScreen extends React.Component {
 
     if (!query) return null;
 
-    const getQuery = (query) => {
-      switch (query) {
-      case 'eventRecord':
-        return GET_EVENT_RECORD;
-      case 'newsItem':
-        return GET_NEWS_ITEM;
-      case 'pointOfInterest':
-        return GET_POINT_OF_INTEREST;
-      }
-    };
-
     /* eslint-disable complexity */
     /* TODO: refactoring to single components */
     const getPage = (query, data) => {
@@ -135,8 +126,8 @@ export class DetailScreen extends React.Component {
                 {!!subtitle && <ListSubtitle>{subtitle}</ListSubtitle>}
                 {/*TODO: map multiple contentBlocks */}
                 {!!title && <ListTitle noSubtitle>{title}</ListTitle>}
-                {!!body && <HtmlView html={body} />}
-                {!!link && <Link url={link} title={'Weiterlesen'} />}
+                {!!body && <HtmlView html={trimNewLines(body)} />}
+                {!!link && <Link url={link} title={'Im Browser öffnen'} />}
               </Wrapper>
             </ScrollView>
           );
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -5,13 +5,8 @@ import { Query } from 'react-apollo';
 
 import { device, normalize } from '../config';
 import { CardList, Image, TextList, Title, TitleContainer, TitleShadow } from '../components';
-import {
-  GET_EVENT_RECORDS,
-  GET_NEWS_ITEMS,
-  GET_POINTS_OF_INTEREST,
-  GET_PUBLIC_JSON_FILE
-} from '../queries';
-import { momentFormat } from '../helpers';
+import { getQuery } from '../queries';
+import { momentFormat, shareMessage } from '../helpers';
 
 export const HomeScreen = ({ navigation }) => (
   <ScrollView>
@@ -20,7 +15,7 @@ export const HomeScreen = ({ navigation }) => (
       <Title>{'Nachrichten'.toUpperCase()}</Title>
     </TitleContainer>
     {device.platform === 'ios' && <TitleShadow />}
-    <Query query={GET_NEWS_ITEMS} variables={{ limit: 3 }} fetchPolicy="cache-and-network">
+    <Query query={getQuery('newsItems')} variables={{ limit: 3 }} fetchPolicy="cache-and-network">
       {({ data, loading }) => {
         if (loading) {
           return (
@@ -43,7 +38,10 @@ export const HomeScreen = ({ navigation }) => (
               title: 'Nachricht',
               query: 'newsItem',
               queryVariables: { id: `${newsItem.id}` },
-              rootRouteName: 'NewsItems'
+              rootRouteName: 'NewsItems',
+              shareContent: {
+                message: shareMessage(newsItem, 'newsItem')
+              }
             },
             __typename: newsItem.__typename
           }));
@@ -72,7 +70,11 @@ export const HomeScreen = ({ navigation }) => (
       <Title>{'Orte & Routen'.toUpperCase()}</Title>
     </TitleContainer>
     {device.platform === 'ios' && <TitleShadow />}
-    <Query query={GET_POINTS_OF_INTEREST} variables={{ limit: 3 }} fetchPolicy="cache-and-network">
+    <Query
+      query={getQuery('pointsOfInterest')}
+      variables={{ limit: 3 }}
+      fetchPolicy="cache-and-network"
+    >
       {({ data, loading }) => {
         if (loading) {
           return (
@@ -95,12 +97,15 @@ export const HomeScreen = ({ navigation }) => (
               title: 'Ort',
               query: 'pointOfInterest',
               queryVariables: { id: `${pointOfInterest.id}` },
-              rootRouteName: 'PointsOfInterest'
+              rootRouteName: 'PointsOfInterest',
+              shareContent: {
+                message: shareMessage(pointOfInterest, 'pointOfInterest')
+              }
             },
             __typename: pointOfInterest.__typename
           }));
 
-        if (!pointsOfInterest.length) return null;
+        if (!pointsOfInterest || !pointsOfInterest.length) return null;
 
         return (
           <View>
@@ -131,7 +136,11 @@ export const HomeScreen = ({ navigation }) => (
       <Title>{'Veranstaltungen'.toUpperCase()}</Title>
     </TitleContainer>
     {device.platform === 'ios' && <TitleShadow />}
-    <Query query={GET_EVENT_RECORDS} variables={{ limit: 3 }} fetchPolicy="cache-and-network">
+    <Query
+      query={getQuery('eventRecords')}
+      variables={{ limit: 3 }}
+      fetchPolicy="cache-and-network"
+    >
       {({ data, loading }) => {
         if (loading) {
           return (
@@ -154,7 +163,10 @@ export const HomeScreen = ({ navigation }) => (
               title: 'Veranstaltung',
               query: 'eventRecord',
               queryVariables: { id: `${eventRecord.id}` },
-              rootRouteName: 'EventRecords'
+              rootRouteName: 'EventRecords',
+              shareContent: {
+                message: shareMessage(eventRecord, 'eventRecord')
+              }
             },
             __typename: eventRecord.__typename
           }));
@@ -184,7 +196,7 @@ export const HomeScreen = ({ navigation }) => (
     </TitleContainer>
     {device.platform === 'ios' && <TitleShadow />}
     <Query
-      query={GET_PUBLIC_JSON_FILE}
+      query={getQuery('publicJsonFile')}
       variables={{ name: 'homeRoutes' }}
       fetchPolicy="cache-and-network"
     >
diff --git a/src/screens/IndexScreen.js b/src/screens/IndexScreen.js
@@ -5,9 +5,9 @@ import { Query } from 'react-apollo';
 
 import { colors, normalize } from '../config';
 import { CardList, Icon, TextList } from '../components';
-import { GET_EVENT_RECORDS, GET_NEWS_ITEMS, GET_POINTS_OF_INTEREST } from '../queries';
+import { getQuery } from '../queries';
 import { arrowLeft } from '../icons';
-import { momentFormat } from '../helpers';
+import { momentFormat, shareMessage } from '../helpers';
 
 export class IndexScreen extends React.Component {
   static navigationOptions = ({ navigation }) => {
@@ -29,17 +29,6 @@ export class IndexScreen extends React.Component {
 
     if (!query) return null;
 
-    const getQuery = (query) => {
-      switch (query) {
-      case 'eventRecords':
-        return GET_EVENT_RECORDS;
-      case 'newsItems':
-        return GET_NEWS_ITEMS;
-      case 'pointsOfInterest':
-        return GET_POINTS_OF_INTEREST;
-      }
-    };
-
     const getListItems = (query, data) => {
       switch (query) {
       case 'eventRecords':
@@ -54,7 +43,10 @@ export class IndexScreen extends React.Component {
                 title: 'Veranstaltung',
                 query: 'eventRecord',
                 queryVariables: { id: `${eventRecord.id}` },
-                rootRouteName: 'EventRecords'
+                rootRouteName: 'EventRecords',
+                shareContent: {
+                  message: shareMessage(eventRecord, query)
+                }
               }
             }))
         );
@@ -72,7 +64,10 @@ export class IndexScreen extends React.Component {
                 title: 'Nachricht',
                 query: 'newsItem',
                 queryVariables: { id: `${newsItem.id}` },
-                rootRouteName: 'NewsItems'
+                rootRouteName: 'NewsItems',
+                shareContent: {
+                  message: shareMessage(newsItem, query)
+                }
               }
             }))
         );
@@ -90,7 +85,10 @@ export class IndexScreen extends React.Component {
                 title: 'Ort',
                 query: 'pointOfInterest',
                 queryVariables: { id: `${pointOfInterest.id}` },
-                rootRouteName: 'PointsOfInterest'
+                rootRouteName: 'PointsOfInterest',
+                shareContent: {
+                  message: shareMessage(pointOfInterest, query)
+                }
               }
             }))
         );
