Merge pull request #407 from ikuseiGmbH/feature/SVA-314-nested-info-s…

…creen

Feature: nested info screen

src/components/ConnectedImagesCarousel.js

@@ -6,8 +6,7 @@ import { ActivityIndicator } from 'react-native';
 
 import { colors } from '../config';
 import { graphqlFetchPolicy, parsedImageAspectRatio } from '../helpers';
-import { useRefreshTime } from '../hooks';
-import { useHomeRefresh } from '../hooks/HomeRefresh';
+import { useHomeRefresh, useRefreshTime } from '../hooks';
 import { NetworkContext } from '../NetworkProvider';
 import { getQuery, QUERY_TYPES } from '../queries';
 import { SettingsContext } from '../SettingsProvider';

src/components/EventList.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { SectionList } from 'react-native';
 
 import { momentFormat } from '../helpers';
-import { useRenderItem } from '../hooks/listHooks';
+import { useRenderItem } from '../hooks';
 import { QUERY_TYPES } from '../queries';
 
 import { LoadingSpinner } from './LoadingSpinner';

src/components/HomeSection.tsx

@@ -2,7 +2,7 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import React from 'react';
 import { useQuery } from 'react-apollo';
 
-import { useHomeRefresh } from '../hooks/HomeRefresh';
+import { useHomeRefresh } from '../hooks';
 import { getQuery } from '../queries';
 
 import { DataListSection } from './DataListSection';

src/components/HorizontalList.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { FlatList } from 'react-native';
 
-import { useRenderItem } from '../hooks/listHooks';
+import { useRenderItem } from '../hooks';
 
 const keyExtractor = (item, index) => `index${index}-id${item.id}`;
 

src/components/Image.js

@@ -7,7 +7,7 @@ import { Image as RNEImage } from 'react-native-elements';
 import { consts, colors } from '../config';
 import { imageHeight, imageWidth } from '../helpers';
 import { SettingsContext } from '../SettingsProvider';
-import { useInterval } from '../hooks';
+import { useInterval } from '../hooks/TimeHooks';
 
 import { ImageMessage } from './ImageMessage';
 import { ImageRights } from './ImageRights';

src/components/VerticalList.js

@@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react';
 import { ActivityIndicator, FlatList } from 'react-native';
 
 import { colors, normalize } from '../config';
-import { useRenderItem } from '../hooks/listHooks';
+import { useRenderItem } from '../hooks';
 
 import { BackToTop } from './BackToTop';
 

src/components/screens/About.js

@@ -1,39 +1,26 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useState } from 'react';
-import { useQuery } from 'react-apollo';
 import { ActivityIndicator, RefreshControl, SectionList } from 'react-native';
 
 import { colors, texts } from '../../config';
-import { graphqlFetchPolicy } from '../../helpers';
-import { useRefreshTime } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh, useRenderItem, useStaticContent } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
-import { getQuery, QUERY_TYPES } from '../../queries';
+import { QUERY_TYPES } from '../../queries';
 import { SettingsContext } from '../../SettingsProvider';
 import { LoadingContainer } from '../LoadingContainer';
 import { SectionHeader } from '../SectionHeader';
 import { VersionNumber } from '../VersionNumber';
-import { useRenderItem } from '../../hooks/listHooks';
 
 export const About = ({ navigation, withHomeRefresh, withSettings }) => {
-  const { isConnected, isMainserverUp } = useContext(NetworkContext);
+  const { data, loading, refetch } = useStaticContent({
+    name: 'homeAbout',
+    type: 'json',
+    refreshTimeKey: 'publicJsonFile-homeAbout'
+  });
+  const { isConnected } = useContext(NetworkContext);
   const { globalSettings } = useContext(SettingsContext);
   const [refreshing, setRefreshing] = useState(false);
 
-  const refreshTime = useRefreshTime('publicJsonFile-homeAbout');
-
-  const fetchPolicy = graphqlFetchPolicy({
-    isConnected,
-    isMainserverUp,
-    refreshTime
-  });
-
-  const { data: aboutData, loading, refetch } = useQuery(getQuery(QUERY_TYPES.PUBLIC_JSON_FILE), {
-    variables: { name: 'homeAbout' },
-    fetchPolicy,
-    skip: !refreshTime
-  });
-
   useHomeRefresh(withHomeRefresh ? refetch : undefined);
 
   const refresh = async (refetch) => {
@@ -48,30 +35,22 @@ export const About = ({ navigation, withHomeRefresh, withSettings }) => {
 
   const renderItem = useRenderItem(QUERY_TYPES.PUBLIC_JSON_FILE, navigation);
 
-  if (!refreshTime || loading)
+  if (loading)
     return withHomeRefresh ? null : (
       <LoadingContainer>
         <ActivityIndicator color={colors.accent} />
       </LoadingContainer>
     );
 
-  let publicJsonFileContent = [];
-
-  try {
-    publicJsonFileContent = JSON.parse(aboutData?.publicJsonFile?.content);
-  } catch (error) {
-    console.warn(error, aboutData);
-  }
-
-  if (!publicJsonFileContent?.length) return null;
+  if (!data?.length) return null;
 
   const { sections = {} } = globalSettings;
   const { headlineAbout = texts.homeTitles.about } = sections;
 
   const sectionData = [
     {
       title: headlineAbout,
-      data: publicJsonFileContent
+      data
     }
   ];
 

src/components/screens/Service.js

@@ -5,8 +5,7 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { colors, consts, device, Icon, normalize, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
-import { useRefreshTime } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh, useRefreshTime } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
 import { OrientationContext } from '../../OrientationProvider';
 import { getQuery, QUERY_TYPES } from '../../queries';

src/components/widgets/ConstructionSiteNewsWidget.tsx

@@ -4,8 +4,7 @@ import { useQuery } from 'react-apollo';
 
 import { consts, Icon, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
-import { useRefreshTime } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh, useRefreshTime } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
 import { getQuery, QUERY_TYPES } from '../../queries';
 import { WidgetProps } from '../../types';

src/components/widgets/ConstructionSiteWidget.tsx

@@ -2,8 +2,7 @@ import { useNavigation } from '@react-navigation/core';
 import React, { useCallback } from 'react';
 
 import { Icon, texts } from '../../config';
-import { useConstructionSites } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useConstructionSites, useHomeRefresh } from '../../hooks';
 import { WidgetProps } from '../../types';
 
 import { DefaultWidget } from './DefaultWidget';

src/components/widgets/EventWidget.tsx

@@ -5,8 +5,7 @@ import { useQuery } from 'react-apollo';
 
 import { consts, Icon, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
-import { useRefreshTime } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh, useRefreshTime } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
 import { getQuery, QUERY_TYPES } from '../../queries';
 import { WidgetProps } from '../../types';

src/components/widgets/LunchWidget.tsx

@@ -5,8 +5,7 @@ import { useQuery } from 'react-apollo';
 
 import { consts, Icon, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
-import { useRefreshTime } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh, useRefreshTime } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
 import { getQuery, QUERY_TYPES } from '../../queries';
 import { WidgetProps } from '../../types';

src/components/widgets/SurveyWidget.tsx

@@ -4,8 +4,7 @@ import { useQuery } from 'react-apollo';
 
 import { consts, Icon, normalize, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
-import { useRefreshTime } from '../../hooks';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh, useRefreshTime } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
 import { SURVEYS } from '../../queries/survey';
 import { Survey, WidgetProps } from '../../types';

src/components/widgets/WeatherWidget.tsx

@@ -6,7 +6,7 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { consts, normalize, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
-import { useHomeRefresh } from '../../hooks/HomeRefresh';
+import { useHomeRefresh } from '../../hooks';
 import { NetworkContext } from '../../NetworkProvider';
 import { getQuery, QUERY_TYPES } from '../../queries';
 import { WidgetProps } from '../../types';

src/config/navigation/defaultStackConfig.tsx

@@ -21,6 +21,7 @@ import {
   HtmlScreen,
   IndexScreen,
   LunchScreen,
+  NestedInfoScreen,
   OParlCalendarScreen,
   OParlDetailScreen,
   OParlOrganizationsScreen,
@@ -174,6 +175,10 @@ export const defaultStackConfig = ({
       routeName: ScreenName.Lunch,
       screenComponent: LunchScreen
     },
+    {
+      routeName: ScreenName.NestedInfo,
+      screenComponent: NestedInfoScreen
+    },
     {
       routeName: ScreenName.OParlCalendar,
       screenComponent: OParlCalendarScreen

src/hooks/index.js

@@ -2,7 +2,9 @@ export * from './apollo';
 export * from './Bookmarks';
 export * from './constructionSites';
 export * from './encounter';
+export * from './HomeRefresh';
 export * from './imagePicker';
+export * from './listHooks';
 export * from './locationHooks';
 export * from './matomoHooks';
 export * from './NewsCategories';

src/hooks/staticContent.ts

@@ -12,6 +12,7 @@ type StaticContentArgs<T = unknown> = {
   refreshTimeKey?: string;
   refreshInterval?: string;
   fetchPolicy?: 'cache-first' | 'cache-only' | 'network-only';
+  skip?: boolean;
 } & (
   | {
       type: 'json';
@@ -24,12 +25,13 @@ type StaticContentArgs<T = unknown> = {
 );
 
 export const useStaticContent = <T>({
+  fetchPolicy: overrideFetchPolicy,
   name,
-  type,
   parseFromJson,
   refreshInterval,
   refreshTimeKey,
-  fetchPolicy: overrideFetchPolicy
+  skip,
+  type
 }: StaticContentArgs<T>): {
   data?: T;
   error: boolean;
@@ -54,7 +56,7 @@ export const useStaticContent = <T>({
     {
       variables: { name },
       fetchPolicy,
-      skip: !refreshTime
+      skip: !refreshTime || skip
     }
   );
 
@@ -85,7 +87,7 @@ export const useStaticContent = <T>({
     error: error || !!queryError,
     // add the extra condition to avoid weird rendering states, where loading is false, but the publicFileData is not yet set.
     // this way we can safely manipulate data and then update the publicFileData with it, after the query has finished loading.
-    loading: loading || (publicFileData === undefined && !error),
+    loading: loading || (publicFileData === undefined && !error && !skip),
     refetch: refetchCallback
   };
 };

src/screens/BookmarkCategoryScreen.js

@@ -13,8 +13,7 @@ import {
 } from '../components';
 import { colors, consts, texts } from '../config';
 import { graphqlFetchPolicy, parseListItemsFromQuery } from '../helpers';
-import { useMatomoTrackScreenView, useRefreshTime } from '../hooks';
-import { useBookmarks } from '../hooks/Bookmarks';
+import { useBookmarks, useMatomoTrackScreenView, useRefreshTime } from '../hooks';
 import { NetworkContext } from '../NetworkProvider';
 import { getQuery } from '../queries';