create-gufran-expo-app 2.0.0 → 2.0.2

package/template/src/navigation/MainStack.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { MainStackParamList } from '../types';
+import {
+  HomeScreen,
+  ProfileScreen,
+  SettingsScreen,
+  DetailsScreen,
+  ClubDetailsScreen,
+  SportHubScreen,
+  MyTeamScreen,
+  MyTeamDetailsScreen,
+  JoinTeam,
+  ChatThreadsScreen,
+  ChatScreen,
+  ReportMessageScreen,
+  Announcements,
+  VolunteerOpportunitiesScreen,
+  RafflesScreen,
+  RaffleDetailsScreen,
+  BuyRaffleTicketsScreen,
+  VolunteerOpportunitiesDetailsScreen,
+  MyReferralMembersScreen,
+  SetReminderScreen,
+  SetRaffleReminderScreen,
+  EventScreen
+} from '../screens';
+import { PendingRequestsScreen } from '../screens/teams/PendingRequestsScreen';
+import { JoinClubScreen } from '../screens/clubs/JoinClub';
+import { theme } from '../constants/theme';
+
+const Stack = createNativeStackNavigator<MainStackParamList>();
+
+export const MainStack: React.FC = () => {
+  return (
+    <Stack.Navigator
+      id={undefined}
+      initialRouteName="Home"
+      screenOptions={{
+        headerShown: false,
+        headerStyle: {
+          backgroundColor: theme.colors.background,
+        },
+        headerTintColor: theme.colors.text,
+        headerTitleStyle: {
+          fontWeight: theme.typography.fontWeight.semibold,
+          fontSize: theme.typography.fontSize.lg,
+        },
+        headerBackTitle: '',
+        animation: 'fade',
+        headerShadowVisible: false,
+      }}
+    >
+      <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Club Yakka', headerLargeTitle: true }} />
+      <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile', headerBackTitle: 'Back' }} />
+      <Stack.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          title: 'Settings',
+          headerBackTitle: 'Back',
+        }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={({ route }) => ({
+          title: route.params?.title || 'Details',
+          headerBackTitle: 'Back',
+        })}
+      />
+      <Stack.Screen
+        name="JoinClub"
+        component={JoinClubScreen}
+        options={{
+          title: 'Join Club',
+          headerBackTitle: 'Back',
+        }}
+      />
+
+      <Stack.Screen
+        name="ClubDetails"
+        component={ClubDetailsScreen}
+        options={{
+          title: 'Club Details',
+          headerBackTitle: 'Back',
+        }}
+      />
+      <Stack.Screen
+        name="SportHub"
+        component={SportHubScreen}
+        options={{
+          title: 'MY SPORT HUB',
+          headerBackTitle: 'Back',
+        }}
+      />
+      <Stack.Screen
+        name="MyTeam"
+        component={MyTeamScreen}
+      />
+      <Stack.Screen
+        name="MyTeamDetails"
+        component={MyTeamDetailsScreen}
+        options={{
+          title: 'Team Details',
+          headerBackTitle: 'Back',
+        }}
+      />
+      <Stack.Screen
+        name="PendingRequests"
+        component={PendingRequestsScreen}
+        options={{
+          title: 'Pending Requests',
+          headerBackTitle: 'Back',
+        }}
+      />
+      <Stack.Screen
+        name="JoinTeam"
+        component={JoinTeam}
+      />
+
+      <Stack.Screen
+        name="ChatThreads"
+        component={ChatThreadsScreen}
+      />
+      <Stack.Screen
+        name="ChatScreen"
+        component={ChatScreen}
+      />
+      <Stack.Screen
+        name="ReportMessage"
+        component={ReportMessageScreen}
+        options={{
+          presentation: 'transparentModal',
+          headerShown: false,
+          animation: 'fade',
+        }}
+      />
+      <Stack.Screen
+        name="Announcements"
+        component={Announcements}
+      />
+      <Stack.Screen
+        name="VolunteerOpportunitiesScreen"
+        component={VolunteerOpportunitiesScreen}
+      />
+      <Stack.Screen
+        name="VolunteerOpportunitiesDetailsScreen"
+        component={VolunteerOpportunitiesDetailsScreen}
+      />
+      <Stack.Screen
+        name="Raffles"
+        component={RafflesScreen}
+      />
+      <Stack.Screen
+        name="RaffleDetails"
+        component={RaffleDetailsScreen}
+      />
+      <Stack.Screen
+        name="BuyRaffleTickets"
+        component={BuyRaffleTicketsScreen}
+      />
+      <Stack.Screen
+        name="MyReferralMembers"
+        component={MyReferralMembersScreen}
+      />
+      <Stack.Screen
+        name="SetReminder"
+        component={SetReminderScreen}
+      />
+      <Stack.Screen
+        name="SetRaffleReminder"
+        component={SetRaffleReminderScreen}
+      />
+
+
+      <Stack.Screen
+        name="EventScreen"
+        component={EventScreen}
+      />
+    </Stack.Navigator>
+  );
+};

package/template/src/navigation/MiddleStack.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { MiddleStackParamList } from '../types';
+import { AddMemberScreen } from '../screens/auth';
+import { theme } from '../constants';
+
+const Stack = createNativeStackNavigator<MiddleStackParamList>();
+
+export const MiddleStack: React.FC = () => {
+  return (
+    <Stack.Navigator
+      id={undefined}
+      initialRouteName="AddMember"
+      screenOptions={{
+        headerShown: false,
+        headerStyle: {
+          backgroundColor: theme.colors.background,
+        },
+        headerTintColor: theme.colors.text,
+        headerTitleStyle: {
+          fontWeight: theme.typography.fontWeight.semibold,
+          fontSize: theme.typography.fontSize.lg,
+        },
+        headerBackTitle: '',
+        animation: 'fade',
+        headerShadowVisible: false,
+      }}
+    >
+      <Stack.Screen
+        name="AddMember"
+        component={AddMemberScreen}
+      />
+    </Stack.Navigator>
+  );
+};

package/template/src/navigation/RootNavigator.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { useAuthStore } from '../stores/authStore';
+import { AuthStack } from './AuthStack';
+import { MiddleStack } from './MiddleStack';
+import { MainStack } from './MainStack';
+import { LoadingSpinner } from '../components/common';
+import * as SplashScreen from 'expo-splash-screen';
+import { navigationRef } from './navigationRef';
+import NotificationManager from '../utils/NotificationManager';
+
+// Navigation component that switches between Auth, Middle and Main stacks
+const AppNavigator: React.FC = () => {
+  const isLoading = useAuthStore((state) => state.isLoading);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const user = useAuthStore((state) => state.user);
+
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!isAuthenticated) {
+    return <AuthStack />;
+  }
+
+  // If user is authenticated but needs to add member, show MiddleStack
+  if (user?.isAddMember) {
+    return <MiddleStack />;
+  }
+
+  // Otherwise show MainStack
+  return <MainStack />;
+};
+
+// Root Navigator
+export const RootNavigator: React.FC = () => {
+  useEffect(() => {
+    const initializeFCM = async () => {
+      try {
+        // Initialize notification manager (this handles initial notifications from killed state)
+        await NotificationManager.initialize();
+
+        // Set up foreground event listener (when app is active)
+        NotificationManager.setForegroundEventListener((type, detail) => {
+          console.log("Foreground notification event:", type, detail);
+          // The navigation handling is now done inside NotificationManager
+        });
+
+        // Set up background event listener (when app is backgrounded)
+        NotificationManager.setBackgroundEventListener((type, detail) => {
+          console.log("Background notification event:", type, detail);
+          // The navigation handling is now done inside NotificationManager
+        });
+
+        // Handle initial notification for Android (when app is launched from notification)
+        NotificationManager.setInitialNotificationAndroidEvent(
+          ({ notification, pressAction }) => {
+            // The navigation handling is now done inside NotificationManager
+          }
+        );
+      } catch (error) {
+        console.error("Error initializing FCM:", error);
+      }
+    };
+
+    initializeFCM();
+
+    return () => {
+      NotificationManager.removeListeners();
+    };
+  }, []);
+
+  // When authentication state changes to a stack that contains the target routes,
+  // attempt any pending navigation that may have been queued from a notification.
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const user = useAuthStore((state) => state.user);
+  useEffect(() => {
+    // Only try when we are in the main app (not auth / middle stack)
+    if (isAuthenticated && !user?.isAddMember) {
+      // Small delay to ensure navigator screens are mounted
+      const id = setTimeout(() => {
+        NotificationManager.executePendingNavigation();
+      }, 100);
+      return () => clearTimeout(id);
+    }
+  }, [isAuthenticated, user?.isAddMember]);
+
+  return (
+    <NavigationContainer 
+      ref={navigationRef}
+      onReady={() => {
+        setTimeout(() => {
+          SplashScreen.hide();
+        }, 300);
+        // Process any pending navigation queued from a notification
+        NotificationManager.executePendingNavigation();
+      }}>
+      <AppNavigator />
+    </NavigationContainer>
+  );
+};

package/template/src/navigation/index.ts

@@ -0,0 +1,5 @@
+export * from './RootNavigator';
+export * from './AuthStack';
+export * from './MiddleStack';
+export * from './MainStack';
+export * from './navigationRef';

package/template/src/navigation/navigationRef.ts

@@ -0,0 +1,5 @@
+import { createNavigationContainerRef } from '@react-navigation/native';
+import { RootStackParamList } from '../types/navigation';
+
+// Create navigation reference
+export const navigationRef = createNavigationContainerRef<RootStackParamList>();

package/template/src/providers/QueryProvider.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Create a client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 5 * 60 * 1000, // 10 minutes (formerly cacheTime)
+    },
+    mutations: {
+      retry: 1,
+    },
+  },
+});
+
+interface QueryProviderProps {
+  children: React.ReactNode;
+}
+
+export const QueryProvider: React.FC<QueryProviderProps> = ({ children }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+};
+
+export { queryClient };

package/template/src/screens/DetailsScreen.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Image } from 'react-native';
+import { SafeAreaWrapper, Button } from '../components/common';
+import { DetailsScreenProps } from '../types';
+import { theme } from '../constants';
+import { formatDateTime } from '../utils';
+
+export const DetailsScreen: React.FC<DetailsScreenProps> = ({ route, navigation }) => {
+  const { itemId, title } = route.params;
+
+  // Mock item data - in a real app, you'd fetch this based on itemId
+  const itemData = {
+    id: itemId,
+    title: title || 'Sample Item',
+    description: 'This is a detailed description of the item. It contains comprehensive information about the features, specifications, and other relevant details that users might want to know.',
+    image: 'https://via.placeholder.com/300x200/007AFF/FFFFFF?text=Item+Image',
+    category: 'Electronics',
+    price: '$299.99',
+    rating: 4.5,
+    reviews: 128,
+    inStock: true,
+    createdAt: new Date('2024-01-10T10:30:00Z'),
+    updatedAt: new Date('2024-01-15T14:45:00Z'),
+    tags: ['Popular', 'Featured', 'New Arrival'],
+  };
+
+  const goBack = () => {
+    navigation.goBack();
+  };
+
+  const handlePurchase = () => {
+    // Handle purchase logic
+    console.log('Purchase item:', itemId);
+  };
+
+  const handleAddToCart = () => {
+    // Handle add to cart logic
+    console.log('Add to cart:', itemId);
+  };
+
+  const renderStars = (rating: number) => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 !== 0;
+
+    for (let i = 0; i < fullStars; i++) {
+      stars.push('⭐');
+    }
+    if (hasHalfStar) {
+      stars.push('✨');
+    }
+    return stars.join('');
+  };
+
+  return (
+    <SafeAreaWrapper>
+      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+        <View style={styles.imageContainer}>
+          <Image 
+            source={{ uri: itemData.image }} 
+            style={styles.image}
+            resizeMode="cover"
+          />
+          <View style={styles.statusBadge}>
+            <Text style={styles.statusText}>
+              {itemData.inStock ? 'In Stock' : 'Out of Stock'}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{itemData.title}</Text>
+            <Text style={styles.price}>{itemData.price}</Text>
+          </View>
+
+          <View style={styles.ratingContainer}>
+            <Text style={styles.rating}>
+              {renderStars(itemData.rating)} {itemData.rating}
+            </Text>
+            <Text style={styles.reviews}>({itemData.reviews} reviews)</Text>
+          </View>
+
+          <View style={styles.tagsContainer}>
+            {itemData.tags.map((tag, index) => (
+              <View key={`tag-${tag}-${index}`} style={styles.tag}>
+                <Text style={styles.tagText}>{tag}</Text>
+              </View>
+            ))}
+          </View>
+
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Description</Text>
+            <Text style={styles.description}>{itemData.description}</Text>
+          </View>
+
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Details</Text>
+            
+            <View style={styles.detailItem}>
+              <Text style={styles.detailLabel}>Item ID</Text>
+              <Text style={styles.detailValue}>{itemData.id}</Text>
+            </View>
+            
+            <View style={styles.detailItem}>
+              <Text style={styles.detailLabel}>Category</Text>
+              <Text style={styles.detailValue}>{itemData.category}</Text>
+            </View>
+            
+            <View style={styles.detailItem}>
+              <Text style={styles.detailLabel}>Created</Text>
+              <Text style={styles.detailValue}>{formatDateTime(itemData.createdAt)}</Text>
+            </View>
+            
+            <View style={styles.detailItem}>
+              <Text style={styles.detailLabel}>Last Updated</Text>
+              <Text style={styles.detailValue}>{formatDateTime(itemData.updatedAt)}</Text>
+            </View>
+          </View>
+
+          <View style={styles.actionSection}>
+            {itemData.inStock && (
+              <>
+                <Button
+                  title="Purchase Now"
+                  onPress={handlePurchase}
+                  variant="primary"
+                  style={styles.button}
+                />
+                
+                <Button
+                  title="Add to Cart"
+                  onPress={handleAddToCart}
+                  variant="secondary"
+                  style={styles.button}
+                />
+              </>
+            )}
+            
+            <Button
+              title="Go Back"
+              onPress={goBack}
+              variant="outline"
+              style={styles.button}
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaWrapper>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  imageContainer: {
+    position: 'relative',
+    height: 250,
+    backgroundColor: theme.colors.surface,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  statusBadge: {
+    position: 'absolute',
+    top: theme.spacing.md,
+    right: theme.spacing.md,
+    backgroundColor: theme.colors.success,
+    paddingHorizontal: theme.spacing.sm,
+    paddingVertical: theme.spacing.xs,
+    borderRadius: theme.borderRadius.md,
+  },
+  statusText: {
+    color: theme.colors.background,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium,
+  },
+  content: {
+    padding: theme.spacing.lg,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: theme.spacing.md,
+  },
+  title: {
+    flex: 1,
+    fontSize: theme.typography.fontSize.xl,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.text,
+    marginRight: theme.spacing.md,
+  },
+  price: {
+    fontSize: theme.typography.fontSize.xl,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.primary,
+  },
+  ratingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: theme.spacing.md,
+  },
+  rating: {
+    fontSize: theme.typography.fontSize.md,
+    color: theme.colors.text,
+    marginRight: theme.spacing.sm,
+  },
+  reviews: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textSecondary,
+  },
+  tagsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: theme.spacing.lg,
+    gap: theme.spacing.sm,
+  },
+  tag: {
+    backgroundColor: theme.colors.primary,
+    paddingHorizontal: theme.spacing.sm,
+    paddingVertical: theme.spacing.xs,
+    borderRadius: theme.borderRadius.sm,
+  },
+  tagText: {
+    color: theme.colors.background,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium,
+  },
+  section: {
+    marginBottom: theme.spacing.lg,
+  },
+  sectionTitle: {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.semibold,
+    color: theme.colors.text,
+    marginBottom: theme.spacing.md,
+  },
+  description: {
+    fontSize: theme.typography.fontSize.md,
+    color: theme.colors.textSecondary,
+    lineHeight: 22,
+  },
+  detailItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: theme.spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
+  detailLabel: {
+    fontSize: theme.typography.fontSize.md,
+    color: theme.colors.textSecondary,
+  },
+  detailValue: {
+    fontSize: theme.typography.fontSize.md,
+    color: theme.colors.text,
+    fontWeight: theme.typography.fontWeight.medium,
+  },
+  actionSection: {
+    gap: theme.spacing.md,
+    marginTop: theme.spacing.lg,
+  },
+  button: {
+    marginBottom: theme.spacing.sm,
+  },
+});