Merge pull request #45 from simonyiszk/major-improvements

Major improvements

app/(tabs)/settings.tsx

@@ -7,6 +7,7 @@ import { ScrollContent } from '../../components/base/scroll-content';
 import { Header } from '../../components/common/header';
 import { Setting } from '../../components/common/settings/setting';
 import { Title } from '../../components/common/title';
+import { AppDetails } from '../../components/settings/app-details';
 import i18n from '../../services/i18-next';
 import { SettingsStorageService } from '../../services/settings-storage.service';
 import { SettingsType } from '../../types/settings.type';
@@ -89,6 +90,7 @@ export default function SettingsPage() {
         {/*  currentValue={settings?.notifications ?? false}*/}
         {/*  onChange={toggleNotifications}*/}
         {/*/>*/}
+        <AppDetails />
       </ScrollContent>
     </Screen>
   );

components/common/error-boundary.tsx

@@ -14,7 +14,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
   usePageView('error');
   return (
     <View
-      className='bg-blue-500 items-center justify-center flex-1 space-y-5'
+      className='bg-blue-500 items-center justify-center h-full space-y-5'
       style={{
         paddingTop: top,
         paddingBottom: bottom,
@@ -27,7 +27,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
         <Subtitle className='text-white/50 flex-shrink'>{props.error.message}</Subtitle>
       </ScrollView>
       <Subtitle className='text-white/50'>{t('errBoundary.sub')}</Subtitle>
-      <StyledButton onPress={props.retry} className='bg-blue-900'>
+      <StyledButton onPress={props.retry} className='bg-blue-900 mb-10'>
         {t('errBoundary.retry')}
       </StyledButton>
     </View>

components/map/resource-sheet.tsx

@@ -6,6 +6,8 @@ import { useAnimated } from '../../utils/animation.utils';
 import { cn } from '../../utils/common.utils';
 import { StyledText } from '../base/text';
 
+const DISPLAY_ID = false;
+
 interface ResourceSheetProps extends ViewProps {
   resource: MapResource | undefined;
 }
@@ -34,7 +36,8 @@ export function ResourceSheet({ resource, className, ...props }: ResourceSheetPr
       {...props}
     >
       <StyledText className='text-2xl'>
-        {savedResource?.title} ({savedResource?.id})
+        {savedResource?.title}
+        {DISPLAY_ID && ` (${savedResource?.id})`}
       </StyledText>
       <StyledText className='text-slate-500 text-lg'>{savedResource?.description.hu}</StyledText>
     </Animated.View>

components/schedule/layouts/home-presentation-list.tsx

@@ -1,4 +1,5 @@
-import { useMemo } from 'react';
+import { useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PresentationDto } from '../../../types/conference-api.type';
@@ -11,12 +12,26 @@ interface HomePresentationListProps {
 }
 
 export function HomePresentationList({ presentations }: HomePresentationListProps) {
+  const [date, setDate] = useState(new Date());
   const filteredPresentations = useMemo(
     () => presentations.filter((event) => isPresentationUpcoming(event) || isPresentationCurrent(event)),
-    [presentations]
+    [presentations, date]
   );
   const { t } = useTranslation();
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000 * 15);
+    return () => clearInterval(interval);
+  }, []);
+
+  useFocusEffect(
+    useCallback(() => {
+      setDate(new Date());
+    }, [])
+  );
+
   if (filteredPresentations.length === 0) {
     return <StyledText className='mx-5 text-center my-10'>{t('home.empty')}</StyledText>;
   }

components/schedule/layouts/presentation-list.tsx

@@ -1,7 +1,10 @@
+import { useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlatList } from 'react-native';
 
 import { PresentationDto } from '../../../types/conference-api.type';
+import { isPresentationPast } from '../../../utils/presentation.utils';
 import { StyledText } from '../../base/text';
 import { PresentationItem } from '../elements/presentation-item';
 
@@ -10,12 +13,42 @@ interface PresentationListProps {
 }
 
 export function PresentationList({ presentations }: PresentationListProps) {
+  const [date, setDate] = useState(new Date());
+  const ref = useRef<FlatList>(null);
   const { t } = useTranslation();
+
+  useEffect(() => {
+    if (ref.current && presentations.length > 0) {
+      const firstUpcomingIndex = presentations.findIndex((presentation) => !isPresentationPast(presentation));
+      if (firstUpcomingIndex !== -1) ref.current.scrollToIndex({ index: firstUpcomingIndex, animated: true });
+    }
+  }, [ref.current, presentations, date]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000 * 15);
+    return () => clearInterval(interval);
+  }, []);
+
+  useFocusEffect(
+    useCallback(() => {
+      setDate(new Date());
+    }, [])
+  );
+
   if (presentations.length === 0) {
     return <StyledText className='mx-5 text-center my-10'>{t('presentations.empty')}</StyledText>;
   }
+
   return (
     <FlatList
+      ref={ref}
+      onScrollToIndexFailed={(info) => {
+        setTimeout(() => {
+          ref.current?.scrollToIndex({ index: info.index, animated: true });
+        }, 100);
+      }}
       contentContainerStyle={{ paddingBottom: 130 }}
       data={presentations}
       className='px-5 pt-5'

components/settings/app-details.tsx

@@ -0,0 +1,37 @@
+import Constants from 'expo-constants';
+import * as Updates from 'expo-updates';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Platform, View } from 'react-native';
+
+import { MessagingService } from '../../services/messaging.service';
+import { StyledText } from '../base/text';
+
+export function AppDetails() {
+  const [userId, setUserId] = useState<string | null>(null);
+  const appVersion = useMemo(() => {
+    const update = Updates.updateId ?? '?';
+    const appVersion = Constants.expoConfig?.version ?? '?';
+    const versionCode =
+      Platform.OS === 'android' ? Constants.expoConfig?.android?.versionCode : Constants.expoConfig?.ios?.buildNumber;
+    return `${appVersion} (${versionCode ?? '?'}) - ${update}`;
+  }, []);
+
+  const appName = Constants.expoConfig?.name ?? 'App';
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    MessagingService.getUserId().then(setUserId);
+  }, []);
+
+  return (
+    <View className='items-center space-y-2'>
+      <StyledText className='text-slate-500'>{appName}</StyledText>
+      <StyledText className='text-slate-500'>{appVersion}</StyledText>
+      <StyledText className='text-slate-500'>UID: {userId}</StyledText>
+      <StyledText className='text-slate-500 text-center'>{t('settings.author')}</StyledText>
+      <StyledText className='text-slate-500'>{new Date().getFullYear()}.</StyledText>
+    </View>
+  );
+}

services/i18n_data.ts

@@ -37,6 +37,8 @@ export const resources = {
         default: 'System',
         language: 'Language',
         notifications: 'Notifications',
+        userIdLabel: 'Anonymous user ID',
+        author: 'Made with ❤ by\nKir-Dev & Simonyi Károly College for Advanced Studies',
       },
       unmatched: {
         main: 'You have reached an unmatched route',
@@ -93,6 +95,8 @@ export const resources = {
         default: 'Rendszer alapján',
         language: 'Nyelv',
         notifications: 'Értesítések',
+        userIdLabel: 'Anonim felhasználói azonosító',
+        author: 'Készítette ❤-ből\na️ Kir-Dev és a Simonyi Károly Szakkollégium',
       },
       unmatched: {
         main: 'Ismeretlen képernyőre jutottál',

services/messaging.service.ts

@@ -32,7 +32,7 @@ export class MessagingService {
     });
   }
 
-  private static async getUserId(): Promise<string> {
+  static async getUserId(): Promise<string> {
     if (this.userId) return this.userId;
     let userIdFromStorage = await AsyncStorage.getItem('userId');
     if (!userIdFromStorage) {

types/i18next.d.ts

@@ -0,0 +1,11 @@
+import { resources } from '../services/i18n_data';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    fallbackLng: 'hu';
+    defaultNS: 'ns1';
+    resources: {
+      ns1: typeof resources.hu.translation;
+    };
+  }
+}

utils/presentation.utils.ts

@@ -2,23 +2,25 @@ import { differenceInMinutes, isAfter, isBefore } from 'date-fns';
 
 import { PresentationDto } from '../types/conference-api.type';
 
-const currentDate = new Date();
+function getCurrentDate() {
+  return new Date();
+}
 
 export function isPresentationPast(presentation: PresentationDto) {
-  const now = currentDate;
+  const now = getCurrentDate();
   const end = new Date(presentation.endTime);
   return isBefore(end, now);
 }
 
 export function isPresentationCurrent(presentation: PresentationDto) {
-  const now = currentDate;
+  const now = getCurrentDate();
   const start = new Date(presentation.startTime);
   const end = new Date(presentation.endTime);
   return isBefore(start, now) && isAfter(end, now);
 }
 
 export function isPresentationUpcoming(presentation: PresentationDto) {
-  const now = currentDate;
+  const now = getCurrentDate();
   const start = new Date(presentation.startTime);
   return isAfter(start, now) && differenceInMinutes(start, now) < 15;
 }