Commit 1583396b authored by Peter Skaar Nordby's avatar Peter Skaar Nordby
Browse files

Fikset CSS på mobil for profiltaben

parent bbcdb215
import React from 'react';
import { StyleSheet } from 'react-native';
import React from "react";
import { StyleSheet } from "react-native";
import { UserEntity } from '../store/ducks/auth/types';
import { Text, View } from './Themed';
import { UserEntity } from "../store/ducks/auth/types";
import { Text, View } from "./Themed";
export default function ProfileInfo({ user }: { user: UserEntity }) {
return (
<View>
<View style={styles.profileInfoContainer}>
<Text
style={styles.profileInfoText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
{user.username}
</Text>
<View style={styles.profileInfoContainer}>
<Text
style={styles.profileInfoText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)"
>
{user.username}
</Text>
<Text
style={styles.profileInfoText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
{user.email}
</Text>
</View>
<Text
style={styles.profileInfoText}
lightColor="rgba(0,0,0,0.5)"
darkColor="rgba(255,255,255,0.5)"
>
{user.email}
</Text>
</View>
);
}
const styles = StyleSheet.create({
profileInfoContainer: {
marginTop: 10,
alignItems: 'center',
marginVertical: 10,
alignItems: "center",
marginHorizontal: 50,
},
homeScreenFilename: {
marginVertical: 7,
},
codeHighlightContainer: {
borderRadius: 3,
paddingHorizontal: 4,
backgroundColor: "rgba(255,255,255,0.0)",
},
profileInfoText: {
fontSize: 17,
lineHeight: 24,
textAlign: 'left',
},
helpContainer: {
marginTop: 15,
marginHorizontal: 20,
alignItems: 'center',
},
helpLink: {
paddingVertical: 15,
},
helpLinkText: {
textAlign: 'center',
textAlign: "left",
},
});
import React from 'react';
import { 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 { MovieEntity } from "../store/ducks/movies/types";
import { buildExecutionContext } from "graphql/execution/execute";
interface UserRatingCardProps {
userRating: UserRating
userRating: UserRating;
}
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");
/**
* Movie Card component
* User Rating Card component
*/
const UserRatingCard = (props: UserRatingCardProps): JSX.Element => {
const { userRating } = props;
const { movie, rating, comment, date } = userRating;
const { userRating } = props;
const { movie, rating, comment, date } = userRating;
const [dimensions, setDimensions] = useState({ window, screen });
const iw = () => {
return dimensions.window.width / 2 - 20;
};
const ih = () => {
return (dimensions.window.width / 2 - 20) * (443 / 300);
};
useEffect(() => {
Dimensions.addEventListener("change", ({ window, screen }) => {
setDimensions({ window, screen });
});
}, []);
return (
<View style={styles.card} lightColor="#eee" darkColor="rgba(255,255,255,0.1)">
<View style={styles.image}>
<Image
source={{
uri: movie.poster,
}}
style={styles.poster}
resizeMode="contain"
/>
</View>
<View style={styles.cardInfo}>
<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.cardInfo, { maxWidth: iw() }]}>
<Text
style={styles.titleText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)"
>
{movie.title}
</Text>
<AirbnbRating
count={5}
defaultRating={rating}
......@@ -35,9 +64,20 @@ const UserRatingCard = (props: UserRatingCardProps): JSX.Element => {
isDisabled={true}
size={20}
/>
<Text style={styles.titleText} lightColor="rgba(0,0,0,0.8)" darkColor="rgba(255,255,255,0.8)">{movie.title}</Text>
<Text style={styles.comment} lightColor="rgba(0,0,0,0.7)" darkColor="rgba(255,255,255,0.7)">{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>
<Text
style={styles.comment}
lightColor="rgba(0,0,0,0.7)"
darkColor="rgba(255,255,255,0.7)"
>
{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>
</View>
</View>
);
......@@ -45,38 +85,40 @@ const UserRatingCard = (props: UserRatingCardProps): JSX.Element => {
const styles = StyleSheet.create({
poster: {
aspectRatio: 300 / 443,
borderRadius: 5
borderRadius: 5,
resizeMode: "contain",
maxWidth: 300,
},
card: {
borderRadius: 5,
textAlign: 'center',
flexDirection: 'row',
marginVertical: 10,
borderRadius: 10,
textAlign: "center",
flexDirection: "row",
flex: 4,
minWidth: Dimensions.get("screen").width - 20,
},
titleText: {
marginHorizontal: 10,
marginTop: 5,
fontSize: 18,
fontWeight: 'bold',
fontWeight: "bold",
textAlign: "center",
},
comment: {
marginHorizontal: 10,
marginTop: 10,
fontSize: 12,
},
date: {
marginHorizontal: 10,
fontSize: 12,
position: 'absolute',
bottom: 10,
left: 5
position: "absolute",
bottom: 5,
},
cardInfo: {
marginHorizontal: 10,
flex: 2,
textAlign: 'left',
textAlign: "left",
},
image: {
flex: 1,
minWidth: 150
minWidth: 150,
},
});
......
import * as React from 'react';
import { useEffect, useState } from 'react';
import { FlatList, 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 { 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 { useEffect, useState } from "react";
import { FlatList, 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 { 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();
......@@ -17,6 +17,7 @@ export default function UserRatings(): JSX.Element {
useEffect(() => {
if (auth.token) {
console.log(auth.token);
dispatch(getRatings({ token: auth.token }));
}
}, []);
......@@ -28,7 +29,13 @@ export default function UserRatings(): JSX.Element {
renderItem={({ item }) => <UserRatingCard userRating={item} />}
keyExtractor={(item) => item.movie.id}
showsVerticalScrollIndicator={false}
ItemSeparatorComponent={() => <View style={styles.separator} lightColor="#rgba(0,0,0,0.5)" darkColor="rgba(255,255,255,0.5)" />}
ItemSeparatorComponent={() => (
<View
style={styles.separator}
lightColor="#rgba(0,0,0,0.2)"
darkColor="rgba(255,255,255,0.2)"
/>
)}
/>
);
}
......@@ -36,7 +43,7 @@ export default function UserRatings(): JSX.Element {
const styles = StyleSheet.create({
movieList: {
padding: 5,
textAlign: 'center',
textAlign: "center",
},
item: {
padding: 5,
......@@ -44,12 +51,13 @@ const styles = StyleSheet.create({
},
title: {
fontSize: 20,
textAlign: 'left',
textAlign: "left",
paddingBottom: 10,
},
separator: {
marginVertical: 5,
marginVertical: 15,
height: 1,
width: '100%',
marginHorizontal: "10%",
width: "80%",
},
});
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as React from 'react';
import { useEffect } from 'react';
import { FlatList, StyleSheet } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import Login from '../components/LoginComponent';
import ProfileInfo from '../components/ProfileInfo';
import { Text, View } from '../components/Themed';
import UserRatings from '../components/UserRatings';
import { setToken } from '../store/ducks/auth/actions';
import { AuthState } from '../store/ducks/auth/types';
import { ApplicationState } from '../store/interface';
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as React from "react";
import { useEffect } from "react";
import { FlatList, StyleSheet } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import Login from "../components/LoginComponent";
import ProfileInfo from "../components/ProfileInfo";
import { Text, View } from "../components/Themed";
import UserRatings from "../components/UserRatings";
import { setToken } from "../store/ducks/auth/actions";
import { AuthState } from "../store/ducks/auth/types";
import { ApplicationState } from "../store/interface";
export default function Profile() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(setToken())
}, [])
dispatch(setToken());
}, []);
const auth: AuthState = useSelector(({ auth }: ApplicationState) => auth);
if (!auth.loggedIn) {
return (
......@@ -26,33 +25,37 @@ export default function Profile() {
<Login />
</View>
);
}
else if (auth.loggedIn && auth.user) {
} else if (auth.loggedIn && auth.user) {
return (
<View style={styles.container}>
<ProfileInfo user={auth.user} />
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<Text style={styles.title}>My Ratings</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<View style={styles.topInfo}>
<ProfileInfo user={auth.user} />
</View>
<UserRatings></UserRatings>
</View>
);
} else return;
} else return;
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignItems: "center",
justifyContent: "center",
},
topInfo: {
backgroundColor: "rgba(255,100,255,0.3)",
width: "100%",
},
title: {
fontSize: 30,
fontWeight: 'bold',
fontSize: 20,
fontWeight: "bold",
marginBottom: 10,
textAlign: "center",
},
separator: {
marginVertical: 20,
height: 1,
width: '80%',
width: "80%",
},
});
......@@ -36,7 +36,6 @@ export const signUp = (params: SignUpParams): ApolloClientAction =>
export const signOut = (): LocalAction => {
removeToken();
window.location.href = '/';
return action(AuthActionTypes.SIGN_OUT);
};
......
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