Merge pull request #22 from simonyiszk/feat/news

News added

app/(tabs)/home/index.tsx

@@ -1,8 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+
 import { Screen } from '../../../components/base/screen';
 import { Header } from '../../../components/common/header';
+import { SectionTitle } from '../../../components/common/sectiontitle';
 import { Title } from '../../../components/common/title';
+import { NewsList } from '../../../components/news/news-list';
 import { ScheduleList } from '../../../components/schedule/schedule-list';
 import { useSchedule } from '../../../hooks/use-schedule';
+import { news } from '../../../mocks/news';
 
 interface HomePageProps {}
 
@@ -14,7 +20,11 @@ export default function HomePage({}: HomePageProps) {
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>
+      <SectionTitle>Előadások</SectionTitle>
       <ScheduleList schedule={data ?? []} filterToCurrent filterToUpcoming />
+      <View className='w-20 h-1 rounded-full bg-slate-300 mx-5 my-5' />
+      <SectionTitle>Hírek</SectionTitle>
+      <NewsList news={news} />
     </Screen>
   );
 }

app/(tabs)/home/news-details.tsx

@@ -0,0 +1,7 @@
+import { NewsDetailsPage } from '../../../components/news/news-details-page';
+import { useSafeId } from '../../../utils/common.utils';
+
+export default function NewsDetails() {
+  const id = useSafeId();
+  return <NewsDetailsPage id={id} />;
+}

components/common/sectiontitle.tsx

@@ -0,0 +1,12 @@
+import { TextProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+
+export function SectionTitle({ children, className, ...props }: TextProps) {
+  return (
+    <StyledText className={cn('text-2xl mx-5 mb-5', className)} {...props}>
+      {children}
+    </StyledText>
+  );
+}

components/news/news-details-page.tsx

@@ -0,0 +1,22 @@
+import { useNewsItem } from '../../hooks/use-news-item';
+import { Screen } from '../base/screen';
+import { StyledText } from '../base/text';
+import { Header } from '../common/header';
+import { Title } from '../common/title';
+
+interface NewsDetailsPageProps {
+  id: string;
+}
+
+export function NewsDetailsPage({ id }: NewsDetailsPageProps) {
+  const { data } = useNewsItem(id);
+  if (!data) return <></>;
+  return (
+    <Screen>
+      <Header>
+        <Title>{data?.title}</Title>
+      </Header>
+      <StyledText className='mx-5 text-xl'>{data?.description}</StyledText>
+    </Screen>
+  );
+}

components/news/news-item.tsx

@@ -0,0 +1,36 @@
+import { useNavigation } from 'expo-router';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
+
+import { NewsEvent } from '../../types/news-event.type';
+import { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+
+interface NewsItem {
+  event: NewsEvent;
+}
+
+export function NewsItem({ event }: NewsItem) {
+  const router = useNavigation<NativeStackNavigationProp<{ 'news-details': { id: string } }>>();
+  const [isPressed, setIsPressed] = useState(false);
+  const onPress = () => {
+    router.navigate('news-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', {
+        'bg-slate-50': isPressed,
+      })}
+    >
+      <View className='flex-col gap-2 flex-1 mx-2'>
+        <StyledText className='text-xl' numberOfLines={1}>
+          {event.title}
+        </StyledText>
+      </View>
+    </Pressable>
+  );
+}

components/news/news-list.tsx

@@ -0,0 +1,14 @@
+import { FlatList } from 'react-native';
+
+import { NewsEvent } from '../../types/news-event.type';
+import { NewsItem } from './news-item';
+
+interface NewsListProps {
+  news: NewsEvent[];
+}
+
+export function NewsList({ news }: NewsListProps) {
+  return (
+    <FlatList data={news} className='flex-grow px-5' renderItem={(listInfo) => <NewsItem event={listInfo.item} />} />
+  );
+}

hooks/use-news-item.ts

@@ -0,0 +1,7 @@
+import { useNews } from './use-news';
+
+export function useNewsItem(id: string) {
+  const { data, ...rest } = useNews();
+  const item = data?.find((item) => item.id === id);
+  return { data: item, ...rest };
+}

hooks/use-news.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { news } from '../mocks/news';
+import { NewsEvent } from '../types/news-event.type';
+
+export function useNews() {
+  return useQuery<NewsEvent[]>({
+    queryKey: ['news'],
+    queryFn: getNews,
+  });
+}
+
+const delay = 0;
+
+function getNews(): Promise<NewsEvent[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(news);
+    }, delay);
+  });
+}

mocks/news.ts

@@ -0,0 +1,14 @@
+import { NewsEvent } from '../types/news-event.type';
+
+export const news: NewsEvent[] = [
+  {
+    id: '0',
+    title: 'Great news',
+    description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
+  },
+  {
+    id: '1',
+    title: 'Even greater very great news',
+    description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
+  },
+];

types/news-event.type.ts

@@ -0,0 +1,5 @@
+export type NewsEvent = {
+  id: string;
+  title: string;
+  description: string;
+};