Commit 047dcb6c authored by Peter Skaar Nordby's avatar Peter Skaar Nordby
Browse files

Merge branch '18-spinner-og-sma-fargeendringer' into 'master'

Resolve "Spinner og små fargeendringer"

Closes #18

See merge request !17
parents 8c20e1d3 e0ba6f77
import * as React from "react"; import * as React from 'react';
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react';
import { import {
ActivityIndicator,
Button, Button,
Image, Image,
ScrollView, ScrollView,
StyleSheet, StyleSheet,
useWindowDimensions, useWindowDimensions,
} from "react-native"; } from 'react-native';
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from 'react-redux';
import { MovieDetail } from "../models/movieDetail.model"; import { MovieDetail } from '../models/movieDetail.model';
import { clearMovie, fetchMovieById } from "../store/ducks/movies/actions"; import { clearMovie, fetchMovieById } from '../store/ducks/movies/actions';
import { MovieState } from "../store/ducks/movies/types"; import { MovieState } from '../store/ducks/movies/types';
import { ApplicationState } from "../store/interface"; import { ApplicationState } from '../store/interface';
import KeyStatisticsItem from "./KeyStatisticsItem"; import KeyStatisticsItem from './KeyStatisticsItem';
import Pill from "./Pill"; import Pill from './Pill';
import Seperator from "./Seperator"; import Seperator from './Seperator';
import { Text, View } from "./Themed"; import { Text, View } from './Themed';
interface MovieInfoProps { interface MovieInfoProps {
movieID: string; movieID: string;
...@@ -34,14 +35,14 @@ export default function MovieInfo({ movieID }: MovieInfoProps) { ...@@ -34,14 +35,14 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
height: 350, height: 350,
}, },
container: { container: {
width: "100%", width: '100%',
padding: 15, padding: 15,
marginVertical: 5, marginVertical: 5,
alignItems: "center", alignItems: 'center',
borderRadius: 5, borderRadius: 5,
}, },
subText: { subText: {
color: "#2e78b7", color: '#2e78b7',
}, },
button: { button: {
marginTop: 10, marginTop: 10,
...@@ -49,16 +50,16 @@ export default function MovieInfo({ movieID }: MovieInfoProps) { ...@@ -49,16 +50,16 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
key_number_container: { key_number_container: {
marginTop: 20, marginTop: 20,
flex: 1, flex: 1,
flexDirection: "row", flexDirection: 'row',
flexWrap: "wrap", flexWrap: 'wrap',
alignItems: "flex-start", alignItems: 'flex-start',
}, },
genres: { genres: {
flex: 1, flex: 1,
flexWrap: "wrap", flexWrap: 'wrap',
flexDirection: "row", flexDirection: 'row',
marginTop: 15, marginTop: 15,
paddingBottom: "1rem", paddingBottom: '1rem',
}, },
}); });
...@@ -76,41 +77,26 @@ export default function MovieInfo({ movieID }: MovieInfoProps) { ...@@ -76,41 +77,26 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
if (data) { if (data) {
return ( return (
<ScrollView style={styles.root}> <ScrollView style={styles.root}>
<View style={{ alignItems: "center" }}> <View style={{ alignItems: 'center' }}>
<Image <Image
source={{ source={{
uri: data.movie.poster, uri: data.movie.poster,
}} }}
style={[styles.logo, { height: height * 0.5 }]} style={[styles.logo, { height: height * 0.5 }]}
resizeMode="contain" resizeMode='contain'
/> />
</View> </View>
<View style={{ alignItems: "center" }}> <View style={{ alignItems: 'center' }}>
<Text>Stars -{">"} To be implemented</Text> <Text>Stars -{'>'} To be implemented</Text>
</View> </View>
<View> <View>
<Button <Button onPress={() => console.log('To be implemented')} title={'Give rating'} />
onPress={() => console.log("To be implemented")}
title={"Give rating"}
/>
</View> </View>
<View style={styles.key_number_container}> <View style={styles.key_number_container}>
<KeyStatisticsItem <KeyStatisticsItem title='RUNTIME' statistics={String(data.movie.runtime)} />
title="RUNTIME" <KeyStatisticsItem title='IMDG-RATING' statistics={String(data.movie.imdbRating)} />
statistics={String(data.movie.runtime)} <KeyStatisticsItem title='RATING' statistics={String(data.movie.rating)} />
/> <KeyStatisticsItem title='PGA-RATING' statistics={String(data.movie.rated)} />
<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> </View>
<Seperator /> <Seperator />
<View> <View>
...@@ -120,37 +106,34 @@ export default function MovieInfo({ movieID }: MovieInfoProps) { ...@@ -120,37 +106,34 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
<Seperator /> <Seperator />
<Text>{data.movie.plot}</Text> <Text>{data.movie.plot}</Text>
<Seperator /> <Seperator />
{LabelAndText("DIRECTORS", "Joshua King")} {LabelAndText('DIRECTORS', 'Joshua King')}
<Seperator /> <Seperator />
{LabelAndText("PRODUCTION", "Paramount Pictures, W365")} {LabelAndText('PRODUCTION', 'Paramount Pictures, W365')}
<Seperator /> <Seperator />
{LabelAndText("WRITERS", "Phil Hay, Matt Manfredi, Peter Chung")} {LabelAndText('WRITERS', 'Phil Hay, Matt Manfredi, Peter Chung')}
<Seperator /> <Seperator />
{LabelAndText( {LabelAndText('STARRING ACTORS', 'Charlize Theron, Frances McDormand, Sophie Okonedo')}
"STARRING ACTORS",
"Charlize Theron, Frances McDormand, Sophie Okonedo"
)}
<Seperator /> <Seperator />
<View> <View>
<Text>Reviews -{">"} To be implemented</Text> <Text>Reviews -{'>'} To be implemented</Text>
</View> </View>
</ScrollView> </ScrollView>
); );
} else return <Text>Movie not found</Text>; } else return <ActivityIndicator size='large' color='rgba(255,100,255,0.5)' />;
} }
function LabelAndText(label: string, text: string) { function LabelAndText(label: string, text: string) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
label: { label: {
textTransform: "capitalize", textTransform: 'capitalize',
fontWeight: "bold", fontWeight: 'bold',
marginRight: 5, marginRight: 5,
}, },
container: { container: {
flex: 1, flex: 1,
flexWrap: "wrap", flexWrap: 'wrap',
flexDirection: "row", flexDirection: 'row',
}, },
}); });
......
import * as React from "react"; import * as React from 'react';
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from 'react';
import { FlatList, RefreshControl, StyleSheet } from "react-native"; import { FlatList, RefreshControl, StyleSheet } from 'react-native';
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from 'react-redux';
import { View } from "../components/Themed"; import { View, Text } from '../components/Themed';
import { getRatings } from "../store/ducks/auth/actions"; import { getRatings } from '../store/ducks/auth/actions';
import { AuthState } from "../store/ducks/auth/types"; import { AuthState } from '../store/ducks/auth/types';
import { ApplicationState } from "../store/interface"; import { ApplicationState } from '../store/interface';
import UserRatingCard from "./UserRatingCard"; import UserRatingCard from './UserRatingCard';
export default function UserRatings(): JSX.Element { export default function UserRatings(): JSX.Element {
const dispatch = useDispatch(); const dispatch = useDispatch();
...@@ -29,45 +29,56 @@ export default function UserRatings(): JSX.Element { ...@@ -29,45 +29,56 @@ export default function UserRatings(): JSX.Element {
} }
}, []); }, []);
// Renders flatlist with ratings sorted by data if there are any
return ( return (
<FlatList <>
contentContainerStyle={styles.movieList} {auth.ratings.length > 0 ? (
data={auth.ratings.sort((a, b) => (a.date < b.date ? 1 : -1))} <>
renderItem={({ item }) => <UserRatingCard userRating={item} />} <FlatList
keyExtractor={(item) => item.movie.id} contentContainerStyle={styles.movieList}
showsVerticalScrollIndicator={false} data={auth.ratings.sort((a, b) => (a.date < b.date ? 1 : -1))}
ItemSeparatorComponent={() => ( renderItem={({ item }) => <UserRatingCard userRating={item} />}
<View keyExtractor={(item) => item.movie.id}
style={styles.separator} showsVerticalScrollIndicator={false}
lightColor="#rgba(0,0,0,0.2)" ItemSeparatorComponent={() => (
darkColor="#rgba(255,255,255,0.2)" <View
/> style={styles.separator}
lightColor='#rgba(0,0,0,0.2)'
darkColor='#rgba(255,255,255,0.2)'
/>
)}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
/>
</>
) : (
<>
<View>
<Text style={styles.title}>No ratings given yet</Text>
</View>
</>
)} )}
refreshControl={ </>
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
/>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
movieList: { movieList: {
padding: 5, padding: 5,
textAlign: "center", textAlign: 'center',
}, },
item: { item: {
padding: 5, padding: 5,
marginVertical: 8, marginVertical: 8,
}, },
title: { title: {
fontSize: 20, fontSize: 17,
textAlign: "left", textAlign: 'left',
paddingBottom: 10, marginVertical: 30,
}, },
separator: { separator: {
marginVertical: 15, marginVertical: 15,
height: 1, height: 1,
marginHorizontal: "10%", marginHorizontal: '10%',
width: "80%", width: '80%',
}, },
}); });
import * as React from "react"; import * as React from 'react';
import { StyleSheet } from "react-native"; import { StyleSheet } from 'react-native';
import MovieInfo from "../components/MovieInfo"; import MovieInfo from '../components/MovieInfo';
import { View } from "../components/Themed"; import { View } from '../components/Themed';
import { RootStackScreenProps } from "../types"; import { RootStackScreenProps } from '../types';
export default function MovieScreen({ export default function MovieScreen({ route }: RootStackScreenProps<'Movie'>) {
navigation,
route,
}: RootStackScreenProps<"Movie">) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<MovieInfo movieID={route.params.movieID} /> <MovieInfo movieID={route.params.movieID} />
<View
style={styles.separator}
lightColor="#eee"
darkColor="rgba(255,255,255,0.1)"
/>
</View> </View>
); );
} }
...@@ -24,16 +16,16 @@ export default function MovieScreen({ ...@@ -24,16 +16,16 @@ export default function MovieScreen({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
alignItems: "center", alignItems: 'center',
justifyContent: "center", justifyContent: 'center',
}, },
title: { title: {
fontSize: 20, fontSize: 20,
fontWeight: "bold", fontWeight: 'bold',
}, },
separator: { separator: {
marginVertical: 30, marginVertical: 30,
height: 1, height: 1,
width: "80%", width: '80%',
}, },
}); });
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