feat: added detail movie screen

jest.config.js

@@ -1,4 +1,12 @@
 module.exports = {
   preset: 'react-native',
   setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  coverageThreshold: {
+    global: {
+      statements: 100,
+      branches: 90,
+      functions: 90,
+      lines: 90,
+    },
+  },
 };

src/components/App.tsx

@@ -4,7 +4,7 @@ import 'react-native-gesture-handler';
 import {Button, View} from 'react-native';
 import {Provider as PaperProvider} from 'react-native-paper';
 import {Provider} from 'react-redux';
-import {NavigationContainer} from '@react-navigation/native';
+import {NavigationContainer, NavigationProp} from '@react-navigation/native';
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
 
 import Stubs from '../stubs/Stubs';
@@ -13,8 +13,11 @@ import CreateListModal from '../stubs/CreateListModal';
 
 import store from '../store/store';
 import {RootStackParamList} from './types';
+import DetailMovieModal from '../stubs/DetailMovieModal';
+import CustomHeader from '../stubs/DetailMovieModal/CustomHeader';
 
 const Stack = createStackNavigator<RootStackParamList>();
+export type StackNavigation = NavigationProp<RootStackParamList>;
 
 //TODO: interviewee fix warning
 const RootStack = () => (
@@ -67,6 +70,21 @@ const App = () => {
                 headerShown: true,
               }}
             />
+            <Stack.Screen
+              name="DetailMovieModal"
+              component={DetailMovieModal}
+              options={({route, navigation}) => ({
+                headerShown: true,
+                header: () => (
+                  <CustomHeader
+                    title={route.params.title}
+                    description={route.params.description}
+                    itemsCount={route.params.itemsCount}
+                    navigation={navigation}
+                  />
+                ),
+              })}
+            />
           </Stack.Navigator>
         </NavigationContainer>
       </Provider>

src/components/types.ts

@@ -4,4 +4,5 @@ export type RootStackParamList = {
   Stubs: undefined;
   Lists: undefined;
   CreateListModal: undefined;
+  DetailMovieModal: {title: string; description: string; itemsCount: number};
 };

src/stubs/DetailMovieModal/CustomHeader/component.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {View, Text, TouchableOpacity, Platform, StyleSheet} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+
+const CustomHeader = ({
+  title,
+  description,
+  itemsCount,
+}: {
+  title: string;
+  description: string;
+  itemsCount: number;
+}) => {
+  const navigation = useNavigation();
+
+  return (
+    <View style={styles.header}>
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={styles.backButton}>
+        <Text style={styles.backButtonText}>Back</Text>
+      </TouchableOpacity>
+      <View style={styles.titleDescriptionContainer}>
+        <View style={styles.descriptionBlock}>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.itemsCount}>{`(${itemsCount})`}</Text>
+        </View>
+        <Text style={styles.description}>{description}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: '#ffffff',
+    paddingTop: 24,
+    flexDirection: 'column',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    paddingHorizontal: 15,
+  },
+  backButton: {
+    alignSelf: 'flex-start',
+  },
+  backButtonText: {
+    color: '#007AFF',
+    fontSize: 16,
+  },
+  titleDescriptionContainer: {
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    marginTop: 8,
+  },
+  itemsCount: {
+    color: '#acacb0',
+    paddingLeft: 5,
+  },
+  descriptionBlock: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  description: {
+    fontSize: 14,
+    color: '#666',
+    paddingBottom: 10,
+  },
+});
+
+export default CustomHeader;

src/stubs/DetailMovieModal/CustomHeader/index.ts

@@ -0,0 +1 @@
+export {default} from './component';

src/stubs/DetailMovieModal/component.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {View, StyleSheet} from 'react-native';
+import {Card, Chip, Text} from 'react-native-paper';
+
+const DetailMovieModal = () => (
+  <View style={styles.container}>
+    <Card style={styles.card}>
+      <View style={styles.titleContainer}>
+        <Card.Title style={styles.title} title="Movie name1" />
+        <Text style={styles.popularityText} variant="labelSmall">
+          23
+        </Text>
+      </View>
+      <Card.Content>
+        <View style={styles.middleContentContainer}>
+          <Text variant="titleSmall">12.02.22</Text>
+          <View style={styles.middleContentBlock}>
+            <Text style={styles.rate} variant="titleSmall">
+              6.8
+            </Text>
+            <Text style={styles.vote} variant="titleSmall">
+              (43 456)
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.description} variant="bodySmall">
+          Description
+        </Text>
+      </Card.Content>
+      <View style={styles.chipContainer}>
+        <Chip style={styles.chip}>Genres 1</Chip>
+        <Chip style={styles.chip}>Genres 2</Chip>
+        <Chip style={styles.chip}>Genres 3</Chip>
+      </View>
+    </Card>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 15,
+  },
+  chip: {
+    width: 100,
+    backgroundColor: '#ebebeb',
+    color: '#232323',
+    borderRadius: 25,
+    paddingRight: 5,
+    marginBottom: 5,
+  },
+  title: {
+    width: '70%',
+  },
+  description: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    width: '100%',
+  },
+  vote: {
+    color: '#acacb0',
+    paddingLeft: 5,
+  },
+  rate: {
+    fontWeight: 'bold',
+  },
+  middleContentContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  middleContentBlock: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingLeft: 20,
+  },
+  popularityText: {
+    width: '30%',
+    textAlign: 'right',
+    paddingTop: 15,
+    paddingRight: 15,
+  },
+  chipContainer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    padding: 10,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+  },
+  titleContainer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+export default DetailMovieModal;

src/stubs/DetailMovieModal/index.ts

@@ -0,0 +1 @@
+export {default} from './component';

src/stubs/Lists/component.tsx

@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 
 import {StyleSheet, FlatList, Text, View} from 'react-native';
 import {
-  IconButton,
   Card,
   Title,
   Paragraph,
@@ -12,25 +11,29 @@ import {
   Snackbar,
 } from 'react-native-paper';
 import {range} from 'lodash';
+import {useNavigation} from '@react-navigation/native';
+import {StackNavigation} from '../../components/App';
 
 const data = range(10).map(index => ({index}));
 
-//TODO: interviewee add type
 const RemoveDialog = ({visible, hideDialog, onOkPress}) => (
   <Portal>
-    <Dialog visible={visible} onDismiss={hideDialog}>
+    <Dialog visible={visible} onDismiss={hideDialog} style={styles.dialog}>
       <Dialog.Content>
         <Paragraph>Do you want to delete list?</Paragraph>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button>Cancel</Button>
-        <Button onPress={onOkPress}>Ok</Button>
+        <Button textColor="#0378ff" uppercase mode="text">
+          Cancel
+        </Button>
+        <Button onPress={onOkPress} mode="text" textColor="#ff0000" uppercase>
+          Delete
+        </Button>
       </Dialog.Actions>
     </Dialog>
   </Portal>
 );
 
-//TODO: interviewee add type
 const RemoveDialogError = ({visible, onDismissSnackBar}) => (
   <Snackbar visible={visible} onDismiss={onDismissSnackBar}>
     Oops, something went wrong
@@ -40,6 +43,7 @@ const RemoveDialogError = ({visible, onDismissSnackBar}) => (
 const Lists = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const [snackbarVisible, setSnackbarVisible] = useState(false);
+  const navigation = useNavigation<StackNavigation>();
 
   const showModal = () => {
     setModalVisible(true);
@@ -72,7 +76,26 @@ const Lists = () => {
               <Paragraph>Description</Paragraph>
             </Card.Content>
             <Card.Actions>
-              <IconButton icon="delete-outline" onPress={showModal} />
+              <Button
+                onPress={() =>
+                  navigation.navigate('DetailMovieModal', {
+                    title: 'Custom Header',
+                    description: 'description',
+                    itemsCount: 5,
+                  })
+                }
+                textColor="#0378ff"
+                mode="text"
+                uppercase>
+                View
+              </Button>
+              <Button
+                textColor="#0378ff"
+                uppercase
+                mode="text"
+                onPress={showModal}>
+                Delete
+              </Button>
             </Card.Actions>
           </Card>
         )}
@@ -99,9 +122,13 @@ const styles = StyleSheet.create({
   list: {
     flex: data.length === 0 ? 1 : 0,
   },
+  dialog: {
+    backgroundColor: '#ffffff',
+  },
   card: {
     flex: 1,
     margin: 5,
+    backgroundColor: '#ffffff',
   },
   row: {
     flex: 1,