Merge pull request #24 from simonyiszk/ui-improvements

UI improvements

app/(tabs)/home/index.tsx

@@ -1,41 +1,39 @@
 import React from 'react';
-import { ScrollView, View } from 'react-native';
 
 import { Screen } from '../../../components/base/screen';
+import { ScrollContent } from '../../../components/base/scroll-content';
 import { ErrorMessage } from '../../../components/common/error-message';
 import { Header } from '../../../components/common/header';
 import { SectionTitle } from '../../../components/common/sectiontitle';
 import { Separator } from '../../../components/common/separator';
 import { Title } from '../../../components/common/title';
-import { HomeNewsList } from '../../../components/news/home-news-list';
-import { HomePresentationList } from '../../../components/schedule/home-presentation-list';
-import { PresentationItemSkeleton } from '../../../components/schedule/presentation-item-skeleton';
+import { HomeNewsList } from '../../../components/news/layouts/home-news-list';
+import { NewsItemSkeletonList } from '../../../components/news/layouts/news-item-skeleton-list';
+import { HomePresentationList } from '../../../components/schedule/layouts/home-presentation-list';
+import { PresentationItemSkeletonList } from '../../../components/schedule/layouts/presentation-item-skeleton-list';
 import { useConference } from '../../../hooks/use-conference';
 import { useNews } from '../../../hooks/use-news';
 
-interface HomePageProps {}
-
-export default function HomePage({}: HomePageProps) {
+export default function HomePage() {
   const conference = useConference();
   const news = useNews();
   return (
     <Screen>
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>
-      <ScrollView className='px-5'>
-        <View className='mb-40'>
-          <SectionTitle>Előadások</SectionTitle>
-          {conference.isLoading && [0, 1].map((i) => <PresentationItemSkeleton key={i} />)}
-          {conference.isError && <ErrorMessage>Nem sikerült betölteni az előadásokat</ErrorMessage>}
-          {!conference.isError && !conference.isLoading && (
-            <HomePresentationList presentations={conference.data?.presentations ?? []} />
-          )}
-          <Separator />
-          <SectionTitle>Hírek</SectionTitle>
-          {news.data && <HomeNewsList news={news.data.news} />}
-        </View>
-      </ScrollView>
+      <ScrollContent>
+        <SectionTitle>Előadások</SectionTitle>
+        {conference.isLoading && <PresentationItemSkeletonList />}
+        {conference.isError && <ErrorMessage>Nem sikerült betölteni az előadásokat</ErrorMessage>}
+        {!conference.isError && !conference.isLoading && (
+          <HomePresentationList presentations={conference.data?.presentations ?? []} />
+        )}
+        <Separator />
+        <SectionTitle>Hírek</SectionTitle>
+        {news.isLoading && <NewsItemSkeletonList />}
+        {news.data && <HomeNewsList news={news.data.news} />}
+      </ScrollContent>
     </Screen>
   );
 }

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

@@ -1,4 +1,4 @@
-import { NewsDetailsPage } from '../../../components/news/news-details-page';
+import { NewsDetailsPage } from '../../../components/news/layouts/news-details-page';
 import { useSafeId } from '../../../utils/common.utils';
 
 export default function NewsDetails() {

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

@@ -1,4 +1,4 @@
-import { PresentationDetailsPage } from '../../../components/schedule/presentation-details-page';
+import { PresentationDetailsPage } from '../../../components/schedule/layouts/presentation-details-page';
 import { useSafeId } from '../../../utils/common.utils';
 
 export default function PresentationDetails() {

app/(tabs)/map.tsx

@@ -5,9 +5,7 @@ import { Header } from '../../components/common/header';
 import { Title } from '../../components/common/title';
 import { Map } from '../../components/map/map';
 
-interface MapPageProps {}
-
-export default function MapPage({}: MapPageProps) {
+export default function MapPage() {
   return (
     <Screen>
       <Header>

app/(tabs)/presentation/index.tsx

@@ -4,20 +4,18 @@ import { Screen } from '../../../components/base/screen';
 import { ErrorMessage } from '../../../components/common/error-message';
 import { Header } from '../../../components/common/header';
 import { Title } from '../../../components/common/title';
-import { PresentationItemSkeleton } from '../../../components/schedule/presentation-item-skeleton';
-import { PresentationList } from '../../../components/schedule/presentation-list';
+import { PresentationItemSkeletonList } from '../../../components/schedule/layouts/presentation-item-skeleton-list';
+import { PresentationList } from '../../../components/schedule/layouts/presentation-list';
 import { useConference } from '../../../hooks/use-conference';
 
-interface PresentationListPageProps {}
-
-export default function PresentationListPage({}: PresentationListPageProps) {
+export default function PresentationListPage() {
   const { data, isError, isLoading } = useConference();
   return (
     <Screen>
       <Header>
         <Title>Programterv</Title>
       </Header>
-      {isLoading && [0, 1, 2, 3].map((i) => <PresentationItemSkeleton key={i} />)}
+      {isLoading && <PresentationItemSkeletonList />}
       {!isError && !isLoading && <PresentationList presentations={data?.presentations ?? []} />}
       {isError && <ErrorMessage>Nem sikerült betölteni az előadásokat</ErrorMessage>}
     </Screen>

app/(tabs)/presentation/presentation-details.tsx

@@ -1,4 +1,4 @@
-import { PresentationDetailsPage } from '../../../components/schedule/presentation-details-page';
+import { PresentationDetailsPage } from '../../../components/schedule/layouts/presentation-details-page';
 import { useSafeId } from '../../../utils/common.utils';
 
 export default function ScheduleEventDetails() {

components/base/item-card.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { GestureResponderEvent, Pressable, PressableProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+
+export function ItemCard({ className, onPressIn, onPressOut, ...props }: PressableProps) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const handlePressIn = (event: GestureResponderEvent) => {
+    setIsPressed(true);
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: GestureResponderEvent) => {
+    setIsPressed(false);
+    onPressOut?.(event);
+  };
+  return (
+    <Pressable
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      className={cn(
+        'mb-5 rounded-xl bg-white p-3 shadow-md shadow-slate-500/10 relative overflow-hidden',
+        {
+          'bg-slate-50': isPressed,
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}

components/base/scroll-content.tsx

@@ -1,11 +1,15 @@
-import { ScrollView, View, ViewProps } from 'react-native';
+import { ScrollView, ScrollViewProps } from 'react-native';
 
 import { cn } from '../../utils/common.utils';
 
-export function ScrollContent({ className, ...props }: ViewProps) {
+export function ScrollContent({ className, ...props }: ScrollViewProps) {
   return (
-    <ScrollView>
-      <View className={cn('mx-5 pb-40', className)} {...props} />
-    </ScrollView>
+    <ScrollView
+      className={cn('px-5 pt-5', className)}
+      contentContainerStyle={{
+        paddingBottom: 130,
+      }}
+      {...props}
+    ></ScrollView>
   );
 }

components/common/header.tsx

@@ -11,7 +11,7 @@ export function Header({ children, className, ...props }: HeaderProps) {
   const navigation = useNavigation();
   const showBackButton = navigation.canGoBack();
   return (
-    <View className={cn('space-y-5 mx-5 mb-5', className)} {...props}>
+    <View className={cn('space-y-5 mx-5', className)} {...props}>
       {showBackButton && (
         <Pressable onPress={navigation.goBack}>
           <Feather name='arrow-left' size={30} color='#d45b7e' />

components/common/item-highlight.tsx

@@ -0,0 +1,7 @@
+import { View, ViewProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+
+export function ItemHighlight({ className, ...props }: ViewProps) {
+  return <View className={cn('absolute top-0 right-0 bottom-0 w-1', className)} {...props} />;
+}

components/common/skeletons/skeleton-paragraph.tsx

@@ -0,0 +1,10 @@
+import { ViewProps } from 'react-native';
+
+import { cn } from '../../../utils/common.utils';
+import { SkeletonRectangle } from '../skeleton';
+
+export function SkeletonParagraph({ className, ...props }: ViewProps) {
+  return Array.from({ length: 10 }).map((_, index) => (
+    <SkeletonRectangle key={index} className={cn('h-5 mb-2', className)} {...props} />
+  ));
+}

components/common/skeletons/skeleton-title.tsx

@@ -0,0 +1,10 @@
+import { ViewProps } from 'react-native';
+
+import { cn } from '../../../utils/common.utils';
+import { SkeletonRectangle } from '../skeleton';
+
+export function SkeletonTitle({ className, ...props }: ViewProps) {
+  return Array.from({ length: 2 }).map((_, index) => (
+    <SkeletonRectangle key={index} className={cn('h-10', className)} {...props} />
+  ));
+}

components/common/subtitle.tsx

@@ -5,7 +5,7 @@ import { StyledText } from '../base/text';
 
 export function Subtitle({ children, className, ...props }: TextProps) {
   return (
-    <StyledText className={cn('text-2xl text-slate-500', className)} {...props}>
+    <StyledText className={cn('text-2xl text-slate-500 mt-3', className)} {...props}>
       {children}
     </StyledText>
   );

components/common/title.tsx

@@ -5,7 +5,7 @@ import { StyledText } from '../base/text';
 
 export function Title({ children, className, ...props }: TextProps) {
   return (
-    <StyledText className={cn('text-4xl', className)} {...props}>
+    <StyledText className={cn('text-4xl mt-5', className)} {...props}>
       {children}
     </StyledText>
   );

components/news/elements/news-item-skeleton.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+
+import { cn } from '../../../utils/common.utils';
+import { SkeletonRectangle } from '../../common/skeleton';
+
+export function NewsItemSkeleton({ className, ...props }: ViewProps) {
+  return <SkeletonRectangle className={cn('h-32 mb-5', className)} {...props} />;
+}

components/news/elements/news-item.tsx

@@ -0,0 +1,37 @@
+import { Feather } from '@expo/vector-icons';
+import { useNavigation } from 'expo-router';
+import { PressableProps, View } from 'react-native';
+import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
+
+import { NewsItemDto } from '../../../types/news-api.type';
+import { formatHu } from '../../../utils/date.utils';
+import { ItemCard } from '../../base/item-card';
+import { StyledText } from '../../base/text';
+
+interface NewsItemProps extends Omit<PressableProps, 'onPress' | 'onPressIn' | 'onPressOut'> {
+  newsItem: NewsItemDto;
+}
+
+export function NewsItem({ newsItem, ...props }: NewsItemProps) {
+  const router = useNavigation<NativeStackNavigationProp<{ 'news-details': { id: string } }>>();
+  const onPress = () => {
+    router.navigate('news-details', { id: newsItem.url });
+  };
+  return (
+    <ItemCard className='space-y-2' onPress={onPress} {...props}>
+      {newsItem.highlighted && (
+        <View className='flex-row space-x-1 items-center'>
+          <Feather name='alert-circle' size={15} color='#ef4444' />
+          <StyledText className='text-red-500'>Kiemelt</StyledText>
+        </View>
+      )}
+      <StyledText className='text-xl' numberOfLines={2}>
+        {newsItem.title}
+      </StyledText>
+      <StyledText className='text-slate-500'>{formatHu(new Date(newsItem.timestamp))}</StyledText>
+      <StyledText className='text-slate-500' numberOfLines={2}>
+        {newsItem.briefContent}
+      </StyledText>
+    </ItemCard>
+  );
+}

components/news/home-news-list.tsx → components/news/layouts/home-news-list.tsx

@@ -1,6 +1,6 @@
-import { NewsItemDto } from '../../types/news-api.type';
-import { StyledText } from '../base/text';
-import { NewsItem } from './news-item';
+import { NewsItemDto } from '../../../types/news-api.type';
+import { StyledText } from '../../base/text';
+import { NewsItem } from '../elements/news-item';
 
 interface HomeNewsListProps {
   news: NewsItemDto[];

components/news/layouts/news-details-page.tsx

@@ -0,0 +1,33 @@
+import { useNewsItem } from '../../../hooks/use-news-item';
+import { Screen } from '../../base/screen';
+import { ScrollContent } from '../../base/scroll-content';
+import { StyledText } from '../../base/text';
+import { ErrorMessage } from '../../common/error-message';
+import { Header } from '../../common/header';
+import { SkeletonParagraph } from '../../common/skeletons/skeleton-paragraph';
+import { SkeletonTitle } from '../../common/skeletons/skeleton-title';
+import { Title } from '../../common/title';
+
+interface NewsDetailsPageProps {
+  id: string;
+}
+
+export function NewsDetailsPage({ id }: NewsDetailsPageProps) {
+  const { data, error, isLoading } = useNewsItem(id);
+  if (!data) return <Screen />;
+  return (
+    <Screen>
+      <Header>
+        {isLoading && <SkeletonTitle />}
+        {data.title && <Title>{data.title}</Title>}
+      </Header>
+      <ScrollContent>
+        {error && (
+          <ErrorMessage>Hiba történt a hír betöltése közben. Lehet, hogy ez a hír nem is létezik?</ErrorMessage>
+        )}
+        {isLoading && <SkeletonParagraph />}
+        <StyledText className='text-xl'>{data?.content}</StyledText>
+      </ScrollContent>
+    </Screen>
+  );
+}

components/news/layouts/news-item-skeleton-list.tsx

@@ -0,0 +1,5 @@
+import { NewsItemSkeleton } from '../elements/news-item-skeleton';
+
+export function NewsItemSkeletonList() {
+  return Array.from({ length: 2 }, (_, i) => <NewsItemSkeleton key={i} />);
+}

components/news/layouts/news-list.tsx

@@ -0,0 +1,19 @@
+import { FlatList } from 'react-native';
+
+import { NewsItemDto } from '../../../types/news-api.type';
+import { NewsItem } from '../elements/news-item';
+
+interface NewsListProps {
+  news: NewsItemDto[];
+}
+
+export function NewsList({ news }: NewsListProps) {
+  return (
+    <FlatList
+      contentContainerStyle={{ paddingBottom: 130 }}
+      data={news}
+      className='flex-grow px-5 pt-5'
+      renderItem={(listInfo) => <NewsItem newsItem={listInfo.item} />}
+    />
+  );
+}