Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Basic single-item screen created and and root stack navigator
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React, { useMemo, useState } from "react"; | ||
| import { FlatList, View, TextInput } from "react-native"; | ||
| import { trpc } from "../utils/trpc"; | ||
| import ProductCard from "../components/ProductCard"; | ||
|
|
||
| function ItemListScreen() { | ||
| const { data } = trpc.item.all.useQuery(); | ||
|
|
||
| const [nameFilter, setNameFilter] = useState(""); | ||
|
|
||
| const filteredData = useMemo( | ||
| () => | ||
| data?.filter((item) => | ||
| item.name.toLowerCase().includes(nameFilter.toLocaleLowerCase()), | ||
| ) ?? [], | ||
| [nameFilter, data], | ||
| ); | ||
|
|
||
| return ( | ||
| <View className="flex-1 bg-gray-50 px-2"> | ||
| <TextInput | ||
| className="my-2 rounded border border-gray-200 bg-white py-1.5 pl-3 shadow-lg" | ||
| placeholder="Busca un Producto" | ||
| onChangeText={setNameFilter} | ||
| /> | ||
| <FlatList | ||
| data={filteredData} | ||
| renderItem={(item) => ( | ||
| <ProductCard item={item.item} key={item.item.id} /> | ||
| )} | ||
| ItemSeparatorComponent={() => <View className="mt-2.5" />} | ||
| ListFooterComponent={() => <View className="mt-2.5" />} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export default ItemListScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { StackScreenProps } from "@react-navigation/stack"; | ||
| import { MainNavigationStack, MainNavigationStackParams } from "../_app"; | ||
| import { ActivityIndicator, Image, Text, View } from "react-native"; | ||
| import { trpc } from "../utils/trpc"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import { useEffect } from "react"; | ||
|
|
||
| export type SingleItemScreenProps = StackScreenProps< | ||
| MainNavigationStackParams, | ||
| "SingleItemScreen" | ||
| >; | ||
|
|
||
| function SingleItemScreen({ route }: SingleItemScreenProps) { | ||
| const nav = useNavigation<MainNavigationStack>(); | ||
| const { data } = trpc.item.byId.useQuery({ id: route.params.id }); | ||
|
|
||
| useEffect(() => { | ||
| nav.setOptions({ title: data?.name ?? "Loading Item" }); | ||
| }, [data?.name]); | ||
|
|
||
| return ( | ||
| <View className="h-full bg-white px-2 pt-4"> | ||
| {data?.image_url ? ( | ||
| <Image | ||
| source={{ uri: data?.image_url }} | ||
| resizeMode="contain" | ||
| className="h-48 " | ||
| /> | ||
| ) : ( | ||
| <View className="margin-0 h-48 w-48 items-center justify-center self-center rounded border border-gray-200 bg-gray-50"> | ||
| <Text className="text-lg text-gray-500">No Image</Text> | ||
| </View> | ||
| )} | ||
|
|
||
| <View className="flex gap-1.5 pl-4 pt-2.5"> | ||
| <View> | ||
| <Text className="text-lg font-semibold"> | ||
| Price: | ||
| {data?.price ? ( | ||
| <Text className="font-normal"> C$ {data.price.toNumber()}</Text> | ||
| ) : ( | ||
| <Text className="text-base font-normal">Free</Text> | ||
| )} | ||
| </Text> | ||
| </View> | ||
| <View> | ||
| <Text className="text-lg font-semibold"> | ||
| Stock: | ||
| {data?.stock ? ( | ||
| <Text className="font-normal"> | ||
| {" "} | ||
| {data.stock.toNumber().toFixed(2)} | ||
| </Text> | ||
| ) : ( | ||
| <Text className="text-base font-normal">0.00</Text> | ||
| )} | ||
| </Text> | ||
| </View> | ||
| <View> | ||
| <Text className="text-lg font-semibold">Description:</Text> | ||
|
|
||
| {data?.description ? ( | ||
| <Text className="text-lg">{data?.description}</Text> | ||
| ) : ( | ||
| <Text className="text-lg text-gray-500"> | ||
| There is no description available | ||
| </Text> | ||
| )} | ||
| </View> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export default SingleItemScreen; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.