Add comments and remove imports #14 #15

prosjekt-4/components/App.tsx

 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,

prosjekt-4/components/FilterList.tsx

 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) => (

prosjekt-4/components/MovieCard.tsx

-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';

prosjekt-4/components/OrderingPicker.tsx

 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

prosjekt-4/components/PaginationButton.tsx

@@ -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

prosjekt-4/components/SearchBar.tsx

-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';
 
 

prosjekt-4/pages/BrowsePage.tsx

 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);

prosjekt-4/pages/FilterPage.tsx

-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 (

prosjekt-4/pages/MoviePage.tsx

@@ -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