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] 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