From 763256d26f113caec5aed1847bdcd2d47eeea21b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Berente?= <30603208+berenteb@users.noreply.github.com> Date: Wed, 24 Jan 2024 17:45:06 +0100 Subject: [PATCH 1/2] feat: event details page --- app/(tabs)/_layout.tsx | 62 +++++++++++++++++++ app/(tabs)/home.tsx | 19 ++++++ app/(tabs)/map.tsx | 12 ++++ app/(tabs)/schedule/_layout.tsx | 19 ++++++ app/(tabs)/schedule/details.tsx | 14 +++++ .../schedule/index.tsx} | 8 +-- app/_layout.tsx | 61 ++---------------- app/index.tsx | 20 +----- app/map.tsx | 12 ---- components/schedule/schedule-details-page.tsx | 29 +++++++++ components/schedule/schedule-item.tsx | 7 +++ hooks/use-schedule-item.ts | 7 +++ hooks/use-schedule.ts | 2 +- mocks/schedules.ts | 4 ++ types/schedule-event.type.ts | 1 + 15 files changed, 187 insertions(+), 90 deletions(-) create mode 100644 app/(tabs)/_layout.tsx create mode 100644 app/(tabs)/home.tsx create mode 100644 app/(tabs)/map.tsx create mode 100644 app/(tabs)/schedule/_layout.tsx create mode 100644 app/(tabs)/schedule/details.tsx rename app/{schedule.tsx => (tabs)/schedule/index.tsx} (52%) delete mode 100644 app/map.tsx create mode 100644 components/schedule/schedule-details-page.tsx create mode 100644 hooks/use-schedule-item.ts diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx new file mode 100644 index 0000000..61d58c2 --- /dev/null +++ b/app/(tabs)/_layout.tsx @@ -0,0 +1,62 @@ +import { Tabs } from 'expo-router'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +import { TabbarBackground } from '../../components/tabbar/tabbar-background'; +import { TabbarIcon } from '../../components/tabbar/tabbar-icon'; +import { TabbarLabel } from '../../components/tabbar/tabbar-label'; +import { colors } from '../../theme/colors'; + +export default function TabsLayout() { + const { top, bottom, left, right } = useSafeAreaInsets(); + return ( + + , + }} + /> + , + }} + /> + , + }} + /> + + ); +} diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx new file mode 100644 index 0000000..bdda859 --- /dev/null +++ b/app/(tabs)/home.tsx @@ -0,0 +1,19 @@ +import { Header } from '../../components/common/header'; +import { Title } from '../../components/common/title'; +import { ScheduleList } from '../../components/schedule/schedule-list'; +import { useSchedule } from '../../hooks/use-schedule'; + +interface HomePageProps {} + +export default function HomePage({}: HomePageProps) { + const { data } = useSchedule(); + + return ( + <> +
+ Simonyi Konferencia +
+ + + ); +} diff --git a/app/(tabs)/map.tsx b/app/(tabs)/map.tsx new file mode 100644 index 0000000..a2f69e9 --- /dev/null +++ b/app/(tabs)/map.tsx @@ -0,0 +1,12 @@ +import { Header } from '../../components/common/header'; +import { Title } from '../../components/common/title'; + +interface MapPageProps {} + +export default function MapPage({}: MapPageProps) { + return ( +
+ Térkép +
+ ); +} diff --git a/app/(tabs)/schedule/_layout.tsx b/app/(tabs)/schedule/_layout.tsx new file mode 100644 index 0000000..fc0744e --- /dev/null +++ b/app/(tabs)/schedule/_layout.tsx @@ -0,0 +1,19 @@ +import { Stack } from 'expo-router'; + +export default function ScheduleStackLayout() { + return ( + + + + + ); +} diff --git a/app/(tabs)/schedule/details.tsx b/app/(tabs)/schedule/details.tsx new file mode 100644 index 0000000..311b809 --- /dev/null +++ b/app/(tabs)/schedule/details.tsx @@ -0,0 +1,14 @@ +import { useLocalSearchParams } from 'expo-router'; +import { View } from 'react-native'; + +import { ScheduleDetailsPage } from '../../../components/schedule/schedule-details-page'; + +export default function ScheduleEventDetails() { + const { id } = useLocalSearchParams(); + const safeId = Array.isArray(id) ? id[0] : id ?? ''; + return ( + + + + ); +} diff --git a/app/schedule.tsx b/app/(tabs)/schedule/index.tsx similarity index 52% rename from app/schedule.tsx rename to app/(tabs)/schedule/index.tsx index e972b91..fd78f21 100644 --- a/app/schedule.tsx +++ b/app/(tabs)/schedule/index.tsx @@ -1,7 +1,7 @@ -import { Header } from '../components/common/header'; -import { Title } from '../components/common/title'; -import { ScheduleList } from '../components/schedule/schedule-list'; -import { useSchedule } from '../hooks/use-schedule'; +import { Header } from '../../../components/common/header'; +import { Title } from '../../../components/common/title'; +import { ScheduleList } from '../../../components/schedule/schedule-list'; +import { useSchedule } from '../../../hooks/use-schedule'; interface SchedulePageProps {} diff --git a/app/_layout.tsx b/app/_layout.tsx index 5827135..ed2c674 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,18 +1,12 @@ import { QueryClientProvider } from '@tanstack/react-query'; import { useFonts } from 'expo-font'; -import { SplashScreen, Tabs } from 'expo-router'; +import { Slot, SplashScreen } from 'expo-router'; import { useEffect } from 'react'; -import { Platform, SafeAreaView } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { View } from 'react-native'; -import { TabbarBackground } from '../components/tabbar/tabbar-background'; -import { TabbarIcon } from '../components/tabbar/tabbar-icon'; -import { TabbarLabel } from '../components/tabbar/tabbar-label'; import { queryClient } from '../config/query-client.config'; -import { colors } from '../theme/colors'; export default function MainLayout() { - const { top, bottom } = useSafeAreaInsets(); const [loaded, error] = useFonts({ Raleway: require('../assets/fonts/Raleway-Regular.ttf'), RalewayBold: require('../assets/fonts/Raleway-Bold.ttf'), @@ -31,54 +25,9 @@ export default function MainLayout() { return ( - - - , - }} - /> - , - }} - /> - , - }} - /> - - + + + ); } diff --git a/app/index.tsx b/app/index.tsx index d6c1e72..08e445b 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,19 +1,5 @@ -import { Header } from '../components/common/header'; -import { Title } from '../components/common/title'; -import { ScheduleList } from '../components/schedule/schedule-list'; -import { useSchedule } from '../hooks/use-schedule'; +import { Redirect } from 'expo-router'; -interface HomePageProps {} - -export default function HomePage({}: HomePageProps) { - const { data } = useSchedule(); - - return ( - <> -
- Simonyi Konferencia -
- - - ); +export default function App() { + return ; } diff --git a/app/map.tsx b/app/map.tsx deleted file mode 100644 index a0e91c5..0000000 --- a/app/map.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Header } from '../components/common/header'; -import { Title } from '../components/common/title'; - -interface MapPageProps {} - -export default function MapPage({}: MapPageProps) { - return ( -
- Programterv -
- ); -} diff --git a/components/schedule/schedule-details-page.tsx b/components/schedule/schedule-details-page.tsx new file mode 100644 index 0000000..550d417 --- /dev/null +++ b/components/schedule/schedule-details-page.tsx @@ -0,0 +1,29 @@ +import { format } from 'date-fns'; + +import { useScheduleItem } from '../../hooks/use-schedule-item'; +import { StyledText } from '../base/text'; +import { Header } from '../common/header'; +import { Subtitle } from '../common/subtitle'; +import { Title } from '../common/title'; + +interface ScheduleDetailsPageProps { + id: string; +} + +export function ScheduleDetailsPage({ id }: ScheduleDetailsPageProps) { + const { data } = useScheduleItem(id); + if (!data) return <>; + const startDate = format(new Date(data.start), 'HH:mm'); + const endDate = format(new Date(data.end), 'HH:mm'); + return ( + <> +
+ {data?.title} + + {data?.location} • {startDate} - {endDate} + +
+ {data?.description} + + ); +} diff --git a/components/schedule/schedule-item.tsx b/components/schedule/schedule-item.tsx index dd02322..4bdb7c2 100644 --- a/components/schedule/schedule-item.tsx +++ b/components/schedule/schedule-item.tsx @@ -1,4 +1,5 @@ import { format } from 'date-fns'; +import { useRouter } from 'expo-router'; import { useState } from 'react'; import { Image, Pressable, View } from 'react-native'; @@ -13,12 +14,18 @@ interface ScheduleItem { } export function ScheduleItem({ event }: ScheduleItem) { + const router = useRouter(); const [isPressed, setIsPressed] = useState(false); const startTime = format(new Date(event.start), 'HH:mm'); const endTime = format(new Date(event.end), 'HH:mm'); const isPast = isScheduleEventPast(event); + const onPress = () => { + router.push({ pathname: 'schedule' }); + router.push({ pathname: 'schedule/details', params: { id: event.id } }); + }; return ( setIsPressed(true)} onPressOut={() => setIsPressed(false)} className={cn('mb-5 rounded-xl bg-white flex-row p-3 items-center shadow-md shadow-slate-500/10', { diff --git a/hooks/use-schedule-item.ts b/hooks/use-schedule-item.ts new file mode 100644 index 0000000..bd5fc03 --- /dev/null +++ b/hooks/use-schedule-item.ts @@ -0,0 +1,7 @@ +import { useSchedule } from './use-schedule'; + +export function useScheduleItem(id: string) { + const { data, ...rest } = useSchedule(); + const item = data?.find((item) => item.id === id); + return { data: item, ...rest }; +} diff --git a/hooks/use-schedule.ts b/hooks/use-schedule.ts index a503068..538bf5e 100644 --- a/hooks/use-schedule.ts +++ b/hooks/use-schedule.ts @@ -10,7 +10,7 @@ export function useSchedule() { }); } -const delay = 2000; +const delay = 0; function getSchedule(): Promise { return new Promise((resolve) => { diff --git a/mocks/schedules.ts b/mocks/schedules.ts index 86fa201..f4f6a12 100644 --- a/mocks/schedules.ts +++ b/mocks/schedules.ts @@ -4,6 +4,7 @@ import { ScheduleEvent } from '../types/schedule-event.type'; export const schedule: ScheduleEvent[] = [ { + id: '1', title: 'Korábbi esemény valamilyen hosszú címmel', presenter: 'Valamilyen Előadó Hosszú Névvel Ráadásul', presenterImage: 'https://picsum.photos/200', @@ -14,6 +15,7 @@ export const schedule: ScheduleEvent[] = [ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget aliquam ultrices, nunc nisl aliquet nunc, vitae aliquam nisl', }, { + id: '2', title: 'Jelenlegi esemény valamilyen hosszú címmel', presenter: 'Valamilyen Előadó Hosszú Névvel Ráadásul', presenterImage: 'https://picsum.photos/200', @@ -24,6 +26,7 @@ export const schedule: ScheduleEvent[] = [ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget aliquam ultrices, nunc nisl aliquet nunc, vitae aliquam nisl', }, { + id: '3', title: 'Következő esemény valamilyen hosszú címmel', presenter: 'Valamilyen Előadó Hosszú Névvel Ráadásul', presenterImage: 'https://picsum.photos/200', @@ -34,6 +37,7 @@ export const schedule: ScheduleEvent[] = [ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, nisl eget aliquam ultrices, nunc nisl aliquet nunc, vitae aliquam nisl', }, { + id: '4', title: 'Későbbi esemény valamilyen hosszú címmel', presenter: 'Valamilyen Előadó Hosszú Névvel Ráadásul', presenterImage: 'https://picsum.photos/200', diff --git a/types/schedule-event.type.ts b/types/schedule-event.type.ts index 1e0f16c..e22c332 100644 --- a/types/schedule-event.type.ts +++ b/types/schedule-event.type.ts @@ -1,4 +1,5 @@ export type ScheduleEvent = { + id: string; title: string; description: string; location: string; From 0e7f2ee0d6183458e02511a89a9f6e3757d0a8ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Berente?= <30603208+berenteb@users.noreply.github.com> Date: Wed, 24 Jan 2024 20:44:39 +0100 Subject: [PATCH 2/2] fix: navigation with stack and tabs --- app/(tabs)/_layout.tsx | 1 - app/(tabs)/home.tsx | 19 ------------------ app/(tabs)/home/_layout.tsx | 11 ++++++++++ app/(tabs)/home/index.tsx | 20 +++++++++++++++++++ app/(tabs)/home/schedule-details.tsx | 7 +++++++ app/(tabs)/map.tsx | 9 ++++++--- app/(tabs)/schedule/_layout.tsx | 10 +--------- app/(tabs)/schedule/details.tsx | 14 ------------- app/(tabs)/schedule/index.tsx | 5 +++-- app/(tabs)/schedule/schedule-details.tsx | 7 +++++++ components/base/screen.tsx | 7 +++++++ components/schedule/schedule-details-page.tsx | 5 +++-- components/schedule/schedule-item.tsx | 8 ++++---- utils/common.utils.ts | 6 ++++++ 14 files changed, 75 insertions(+), 54 deletions(-) delete mode 100644 app/(tabs)/home.tsx create mode 100644 app/(tabs)/home/_layout.tsx create mode 100644 app/(tabs)/home/index.tsx create mode 100644 app/(tabs)/home/schedule-details.tsx delete mode 100644 app/(tabs)/schedule/details.tsx create mode 100644 app/(tabs)/schedule/schedule-details.tsx create mode 100644 components/base/screen.tsx diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 61d58c2..5ef9ce7 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -19,7 +19,6 @@ export default function TabsLayout() { paddingRight: right, }} screenOptions={{ - unmountOnBlur: true, headerShown: false, tabBarActiveTintColor: colors.primary['500'], tabBarLabel: TabbarLabel, diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx deleted file mode 100644 index bdda859..0000000 --- a/app/(tabs)/home.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Header } from '../../components/common/header'; -import { Title } from '../../components/common/title'; -import { ScheduleList } from '../../components/schedule/schedule-list'; -import { useSchedule } from '../../hooks/use-schedule'; - -interface HomePageProps {} - -export default function HomePage({}: HomePageProps) { - const { data } = useSchedule(); - - return ( - <> -
- Simonyi Konferencia -
- - - ); -} diff --git a/app/(tabs)/home/_layout.tsx b/app/(tabs)/home/_layout.tsx new file mode 100644 index 0000000..de99ea3 --- /dev/null +++ b/app/(tabs)/home/_layout.tsx @@ -0,0 +1,11 @@ +import { Stack } from 'expo-router'; + +export default function HomeStackLayout() { + return ( + + ); +} diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx new file mode 100644 index 0000000..205d6f8 --- /dev/null +++ b/app/(tabs)/home/index.tsx @@ -0,0 +1,20 @@ +import { Screen } from '../../../components/base/screen'; +import { Header } from '../../../components/common/header'; +import { Title } from '../../../components/common/title'; +import { ScheduleList } from '../../../components/schedule/schedule-list'; +import { useSchedule } from '../../../hooks/use-schedule'; + +interface HomePageProps {} + +export default function HomePage({}: HomePageProps) { + const { data } = useSchedule(); + + return ( + +
+ Simonyi Konferencia +
+ +
+ ); +} diff --git a/app/(tabs)/home/schedule-details.tsx b/app/(tabs)/home/schedule-details.tsx new file mode 100644 index 0000000..7bb3a5e --- /dev/null +++ b/app/(tabs)/home/schedule-details.tsx @@ -0,0 +1,7 @@ +import { ScheduleDetailsPage } from '../../../components/schedule/schedule-details-page'; +import { useSafeId } from '../../../utils/common.utils'; + +export default function ScheduleEventDetails() { + const id = useSafeId(); + return ; +} diff --git a/app/(tabs)/map.tsx b/app/(tabs)/map.tsx index a2f69e9..9fd9c52 100644 --- a/app/(tabs)/map.tsx +++ b/app/(tabs)/map.tsx @@ -1,3 +1,4 @@ +import { Screen } from '../../components/base/screen'; import { Header } from '../../components/common/header'; import { Title } from '../../components/common/title'; @@ -5,8 +6,10 @@ interface MapPageProps {} export default function MapPage({}: MapPageProps) { return ( -
- Térkép -
+ +
+ Térkép +
+
); } diff --git a/app/(tabs)/schedule/_layout.tsx b/app/(tabs)/schedule/_layout.tsx index fc0744e..c1e6b7c 100644 --- a/app/(tabs)/schedule/_layout.tsx +++ b/app/(tabs)/schedule/_layout.tsx @@ -3,17 +3,9 @@ import { Stack } from 'expo-router'; export default function ScheduleStackLayout() { return ( - - - + /> ); } diff --git a/app/(tabs)/schedule/details.tsx b/app/(tabs)/schedule/details.tsx deleted file mode 100644 index 311b809..0000000 --- a/app/(tabs)/schedule/details.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useLocalSearchParams } from 'expo-router'; -import { View } from 'react-native'; - -import { ScheduleDetailsPage } from '../../../components/schedule/schedule-details-page'; - -export default function ScheduleEventDetails() { - const { id } = useLocalSearchParams(); - const safeId = Array.isArray(id) ? id[0] : id ?? ''; - return ( - - - - ); -} diff --git a/app/(tabs)/schedule/index.tsx b/app/(tabs)/schedule/index.tsx index fd78f21..f49cf79 100644 --- a/app/(tabs)/schedule/index.tsx +++ b/app/(tabs)/schedule/index.tsx @@ -1,3 +1,4 @@ +import { Screen } from '../../../components/base/screen'; import { Header } from '../../../components/common/header'; import { Title } from '../../../components/common/title'; import { ScheduleList } from '../../../components/schedule/schedule-list'; @@ -8,11 +9,11 @@ interface SchedulePageProps {} export default function SchedulePage({}: SchedulePageProps) { const { data } = useSchedule(); return ( - <> +
Programterv
- +
); } diff --git a/app/(tabs)/schedule/schedule-details.tsx b/app/(tabs)/schedule/schedule-details.tsx new file mode 100644 index 0000000..7bb3a5e --- /dev/null +++ b/app/(tabs)/schedule/schedule-details.tsx @@ -0,0 +1,7 @@ +import { ScheduleDetailsPage } from '../../../components/schedule/schedule-details-page'; +import { useSafeId } from '../../../utils/common.utils'; + +export default function ScheduleEventDetails() { + const id = useSafeId(); + return ; +} diff --git a/components/base/screen.tsx b/components/base/screen.tsx new file mode 100644 index 0000000..b37c0c8 --- /dev/null +++ b/components/base/screen.tsx @@ -0,0 +1,7 @@ +import { View, ViewProps } from 'react-native'; + +import { cn } from '../../utils/common.utils'; + +export function Screen({ className, ...props }: ViewProps) { + return ; +} diff --git a/components/schedule/schedule-details-page.tsx b/components/schedule/schedule-details-page.tsx index 550d417..297c63f 100644 --- a/components/schedule/schedule-details-page.tsx +++ b/components/schedule/schedule-details-page.tsx @@ -1,6 +1,7 @@ import { format } from 'date-fns'; import { useScheduleItem } from '../../hooks/use-schedule-item'; +import { Screen } from '../base/screen'; import { StyledText } from '../base/text'; import { Header } from '../common/header'; import { Subtitle } from '../common/subtitle'; @@ -16,7 +17,7 @@ export function ScheduleDetailsPage({ id }: ScheduleDetailsPageProps) { const startDate = format(new Date(data.start), 'HH:mm'); const endDate = format(new Date(data.end), 'HH:mm'); return ( - <> +
{data?.title} @@ -24,6 +25,6 @@ export function ScheduleDetailsPage({ id }: ScheduleDetailsPageProps) {
{data?.description} - +
); } diff --git a/components/schedule/schedule-item.tsx b/components/schedule/schedule-item.tsx index 4bdb7c2..69b5abd 100644 --- a/components/schedule/schedule-item.tsx +++ b/components/schedule/schedule-item.tsx @@ -1,7 +1,8 @@ import { format } from 'date-fns'; -import { useRouter } from 'expo-router'; +import { useNavigation } from 'expo-router'; import { useState } from 'react'; import { Image, Pressable, View } from 'react-native'; +import { NativeStackNavigationProp } from 'react-native-screens/native-stack'; import { ScheduleEvent } from '../../types/schedule-event.type'; import { cn } from '../../utils/common.utils'; @@ -14,14 +15,13 @@ interface ScheduleItem { } export function ScheduleItem({ event }: ScheduleItem) { - const router = useRouter(); + const router = useNavigation>(); const [isPressed, setIsPressed] = useState(false); const startTime = format(new Date(event.start), 'HH:mm'); const endTime = format(new Date(event.end), 'HH:mm'); const isPast = isScheduleEventPast(event); const onPress = () => { - router.push({ pathname: 'schedule' }); - router.push({ pathname: 'schedule/details', params: { id: event.id } }); + router.navigate('schedule-details', { id: event.id }); }; return (