Merge pull request #23 from simonyiszk/presentation-api-layer

Presentation api layer

.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_API_BASE_URL=

.github/workflows/preview.yml

@@ -9,8 +9,8 @@ jobs:
   update:
     name: EAS Update
     runs-on: ubuntu-latest
-#    env:
-#      EXPO_PUBLIC_API_URL: ${{ vars.EXPO_PUBLIC_API_URL }}
+    env:
+      EXPO_PUBLIC_API_BASE_URL: ${{ vars.EXPO_PUBLIC_API_BASE_URL }}
     permissions:
       contents: read
       pull-requests: write
@@ -21,12 +21,12 @@ jobs:
             echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets."
             exit 1
           fi
-#      - name: Check for ENV variables
-#        run: |
-#          if [ -z "${{ vars.EXPO_PUBLIC_API_URL }}" ]; then
-#            echo "API_URL is not set"
-#            exit 1
-#          fi
+      - name: Check for ENV variables
+        run: |
+          if [ -z "${{ vars.EXPO_PUBLIC_API_BASE_URL }}" ]; then
+            echo "EXPO_PUBLIC_API_BASE_URL is not set"
+            exit 1
+          fi
       - name: Checkout repository
         uses: actions/checkout@v3
 

.gitignore

@@ -40,3 +40,5 @@ ios
 .idea
 .idea/workspace.xml
 
+.env
+

app.config.ts

@@ -0,0 +1,16 @@
+import { ConfigContext } from '@expo/config';
+import { config } from 'dotenv';
+import * as env from 'env-var';
+config();
+
+const EXPO_PUBLIC_API_BASE_URL = env.get('EXPO_PUBLIC_API_BASE_URL').required().asString();
+
+export default ({ config }: ConfigContext) => {
+  return {
+    ...config,
+    extra: {
+      apiBaseUrl: EXPO_PUBLIC_API_BASE_URL,
+      ...config.extra,
+    },
+  };
+};

app.json

@@ -30,6 +30,12 @@
         "projectId": "922ba2d9-369f-4940-aba6-9f2331f1f1c1"
       }
     },
+    "updates": {
+      "url": "https://u.expo.dev/922ba2d9-369f-4940-aba6-9f2331f1f1c1"
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
+    },
     "owner": "kir-dev",
     "plugins": ["expo-router"],
     "notification": {

app/(tabs)/_layout.tsx

@@ -45,7 +45,7 @@ export default function TabsLayout() {
         }}
       />
       <Tabs.Screen
-        name='schedule'
+        name='presentation'
         options={{
           title: 'Programterv',
           tabBarIcon: ({ focused }) => <TabbarIcon focused={focused} name='calendar' />,

app/(tabs)/home/index.tsx

@@ -1,30 +1,41 @@
 import React from 'react';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import { Screen } from '../../../components/base/screen';
+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 { NewsList } from '../../../components/news/news-list';
-import { ScheduleList } from '../../../components/schedule/schedule-list';
-import { useSchedule } from '../../../hooks/use-schedule';
-import { news } from '../../../mocks/news';
+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 { useConference } from '../../../hooks/use-conference';
+import { useNews } from '../../../hooks/use-news';
 
 interface HomePageProps {}
 
 export default function HomePage({}: HomePageProps) {
-  const { data } = useSchedule();
-
+  const conference = useConference();
+  const news = useNews();
   return (
     <Screen>
       <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} />
+      <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>
     </Screen>
   );
 }

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

@@ -0,0 +1,7 @@
+import { PresentationDetailsPage } from '../../../components/schedule/presentation-details-page';
+import { useSafeId } from '../../../utils/common.utils';
+
+export default function PresentationDetails() {
+  const slug = useSafeId();
+  return <PresentationDetailsPage slug={slug} />;
+}

app/(tabs)/presentation/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+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 { useConference } from '../../../hooks/use-conference';
+
+interface PresentationListPageProps {}
+
+export default function PresentationListPage({}: PresentationListPageProps) {
+  const { data, isError, isLoading } = useConference();
+  return (
+    <Screen>
+      <Header>
+        <Title>Programterv</Title>
+      </Header>
+      {isLoading && [0, 1, 2, 3].map((i) => <PresentationItemSkeleton key={i} />)}
+      {!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

@@ -0,0 +1,7 @@
+import { PresentationDetailsPage } from '../../../components/schedule/presentation-details-page';
+import { useSafeId } from '../../../utils/common.utils';
+
+export default function ScheduleEventDetails() {
+  const slug = useSafeId();
+  return <PresentationDetailsPage slug={slug} />;
+}

app/_layout.tsx

@@ -1,36 +1,21 @@
 import { QueryClientProvider } from '@tanstack/react-query';
-import { useFonts } from 'expo-font';
-import { Slot, SplashScreen } from 'expo-router';
-import { useEffect } from 'react';
+import { Slot } from 'expo-router';
 import { View } from 'react-native';
 
+import { Splash } from '../components/common/splash';
 import { queryClient } from '../config/query-client.config';
-import { FavoriteEventsProvider } from '../contexts/favorite-events.context';
+import { FavoritePresentationsProvider } from '../contexts/favorite-presentations.context';
 
 export default function MainLayout() {
-  const [loaded, error] = useFonts({
-    Raleway: require('../assets/fonts/Raleway-Regular.ttf'),
-    RalewayBold: require('../assets/fonts/Raleway-Bold.ttf'),
-    RalewayLight: require('../assets/fonts/Raleway-Light.ttf'),
-  });
-
-  useEffect(() => {
-    if (error) throw error;
-  }, [error]);
-
-  useEffect(() => {
-    if (loaded) SplashScreen.hideAsync();
-  }, [loaded]);
-
-  if (!loaded) return null;
-
   return (
     <QueryClientProvider client={queryClient}>
-      <FavoriteEventsProvider>
-        <View className='bg-slate-100 min-h-screen'>
-          <Slot />
-        </View>
-      </FavoriteEventsProvider>
+      <Splash>
+        <FavoritePresentationsProvider>
+          <View className='bg-slate-100 min-h-screen'>
+            <Slot />
+          </View>
+        </FavoritePresentationsProvider>
+      </Splash>
     </QueryClientProvider>
   );
 }

components/base/scroll-content.tsx

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

components/common/error-message.tsx

@@ -0,0 +1,14 @@
+import { Feather } from '@expo/vector-icons';
+import { View, ViewProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+
+export function ErrorMessage({ className, children, ...props }: ViewProps) {
+  return (
+    <View className={cn('gap-x-2 m-5 flex-row items-center justify-center', className)} {...props}>
+      <Feather name='alert-circle' size={24} color='#ef4444' />
+      <StyledText className='text-red-500 text-xl'>{children}</StyledText>
+    </View>
+  );
+}

components/common/header.tsx

@@ -3,6 +3,7 @@ import { useNavigation } from 'expo-router';
 import { Pressable, View, ViewProps } from 'react-native';
 
 import { cn } from '../../utils/common.utils';
+import { Separator } from './separator';
 
 interface HeaderProps extends ViewProps {}
 
@@ -17,7 +18,7 @@ export function Header({ children, className, ...props }: HeaderProps) {
         </Pressable>
       )}
       {children}
-      <View className='w-20 h-1 rounded-full bg-slate-300' />
+      <Separator className='my-0' />
     </View>
   );
 }

components/common/sectiontitle.tsx

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

components/common/separator.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+
+export function Separator({ className, ...props }: ViewProps) {
+  return <View className={cn('w-20 h-1 rounded-full bg-slate-300 my-5', className)} {...props} />;
+}

components/common/skeleton.tsx

@@ -0,0 +1,9 @@
+import { Animated, ViewProps } from 'react-native';
+
+import { usePulseAnimation } from '../../utils/animation.utils';
+import { cn } from '../../utils/common.utils';
+
+export function SkeletonRectangle({ className, style, ...props }: ViewProps) {
+  const { opacity } = usePulseAnimation();
+  return <Animated.View className={cn('bg-slate-200 rounded-xl', className)} style={[{ opacity }, style]} {...props} />;
+}

components/common/splash.tsx

@@ -0,0 +1,31 @@
+import { useFonts } from 'expo-font';
+import { SplashScreen } from 'expo-router';
+import { PropsWithChildren, useEffect } from 'react';
+
+import { useConference } from '../../hooks/use-conference';
+import { useNews } from '../../hooks/use-news';
+
+export function Splash({ children }: PropsWithChildren) {
+  const conference = useConference();
+  const news = useNews();
+
+  const [loaded, error] = useFonts({
+    Raleway: require('../../assets/fonts/Raleway-Regular.ttf'),
+    RalewayBold: require('../../assets/fonts/Raleway-Bold.ttf'),
+    RalewayLight: require('../../assets/fonts/Raleway-Light.ttf'),
+  });
+
+  const dataReady = conference.status !== 'pending' && news.status !== 'pending';
+
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded && dataReady) SplashScreen.hideAsync();
+  }, [loaded, dataReady]);
+
+  if (!loaded || !dataReady) return null;
+
+  return children;
+}

components/news/home-news-list.tsx

@@ -0,0 +1,14 @@
+import { NewsItemDto } from '../../types/news-api.type';
+import { StyledText } from '../base/text';
+import { NewsItem } from './news-item';
+
+interface HomeNewsListProps {
+  news: NewsItemDto[];
+}
+
+export function HomeNewsList({ news }: HomeNewsListProps) {
+  if (news.length === 0) {
+    return <StyledText className='text-center my-10'>Nincs megjeleníthető hír.</StyledText>;
+  }
+  return news.map((newsItem, index) => <NewsItem key={index} newsItem={newsItem} />);
+}