Commit b24839a1 authored by Mithunan Sivakumar's avatar Mithunan Sivakumar
Browse files

#8 Added movie detail page

parent fd9e9fbd
import React from "react";
import { View } from "./Themed";
import { StyleSheet,Text } from 'react-native';
interface KeyStatisticsItemProps {
title: string,
statistics: string,
}
export default function KeyStatisticsItem({statistics, title}: KeyStatisticsItemProps) {
const styles = StyleSheet.create({
item: {
alignItems: "center",
width: '50%',
marginBottom: 10,
},
})
return (
<View style={styles.item}>
<Text>
{title}
</Text>
<Text>
{statistics}
</Text>
</View>
)
}
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { Platform, StyleSheet, Image, useWindowDimensions, Button, ScrollView } from 'react-native';
import { MovieDetail } from '../models/movieDetail.model';
import ProfileInfo from './ProfileInfo';
import { Text, View } from './Themed';
import Lord from "../assets/images/lord.jpg";
import { movies } from '../store/ducks/movies';
import KeyStatisticsItem from './KeyStatisticsItem';
import Seperator from './Seperator';
import Pill from './Pill';
import WrapperStatistic from 'antd/lib/statistic/Statistic';
interface MovieDetailProps {
movieDetail: MovieDetail;
}
export default function MovieDetailScreen({movieDetail}: MovieDetailProps) {
const {height} = useWindowDimensions();
const styles = StyleSheet.create({
root: {
padding: 20,
},
logo: {
flex: 1,
width: 200,
height: 350,
},
container: {
width: "100%",
padding: 15,
marginVertical: 5,
alignItems: "center",
borderRadius: 5,
},
subText: {
color: '#2e78b7',
},
button: {
marginTop: 10,
},
key_number_container: {
marginTop: 20,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start'
},
genres: {
flex: 1,
flexWrap: "wrap",
flexDirection: "row",
marginTop: 15,
paddingBottom: "1rem",
}
})
return (
<ScrollView style={styles.root}>
<View style={{alignItems: "center"}}>
<Image source={Lord} style={[styles.logo, {height: height*0.5}]} resizeMode="contain"/>
</View>
<View style={{alignItems: "center"}}>
Stars -{'>'} To be implemented
</View>
<View>
<Button onPress={() => console.log("To be implemented")} title={"Give a rating"}/>
</View>
<View style={styles.key_number_container}>
<KeyStatisticsItem title="RUNTIME" statistics={String(movieDetail.runtime)}/>
<KeyStatisticsItem title="IMDG-RATING" statistics={String(movieDetail.avgRating)}/>
<KeyStatisticsItem title="RATING" statistics={String(movieDetail.avgRating)}/>
<KeyStatisticsItem title="PGA-RATING" statistics={String(movieDetail.avgRating)}/>
</View>
<Seperator/>
<View>
<Text style={{fontSize: 22}}>
{movieDetail.year}
</Text>
<Text style={{fontSize: 18}}>
{movieDetail.title}
</Text>
<View style={styles.genres}>
{movieDetail.genres.map((genre) => <Pill text={genre}>genre</Pill>)}
</View>
</View>
<Seperator/>
<Text>
{movieDetail.plot}
</Text>
<Seperator/>
{LabelAndText("DIRECTORS", "Joshua King")}
<Seperator/>
{LabelAndText("PRODUCTION", "Paramount Pictures, W365")}
<Seperator/>
{LabelAndText("WRITERS", "Phil Hay, Matt Manfredi, Peter Chung")}
<Seperator/>
{LabelAndText("STARRING ACTORS", "Charlize Theron, Frances McDormand, Sophie Okonedo")}
<Seperator/>
<View>
Reviews -{'>'} To be implemented
</View>
</ScrollView>
);
}
function LabelAndText(label: string, text: string){
const styles= StyleSheet.create({
label: {
textTransform: "capitalize",
fontWeight: "bold",
marginRight: 5,
},
container: {
flex: 1,
flexWrap: "wrap",
flexDirection: "row",
}
})
return(
<View style={styles.container}>
<Text style={styles.label}>
{label}:
</Text>
<Text>
{text}
</Text>
</View>
)
}
\ No newline at end of file
import React from "react";
import { View } from "./Themed";
import { Platform, StyleSheet } from 'react-native';
interface PillProps {
text: string;
}
export default function Pill({text}: PillProps) {
const styles = StyleSheet.create({
pillItem: {
paddingLeft: 6,
paddingRight: 6,
textAlign: "center",
textTransform: "capitalize",
borderWidth: 1,
borderColor: "hsl(0, 0%, 100%",
borderRadius: 10,
margin: "0 10",
fontSize: 18,
}
})
return (
<View style={styles.pillItem}>
{text}
</View>
)
}
import React from "react";
import { View } from "./Themed";
import {StyleSheet} from "react-native";
export default function Seperator() {
const styles = StyleSheet.create({
separator: {
marginVertical: 30,
height: 1,
width: '100%',
},
})
return (
<View
style={styles.separator}
lightColor="#eee"
darkColor="rgba(255,255,255,0.1)"
/>
)
}
import * as React from "react";
import { StyleSheet } from "react-native";
import MovieDetailScreen from "../components/MovieDetailScreen";
import ProfileInfo from '../components/ProfileInfo';
import { Text, View } from '../components/Themed';
import { MovieDetail } from "../models/movieDetail.model";
import { RootTabScreenProps } from '../types';
export default function TabOneScreen({
......@@ -10,7 +12,7 @@ export default function TabOneScreen({
}: RootTabScreenProps<"TabOne">) {
return (
<View style={styles.container}>
<Text style={styles.title}>Tab One</Text>
<MovieDetailScreen movieDetail={mockData}/>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
</View>
);
......@@ -32,3 +34,17 @@ const styles = StyleSheet.create({
width: "80%",
},
});
//MockData
const mockData: MovieDetail = {
id: "11111",
title: "Ringenes Herre",
year: 2018,
runtime: 20,
plot: "Den første norske oversettelsen (Krigen om ringen) ved Nils Werenskiold utkom fra 1973 til 1975. Den mest gjenopptrykte oversettelsen, ved Torstein Bugge Høverstad, ble først utgitt i 1984. En nynorsk oversettelse ved Eilev Groven Myhren, Ringdrotten (2006), gjør utstrakt brukt av ulike norske dialekter for å karakterisere folkeslagene. Denne oversettelsen ble premiert med Nynorsk litteraturpris.",
poster: "",
avgRating: 4.5,
genres: ["action", "fantasy"],
actors: ["Bimbo", "Gandalf"],
ratings: [],
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment