Merge pull request #17 from simonyiszk/event-details

Event details

app/(tabs)/_layout.tsx

@@ -0,0 +1,61 @@
+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 (
+    <Tabs
+      initialRouteName='home'
+      backBehavior='none'
+      sceneContainerStyle={{
+        backgroundColor: 'transparent',
+        paddingTop: top + 10,
+        paddingLeft: left,
+        paddingRight: right,
+      }}
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: colors.primary['500'],
+        tabBarLabel: TabbarLabel,
+        tabBarBackground: TabbarBackground,
+        tabBarStyle: {
+          position: 'absolute',
+          bottom: bottom + 10,
+          borderTopWidth: 0,
+          marginHorizontal: 20,
+          paddingBottom: 10,
+          paddingTop: 10,
+          height: 70,
+          elevation: 10,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name='home'
+        options={{
+          title: 'Főoldal',
+          tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='home' />,
+        }}
+      />
+      <Tabs.Screen
+        name='schedule'
+        options={{
+          title: 'Programterv',
+          tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='calendar' />,
+        }}
+      />
+      <Tabs.Screen
+        name='map'
+        options={{
+          title: 'Térkép',
+          tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='map' />,
+        }}
+      />
+    </Tabs>
+  );
+}

app/(tabs)/home/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+export default function HomeStackLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
+  );
+}

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 (
+    <Screen>
+      <Header>
+        <Title>Simonyi Konferencia</Title>
+      </Header>
+      <ScheduleList schedule={data ?? []} filterToCurrent filterToUpcoming />
+    </Screen>
+  );
+}

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 <ScheduleDetailsPage id={id} />;
+}

app/(tabs)/map.tsx

@@ -0,0 +1,15 @@
+import { Screen } from '../../components/base/screen';
+import { Header } from '../../components/common/header';
+import { Title } from '../../components/common/title';
+
+interface MapPageProps {}
+
+export default function MapPage({}: MapPageProps) {
+  return (
+    <Screen>
+      <Header>
+        <Title>Térkép</Title>
+      </Header>
+    </Screen>
+  );
+}

app/(tabs)/schedule/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+export default function ScheduleStackLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
+  );
+}

app/(tabs)/schedule/index.tsx

@@ -0,0 +1,19 @@
+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 SchedulePageProps {}
+
+export default function SchedulePage({}: SchedulePageProps) {
+  const { data } = useSchedule();
+  return (
+    <Screen>
+      <Header>
+        <Title>Programterv</Title>
+      </Header>
+      <ScheduleList schedule={data ?? []} />
+    </Screen>
+  );
+}

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 <ScheduleDetailsPage id={id} />;
+}

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 (
     <QueryClientProvider client={queryClient}>
-      <SafeAreaView className='bg-slate-100 min-h-screen'>
-        <Tabs
-          backBehavior='none'
-          sceneContainerStyle={{
-            backgroundColor: 'transparent',
-            marginTop: Platform.OS === 'android' ? top + 10 : undefined,
-            paddingBottom: Platform.OS === 'android' ? bottom + 10 : undefined,
-          }}
-          screenOptions={{
-            unmountOnBlur: true,
-            headerShown: false,
-            tabBarActiveTintColor: colors.primary['500'],
-            tabBarLabel: TabbarLabel,
-            tabBarBackground: TabbarBackground,
-            tabBarStyle: {
-              borderTopWidth: 0,
-              marginHorizontal: 20,
-              paddingBottom: 10,
-              paddingTop: 10,
-              height: 70,
-              marginBottom: 10,
-              elevation: 10,
-            },
-          }}
-        >
-          <Tabs.Screen
-            name='index'
-            options={{
-              title: 'Főoldal',
-              tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='home' />,
-            }}
-          />
-          <Tabs.Screen
-            name='schedule'
-            options={{
-              title: 'Programterv',
-              tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='calendar' />,
-            }}
-          />
-          <Tabs.Screen
-            name='map'
-            options={{
-              title: 'Térkép',
-              tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='map' />,
-            }}
-          />
-        </Tabs>
-      </SafeAreaView>
+      <View className='bg-slate-100 min-h-screen'>
+        <Slot />
+      </View>
     </QueryClientProvider>
   );
 }

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 (
-    <>
-      <Header>
-        <Title>Simonyi Konferencia</Title>
-      </Header>
-      <ScheduleList schedule={data ?? []} filterToCurrent filterToUpcoming />
-    </>
-  );
+export default function App() {
+  return <Redirect href='/(tabs)/home' />;
 }

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 <View className={cn('bg-slate-100 h-full', className)} {...props} />;
+}

components/schedule/schedule-details-page.tsx

@@ -0,0 +1,30 @@
+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';
+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 (
+    <Screen>
+      <Header>
+        <Title>{data?.title}</Title>
+        <Subtitle>
+          {data?.location} • {startDate} - {endDate}
+        </Subtitle>
+      </Header>
+      <StyledText className='mx-5 text-xl'>{data?.description}</StyledText>
+    </Screen>
+  );
+}

components/schedule/schedule-item.tsx

@@ -1,6 +1,8 @@
 import { format } from 'date-fns';
+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';
@@ -13,12 +15,17 @@ interface ScheduleItem {
 }
 
 export function ScheduleItem({ event }: ScheduleItem) {
+  const router = useNavigation<NativeStackNavigationProp<{ 'schedule-details': { id: string } }>>();
   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.navigate('schedule-details', { id: event.id });
+  };
   return (
     <Pressable
+      onPress={onPress}
       onPressIn={() => 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', {

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

hooks/use-schedule.ts

@@ -10,7 +10,7 @@ export function useSchedule() {
   });
 }
 
-const delay = 2000;
+const delay = 0;
 
 function getSchedule(): Promise<ScheduleEvent[]> {
   return new Promise((resolve) => {