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

#21 Improved minHeight for dropdown and ux for movieDetail when not logged in

parent f5483290
import { useNavigation } from '@react-navigation/native';
import * as React from 'react'; import * as React from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { import {
...@@ -12,6 +13,7 @@ import { Button, Icon } from 'react-native-elements'; ...@@ -12,6 +13,7 @@ import { Button, Icon } from 'react-native-elements';
import { AirbnbRating } from 'react-native-ratings'; import { AirbnbRating } from 'react-native-ratings';
import { default as AwesomeIcon } from 'react-native-vector-icons/FontAwesome'; import { default as AwesomeIcon } from 'react-native-vector-icons/FontAwesome';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import Profile from '../screens/Profile';
import { rateMovie } from '../store/ducks/auth/actions'; import { rateMovie } from '../store/ducks/auth/actions';
import { clearMovie, fetchMovieById } from '../store/ducks/movies/actions'; import { clearMovie, fetchMovieById } from '../store/ducks/movies/actions';
import { ApplicationState } from '../store/interface'; import { ApplicationState } from '../store/interface';
...@@ -117,7 +119,8 @@ export default function MovieInfo({ movieID }: MovieInfoProps) { ...@@ -117,7 +119,8 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const data = useSelector(({ movies }: ApplicationState) => movies.byId); const data = useSelector(({ movies }: ApplicationState) => movies.byId);
const { ratings, token, loading, error } = useSelector((state: ApplicationState) => state.auth); const { ratings, token, loading, error, loggedIn } = useSelector((state: ApplicationState) => state.auth);
const navigation = useNavigation();
const [rateModalVisible, setRateModalVisible] = useState(false); const [rateModalVisible, setRateModalVisible] = useState(false);
const [awaitingRating, setAwaitingRating] = useState(false); const [awaitingRating, setAwaitingRating] = useState(false);
...@@ -259,19 +262,20 @@ export default function MovieInfo({ movieID }: MovieInfoProps) { ...@@ -259,19 +262,20 @@ export default function MovieInfo({ movieID }: MovieInfoProps) {
</View> </View>
</View> </View>
<View style={{ width: 150, marginBottom: 10 }}> <View style={{ maxWidth: 250, marginBottom: 10 }}>
<Button {loggedIn ? <Button
onPress={() => setRateModalVisible(true)} onPress={() => setRateModalVisible(true)}
title=' Give Rating' title=' Give Rating'
disabled={(() => { disabled={(() => {
return ratings.find((rating) => rating.movie.id === movieID) ? true : false; return ratings.find((rating) => rating.movie.id === movieID) ? true : false;
})()} })()}
icon={<AwesomeIcon name='star-o' size={24} color='white' />} icon={<AwesomeIcon name='star-o' size={24} color='white' />}
/> /> : <Button title="Log in to rate this movie" onPress={() => navigation.navigate("Profile")}/> }
</View> </View>
<Text style={[styles.titleText, { flexGrow: 0 }]}>Plot</Text> <Text style={[styles.titleText, { flexGrow: 0 }]}>Plot</Text>
<Seperator marginVertical={10} width='75%' curved /> <Seperator marginVertical={10} width='75%' curved />
<Text style={{ fontSize: 16, fontStyle: 'italic', textAlign: 'center' }}> <Text style={{ fontSize: 16, fontStyle: 'italic', textAlign: 'center' }}>
{data.movie.plot} {data.movie.plot}
......
...@@ -43,7 +43,7 @@ function SelectInput<T extends string>(props: IProps<T>) { ...@@ -43,7 +43,7 @@ function SelectInput<T extends string>(props: IProps<T>) {
dropdownStyle={{ dropdownStyle={{
backgroundColor: useThemeColor({}, 'component'), backgroundColor: useThemeColor({}, 'component'),
}} }}
rowStyle={{ borderColor: useThemeColor({}, 'border') }} rowStyle={{minHeight: 40, borderColor: useThemeColor({}, 'border') }}
rowTextStyle={[styles.text, { color: useThemeColor({}, 'inputText') }]} rowTextStyle={[styles.text, { color: useThemeColor({}, 'inputText') }]}
data={data} data={data}
onSelect={(selected) => dispatchValue(selected)} onSelect={(selected) => dispatchValue(selected)}
......
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