Added some more comments

- Added some small comments on our code

frontend/App.tsx

@@ -10,6 +10,7 @@ import Home from "./app/views/Home.component";
 import { MovieDetail } from "./app/views/MovieDetail.component";
 import { ReviewList } from "./app/views/ReviewList.component";
 
+// We use the navigator component to allow for easy navigation inside of our application.
 const Stack = createStackNavigator<StackParamList>();
 
 const App: React.FC = (): JSX.Element => {

frontend/app/api/index.ts

@@ -2,5 +2,5 @@ import axios from "axios";
 
 // You will need to set this to your ip address when running. This is the only variable that has to be changed.
 export default axios.create({
-  baseURL: "http://[2001:700:300:4100:597c:4fc9:563a:9e28]:3001",
+  baseURL: "http://192.168.0.62:3001",
 });

frontend/app/store/redux/store.ts

@@ -4,6 +4,13 @@ import { movieSlice } from "../slices/movieSlice";
 import { reviewSlice } from "../slices/reviewSlice";
 import { systemSlice } from "../slices/systemSlice";
 
+/**
+ * store contains the redux configuration and is a combination of all the states, actions and reducers made in slices.
+ * Access to following:
+ * @constructs movieSlice
+ * @constructs reviewSlice
+ * @constructs systemSlice
+ */
 export const store = configureStore({
   reducer: {
     movies: movieSlice.reducer,
@@ -12,6 +19,8 @@ export const store = configureStore({
   },
 });
 
+// We need to create a type for typescript.
 export type AppState = ReturnType<typeof store.getState>;
 
+// We export the dispatching of our store in order to effectively use it in our components.
 export const useAppDispatch = () => useDispatch<typeof store.dispatch>();

frontend/app/store/slices/movieSlice.ts

@@ -18,11 +18,13 @@ export interface Movie {
   rating: number;
 }
 
+// Type of the state found in the store
 type MovieState = {
   searchTerm: string;
   movies: Array<Movie>;
 };
 
+// Our slices, this is essentially a combination of our state, reducers and actions found in our store.
 export const movieSlice = createSlice({
   name: "movie-slice",
   initialState: {

frontend/app/store/slices/reviewSlice.ts

@@ -8,10 +8,12 @@ export interface Review {
   review: string;
 }
 
+// Type of the state found in the store
 type ReviewState = {
   reviews: Array<Review>;
 };
 
+// Our slices, this is essentially a combination of our state, reducers and actions found in our store.
 export const reviewSlice = createSlice({
   name: "review-slice",
   initialState: {

frontend/app/store/slices/systemSlice.ts

 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-// State user for pagination and other system variables
+// Base model for out system state
 export interface System {
   count: number;
 }
 
+// Type of the state found in the store
 type SystemState = {
   count: number;
 };
 
+// Our slices, this is essentially a combination of our state, reducers and actions found in our store.
 export const systemSlice = createSlice({
   name: "system-slice",
   initialState: {

frontend/app/views/Home.component.tsx

-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { View, FlatList, StyleSheet } from "react-native";
 import axios from "axios";
 
 import { AppState, useAppDispatch } from "../store/redux/store";
 import { SearchHandler } from "../components/SearchHandler.component";
 import { useSelector } from "react-redux";
-import { ListItem } from "react-native-elements";
 import api from "../api";
 import { Movie, movieSlice } from "../store/slices/movieSlice";
-import { systemSlice } from "../store/slices/systemSlice";
 import { MovieListItem } from "./MovieListItem.component";
-import { sys } from "typescript";
 
 const Home: React.FC = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -19,7 +16,9 @@ const Home: React.FC = (): JSX.Element => {
   const count = useSelector((state: AppState) => state.system.count);
   const [refreshing, setRefreshing] = useState(false);
 
-  // This does not work, dispatch is async, so we will have to rework pagination. The list works.
+  
+ // As it stands, this simply clear the movie page, implemented in case anything gets bugged.
+ // The intended use of this function doesn't really make sense in a movie DB 
   const refreshMovies = () => {
     setRefreshing(true);
     dispatch(movieSlice.actions.clearMovies());
@@ -42,8 +41,6 @@ const Home: React.FC = (): JSX.Element => {
       .catch((e) => console.log(e));
   };
 
-  // TODO: add useEffect to re-render on state change?
-
   return (
     <View style={styles.container}>
       <SearchHandler />

frontend/app/views/MovieDetail.component.tsx

@@ -22,8 +22,10 @@ const MovieDetail = (): JSX.Element => {
   const navigation = useNavigation<ReviewScreenNavigationProp>();
   const dispatch = useAppDispatch();
 
+  // We get the movie from the navigation component when a user clicks on it
   const { movie } = route.params;
 
+  // Fetch all the reviews for the movie
   const showReviews = async () => {
     axios
       .get(`${api.defaults.baseURL}/reviews/${movie.Column_1}`)