feat(home): randomize some texts

Author: mtthp

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### Added
+
+- A little bit of random in text descriptions.
+- Event description is selectable.
+
 ### Changed
 
 - Prefer error icon instead of chip on most screens.

app.json

@@ -90,7 +90,7 @@
       "supportsTablet": true
     },
     "name": "Le Poulailler",
-    "newArchEnabled": true,
+    "newArchEnabled": false,
     "orientation": "portrait",
     "owner": "coworking-metz",
     "packagerOpts": {

package-lock.json

@@ -72,7 +72,7 @@
     "i18next": "^25.3.2",
     "intl-pluralrules": "^2.0.1",
     "lodash.set": "^4.3.2",
-    "lottie-react-native": "7.1.0",
+    "lottie-react-native": "7.2.4",
     "markdown-it-plain-text": "^0.3.0",
     "moti": "^0.30.0",
     "patch-package": "^8.0.0",
@@ -92,7 +92,7 @@
     "react-native-open-maps": "^0.4.3",
     "react-native-progress-wheel": "^2.1.0",
     "react-native-read-more-text": "^1.1.2",
-    "react-native-reanimated": "~3.16.6",
+    "react-native-reanimated": "~3.18.0",
     "react-native-reanimated-carousel": "4.0.2",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",

package.json

@@ -2,7 +2,7 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useIsFocused } from '@react-navigation/native';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
-import { capitalize, isNil } from 'lodash';
+import { capitalize, isNil, sample } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { View } from 'react-native';
@@ -98,12 +98,22 @@ const Attendance = () => {
     return groups;
   }, [currentMembers]);
 
+  const emptyTitle = useMemo(() => {
+    const i18nEmptyTitle = t('attendance.empty.title', { returnObjects: true });
+    return Array.isArray(i18nEmptyTitle) ? sample(i18nEmptyTitle) : i18nEmptyTitle;
+  }, [t, currentMembersUpdatedAt]);
+
+  const emptyDescription = useMemo(() => {
+    const text = t('attendance.empty.description', { returnObjects: true });
+    return Array.isArray(text) ? sample(text) : text;
+  }, [t, currentMembersUpdatedAt]);
+
   return (
     <>
       <ServiceLayout
         contentStyle={tw`pt-6 pb-12 gap-6`}
         description={t('attendance.description')}
-        title={t('attendance.title', { count: currentMembers?.length })}
+        title={t('attendance.title', { count: currentMembers?.length ?? 0 })}
         onRefresh={refetchCurrentMembers}>
         <View style={tw`flex flex-row items-center gap-2 min-h-6 px-6`}>
           {!isNil(durationSinceLastFetch) ? (
@@ -190,13 +200,13 @@ const Attendance = () => {
                 entering={FadeInLeft.duration(500)}
                 numberOfLines={1}
                 style={tw`text-xl text-center font-bold tracking-tight text-slate-900 dark:text-gray-200`}>
-                {t('attendance.empty.title')}
+                {emptyTitle}
               </AppText>
               <AppText
                 entering={FadeInLeft.duration(500).delay(150)}
                 numberOfLines={2}
                 style={tw`text-base text-center text-slate-500 dark:text-slate-400`}>
-                {t('attendance.empty.description')}
+                {emptyDescription}
               </AppText>
             </View>
           )}

src/app/(public)/attendance.tsx

@@ -152,7 +152,7 @@ export default function CalendarEventPage() {
               />
             ) : null}
             {event.description ? (
-              <AppText style={tw`text-base font-normal text-gray-500 mx-6 mt-6`}>
+              <AppText selectable style={tw`text-base font-normal text-gray-500 mx-6 mt-6`}>
                 {event.description}
               </AppText>
             ) : null}

src/app/(public)/events/[eventId].tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { NetworkStateType, useNetworkState } from 'expo-network';
 import { Link } from 'expo-router';
-import { includes } from 'lodash';
+import { includes, sample } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, View } from 'react-native';
@@ -16,19 +16,20 @@ import Animated, {
   FadeOutDown,
   StretchInY,
 } from 'react-native-reanimated';
+import { toast } from 'sonner-native';
+import tw, { useDeviceContext } from 'twrnc';
 import AppText from '@/components/AppText';
 import AppTouchable from '@/components/AppTouchable';
 import ErrorBadge from '@/components/ErrorBagde';
-import { type PeriodType } from '@/components/Events/PeriodBottomSheet';
 import AppointmentCard from '@/components/Home/AppointmentCard';
 import AttendanceCount from '@/components/Home/AttendanceCount';
 import BalanceBottomSheet from '@/components/Home/BalanceBottomSheet';
 import BalanceCard from '@/components/Home/BalanceCard';
 import BirthdayBottomSheet from '@/components/Home/BirthdayBottomSheet';
 import BirthdayCard from '@/components/Home/BirthdayCard';
-import CalendarEmptyState from '@/components/Home/CalendarEmptyState';
 import CalendarEventCard from '@/components/Home/CalendarEventCard';
 import DevicesCard from '@/components/Home/DevicesCard';
+import HomeCalendarEmptyState from '@/components/Home/HomeCalendarEmptyState';
 import HomeLayout from '@/components/Home/HomeLayout';
 import MembershipBottomSheet from '@/components/Home/MembershipBottomSheet';
 import MembershipCard from '@/components/Home/MembershipCard';
@@ -56,8 +57,6 @@ import {
 import useAuthStore from '@/stores/auth';
 import useSettingsStore from '@/stores/settings';
 import useToastStore from '@/stores/toast';
-import { toast } from 'sonner-native';
-import tw, { useDeviceContext } from 'twrnc';
 
 const MAX_WIDTH = 672; // tw`max-w-2xl`
 
@@ -167,6 +166,7 @@ export default function HomeScreen() {
     data: calendarEvents,
     isLoading: isLoadingCalendarEvents,
     isFetching: isFetchingCalendarEvents,
+    dataUpdatedAt: calendarEventsUpdatedAt,
     refetch: refreshCalendarEvents,
     error: calendarEventsError,
   } = useQuery({
@@ -186,18 +186,6 @@ export default function HomeScreen() {
     );
   }, [calendarEvents, activeSince]);
 
-  const firstPeriodWithEvents: PeriodType = useMemo(() => {
-    const [nextEvent] = nextCalendarEvents?.filter(({ end }) => dayjs().isBefore(end)) || [];
-    if (nextEvent) {
-      if (dayjs(nextEvent.start).isSame(dayjs(), 'week')) {
-        return 'week';
-      } else if (dayjs(nextEvent.start).isSame(dayjs(), 'month')) {
-        return 'month';
-      }
-    }
-    return null;
-  }, [nextCalendarEvents]);
-
   const onRefresh = useCallback(() => {
     return Promise.all([
       authStore.user?.id && refetchProfile(),
@@ -210,10 +198,10 @@ export default function HomeScreen() {
 
   const onSuccessiveTaps = useCallback(() => {
     toastStore.add({
-      message: t('home.onSuccessiveTaps.message'),
+      message: `${sample(t('home.onSuccessiveTaps.message', { returnObjects: true }))}`,
       type: 'info',
       action: {
-        label: t('home.onSuccessiveTaps.action'),
+        label: `${sample(t('home.onSuccessiveTaps.action', { returnObjects: true }))}`,
         onPress: async () => {
           toast.dismiss();
           contact();
@@ -337,6 +325,7 @@ export default function HomeScreen() {
           error={
             currentMembersError && !isSilentError(currentMembersError) ? currentMembersError : null
           }
+          lastFetch={currentMembersUpdatedAt}
           loading={isLoadingCurrentMembers}
           members={currentMembers}
           style={tw`mt-4`}
@@ -478,19 +467,11 @@ export default function HomeScreen() {
               </Animated.View>
             ))
           ) : (
-            <CalendarEmptyState
-              description={t('home.calendar.empty.label')}
-              style={tw`w-full h-full mt-4`}>
-              <Link
-                asChild
-                href={['/events', firstPeriodWithEvents && `period=${firstPeriodWithEvents}`]
-                  .filter(Boolean)
-                  .join('?')}>
-                <AppText style={tw`text-base font-normal text-amber-500 text-center mt-4`}>
-                  {t('home.calendar.empty.action')}
-                </AppText>
-              </Link>
-            </CalendarEmptyState>
+            <HomeCalendarEmptyState
+              events={nextCalendarEvents}
+              lastFetch={calendarEventsUpdatedAt}
+              style={tw`w-full h-full mt-4`}
+            />
           )}
         </ScrollView>
       </Animated.View>

src/app/(public)/home.tsx

@@ -4,7 +4,9 @@ import Animated, { AnimatedProps } from 'react-native-reanimated';
 import { AnimatedText } from 'react-native-reanimated/lib/typescript/component/Text';
 import { getFamilyForWeight } from '@/helpers/text';
 
-const AppText: ForwardRefRenderFunction<AnimatedText, AnimatedProps<TextProps>> = (
+export type AppTextProps = AnimatedProps<TextProps>;
+
+const AppText: ForwardRefRenderFunction<AnimatedText, AppTextProps> = (
   { children, style, ...otherProps },
   ref,
 ) => {

src/components/AppText.tsx

@@ -242,7 +242,7 @@ const PairDeviceBottomSheet = ({
     animation.current?.play(100, 150);
   }, [animation]);
 
-  const enddAnimation = useCallback(() => {
+  const endAnimation = useCallback(() => {
     setLoopAnimation(false);
     setEndAnimation(false);
     animation.current?.play(150, 250);
@@ -258,7 +258,7 @@ const PairDeviceBottomSheet = ({
 
   const onAnimationFinish = useCallback(() => {
     if (shouldEndAnimation) {
-      enddAnimation();
+      endAnimation();
     } else if (shouldLoopAnimation) {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
       continueAnimation();