refactor: code cleanings and small styling improvements

.wp-api/functions.php

@@ -1,91 +1,4 @@
 <?php
-add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
-function my_theme_enqueue_styles()
-{
-	wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
-}
-
-/* Custom Scripts einbinden */
-
-// Custom JS einbinden
-add_action('init', 'my_init_method');
-function my_init_method()
-{
-	if (!is_admin()) {
-		wp_deregister_script('custom');
-		wp_register_script('custom', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), '1.0', true);
-		wp_enqueue_script('custom');
-	}
-}
-
-/* ---------------------------------------------------------------- */
-/* Remove Frontend Admin Bar
-/* ---------------------------------------------------------------- */
-if (!current_user_can('manage_options')) {
-	show_admin_bar(false);
-}
-
-/* ---------------------------------------------------------------- */
-/* Login/Logout Links <img src="/wp-content/uploads/2016/01/flag_gb.png"> /magazine-event-planners
-/* ---------------------------------------------------------------- */
-add_filter('wp_nav_menu_items', 'my_login_func', 10, 2);
-
-function my_login_func($nav, $args)
-{
-	global $current_user;
-	get_currentuserinfo();
-
-	// if (is_user_logged_in()) {
-	// 	$loginoutlink = '<li class="menu-item current-menu-item"><a href="/login?a=logout">Logout ' . $current_user->display_name . '</a></li>';
-	// }
-	// else {
-	// 	$class_name = '';
-	// 	if (basename(get_permalink($id)) == 'login') {
-	// 		$class_name = 'menu-item current-menu-item';
-	// 	}
-	//
-	// 	$loginoutlink = '<li class="' . $class_name . '"><a href="/login" >Login</a></li>';
-	// }
-
-	// if ($args->theme_location == 'top-menu')
-	if ($args->menu->term_id == 3) {
-		$nav .= $loginoutlink . '<li class="menu-item flag-en"><a href="/magazine-event-planners"><img src="/wp-content/uploads/2016/01/flag_gb.png"/></a></li>';
-	}
-
-	return $nav;
-}
-
-// Redirect nach erfolgreicher Anmeldung
-add_filter('wpmem_login_redirect', 'my_login_redirect', 10, 2);
-
-function my_login_redirect($redirect_to, $user_id)
-{
-	// return the url that the login should redirect to
-	return '/ausgaben';
-}
-
-// Standard E-Mail umleiten bzw einen zusätzlichen Empfänger eintragen
-add_filter('wpmem_notify_addr', 'my_admin_email');
-
-function my_admin_email($email)
-{
-
-	// single email example
-	// $email = 'notify@mydomain.com';
-
-	// multiple emails example
-	// $email = 'notify1@mydomain.com, notify2@mydomain.com';
-
-	// take the default and append a second address to it example:
-	$email = $email . ', homepage@convention-net.de';
-
-	// return the result
-	return $email;
-}
-
-// add_image_size('download-archive-16x9', 800, 450 true);
-add_image_size('download-archive-4x3', 760, 570, true);
-
 /* ---------------------------------------------------------------- */
 /* Add featured images to the Rest API
 /* ---------------------------------------------------------------- */

src/components/Articles/FeaturedCarousel.tsx

@@ -22,32 +22,41 @@ const FeaturedCarousel: React.FC<Props> = ({ articles }) => {
   const screenWidth = Dimensions.get('screen').width
 
   const slideItem = ({ item }: { item: Article }) => (
-    <Touchable onPress={() => navigation.navigate('ArticleScreen', { postId: item.id })}>
-      <View style={styles.container}>
-        <ImageBackground source={{ uri: item.featured_image_thumb }} style={styles.backgroundImage}>
-          <View
-            style={{
-              ...styles.slideContainer,
-              justifyContent:
-                item.acf.sponsored_by !== undefined &&
-                item.acf.sponsored_by !== null &&
-                item.acf.sponsored_by.length > 0
-                  ? 'space-between'
-                  : 'flex-end',
-            }}
-          >
-            {item.acf.sponsored_by !== undefined && item.acf.sponsored_by !== null && item.acf.sponsored_by.length > 0 && (
-              <Text style={styles.sponsored}>
-                Sponsored by <Text style={{ fontFamily: fonts.sansBold }}>{item.acf.sponsored_by}</Text>
-              </Text>
-            )}
-            <View style={styles.titleContainer}>
-              <HTML baseFontStyle={styles.title} html={item.title.rendered} />
-            </View>
+    <React.Fragment>
+      {item.acf && (
+        <Touchable
+          onPress={() => navigation.navigate('ArticleScreen', { postId: item.id })}
+          testID="featuredCarouselItem"
+        >
+          <View style={styles.container}>
+            <ImageBackground source={{ uri: item.featured_image_thumb }} style={styles.backgroundImage}>
+              <View
+                style={{
+                  ...styles.slideContainer,
+                  justifyContent:
+                    item.acf.sponsored_by !== undefined &&
+                    item.acf.sponsored_by !== null &&
+                    item.acf.sponsored_by.length > 0
+                      ? 'space-between'
+                      : 'flex-end',
+                }}
+              >
+                {item.acf.sponsored_by !== undefined &&
+                  item.acf.sponsored_by !== null &&
+                  item.acf.sponsored_by.length > 0 && (
+                    <Text style={styles.sponsored}>
+                      Sponsored by <Text style={{ fontFamily: fonts.sansBold }}>{item.acf.sponsored_by}</Text>
+                    </Text>
+                  )}
+                <View style={styles.titleContainer}>
+                  <HTML baseFontStyle={styles.title} html={item.title.rendered} />
+                </View>
+              </View>
+            </ImageBackground>
           </View>
-        </ImageBackground>
-      </View>
-    </Touchable>
+        </Touchable>
+      )}
+    </React.Fragment>
   )
   return (
     <Carousel

src/components/Articles/__tests__/CategoryList.test.tsx

@@ -16,7 +16,7 @@ jest.mock('@react-navigation/native', () => {
   }
 })
 
-describe('<LinkList />', () => {
+describe('<CategoryList />', () => {
   it('renders correctly', () => {
     const { toJSON } = render(<CategoryList data={[category]} />)
     expect(toJSON()).toMatchSnapshot()

src/components/Articles/__tests__/FeaturedCarousel.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react-native'
+import { act, fireEvent, render } from '@testing-library/react-native'
 
 import FeaturedCarousel from '../FeaturedCarousel'
 import { article, articleWithoutFeatured } from '@__mocks__/article'
@@ -25,4 +25,14 @@ describe('<FeaturedCarousel />', () => {
     const { toJSON } = render(<FeaturedCarousel articles={[article, articleWithoutFeatured]} />)
     expect(toJSON()).toMatchSnapshot()
   })
+
+  it('should call the navigate function once', () => {
+    const { getByTestId } = render(<FeaturedCarousel articles={[article]} />)
+
+    act(() => {
+      fireEvent.press(getByTestId('featuredCarouselItem'))
+    })
+
+    expect(mockedNavigate).toHaveBeenCalledTimes(1)
+  })
 })

src/components/Articles/__tests__/__snapshots__/CategoryList.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LinkList /> renders correctly 1`] = `
+exports[`<CategoryList /> renders correctly 1`] = `
 <RCTScrollView
   data={
     Array [

src/components/Articles/__tests__/__snapshots__/FeaturedCarousel.test.tsx.snap

@@ -203,6 +203,7 @@ exports[`<FeaturedCarousel /> renders correctly 1`] = `
               "opacity": 1,
             }
           }
+          testID="featuredCarouselItem"
         >
           <View
             style={
@@ -361,6 +362,7 @@ exports[`<FeaturedCarousel /> renders correctly 1`] = `
               "opacity": 1,
             }
           }
+          testID="featuredCarouselItem"
         >
           <View
             style={

src/navigations/CategoriesNavigator.tsx

@@ -1,11 +1,9 @@
 import React from 'react'
-import { View } from 'react-native'
 import { StackNavigationOptions, createStackNavigator } from '@react-navigation/stack'
 
 import CategoriesOverviewScreen from '@screens/CategoriesOverviewScreen'
 import ArticlesOverviewScreen from '@screens/ArticlesOverviewScreen'
 import ArticleScreen from '@screens/ArticleScreen'
-import Logo from '@components/UI/Logo'
 import { colors } from '@styles/theme'
 
 export type CategoriesStackParamList = {
@@ -21,12 +19,6 @@ const defaultNavigatorOptions: StackNavigationOptions = {
 }
 
 const CategoriesNavigator: React.FC = () => {
-  const HeaderLogo = () => (
-    <View style={{ alignItems: 'center' }}>
-      <Logo height={30} />
-    </View>
-  )
-
   return (
     <CategoriesStack.Navigator initialRouteName="CategoriesOverviewScreen" screenOptions={defaultNavigatorOptions}>
       <CategoriesStack.Screen
@@ -39,7 +31,7 @@ const CategoriesNavigator: React.FC = () => {
         component={ArticlesOverviewScreen}
         options={({ route }) => ({ title: route.params.categoryName })}
       />
-      <CategoriesStack.Screen name="ArticleScreen" component={ArticleScreen} options={{ headerTitle: HeaderLogo }} />
+      <CategoriesStack.Screen name="ArticleScreen" component={ArticleScreen} options={{ headerTitle: '' }} />
     </CategoriesStack.Navigator>
   )
 }

src/navigations/HomeNavigator.tsx

@@ -42,7 +42,7 @@ const MainNavigation: React.FC = () => {
         component={ArticlesOverviewScreen}
         options={({ route }) => ({ title: route.params.categoryName })}
       />
-      <HomeStack.Screen name="ArticleScreen" component={ArticleScreen} options={{ headerTitle: HeaderLogo }} />
+      <HomeStack.Screen name="ArticleScreen" component={ArticleScreen} options={{ headerTitle: '' }} />
     </HomeStack.Navigator>
   )
 }

src/screens/ArticleScreen.tsx

@@ -1,5 +1,16 @@
 import React, { useEffect, useState } from 'react'
-import { Dimensions, Linking, ScrollView, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
+import {
+  Dimensions,
+  // TODO: Maybe add an additional image above the content (there are more parts belong to this)
+  // Image,
+  // ImageStyle,
+  Linking,
+  ScrollView,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
 import { RouteProp, useRoute } from '@react-navigation/native'
 import HTML from 'react-native-render-html'
 import { Ionicons } from '@expo/vector-icons'
@@ -55,6 +66,9 @@ const ArticleScreen: React.FC = () => {
               <Text style={styles.date}>{getLocaleLongDate(new Date(article.date_gmt || Date.now.toString()))}</Text>
             </View>
             <HTML baseFontStyle={styles.teaser} html={article.excerpt.rendered} />
+            {/* <View style={styles.imageContainer}>
+              <Image style={styles.image} source={{ uri: article.featured_image_medium }} />
+            </View> */}
             <HTML
               containerStyle={styles.htmlContainer}
               baseFontStyle={styles.text}
@@ -76,6 +90,8 @@ interface Styles extends DefaultStyles {
   category: TextStyle
   titleContainer: ViewStyle
   teaser: TextStyle
+  // imageContainer: ViewStyle
+  // image: ImageStyle
   htmlContainer: ViewStyle
 }
 
@@ -107,6 +123,14 @@ const styles = StyleSheet.create<Styles>({
     color: colors.accentColor,
     fontSize: 18,
   },
+  // imageContainer: {
+  //   height: Dimensions.get('screen').width,
+  //   borderRadius: 10,
+  // },
+  // image: {
+  //   flex: 1,
+  //   borderRadius: 15,
+  // },
   htmlContainer: {
     paddingBottom: 15,
   },