Locate Features: Implement project mapping and tutorial

app/(auth)/(home)/_layout.tsx

@@ -75,13 +75,6 @@ function HomeLayout() {
                 tabBarButton: (props) => <TabBarButton {...props} />,
             }}
         >
-            <Tabs.Screen
-                name="index"
-                options={{
-                    headerShown: false,
-                    href: null,
-                }}
-            />
             <Tabs.Screen
                 name="projects"
                 options={{

app/(auth)/(home)/profile.tsx

@@ -6,7 +6,6 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-    Alert,
     Linking,
     RefreshControl,
     ScrollView,
@@ -27,6 +26,7 @@ import InlineListView from '@/components/InlineListView';
 import Page from '@/components/Page';
 import ProfileHeader from '@/components/ProfileHeader';
 import ProfileStats from '@/components/ProfileStats';
+import showConfirm from '@/components/showConfirm';
 import Text from '@/components/Text';
 import { showAlert } from '@/components/Toast';
 import {
@@ -158,26 +158,21 @@ function Profile() {
     }, []);
 
     const onHandleSignoutClick = useCallback(() => {
-        Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
-            {
-                text: 'Cancel',
-                style: 'cancel',
-            },
-            {
-                text: 'OK',
-                style: 'destructive',
-                onPress: () => {
-                    firebaseAuth.signOut().catch((error) => {
-                        showAlert({
-                            title: 'Sign out error',
-                            message: error,
-                            alertType: 'error',
-                        });
+        showConfirm({
+            title: 'Sign Out',
+            message: 'Are you sure you want to sign out?',
+            onConfirm: () => {
+                firebaseAuth.signOut().catch((error) => {
+                    showAlert({
+                        title: 'Sign out error',
+                        message: error,
+                        alertType: 'error',
                     });
-                    router.replace('/');
-                },
+                });
+                router.replace('/');
             },
-        ]);
+            destructive: true,
+        });
     }, [router]);
 
     const handleResetPress = useCallback(async () => {
@@ -201,20 +196,11 @@ function Profile() {
     }, [handleAsync, user, t]);
 
     const handleResetPasswordClick = useCallback(() => {
-        Alert.alert(
-            'Reset Password',
-            'An email will be sent to your account with the reset link. Are you sure you want to continue?',
-            [
-                {
-                    text: 'Cancel',
-                    style: 'cancel',
-                },
-                {
-                    text: 'OK',
-                    onPress: handleResetPress,
-                },
-            ],
-        );
+        showConfirm({
+            title: 'Reset Password',
+            message: 'An email will be sent to your account with the reset link. Are you sure you want to continue?',
+            onConfirm: handleResetPress,
+        });
     }, [handleResetPress]);
 
     const settingItems: ButtonLayoutProps[] = [

app/(auth)/(home)/projects.tsx

@@ -38,6 +38,7 @@ import {
     PROJECT_TYPE_COMPARE,
     PROJECT_TYPE_COMPLETENESS,
     PROJECT_TYPE_FIND,
+    PROJECT_TYPE_LOCATE_FEATURES,
     PROJECT_TYPE_STREET,
     PROJECT_TYPE_VALIDATE,
     PROJECT_TYPE_VALIDATE_IMAGE,
@@ -90,7 +91,6 @@ const createProjectStyles = (_: AppTheme, { featured }: { featured: boolean }) =
             },
             projectImage: {
                 height: 220,
-                aspectRatio: 1,
             },
             overlay: {
                 top: 0,
@@ -147,6 +147,7 @@ const projectTypeTextMapping: Record<FbProject['projectType'], string> = {
     [PROJECT_TYPE_VALIDATE]: 'validate',
     [PROJECT_TYPE_STREET]: 'street',
     [PROJECT_TYPE_VALIDATE_IMAGE]: 'validate image',
+    [PROJECT_TYPE_LOCATE_FEATURES]: 'locate features',
 };
 
 interface ProjectItemProps {

app/(auth)/exploreGroup/[id]/index.tsx

@@ -4,7 +4,6 @@
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-    Alert,
     Linking,
     RefreshControl,
     ScrollView,
@@ -29,6 +28,7 @@
 import InfoCard, { StatsInfo } from '@/components/InfoCard';
 import InlineListView from '@/components/InlineListView';
 import Page from '@/components/Page';
+import showConfirm from '@/components/showConfirm';
 import Text from '@/components/Text';
 import { showAlert } from '@/components/Toast';
 import {
@@ -196,7 +196,7 @@
         (action: UserGroupAction) => {
             const isJoin = action === 'join';
 
             const message = isJoin
                 ? 'Are you sure you want to join this group?'
                 : 'Are you sure you want to leave this group?\n\nAfter you leave, you will still remain on the leaderboard. Contributions made while a member will still count, but contributions after leaving will not.';
 
@@ -239,14 +239,10 @@
                     });
                 }
             };
-            Alert.alert(
-                isJoin ? 'Join User Group' : 'Leave User Group',
-                message,
-                [
-                    { text: 'Cancel', style: 'cancel' },
-                    { text: 'OK', onPress: proceed },
-                ],
-            );
+            showConfirm({
+                title: isJoin ? 'Join User Group' : 'Leave User Group',
+                onConfirm: proceed,
+            });
         },
         [userId, userGroupId, router],
     );

app/(auth)/project/[id]/index.tsx

@@ -81,6 +81,7 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
     },
     contributionText: {
         color: theme.card,
+        flexShrink: 1,
     },
     bottomBar: {
         borderTopWidth: 1,

app/(auth)/project/[id]/map/[taskGroupId].tsx

@@ -13,6 +13,7 @@ import { isNotDefined } from '@togglecorp/fujs';
 import { set as setToDatabase } from 'firebase/database';
 
 import CompareMappingSession from '@/components/CompareMappingSession';
+import LocateFeaturesMappingSession from '@/components/LocateFeaturesMappingSession';
 import Page from '@/components/Page';
 import SessionOutro, { type ResultSyncStatus } from '@/components/SessionOutro';
 import StreetMappingSession from '@/components/StreetMappingSession';
@@ -27,6 +28,7 @@ import {
     PROJECT_TYPE_COMPARE,
     PROJECT_TYPE_COMPLETENESS,
     PROJECT_TYPE_FIND,
+    PROJECT_TYPE_LOCATE_FEATURES,
     PROJECT_TYPE_STREET,
     PROJECT_TYPE_VALIDATE,
     PROJECT_TYPE_VALIDATE_IMAGE,
@@ -205,6 +207,15 @@ function MapTaskGroup() {
                             projectDetails={projectDetails}
                         />
                     )}
+                    {projectDetails?.projectType === PROJECT_TYPE_LOCATE_FEATURES && (
+                        <LocateFeaturesMappingSession
+                            taskGroupId={taskGroupId}
+                            projectDetails={projectDetails}
+                            results={results}
+                            onResultsChange={setResults}
+                            onSessionComplete={handleSessionComplete}
+                        />
+                    )}
                 </>
             )}
         </Page>

app/(auth)/project/[id]/tutorial.tsx

@@ -178,6 +178,11 @@ function Tutorial() {
                     attemptCounts={attemptCounts}
                     onScenarioSubmit={handleScenarioSubmit}
                     onScenarioShowAnswers={handleScenarioShowAnswers}
+                    projectCustomOptions={
+                        projectDetails && 'customOptions' in projectDetails
+                            ? projectDetails.customOptions
+                            : undefined
+                    }
                 />
             )}
         </Page>

app/(auth)/project/_layout.tsx

@@ -1,5 +1,7 @@
 import { Stack } from 'expo-router';
 
 export default function ProjectLayout() {
-    return <Stack screenOptions={{ headerShown: false }} />;
+    return (
+        <Stack screenOptions={{ headerShown: false }} />
+    );
 }

app/login.tsx

@@ -23,15 +23,11 @@ import useThemedStyles from '@/hooks/useThemedStyles';
 import { firebaseAuth } from '@/utils/firebase';
 
 const createStyles = (theme: AppTheme) => StyleSheet.create({
-    mainContent: {
-        flexDirection: 'column',
-        gap: 48,
-    },
     icon: {
         width: 128,
         height: 128,
     },
-    page: {
+    logoContainer: {
         paddingTop: 96,
     },
     text: {
@@ -87,12 +83,14 @@ function Login() {
         <Page
             title="Login"
             variant="brand"
-            style={styles.page}
         >
             <BlockListView
                 spacing="sm"
             >
-                <BlockListView withCenteredContent>
+                <BlockListView
+                    withCenteredContent
+                    style={styles.logoContainer}
+                >
                     <Image
                         style={styles.icon}
                         source={logo}

app/register.tsx

@@ -44,15 +44,11 @@ import {
 } from '@/utils/firebase';
 
 const createStyles = (theme: AppTheme) => StyleSheet.create({
-    mainContent: {
-        flexDirection: 'column',
-        gap: 48,
-    },
     icon: {
         width: 128,
         height: 128,
     },
-    page: {
+    logoContainer: {
         paddingTop: 96,
     },
     text: {
@@ -183,12 +179,14 @@ function Register() {
         <Page
             title="Register"
             variant="brand"
-            style={styles.page}
         >
             <BlockListView
                 spacing="sm"
             >
-                <BlockListView withCenteredContent>
+                <BlockListView
+                    withCenteredContent
+                    style={styles.logoContainer}
+                >
                     <Image
                         style={styles.icon}
                         source={logo}

components/ButtonLayout.tsx

@@ -97,6 +97,9 @@ const createStyles = (
         disabled: {
             opacity: 0.4,
         },
+        leftContent: {
+            marginRight: 'auto',
+        },
         rightContent: {
             marginLeft: 'auto',
         },
@@ -112,6 +115,7 @@ export interface ButtonLayoutProps extends Omit<InlineLayoutProps, 'withPadding'
     title?: string;
     fullWidth?: boolean;
     onPress?: () => void;
+    icon?: React.ReactNode;
     children?: React.ReactNode;
     action?: React.ReactNode
     accessibilityLabel?: string;
@@ -124,6 +128,7 @@ function ButtonLayout(props: ButtonLayoutProps) {
         spacingOffset = -1,
         withoutPadding = false,
         disabled,
+        icon,
         iconName,
         title,
         onPress,
@@ -167,6 +172,7 @@ function ButtonLayout(props: ButtonLayoutProps) {
                 {...inlineLayoutProps}
                 withCenteredContent={styleVariant !== 'block'}
             >
+                {icon && <View style={styles.leftContent}>{icon}</View>}
                 {isDefined(iconName) && (
                     <Icon
                         style={styles.icon}

components/CompareMappingSession.tsx

@@ -147,10 +147,13 @@ function CompareMappingSession(props: Props) {
     }, [options]);
 
     const handleTilePress = useCallback((taskId: string) => {
-        onResultsChange((prevResults) => ({
-            ...prevResults,
-            [taskId]: getNextValue(prevResults[taskId]),
-        }));
+        onResultsChange((prevResults) => {
+            const prevValue = prevResults[taskId];
+            return {
+                ...prevResults,
+                [taskId]: getNextValue(typeof prevValue === 'number' ? prevValue : undefined),
+            };
+        });
     }, [getNextValue, onResultsChange]);
 
     const optionsByValue = useMemo(() => (
@@ -203,7 +206,7 @@ function CompareMappingSession(props: Props) {
                 keyExtractor={(task) => task.taskId}
                 renderItem={({ item: task }) => {
                     const result = results[task.taskId];
-                    const selectedOption = isDefined(result)
+                    const selectedOption = typeof result === 'number'
                         ? optionsByValue[result]
                         : undefined;