refactor(mobile): :art: using `expo-router` only

lehuygiang28 commented 2 weeks ago

Summary by Sourcery

Refactor the mobile application to use expo-router for navigation, replacing react-navigation and simplifying the navigation logic across multiple screens. Introduce a new app layout with a custom header and tab navigation, and enhance the movie episode component for better episode and server management.

New Features:

Introduce a new app layout using expo-router with a custom header and tab navigation for the mobile application.

Enhancements:

Refactor the movie details screen to use expo-router for navigation and local search parameters, simplifying the navigation logic.
Update the explore screen to use expo-router for navigation, removing the dependency on react-navigation.
Refactor the movie episode component to improve episode selection and server change handling, enhancing the user experience.

Summary by CodeRabbit

Release Notes

New Features
- Introduced a custom URL scheme for deep linking.
- Added a new TabsLayout component for a tabbed navigation interface.
- Implemented a new AppHeader component for improved navigation and search functionality.
Improvements
- Transitioned from React Navigation to Expo Router for navigation, enhancing performance and simplifying code.
- Streamlined episode selection and video playback logic in the MovieDetailsScreen.
Chores
- Removed outdated navigation dependencies from the project.
- Updated various package dependencies to their latest versions.
- Added a main entry point in the package configuration.

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vphim-fe	🛑 Canceled (Inspect)			Oct 2, 2024 10:52am
vphim-mnt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 2, 2024 10:52am

sourcery-ai[bot] commented 2 weeks ago

Reviewer's Guide by Sourcery

This pull request refactors the mobile app to use expo-router for navigation, replacing the previous React Navigation setup. The changes primarily affect the navigation structure, route handling, and some component implementations to align with the new routing system.

Sequence Diagram

sequenceDiagram
    participant User
    participant AppLayout
    participant TabsLayout
    participant HomeScreen
    participant ExploreScreen
    participant MovieDetailsScreen

    User->>AppLayout: Opens app
    AppLayout->>TabsLayout: Renders tabs
    TabsLayout->>HomeScreen: Navigates to Home
    User->>HomeScreen: Selects a movie
    HomeScreen->>MovieDetailsScreen: router.push('/movie/[slug]')
    User->>TabsLayout: Switches to Explore tab
    TabsLayout->>ExploreScreen: Renders Explore screen
    User->>ExploreScreen: Performs search
    ExploreScreen->>MovieDetailsScreen: router.push('/movie/[slug]')

File-Level Changes

Change	Details	Files
Replaced React Navigation with expo-router for app navigation	Removed React Navigation related imports and types Replaced useNavigation and useRoute hooks with expo-router's useRouter and useLocalSearchParams Updated navigation calls to use router.push instead of navigation.navigate Implemented new _layout.tsx files for defining the app's navigation structure	`apps/mobile/src/app/(tabs)/index.tsx` `apps/mobile/src/app/(tabs)/explore.tsx` `apps/mobile/src/app/movie/[slug].tsx` `apps/mobile/src/app/_layout.tsx` `apps/mobile/src/app/(tabs)/_layout.tsx`
Refactored MovieDetailsScreen component to use expo-router	Replaced route.params with useLocalSearchParams for accessing route parameters Removed navigation prop and related navigation calls Simplified state management and episode selection logic	`apps/mobile/src/app/movie/[slug].tsx`
Updated MovieEpisode component to improve episode and server selection	Simplified props interface Improved episode selection logic Enhanced server change handling	`apps/mobile/src/components/movie-episode.tsx`
Created new AppHeader component for consistent header across the app	Implemented a reusable header component with logo and search functionality Integrated the new AppHeader in the tab layout	`apps/mobile/src/components/app-header.tsx` `apps/mobile/src/app/(tabs)/_layout.tsx`
Updated app configuration to support expo-router	Added 'scheme' property to app.json for deep linking support	`apps/mobile/app.json`

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

coderabbitai[bot] commented 2 weeks ago

Walkthrough

The changes introduce a new URL scheme for deep linking in the mobile application, transition navigation from React Navigation to Expo Router, and implement a tabbed navigation layout. Several components have been added or modified to accommodate these changes, including the creation of a new TabsLayout and AppHeader components. Dependencies related to React Navigation have been removed from the project, and various files have been updated to streamline navigation and state management.

Changes

File Path	Change Summary
`apps/mobile/app.json`	Added a new property `"scheme": "vephim"` to the `expo` configuration for deep linking.
`apps/mobile/index.js`	Commented out import statements and the call to `registerRootComponent`, replaced with an import for `expo-router/entry`.
`apps/mobile/package.json`	Removed navigation dependencies (`@react-navigation/drawer`, `@react-navigation/native`, `@react-navigation/bottom-tabs`, `@react-navigation/native-stack`), and added `"main": "index.js"` entry point.
`apps/mobile/src/app/(tabs)/_layout.tsx`	Introduced `TabsLayout` component for tabbed navigation, defining layout and behavior for the tab bar with custom theming.
`apps/mobile/src/app/(tabs)/explore.tsx`	Updated navigation logic to use `expo-router`, simplifying state management and removing unnecessary hooks.
`apps/mobile/src/app/(tabs)/index.tsx`	Transitioned navigation from React Navigation to Expo Router, removing related type definitions.
`apps/mobile/src/app/_layout.tsx`	Added `AppLayout` component as the main layout for the application, integrating various providers and defining routing structure.
`apps/mobile/src/app/index.tsx`	Deleted the file containing the main application logic using React Navigation.
`apps/mobile/src/app/movie/[slug].tsx`	Refactored episode selection and playback logic, simplifying state management and error handling.
`apps/mobile/src/components/app-header.tsx`	Introduced `AppHeader` component for consistent navigation and search functionality, utilizing `react-native-paper` components.
`apps/mobile/src/components/movie-episode.tsx`	Updated `MovieEpisode` component props and internal logic for better state management and episode selection.
`package.json`	Updated dependency versions and removed navigation-related dependencies.

Suggested labels

mobile

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

lehuygiang28 / vphim