# Project 4 - Documentation

In Project 4 we rewrite our frontend from [Project 3](https://gitlab.stud.idi.ntnu.no/it2810-h22/Team-24/project_3) to React Native.

## How to start the project

After cloning the project

1. Navigate into the _native_ folder
2. Run the following commands:

npm install
npx expo start

3. Download the expo go app on your mobile device
4. Scan the qr code that showed up in your terminal after running _npx expo start_
5. Now the app should be loading on your phone!

## React native
The app is written in Typescript and uses the React Native framework to support the app on iOS and Android. The framework allows us to develop using similar code to our previous React-based project, but render it natively as a mobile application.

### NativeBase
We have used the component library NativeBase to get prebuilt components and stylings. It makes the app more responsive and gives it a holistic presentation. It is similar to the Chakra library we have used previously, and helped us in the development of the app. We used it for scrollview, buttons, as well as styling components like flex, box, center, etc.

## Features

### Listview
The listview is mostly the same as our React-app. There we used Chakra-UIs built in accordion element. But nativebase did not have a built in accordion so we opted to use their box elemets to make a custom accordion.

Other than the implementation, the feature itself is the same:
The listview features an accordion where the titles are the titles of the movies. On expand our application fetches the object data for each movie. This results in some loadingtime, however we dont fetch data before we need it, which results in faster inital loading time. We decided on the use of a accordian, because it renders data vertically and the user can show/hide data as needed.
We also included a component which will be displayed if the search results in none movies.

### Searchbar

We decided to have the same design on our native app as in our webapp, this was due to time limitations. However we decided to remove the search button, and query a new search whenever a user changes the value in the searchfield. The design ended up looking much cleaner, and was more mobile friendly. We also changed the advanced search view from a drawer to a modal, as this also was more mobile friendly. One other change we had to implement was that our component library did not include a slider with two thumbs, so we changed the way a user filters on ratings from a slider to two number inputs.

### Pagination

In project 3 we used pages to handle a big dataset, however we saw it more fitting to use an infinite scollview in a app, due to screen size limitations. It was hard to fit a page selector into such a small screen. To achieve a scollview we decided to use a _load more_ button at the end of our list. This way we didnt have to check if a user was a the end of the list. When a user gets to the end of the list, he/she can click the button to load more movies. However when we implemented this the app refetched the whole query and the user ended up at the top of the list again. To prevent this we decided to segment the scollview into sections, so that a section is responsible for fetching an displaying its data. The section takes in a offset as a prop, and when the user clicks _load more_ a new section gets added to the list. This way a user only needs to fetch the new data, istead of new data and all the previous data.

### AddMovie

AddMovie is implemented by using [React Hook Form](https://docs.nativebase.io/3.1.x/react-hooks-forms) just as in Project 3. But using Nativebase components instead of Chakra UI components and a different DatePicker.

For the DatePicker component we use [React Native DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker#react-native-datetimepicker) which is rendered by the Controller-component and updates the release date state in React Hook Form on change. This component functions differently on Android and iOS. On Android the DateTimePicker is opened automatically when component is mounted, and it does not on iOS.

We handled this by rendering a Pressable on Android which opens DateTimePicker. Making changes in this updates the state and thus the text displayed in the Pressable. On iOS it is rendered normally without a Pressable for opening. We check whether the device is Android or not using `Platform.OS === "ios"` .

### Vote

The vote feature is implemented a bit differently from Project 3. Instead of toggling between displaying and not displaying the stars, we chose to open the stars as a modal. This makes more sense on a mobile device as the component is easier to interact with when it is bigger.

The star rating component used is [React Native Ratings](https://github.com/Monte9/react-native-ratings#readme). The user can then rate the movies on a scale from 0-5 stars where 1 star is 2 points on a scale from 0-10. Interacting with the stars will update the rating state. When the user presses `Submit rating` the voteMovie mutation is sent to the backend and updates the rating for the movie. The data is then refetched to display the newly computed rating.

The VoteMovie component receives the setShowModal function as a prop from VoteMovieModal so that when `Submit rating` is pressed, the modal closes.

### Darkmode

Darkmode on the app is made possible through the use of the useColorMode() hook from NativeBase. Some of the NativeBase components have dark mode themes already implemented, but others have custom coloring attributes based on the state of colorMode. The dark mode button itself is located in the top right corner of the app to make it easily accessible.