diff --git a/prosjekt-4/api/axiosREST.ts b/prosjekt-4/api/axiosREST.ts
index 3c38c5db4098ec7c8deb6d4c6803f07dbbf6aed4..ab0ec104dead3bcc3de0f917c4c37d434f61d945 100644
--- a/prosjekt-4/api/axiosREST.ts
+++ b/prosjekt-4/api/axiosREST.ts
@@ -1,11 +1,17 @@
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;
diff --git a/prosjekt-4/components/App.tsx b/prosjekt-4/components/App.tsx
index 022fb79cf8d34bb45cb1e194bb371380140e03b9..a06003fdd6a4363b76df067745012f36958f7dfd 100644
--- 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 ;
+ }
+
return (
-
+
+
-
-
+
-
+
+
);
};
diff --git a/prosjekt-4/components/Header.tsx b/prosjekt-4/components/Header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f21a907047a8cfae5c25b686d0f7d9695b4502c
--- /dev/null
+++ b/prosjekt-4/components/Header.tsx
@@ -0,0 +1,23 @@
+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 (
+ <>
+
+
+ MovieDB
+
+
+
+
+ );
+};
+
+export default Header;
diff --git a/prosjekt-4/components/MovieCard.tsx b/prosjekt-4/components/MovieCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cd69e5554e16ae9554cedabd65dd272615d6f404
--- /dev/null
+++ b/prosjekt-4/components/MovieCard.tsx
@@ -0,0 +1,50 @@
+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 (
+
+
+
+
+
+
+ {props.title}
+
+
+
+ );
+};
+
+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;
diff --git a/prosjekt-4/components/SearchBar.tsx b/prosjekt-4/components/SearchBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f73f0bfe6e0248078724edfbaf7a9b1e795d0e9
--- /dev/null
+++ b/prosjekt-4/components/SearchBar.tsx
@@ -0,0 +1,15 @@
+import { Container, Icon, Input, Item, View } from 'native-base';
+import React from 'react';
+
+const SearchBar = () => {
+ return (
+ <>
+ -
+
+
+
+
+ );
+};
+
+export default SearchBar;
diff --git a/prosjekt-4/pages/BrowsePage.tsx b/prosjekt-4/pages/BrowsePage.tsx
index 3f1e642f42ef14ee8134904370c14b013a10ccd1..744cbe154dc6cd50f11e2ec12e85edf57341c2f3 100644
--- a/prosjekt-4/pages/BrowsePage.tsx
+++ b/prosjekt-4/pages/BrowsePage.tsx
@@ -1,11 +1,40 @@
-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
+
+ ));
+ const determineRender = () => {
+ return movieElements.length === 0 ? (
+ No movies could be found for those criteria :-(
+ ) : (
+
+ {movieElements}
+
+ );
+ };
+
+ useEffect(() => { // Does an initial search for all movies when page launches
+ dispatch(searchMovies(true));
+ }, []);
+
return (
-
- BrowsePage
-
+
+ {determineRender()}
+
);
};