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 (
+ <>
+
+
+ >
+ );
+}
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 (
+
+ );
+}
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 (
- <>
-
-
- >
- );
+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 (
-
- );
-}
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 (
- <>
-
-
- >
- );
-}
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 (
+
+
+
+
+ );
+}
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 (
-
+
+
+
);
}
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 (
- <>
+
- >
+
);
}
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 (