Merge branch 'browsepage' into 'master'

Create basic browsepage #8 See merge request !2

Merge branch 'browsepage' into 'master'
Create basic browsepage #8 See merge request !2
be7069f1 · Thor-Herman Van Eggelen · 797979f5 · c0042fe1 · be7069f1 · be7069f1
Commit be7069f1 authored Nov 11, 2020 by Thor-Herman Van Eggelen
--- a/prosjekt-4/api/axiosREST.ts
+++ b/prosjekt-4/api/axiosREST.ts
 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;

--- a/prosjekt-4/components/App.tsx
+++ b/prosjekt-4/components/App.tsx
@@ -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>
  );
 };


--- a/prosjekt-4/components/Header.tsx
+++ b/prosjekt-4/components/Header.tsx
+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;
--- a/prosjekt-4/components/MovieCard.tsx
+++ b/prosjekt-4/components/MovieCard.tsx
+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;
--- a/prosjekt-4/components/SearchBar.tsx
+++ b/prosjekt-4/components/SearchBar.tsx
+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;
--- a/prosjekt-4/pages/BrowsePage.tsx
+++ b/prosjekt-4/pages/BrowsePage.tsx
-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>
  );
 };