Commit d1661799 authored by Thor-Herman's avatar Thor-Herman
Browse files

Add comments and remove imports #14 #15

parent 68104783
import BrowsePage from '../pages/BrowsePage';
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';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import FilterPage from '../pages/FilterPage';
export type StackParamList = {
export type StackParamList = { // The parameters for each screen
Browse: undefined;
Movie: { id: number };
Filter: undefined,
};
const Stack = createStackNavigator<StackParamList>();
const Stack = createStackNavigator<StackParamList>(); // For navigating screens
const App = () => {
let [fontsLoaded] = useFonts({
let [fontsLoaded] = useFonts({ // Fonts used by Native Base
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
......
import _ from "lodash";
import { List, ListItem, CheckBox, Body, Item } from "native-base";
import React, { useState } from "react";
import { List, ListItem, CheckBox, Body} from "native-base";
import React from "react";
import { Text } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { changeFilters } from "../actions";
import { RootState } from "../reducers";
import { FilterState, Genres } from "../types/filter";
import { Genres } from "../types/filter";
const genres: Array<Genres> = [
"Action",
......@@ -16,12 +16,14 @@ const genres: Array<Genres> = [
"Horror",
];
// Shows the available genres you can filter by
const FilterList = () => {
const checkedGenres: Record<Genres, boolean> = useSelector((state: RootState) => state.filtering.filter.genres);
const dispatch = useDispatch()
const onPress = (genre: Genres) => {
const checked = checkedGenres[genre];
dispatch(changeFilters({...checkedGenres, [genre]: !checked, to: "", from: ""}));
dispatch(changeFilters({...checkedGenres, [genre]: !checked, to: "", from: ""})); // TODO: Change
};
const filterItems = genres.map((genre) => (
......
import { Body, Card, H2, CardItem, View, Text } from 'native-base';
import { Body, H2, CardItem, View } from 'native-base';
import { Image, StyleSheet } from 'react-native';
import React from 'react';
import { TouchableNativeFeedback } from 'react-native-gesture-handler';
......
import _ from 'lodash';
import { Item, Label, Picker, Icon, Text } from 'native-base';
import React, { useState } from 'react';
import { Platform, StyleSheet } from 'react-native';
import { Item, Picker, Icon, Text } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { changeOrdering } from '../actions';
import { RootState } from '../reducers';
import { OrderingActionPayload, OrderingOptions } from '../types/ordering';
import { OrderingOptions } from '../types/ordering';
const orderingOptions = [
// The available sorting options
......
......@@ -5,6 +5,7 @@ import React from 'react';
import { View } from 'react-native';
import { RootState } from '../reducers';
// Button which allows you to show more results on a search
const PaginationButton = () => {
const dispatch = useDispatch();
const current = useSelector((state: RootState) => state.page.current); // The current page
......
import { Container, Icon, Input, Item, View } from 'native-base';
import React, { Props, useEffect } from 'react';
import { Icon, Input, Item } from 'native-base';
import React from 'react';
import { NativeSyntheticEvent, TextInputChangeEventData, TextInputSubmitEditingEventData } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { searchMovieTitles, searchMovies } from '../actions';
......
import { StackNavigationProp } from "@react-navigation/stack";
import { Button, Card, Content } from "native-base";
import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Card, Content } from "native-base";
import React, { useEffect } from "react";
import { Text } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { searchMovies } from "../actions";
import { StackParamList } from "../components/App";
import MovieCard from "../components/MovieCard";
import PaginationButton from "../components/PaginationButton";
import Search from "../components/Search";
import SearchBar from "../components/SearchBar";
import { selectMoviesByAllIdsOrdering } from "../selectors/movieSelector";
type BrowseScreenNavigationProp = StackNavigationProp<StackParamList, "Browse">;
......@@ -16,6 +15,7 @@ export type BrowseScreenProps = {
navigation: BrowseScreenNavigationProp;
};
// Main page. Displays different movies and the search bar
const BrowsePage = ({ navigation }: BrowseScreenProps) => {
const dispatch = useDispatch();
const movies = useSelector(selectMoviesByAllIdsOrdering);
......
import React, { useState } from 'react';
import React from 'react';
import {
Button,
Form,
Icon,
Item,
Label,
Picker,
Text,
View,
} from 'native-base';
import { StackParamList } from '../components/App';
import { StackNavigationProp } from '@react-navigation/stack';
import { Genres } from '../types/filter';
import _ from 'lodash';
import FilterList from '../components/FilterList';
import OrderingPicker from '../components/OrderingPicker';
import { StyleSheet } from 'react-native';
import { useDispatch } from 'react-redux';
import { applyFilter, searchMovies } from '../actions';
import { searchMovies } from '../actions';
type FilterScreenNavigationProp = StackNavigationProp<StackParamList, 'Filter'>;
type Props = {
navigation: FilterScreenNavigationProp;
};
// Shows the different available filter options in its own page
const FilterPage = ({ navigation }: Props) => {
const dispatch = useDispatch();
return (
......
......@@ -15,7 +15,6 @@ type Props = {
};
// Detailed page about a movie
const MoviePage = ({ route }: Props) => {
const movie: Movie = useSelector(
(state: RootState) => state.movies.byId[route.params.id] // Retrieves the current movie based on the navigation id
......
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