From 22e572178997658f353fae3ff66f704d5192154d Mon Sep 17 00:00:00 2001
From: Balog Bors <bors.balog@gmail.com>
Date: Tue, 30 Jan 2024 17:22:43 +0100
Subject: [PATCH 1/4] News added

---
 app/(tabs)/home/index.tsx             |  9 +++++++
 app/(tabs)/home/news-details.tsx      |  7 ++++++
 components/common/menutitle.tsx       | 12 +++++++++
 components/news/news-details-page.tsx | 22 ++++++++++++++++
 components/news/news-item.tsx         | 36 +++++++++++++++++++++++++++
 components/news/news-list.tsx         | 19 ++++++++++++++
 hooks/use-news-item.ts                |  7 ++++++
 hooks/use-news.ts                     | 21 ++++++++++++++++
 mocks/news.ts                         | 14 +++++++++++
 types/news-event.type.ts              |  5 ++++
 10 files changed, 152 insertions(+)
 create mode 100644 app/(tabs)/home/news-details.tsx
 create mode 100644 components/common/menutitle.tsx
 create mode 100644 components/news/news-details-page.tsx
 create mode 100644 components/news/news-item.tsx
 create mode 100644 components/news/news-list.tsx
 create mode 100644 hooks/use-news-item.ts
 create mode 100644 hooks/use-news.ts
 create mode 100644 mocks/news.ts
 create mode 100644 types/news-event.type.ts

diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index 205d6f8..584f43f 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -3,6 +3,11 @@ 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 { View} from "react-native";
+import React from "react";
+import {Menutitle} from "../../../components/common/menutitle";
+import {NewsList} from "../../../components/news/news-list";
+import {news} from "../../../mocks/news";
 
 interface HomePageProps {}
 
@@ -14,7 +19,11 @@ export default function HomePage({}: HomePageProps) {
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>
+        <Menutitle>Előadások</Menutitle>
       <ScheduleList schedule={data ?? []} filterToCurrent filterToUpcoming />
+        <View className='w-20 h-1 rounded-full bg-slate-300 mx-5 my-5' />
+        <Menutitle>Hírek</Menutitle>
+      <NewsList news={news}></NewsList>
     </Screen>
   );
 }
diff --git a/app/(tabs)/home/news-details.tsx b/app/(tabs)/home/news-details.tsx
new file mode 100644
index 0000000..0dff1bb
--- /dev/null
+++ b/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} />;
+}
diff --git a/components/common/menutitle.tsx b/components/common/menutitle.tsx
new file mode 100644
index 0000000..c86e843
--- /dev/null
+++ b/components/common/menutitle.tsx
@@ -0,0 +1,12 @@
+import { TextProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+
+export function Menutitle({ children, className, ...props }: TextProps) {
+    return (
+        <StyledText className={cn('text-2xl mx-5 mb-5', className)} {...props}>
+            {children}
+        </StyledText>
+);
+}
\ No newline at end of file
diff --git a/components/news/news-details-page.tsx b/components/news/news-details-page.tsx
new file mode 100644
index 0000000..39c6871
--- /dev/null
+++ b/components/news/news-details-page.tsx
@@ -0,0 +1,22 @@
+import { Screen } from '../base/screen';
+import { StyledText } from '../base/text';
+import { Header } from '../common/header';
+import { Title } from '../common/title';
+import {useNewsItem} from "../../hooks/use-news-item";
+
+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>
+  );
+}
diff --git a/components/news/news-item.tsx b/components/news/news-item.tsx
new file mode 100644
index 0000000..58f87d3
--- /dev/null
+++ b/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 { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+import {NewsEvent} from "../../types/news-event.type";
+
+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>
+  );
+}
diff --git a/components/news/news-list.tsx b/components/news/news-list.tsx
new file mode 100644
index 0000000..3b7eeb5
--- /dev/null
+++ b/components/news/news-list.tsx
@@ -0,0 +1,19 @@
+
+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} />}
+    />
+  );
+}
diff --git a/hooks/use-news-item.ts b/hooks/use-news-item.ts
new file mode 100644
index 0000000..8f27f80
--- /dev/null
+++ b/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 };
+}
diff --git a/hooks/use-news.ts b/hooks/use-news.ts
new file mode 100644
index 0000000..4c9992b
--- /dev/null
+++ b/hooks/use-news.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+
+import {NewsEvent} from "../types/news-event.type";
+import {news} from "../mocks/news";
+
+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);
+  });
+}
diff --git a/mocks/news.ts b/mocks/news.ts
new file mode 100644
index 0000000..e04ebd9
--- /dev/null
+++ b/mocks/news.ts
@@ -0,0 +1,14 @@
+import {NewsEvent} from "../types/news-event.type";
+
+export const news: NewsEvent[] = [
+    {
+        id: '0',
+        title: "ur mother",
+        description: "lol"
+    },
+    {
+        id: '1',
+        title: "asd",
+        description: "ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke"
+    }
+]
\ No newline at end of file
diff --git a/types/news-event.type.ts b/types/news-event.type.ts
new file mode 100644
index 0000000..09faeff
--- /dev/null
+++ b/types/news-event.type.ts
@@ -0,0 +1,5 @@
+export type NewsEvent ={
+    id: string;
+    title: string;
+    description: string;
+}
\ No newline at end of file

From 27fe6c219eb158dc3b16ca4f41a6011ace5b7d95 Mon Sep 17 00:00:00 2001
From: balog-b <bors.balog@gmail.com>
Date: Tue, 30 Jan 2024 17:46:39 +0100
Subject: [PATCH 2/4] Prettier

---
 app/(tabs)/home/index.tsx             | 16 ++++++++--------
 app/(tabs)/home/news-details.tsx      |  4 ++--
 components/common/menutitle.tsx       | 12 ++++++------
 components/news/news-details-page.tsx |  2 +-
 components/news/news-item.tsx         |  4 ++--
 components/news/news-list.tsx         | 11 +++--------
 mocks/news.ts                         | 10 +++++-----
 7 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index 584f43f..d8b30a3 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -3,11 +3,11 @@ 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 { View} from "react-native";
-import React from "react";
-import {Menutitle} from "../../../components/common/menutitle";
-import {NewsList} from "../../../components/news/news-list";
-import {news} from "../../../mocks/news";
+import { View } from 'react-native';
+import React from 'react';
+import { Menutitle } from '../../../components/common/menutitle';
+import { NewsList } from '../../../components/news/news-list';
+import { news } from '../../../mocks/news';
 
 interface HomePageProps {}
 
@@ -19,10 +19,10 @@ export default function HomePage({}: HomePageProps) {
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>
-        <Menutitle>Előadások</Menutitle>
+      <Menutitle>Előadások</Menutitle>
       <ScheduleList schedule={data ?? []} filterToCurrent filterToUpcoming />
-        <View className='w-20 h-1 rounded-full bg-slate-300 mx-5 my-5' />
-        <Menutitle>Hírek</Menutitle>
+      <View className='w-20 h-1 rounded-full bg-slate-300 mx-5 my-5' />
+      <Menutitle>Hírek</Menutitle>
       <NewsList news={news}></NewsList>
     </Screen>
   );
diff --git a/app/(tabs)/home/news-details.tsx b/app/(tabs)/home/news-details.tsx
index 0dff1bb..99daeca 100644
--- a/app/(tabs)/home/news-details.tsx
+++ b/app/(tabs)/home/news-details.tsx
@@ -2,6 +2,6 @@ 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} />;
+  const id = useSafeId();
+  return <NewsDetailsPage id={id} />;
 }
diff --git a/components/common/menutitle.tsx b/components/common/menutitle.tsx
index c86e843..74cfb85 100644
--- a/components/common/menutitle.tsx
+++ b/components/common/menutitle.tsx
@@ -4,9 +4,9 @@ import { cn } from '../../utils/common.utils';
 import { StyledText } from '../base/text';
 
 export function Menutitle({ children, className, ...props }: TextProps) {
-    return (
-        <StyledText className={cn('text-2xl mx-5 mb-5', className)} {...props}>
-            {children}
-        </StyledText>
-);
-}
\ No newline at end of file
+  return (
+    <StyledText className={cn('text-2xl mx-5 mb-5', className)} {...props}>
+      {children}
+    </StyledText>
+  );
+}
diff --git a/components/news/news-details-page.tsx b/components/news/news-details-page.tsx
index 39c6871..6603be6 100644
--- a/components/news/news-details-page.tsx
+++ b/components/news/news-details-page.tsx
@@ -2,7 +2,7 @@ import { Screen } from '../base/screen';
 import { StyledText } from '../base/text';
 import { Header } from '../common/header';
 import { Title } from '../common/title';
-import {useNewsItem} from "../../hooks/use-news-item";
+import { useNewsItem } from '../../hooks/use-news-item';
 
 interface NewsDetailsPageProps {
   id: string;
diff --git a/components/news/news-item.tsx b/components/news/news-item.tsx
index 58f87d3..95fcd49 100644
--- a/components/news/news-item.tsx
+++ b/components/news/news-item.tsx
@@ -5,7 +5,7 @@ import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
 
 import { cn } from '../../utils/common.utils';
 import { StyledText } from '../base/text';
-import {NewsEvent} from "../../types/news-event.type";
+import { NewsEvent } from '../../types/news-event.type';
 
 interface NewsItem {
   event: NewsEvent;
@@ -23,7 +23,7 @@ export function NewsItem({ event }: NewsItem) {
       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
+        'bg-slate-50': isPressed,
       })}
     >
       <View className='flex-col gap-2 flex-1 mx-2'>
diff --git a/components/news/news-list.tsx b/components/news/news-list.tsx
index 3b7eeb5..0d14bee 100644
--- a/components/news/news-list.tsx
+++ b/components/news/news-list.tsx
@@ -1,8 +1,7 @@
-
 import { FlatList } from 'react-native';
 
-import {NewsEvent} from "../../types/news-event.type";
-import {NewsItem} from "./news-item";
+import { NewsEvent } from '../../types/news-event.type';
+import { NewsItem } from './news-item';
 
 interface NewsListProps {
   news: NewsEvent[];
@@ -10,10 +9,6 @@ interface NewsListProps {
 
 export function NewsList({ news }: NewsListProps) {
   return (
-    <FlatList
-      data={news}
-      className='flex-grow px-5'
-      renderItem={(listInfo) => <NewsItem event={listInfo.item} />}
-    />
+    <FlatList data={news} className='flex-grow px-5' renderItem={(listInfo) => <NewsItem event={listInfo.item} />} />
   );
 }
diff --git a/mocks/news.ts b/mocks/news.ts
index e04ebd9..ebe6313 100644
--- a/mocks/news.ts
+++ b/mocks/news.ts
@@ -1,14 +1,14 @@
-import {NewsEvent} from "../types/news-event.type";
+import { NewsEvent } from "../types/news-event.type";
 
 export const news: NewsEvent[] = [
     {
         id: '0',
-        title: "ur mother",
-        description: "lol"
+        title: 'ur mother',
+        description: 'lol'
     },
     {
         id: '1',
-        title: "asd",
-        description: "ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke"
+        title: 'asd',
+        description: 'ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke'
     }
 ]
\ No newline at end of file

From 968a39dafb99f3413387f9ba1a3c05dd07d42d1b Mon Sep 17 00:00:00 2001
From: balog-b <bors.balog@gmail.com>
Date: Tue, 30 Jan 2024 17:57:50 +0100
Subject: [PATCH 3/4] Prettier2

---
 app/(tabs)/home/index.tsx             |  9 +++++----
 components/news/news-details-page.tsx |  2 +-
 components/news/news-item.tsx         |  2 +-
 hooks/use-news-item.ts                |  2 +-
 hooks/use-news.ts                     |  4 ++--
 mocks/news.ts                         | 24 ++++++++++++------------
 types/news-event.type.ts              | 10 +++++-----
 7 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index d8b30a3..e4b86f0 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -1,12 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+
 import { Screen } from '../../../components/base/screen';
 import { Header } from '../../../components/common/header';
+import { Menutitle } from '../../../components/common/menutitle';
 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 { View } from 'react-native';
-import React from 'react';
-import { Menutitle } from '../../../components/common/menutitle';
-import { NewsList } from '../../../components/news/news-list';
 import { news } from '../../../mocks/news';
 
 interface HomePageProps {}
diff --git a/components/news/news-details-page.tsx b/components/news/news-details-page.tsx
index 6603be6..a4b67c5 100644
--- a/components/news/news-details-page.tsx
+++ b/components/news/news-details-page.tsx
@@ -1,8 +1,8 @@
+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';
-import { useNewsItem } from '../../hooks/use-news-item';
 
 interface NewsDetailsPageProps {
   id: string;
diff --git a/components/news/news-item.tsx b/components/news/news-item.tsx
index 95fcd49..b434f85 100644
--- a/components/news/news-item.tsx
+++ b/components/news/news-item.tsx
@@ -3,9 +3,9 @@ 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';
-import { NewsEvent } from '../../types/news-event.type';
 
 interface NewsItem {
   event: NewsEvent;
diff --git a/hooks/use-news-item.ts b/hooks/use-news-item.ts
index 8f27f80..f7551c2 100644
--- a/hooks/use-news-item.ts
+++ b/hooks/use-news-item.ts
@@ -1,4 +1,4 @@
-import {useNews} from "./use-news";
+import { useNews } from './use-news';
 
 export function useNewsItem(id: string) {
   const { data, ...rest } = useNews();
diff --git a/hooks/use-news.ts b/hooks/use-news.ts
index 4c9992b..0388369 100644
--- a/hooks/use-news.ts
+++ b/hooks/use-news.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import {NewsEvent} from "../types/news-event.type";
-import {news} from "../mocks/news";
+import { news } from '../mocks/news';
+import { NewsEvent } from '../types/news-event.type';
 
 export function useNews() {
   return useQuery<NewsEvent[]>({
diff --git a/mocks/news.ts b/mocks/news.ts
index ebe6313..ce3427c 100644
--- a/mocks/news.ts
+++ b/mocks/news.ts
@@ -1,14 +1,14 @@
-import { NewsEvent } from "../types/news-event.type";
+import { NewsEvent } from '../types/news-event.type';
 
 export const news: NewsEvent[] = [
-    {
-        id: '0',
-        title: 'ur mother',
-        description: 'lol'
-    },
-    {
-        id: '1',
-        title: 'asd',
-        description: 'ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke'
-    }
-]
\ No newline at end of file
+  {
+    id: '0',
+    title: 'ur mother',
+    description: 'lol',
+  },
+  {
+    id: '1',
+    title: 'asd',
+    description: 'ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke',
+  },
+];
diff --git a/types/news-event.type.ts b/types/news-event.type.ts
index 09faeff..eebeac0 100644
--- a/types/news-event.type.ts
+++ b/types/news-event.type.ts
@@ -1,5 +1,5 @@
-export type NewsEvent ={
-    id: string;
-    title: string;
-    description: string;
-}
\ No newline at end of file
+export type NewsEvent = {
+  id: string;
+  title: string;
+  description: string;
+};

From 1fc9aa72c48d41145661f05aa04008e85efefcbd Mon Sep 17 00:00:00 2001
From: balog-b <bors.balog@gmail.com>
Date: Tue, 30 Jan 2024 18:11:22 +0100
Subject: [PATCH 4/4] Cleaned up code

---
 app/(tabs)/home/index.tsx                             | 8 ++++----
 components/common/{menutitle.tsx => sectiontitle.tsx} | 2 +-
 mocks/news.ts                                         | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename components/common/{menutitle.tsx => sectiontitle.tsx} (77%)

diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index e4b86f0..e39c24b 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import { Screen } from '../../../components/base/screen';
 import { Header } from '../../../components/common/header';
-import { Menutitle } from '../../../components/common/menutitle';
+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';
@@ -20,11 +20,11 @@ export default function HomePage({}: HomePageProps) {
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>
-      <Menutitle>Előadások</Menutitle>
+      <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' />
-      <Menutitle>Hírek</Menutitle>
-      <NewsList news={news}></NewsList>
+      <SectionTitle>Hírek</SectionTitle>
+      <NewsList news={news} />
     </Screen>
   );
 }
diff --git a/components/common/menutitle.tsx b/components/common/sectiontitle.tsx
similarity index 77%
rename from components/common/menutitle.tsx
rename to components/common/sectiontitle.tsx
index 74cfb85..6f20a20 100644
--- a/components/common/menutitle.tsx
+++ b/components/common/sectiontitle.tsx
@@ -3,7 +3,7 @@ import { TextProps } from 'react-native';
 import { cn } from '../../utils/common.utils';
 import { StyledText } from '../base/text';
 
-export function Menutitle({ children, className, ...props }: TextProps) {
+export function SectionTitle({ children, className, ...props }: TextProps) {
   return (
     <StyledText className={cn('text-2xl mx-5 mb-5', className)} {...props}>
       {children}
diff --git a/mocks/news.ts b/mocks/news.ts
index ce3427c..fabc92a 100644
--- a/mocks/news.ts
+++ b/mocks/news.ts
@@ -3,12 +3,12 @@ import { NewsEvent } from '../types/news-event.type';
 export const news: NewsEvent[] = [
   {
     id: '0',
-    title: 'ur mother',
-    description: 'lol',
+    title: 'Great news',
+    description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
   },
   {
     id: '1',
-    title: 'asd',
-    description: 'ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke',
+    title: 'Even greater very great news',
+    description: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
   },
 ];