Commit be7069f1 authored by Thor-Herman Van Eggelen's avatar Thor-Herman Van Eggelen
Browse files

Merge branch 'browsepage' into 'master'

Create basic browsepage #8

See merge request !2
parents 797979f5 c0042fe1
import axios from 'axios';
const prod = {
import Constants from "expo-constants";
const { manifest } = Constants;
// This gets the IP address of the host for Expo client. Makes you connect to the IP address of the machine on LAN
const url = `http://${manifest.debuggerHost.split(':').shift()}:8000`;
const prod = { // The VM backend
url: 'http://it2810-75.idi.ntnu.no:8000',
};
const dev = {
url: 'http://127.0.0.1:8000',
// url: 'http://localhost:8000',
const dev = { // Local backend
url,
};
export const config = process.env.NODE_ENV === 'development' ? dev : prod;
......
......@@ -4,16 +4,32 @@ import LandingPage from '../pages/LandingPage';
import MoviePage from '../pages/MoviePage';
import React from 'react';
import { View } from 'react-native';
import { useFonts } from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { Container, Footer, Icon, Input, Item, Left, Text } from 'native-base';
import SearchBar from './SearchBar';
import Header from './Header';
const App = () => {
let [fontsLoaded] = useFonts({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
if (!fontsLoaded) {
return <View></View>;
}
return (
<View>
<Container>
<Header />
<Switch>
<Route exact path='/' component={LandingPage} />
<Route path='/browse' component={BrowsePage} />
<Route exact path='/' component={BrowsePage} />
<Route path='/movie/:movieId' component={MoviePage} />
</Switch>
</View>
<Footer />
</Container>
);
};
......
import { Header as NBHeader } from 'native-base';
import { Text, View } from 'react-native';
import React from 'react';
import SearchBar from './SearchBar';
import { Link } from 'react-router-native';
const Header = () => {
return (
<>
<NBHeader searchBar rounded>
<Link
to={'/'}
style={{ paddingRight: 5, flex: 1, justifyContent: 'center' }}
>
<Text>MovieDB</Text>
</Link>
<SearchBar />
</NBHeader>
</>
);
};
export default Header;
import { Body, Card, H2, CardItem, View } from 'native-base';
import { Image, StyleSheet } from 'react-native';
import React from 'react';
import { Link } from 'react-router-native';
type Props = {
id: number;
title: string;
image: string;
};
const MovieCard = (props: Props) => {
return (
<Link to={`/movie/${props.id}`}>
<CardItem bordered style={styles.cardItem}>
<View style={styles.imageView}>
<Image source={{ uri: props.image }} style={styles.image} />
</View>
<Body style={styles.body}>
<H2>{props.title}</H2>
</Body>
</CardItem>
</Link>
);
};
const styles = StyleSheet.create({
cardItem: {
paddingLeft: 0,
paddingRight: 0,
paddingTop: 5,
paddingBottom: 5,
},
imageView: {
paddingLeft: 0,
paddingRight: 10,
margin: 0,
},
image: {
flex: 1,
width: 60,
height: 105,
resizeMode: 'contain',
},
body: {
paddingTop: 20,
},
});
export default MovieCard;
import { Container, Icon, Input, Item, View } from 'native-base';
import React from 'react';
const SearchBar = () => {
return (
<>
<Item style={{flex: 4}}>
<Icon name='search' />
<Input placeholder='Search for a movie...' />
</Item>
</>
);
};
export default SearchBar;
import React from 'react';
import { Card, Content } from 'native-base';
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { searchMovies } from '../actions';
import MovieCard from '../components/MovieCard';
import { RootState } from '../reducers';
const BrowsePage = () => {
const dispatch = useDispatch();
const movies = useSelector((state: RootState) => state.movies.byId);
const movieElements = Object.values(movies).map((movie) => ( // List of all the movies that returned from the search
<MovieCard
id={movie.id}
image={movie.image}
title={movie.title}
key={movie.id}
/>
));
const determineRender = () => {
return movieElements.length === 0 ? (
<Text>No movies could be found for those criteria :-(</Text>
) : (
<Card>
{movieElements}
</Card>
);
};
useEffect(() => { // Does an initial search for all movies when page launches
dispatch(searchMovies(true));
}, []);
return (
<View>
<Text>BrowsePage</Text>
</View>
<Content>
{determineRender()}
</Content>
);
};
......
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