Skip to content

Commit c642afb

Browse files
GabrielRagonhaGabrielRagonha
authored
Merge pull request #1 from GabrielRagonha/development
What to watch v1
2 parents 640effd + 170fd3f commit c642afb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1873
-131
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ yarn-error.*
3131
*.pem
3232

3333
# local env files
34+
.env
3435
.env*.local
3536

3637
# typescript

‎app.json‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"expo": {
3-
"name": "WhatToWatch",
3+
"name": "What To Watch",
44
"slug": "WhatToWatch",
55
"version": "1.0.0",
66
"orientation": "portrait",
7-
"icon": "./assets/images/icon.png",
7+
"icon": "./src/assets/images/logo.png",
88
"scheme": "whattowatch",
99
"userInterfaceStyle": "automatic",
1010
"newArchEnabled": true,
@@ -14,23 +14,21 @@
1414
"android": {
1515
"adaptiveIcon": {
1616
"backgroundColor": "#E6F4FE",
17-
"foregroundImage": "./assets/images/android-icon-foreground.png",
18-
"backgroundImage": "./assets/images/android-icon-background.png",
19-
"monochromeImage": "./assets/images/android-icon-monochrome.png"
17+
"foregroundImage": "./src/assets/images/logo.png"
2018
},
2119
"edgeToEdgeEnabled": true,
2220
"predictiveBackGestureEnabled": false
2321
},
2422
"web": {
2523
"output": "static",
26-
"favicon": "./assets/images/favicon.png"
24+
"favicon": "./src/assets/images/logo.png"
2725
},
2826
"plugins": [
2927
"expo-router",
3028
[
3129
"expo-splash-screen",
3230
{
33-
"image": "./assets/images/splash-icon.png",
31+
"image": "./src/assets/images/logo.png",
3432
"imageWidth": 200,
3533
"resizeMode": "contain",
3634
"backgroundColor": "#ffffff",

‎app/(tabs)/_layout.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { icons } from "@/src/constants/icons";
2+
import { images } from "@/src/constants/images";
3+
import { Tabs } from "expo-router";
4+
import React from "react";
5+
import { Image, ImageBackground, Text, View } from "react-native";
6+
7+
const TabIcon = ({ focused, icon, title }: any) => {
8+
if (focused) {
9+
return (
10+
<ImageBackground
11+
source={images.highlight}
12+
className="flex flex-row w-full flex-1 min-w-[112px] min-h-16 mt-4 justify-center items-center rounded-full overflow-hidden"
13+
>
14+
<Image source={icon} tintColor={"#151312"} className="size-5" />
15+
<Text className="text-secondary text-base font-semibold ml-2">
16+
{title}
17+
</Text>
18+
</ImageBackground>
19+
);
20+
}
21+
22+
return (
23+
<View className="size-full justify-center items-center mt-4 rounded-full">
24+
<Image source={icon} tintColor={"#A8B5DB"} className="size-5" />
25+
</View>
26+
);
27+
};
28+
29+
const _layout = () => {
30+
return (
31+
<Tabs
32+
screenOptions={{
33+
tabBarShowLabel: false,
34+
tabBarItemStyle: {
35+
width: "100%",
36+
height: "100%",
37+
justifyContent: "center",
38+
alignItems: "center",
39+
},
40+
tabBarStyle: {
41+
backgroundColor: "#0F0D23",
42+
borderRadius: 50,
43+
marginHorizontal: 20,
44+
marginBottom: 36,
45+
height: 52,
46+
position: "absolute",
47+
overflow: "hidden",
48+
borderWidth: 1,
49+
borderColor: "#0F0D23",
50+
},
51+
}}
52+
>
53+
<Tabs.Screen
54+
name="index"
55+
options={{
56+
title: "Home",
57+
headerShown: false,
58+
tabBarIcon: ({ focused }) => (
59+
<TabIcon
60+
focused={focused}
61+
icon={icons.home}
62+
title="Home"
63+
/>
64+
),
65+
}}
66+
/>
67+
68+
<Tabs.Screen
69+
name="search"
70+
options={{
71+
title: "Busca",
72+
headerShown: false,
73+
tabBarIcon: ({ focused }) => (
74+
<TabIcon focused={focused} icon={icons.search} title="Busca" />
75+
),
76+
}}
77+
/>
78+
79+
<Tabs.Screen
80+
name="saved"
81+
options={{
82+
title: "Salvos",
83+
headerShown: false,
84+
tabBarIcon: ({ focused }) => (
85+
<TabIcon focused={focused} icon={icons.save} title="Salvos" />
86+
),
87+
}}
88+
/>
89+
90+
<Tabs.Screen
91+
name="profile"
92+
options={{
93+
title: "Perfil",
94+
headerShown: false,
95+
tabBarIcon: ({ focused }) => (
96+
<TabIcon focused={focused} icon={icons.person} title="Perfil" />
97+
),
98+
}}
99+
/>
100+
</Tabs>
101+
);
102+
};
103+
104+
export default _layout;

‎app/(tabs)/index.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import MovieCard from "@/src/components/MovieCard";
2+
import SearchBar from "@/src/components/SearchBar";
3+
import TrendingCard from "@/src/components/TrendingCard";
4+
import { icons } from "@/src/constants/icons";
5+
import { images } from "@/src/constants/images";
6+
import useFetch from "@/src/hooks/useFetch";
7+
import { FetchMovies } from "@/src/services/api";
8+
import { getTrendingMovies } from "@/src/services/appwrite";
9+
import { useRouter } from "expo-router";
10+
import React from "react";
11+
import {
12+
ActivityIndicator,
13+
FlatList,
14+
Image,
15+
ScrollView,
16+
Text,
17+
View,
18+
} from "react-native";
19+
20+
export default function Index() {
21+
const router = useRouter();
22+
23+
const {
24+
data: trendingMovies,
25+
loading: trendingLoading,
26+
error: trendingError,
27+
} = useFetch(getTrendingMovies);
28+
29+
const {
30+
data: movies,
31+
loading: moviesLoading,
32+
error: moviesError,
33+
} = useFetch(() =>
34+
FetchMovies({
35+
query: "",
36+
})
37+
);
38+
39+
return (
40+
<View className="flex-1 bg-primary">
41+
<Image source={images.bg} className="absolute w-full z-0" />
42+
43+
<ScrollView
44+
className="flex-1 px-5"
45+
showsVerticalScrollIndicator={false}
46+
contentContainerStyle={{ minHeight: "100%", paddingBottom: 10 }}
47+
>
48+
<Image source={icons.logo} className="w-12 h-10 mt-20 mb-5 mx-auto" />
49+
50+
{moviesLoading || trendingLoading ? (
51+
<ActivityIndicator
52+
size="large"
53+
color={"#0000FF"}
54+
className="mt-10 self-center"
55+
/>
56+
) : moviesError || trendingError ? (
57+
<Text>Erro: {moviesError?.message || trendingError?.message}</Text>
58+
) : (
59+
<View className="flex-1 mt-5">
60+
<SearchBar onPress={() => router.push("/search")} />
61+
62+
{trendingMovies && (
63+
<>
64+
<View className="mt-10">
65+
<Text className="text-lg text-white font-bold mb-3">
66+
Top Filmes
67+
</Text>
68+
</View>
69+
70+
<FlatList
71+
horizontal
72+
showsHorizontalScrollIndicator={false}
73+
ItemSeparatorComponent={() => <View className="w-4" />}
74+
className="mb-4 mt-3"
75+
data={trendingMovies}
76+
renderItem={({ item, index }) => (
77+
<TrendingCard movie={item} index={index} />
78+
)}
79+
keyExtractor={(item) => item.movie_id.toString()}
80+
/>
81+
</>
82+
)}
83+
84+
<>
85+
<Text className="text-lg text-white font-bold mt-5 mb-3">
86+
Lançamentos
87+
</Text>
88+
89+
<FlatList
90+
data={movies}
91+
renderItem={({ item }) => <MovieCard {...item} />}
92+
keyExtractor={(item) => item.id.toString()}
93+
numColumns={3}
94+
columnWrapperStyle={{
95+
justifyContent: "flex-start",
96+
gap: 20,
97+
paddingRight: 5,
98+
marginBottom: 10,
99+
}}
100+
className="mt-2 pb-32"
101+
scrollEnabled={false}
102+
/>
103+
</>
104+
</View>
105+
)}
106+
</ScrollView>
107+
</View>
108+
);
109+
}

‎app/(tabs)/profile.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { icons } from "@/src/constants/icons";
2+
import React from "react";
3+
import { Image, Text, View } from "react-native";
4+
5+
const Profile = () => {
6+
return (
7+
<View className="bg-primary flex-1 px-10">
8+
<View className="flex justify-center items-center flex-1 flex-col gap-5">
9+
<Image source={icons.person} className="size-10" tintColor={"#FFF"} />
10+
<Text className="text-gray-500 text-base">Perfil</Text>
11+
</View>
12+
</View>
13+
);
14+
};
15+
16+
export default Profile;

‎app/(tabs)/saved.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { icons } from "@/src/constants/icons";
2+
import React from "react";
3+
import { Image, Text, View } from "react-native";
4+
5+
const Saved = () => {
6+
return (
7+
<View className="bg-primary flex-1 px-10">
8+
<View className="flex justify-center items-center flex-1 flex-col gap-5">
9+
<Image source={icons.save} className="size-10" tintColor={"#FFF"} />
10+
<Text className="text-gray-500 text-base">Salvos</Text>
11+
</View>
12+
</View>
13+
);
14+
};
15+
16+
export default Saved;

0 commit comments

Comments
 (0)