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

La til spinner + tekst hvis det ikke er ratings

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