Desafio Técnico Buildbox - Mobile

mobile/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

mobile/.env.example

@@ -0,0 +1 @@
+API_KEY

mobile/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+build

mobile/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "env": {
+      "browser": true,
+      "es2021": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+  },
+  "plugins": [
+      "@typescript-eslint",
+      "react",
+      "prettier"
+  ],
+  "rules": {
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

mobile/.gitignore

@@ -0,0 +1,21 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+.env
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

mobile/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+build
+dist

mobile/.prettierrc.json

@@ -0,0 +1,21 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": "*.ts",
+      "options": {
+        "parser": "typescript"
+      }
+    },
+    {
+      "files": "*.tsx",
+      "options": {
+        "parser": "typescript"
+      }
+    }
+  ]
+}

mobile/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

mobile/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "mobile",
+    "slug": "mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

mobile/app/+html.tsx

@@ -0,0 +1,42 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+import { type PropsWithChildren } from 'react';
+
+/**
+ * This file is web-only and used to configure the root HTML for every web page during static rendering.
+ * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
+ */
+export default function Root({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

mobile/app/HomeScreen/index.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { FlatList, TouchableOpacity } from 'react-native';
+import { ThemeProvider } from 'styled-components';
+import { Colors } from '@/constants/Colors';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { RootStackParamList } from '../navigation';
+import GradientOverlay from '@/components/GradientOverlay';
+import { CustomTextInput } from '@/components/TextInput';
+import api from '@/utils/api';
+
+import * as S from './styles';
+
+const lightTheme = Colors.light;
+const darkTheme = Colors.dark;
+
+type MovieProps = {
+  adult: boolean;
+  backdrop_path: string;
+  genre_ids: Array<number>;
+  id: number;
+  original_language: string;
+  original_title: string;
+  overview: string;
+  popularity: number;
+  poster_path: string;
+  release_date: Date;
+  title: string;
+  video: boolean;
+  vote_average: number;
+  vote_count: number;
+};
+
+export default function HomeScreen() {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [movies, setMovies] = useState<MovieProps[]>([]);
+  const [filteredMovies, setFilteredMovies] = useState<MovieProps[]>([]);
+  const [filterText, setFilterText] = useState('');
+  const imagePath = 'https://image.tmdb.org/t/p/w500';
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await api.get('');
+        setMovies(response.data.results);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    const filtered = movies.filter(movie =>
+      movie.title.toLowerCase().includes(filterText.toLowerCase()),
+    );
+    setFilteredMovies(filtered);
+  }, [filterText, movies]);
+
+  return (
+    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+      <S.View>
+        <S.HeaderContainer>
+          <S.FilterContainer>
+            <CustomTextInput
+              placeholder="Filtrar..."
+              onChangeText={setFilterText}
+            />
+            <S.SearchIcon name="search1" size={18} />
+          </S.FilterContainer>
+          <S.Container>
+            <S.ThemeView>
+              <TouchableOpacity onPress={() => setIsDarkTheme(!isDarkTheme)}>
+                {isDarkTheme ? (
+                  <S.SunButton name="sun" size={18} />
+                ) : (
+                  <S.MoonButton name="moon" size={18} />
+                )}
+              </TouchableOpacity>
+            </S.ThemeView>
+          </S.Container>
+        </S.HeaderContainer>
+        <FlatList
+          data={filteredMovies}
+          renderItem={({ item }) => (
+            <S.Card
+              onPress={() =>
+                navigation.navigate('InformationsScreen', {
+                  movie: item,
+                  isDarkTheme,
+                })
+              }
+            >
+              <S.ImageCard
+                source={
+                  item.poster_path
+                    ? { uri: `${imagePath}${item.poster_path}` }
+                    : undefined
+                }
+              >
+                <GradientOverlay />
+                <S.CardTitle>{item.title}</S.CardTitle>
+                <S.DescriptionCard>{item.overview}</S.DescriptionCard>
+              </S.ImageCard>
+            </S.Card>
+          )}
+          keyExtractor={item => item.id.toString()}
+          numColumns={2}
+          contentContainerStyle={{ padding: 12, gap: 26 }}
+          columnWrapperStyle={{ gap: 26 }}
+        />
+      </S.View>
+    </ThemeProvider>
+  );
+}