Skip to content
GitLab
Commit 9ab798e3 authored by Peter Skaar Nordby's avatar Peter Skaar Nordby
Browse files

Merge branch '14-implementere-navigasjon-til-moviedetailspage-ved-onclick-i-ratinglista-pa-profil'

parents 54ec549b bbd4cfe8
Hide whitespace changes
Inline Side-by-side
components/KeyStatisticsItem.tsx
View file @ 9ab798e3
import React from "react";
import { View } from "./Themed";
import { StyleSheet,Text } from 'react-native';
import { View, Text } from "./Themed";
import { StyleSheet } from "react-native";
interface KeyStatisticsItemProps {
title: string,
statistics: string,
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>
export default function KeyStatisticsItem({
statistics,
title,
}: KeyStatisticsItemProps) {
const styles = StyleSheet.create({
item: {
alignItems: "center",
width: "50%",
marginBottom: 10,
},
});
return (
<View
style={styles.item}
lightColor="rgba(0,0,0)"
darkColor="rgba(255,255,255)"
>
<Text
style={styles.item}
lightColor="rgba(0,0,0,1)"
darkColor="rgba(255,255,255,1)"
>
{title}
</Text>
<Text>
</Text>
<Text
style={styles.item}
lightColor="rgba(0,0,0,1)"
darkColor="rgba(255,255,255,1)"
>
{statistics}
</Text>
</View>
)
</Text>
</View>
);
}
components/MovieDetailScreen.tsx deleted 100644 → 0
View file @ 54ec549b
import * as React from 'react';
import {
Button,
Image,
ScrollView,
StyleSheet,
useWindowDimensions,
} from 'react-native';
import Lord from '../assets/images/lord.jpg';
import { MovieDetail } from '../models/movieDetail.model';
import KeyStatisticsItem from './KeyStatisticsItem';
import Pill from './Pill';
import Seperator from './Seperator';
import { Text, View } from './Themed';
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>
);
}
components/MovieInfo.tsx 0 → 100644
View file @ 9ab798e3
import * as React from "react";
import { useEffect, useState } from "react";
import {
Button,
Image,
ScrollView,
StyleSheet,
useWindowDimensions,
} from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { MovieDetail } from "../models/movieDetail.model";
import { clearMovie, fetchMovieById } from "../store/ducks/movies/actions";
import { MovieState } from "../store/ducks/movies/types";
import { ApplicationState } from "../store/interface";
import KeyStatisticsItem from "./KeyStatisticsItem";
import Pill from "./Pill";
import Seperator from "./Seperator";
import { Text, View } from "./Themed";
interface MovieInfoProps {
movieID: string;
}
export default function MovieInfo({ movieID }: MovieInfoProps) {
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",
},
});
const dispatch = useDispatch();
const data = useSelector(({ movies }: ApplicationState) => movies.byId);
useEffect(() => {
dispatch(fetchMovieById({ id: movieID }));
return () => {
dispatch(clearMovie());
};
}, []);
if (data) {
return (
<ScrollView style={styles.root}>
<View style={{ alignItems: "center" }}>
<Image
source={{
uri: data.movie.poster,
}}
style={[styles.logo, { height: height * 0.5 }]}
resizeMode="contain"
/>
</View>
<View style={{ alignItems: "center" }}>
<Text>Stars -{">"} To be implemented</Text>
</View>
<View>
<Button
onPress={() => console.log("To be implemented")}
title={"Give rating"}
/>
</View>
<View style={styles.key_number_container}>
<KeyStatisticsItem
title="RUNTIME"
statistics={String(data.movie.runtime)}
/>
<KeyStatisticsItem
title="IMDG-RATING"
statistics={String(data.movie.imdbRating)}
/>
<KeyStatisticsItem
title="RATING"
statistics={String(data.movie.rating)}
/>
<KeyStatisticsItem
title="PGA-RATING"
statistics={String(data.movie.rated)}
/>
</View>
<Seperator />
<View>
<Text style={{ fontSize: 22 }}>{data.movie.year}</Text>
<Text style={{ fontSize: 18 }}>{data.movie.title}</Text>
</View>
<Seperator />
<Text>{data.movie.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>
<Text>Reviews -{">"} To be implemented</Text>
</View>
</ScrollView>
);
} else return <Text>Movie not found</Text>;
}
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>
);
}
components/Pill.tsx
View file @ 9ab798e3
import React from "react";
import { View } from "./Themed";
import { Platform, StyleSheet } from 'react-native';
import { Platform, StyleSheet } from "react-native";
interface PillProps {
text: string;
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>
)
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>;
}
components/ProfileInfo.tsx
View file @ 9ab798e3
......@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
marginVertical: 10,
alignItems: "center",
marginHorizontal: 50,
backgroundColor: "rgba(255,255,255,0.0)",
backgroundColor: "rgba(255,255,255,0)",
},
profileInfoText: {
fontSize: 17,
......
components/UserRatingCard.tsx
View file @ 9ab798e3
import React, { useEffect, useState } from "react";
import { Dimensions, Image, StyleSheet } from "react-native";
import { Text, View } from "../components/Themed";
import { AirbnbRating } from "react-native-ratings";
import { UserRating } from "../store/ducks/auth/types";
import { MovieEntity } from "../store/ducks/movies/types";
import { buildExecutionContext } from "graphql/execution/execute";
import React, { useEffect, useState } from 'react';
import { Dimensions, Image, StyleSheet } from 'react-native';
import { Text, View } from '../components/Themed';
import { AirbnbRating } from 'react-native-ratings';
import { UserRating } from '../store/ducks/auth/types';
import { useNavigation } from '@react-navigation/core';
interface UserRatingCardProps {
userRating: UserRating;
}
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");
const window = Dimensions.get('window');
const screen = Dimensions.get('screen');
/**
* User Rating Card component
......@@ -29,34 +28,43 @@ const UserRatingCard = (props: UserRatingCardProps): JSX.Element => {
return (dimensions.window.width / 2 - 20) * (443 / 300);
};
const navigation = useNavigation();
const navigateToMovie = () => {
navigation.navigate('Movie', {
movieTitle: movie.title,
movieID: movie.id,
});
};
useEffect(() => {
Dimensions.addEventListener("change", ({ window, screen }) => {
Dimensions.addEventListener('change', ({ window, screen }) => {
setDimensions({ window, screen });
});
}, []);
return (
<View
style={styles.card}
lightColor="rgba(255,255,255,0.9)"
darkColor="rgba(0,0,0,0.9)"
>
<Image
source={{
uri: movie.poster,
}}
style={[styles.poster, { width: iw(), height: ih() }]}
resizeMode="contain"
/>
<View style={styles.card} lightColor='rgba(255,255,255,0.9)' darkColor='rgba(0,0,0,0.9)'>
<View onTouchEnd={navigateToMovie}>
<Image
source={{
uri: movie.poster,
}}
style={[styles.poster, { width: iw(), height: ih() }]}
resizeMode='contain'
/>
</View>
<View style={[styles.cardInfo, { maxWidth: iw() }]}>
<Text
style={styles.titleText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)"
>
{movie.title}
</Text>
<View onTouchEnd={navigateToMovie}>
<Text
style={styles.titleText}
lightColor='rgba(0,0,0,0.8)'
darkColor='rgba(255,255,255,0.8)'
>
{movie.title}
</Text>
</View>
<AirbnbRating
count={5}
defaultRating={rating}
......@@ -66,17 +74,14 @@ const UserRatingCard = (props: UserRatingCardProps): JSX.Element => {
/>
<Text
style={styles.comment}
lightColor="rgba(0,0,0,0.7)"
darkColor="rgba(255,255,255,0.7)"
lightColor='rgba(0,0,0,0.7)'
darkColor='rgba(255,255,255,0.7)'
numberOfLines={5}
>
{comment}
</Text>
<Text
style={styles.date}
lightColor="rgba(0,0,0,0.6)"
darkColor="rgba(255,255,255,0.6)"
>
{date.split("T")[0]}
<Text style={styles.date} lightColor='rgba(0,0,0,0.6)' darkColor='rgba(255,255,255,0.6)'>
{date.split('T')[0]}
</Text>
</View>
</View>
......@@ -86,21 +91,21 @@ const UserRatingCard = (props: UserRatingCardProps): JSX.Element => {
const styles = StyleSheet.create({
poster: {
borderRadius: 5,
resizeMode: "contain",
resizeMode: 'contain',
maxWidth: 300,
},
card: {
borderRadius: 10,
textAlign: "center",
flexDirection: "row",
textAlign: 'center',
flexDirection: 'row',
flex: 4,
minWidth: Dimensions.get("screen").width - 20,
minWidth: Dimensions.get('screen').width - 20,
},
titleText: {
marginTop: 5,
fontSize: 18,
fontWeight: "bold",
textAlign: "center",
fontWeight: 'bold',
textAlign: 'center',
},
comment: {
marginTop: 10,
......@@ -108,13 +113,13 @@ const styles = StyleSheet.create({
},
date: {
fontSize: 12,
position: "absolute",
position: 'absolute',
bottom: 5,
},
cardInfo: {
marginHorizontal: 10,
flex: 2,
textAlign: "left",
textAlign: 'left',
},
image: {
flex: 1,
......
components/UserRatings.tsx
View file @ 9ab798e3
import * as React from "react";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { FlatList, RefreshControl, StyleSheet } from "react-native";
import { AirbnbRating } from "react-native-ratings";
import { useDispatch, useSelector } from "react-redux";
import { Text, View } from "../components/Themed";
import { Genre } from "../models/movieData.model";
import { View } from "../components/Themed";
import { getRatings } from "../store/ducks/auth/actions";
import { AuthState } from "../store/ducks/auth/types";
import { ApplicationState } from "../store/interface";
......@@ -15,9 +13,9 @@ export default function UserRatings(): JSX.Element {
const auth: AuthState = useSelector