Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HAB-46] Sign in page #39

Merged
merged 14 commits into from
May 4, 2024
Merged

[HAB-46] Sign in page #39

merged 14 commits into from
May 4, 2024

Conversation

AnkushSarkar10
Copy link
Collaborator

@AnkushSarkar10 AnkushSarkar10 commented May 3, 2024

[HAB-46] Sign in page

Copy link

coderabbitai bot commented May 3, 2024

Walkthrough

The recent updates aim to optimize SVG file management and enhance user interface elements in an Expo project. Changes involve improving Metro configuration for efficient SVG support, adding TypeScript declarations for SVG imports, and revamping the sign-in component with new UI elements and functionality to streamline development and enhance user experience.

Changes

File(s) Summary of Changes
metro.config.js Enhanced Metro config for efficient SVG handling, including custom Babel transformer and resolver tweaks.
nativewind-env.d.ts Added TypeScript declaration for importing SVG files as React functional components using react-native-svg.
src/app/(auth)/signin.tsx Overhauled UI with new components like Pressable, Image, FlatList, Animated, and platform-specific enhancements. Introduced tutorial functionality and improved styling.

Recent Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between df580ad and a7e1b6a.
Files selected for processing (3)
  • metro.config.js (1 hunks)
  • nativewind-env.d.ts (1 hunks)
  • src/app/(auth)/signin.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (2)
  • metro.config.js
  • nativewind-env.d.ts

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@AnkushSarkar10
Copy link
Collaborator Author

[HAB-46]

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Comment on lines 39 to 46
const { colorScheme } = useColorScheme();

async function signInWithEmail() {
setLoading(true);
const tutorialData = [
{ pageNum: '1', text: 'Create habits and keep track of completions' },
{ pageNum: '2', text: 'Add friends and do habits together' },
{ pageNum: '3', text: 'Help each other reach your goals' },
];
const scrollX = useRef<Animated.Value>(new Animated.Value(0)).current;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tutorial data setup uses hardcoded text. Consider externalizing this data to a JSON file or a service for easier management and localization.

Comment on lines 91 to 126
{Platform.OS === "ios" && (
<>
<Pressable className="flex flex-row w-11/12 justify-center items-center border-2 dark:border-stone-300 p-2 mt-2 rounded-xl">
<IconBrandAppleFilled fill={colorScheme === "dark" ? colors.white : colors.black} />
<Text className="font-semibold text-lg ml-2">Continue with Apple</Text>
</Pressable>
<Pressable className="flex flex-row w-11/12 justify-center items-center border-2 dark:border-stone-300 p-2 mt-2 rounded-xl">
<Image
className="h-5 w-5 rounded-[20px]"
source={require("../../../assets/images/google.png")} />
<Text className="font-semibold text-lg ml-2">Continue with Google</Text>
</Pressable>
<Pressable className="mt-2">
<Text className="font-semibold text-base">Sign up or log in with Email</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<Pressable className="flex flex-row w-11/12 justify-center items-center border-2 dark:border-stone-300 p-2 mt-2 rounded-xl">
<Image
className="h-5 w-5 rounded-[20px]"
source={require("../../../assets/images/google.png")} />
<Text className="font-semibold text-lg ml-2">Continue with Google</Text>
</Pressable>
<Pressable className="flex flex-row w-11/12 justify-center items-center border-2 dark:border-stone-300 p-2 mt-2 rounded-xl">
<Icon
icon={IconMail}
lightColor={colors.black}
darkColor={colors.white}
strokeWidth={2.2}
/>
<Text className="font-semibold text-lg ml-2">Continue with Email</Text>
</Pressable>
</>
)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The platform-specific rendering uses a lot of duplicated code for iOS and Android. Consider abstracting common elements to reduce redundancy and improve maintainability.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Comment on lines 54 to 163
slidingIndicatorStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
/>

return (
<View style={styles.container}>
<View style={[styles.verticallySpaced, styles.mt20]}>
<Input
label="Email"
leftIcon={{ type: "font-awesome", name: "envelope" }}
onChangeText={(text) => setEmail(text)}
value={email}
// placeholder="test@gmail.com"
autoCapitalize={"none"}
/>
</View>
<View style={styles.verticallySpaced}>
<Input
label="Password"
leftIcon={{ type: "font-awesome", name: "lock" }}
onChangeText={(text) => setPassword(text)}
value={password}
secureTextEntry={true}
// placeholder="password"
autoCapitalize={"none"}
/>
</View>
<View style={[styles.verticallySpaced, styles.mt20]}>
<Button
title="Sign in"
disabled={loading}
onPress={() => signInWithEmail()}
/>
</View>
<Text className="mb-3 w-2/3 text-center text-xs text-stone-400">
By continuing, I agree to the {"\n"}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Terms & Conditions
</Text>
</Link>{" "}
and{" "}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Privacy Policy
</Text>
</Link>
</Text>

{Platform.OS === "ios" && (
<>
<Pressable className="mt-2 flex w-11/12 flex-row items-center justify-center rounded-xl border-2 p-2 dark:border-stone-300">
<IconBrandAppleFilled
fill={colorScheme === "dark" ? colors.white : colors.black}
/>
<Text className="ml-2 text-lg font-semibold">
Continue with Apple
</Text>
</Pressable>
<Pressable className="mt-2 flex w-11/12 flex-row items-center justify-center rounded-xl border-2 p-2 dark:border-stone-300">
<Image
className="h-5 w-5 rounded-[20px]"
source={require("../../../assets/images/google.png")}
/>
<Text className="ml-2 text-lg font-semibold">
Continue with Google
</Text>
</Pressable>
<Pressable className="mt-2">
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<Pressable className="mt-2 flex w-11/12 flex-row items-center justify-center rounded-xl border-2 p-2 dark:border-stone-300">
<Image
className="h-5 w-5 rounded-[20px]"
source={require("../../../assets/images/google.png")}
/>
<Text className="ml-2 text-lg font-semibold">
Continue with Google
</Text>
</Pressable>
<Pressable className="mt-2 flex w-11/12 flex-row items-center justify-center rounded-xl border-2 p-2 dark:border-stone-300">
<Icon
icon={IconMail}
lightColor={colors.black}
darkColor={colors.white}
strokeWidth={2.2}
/>
<Text className="ml-2 text-lg font-semibold">
Continue with Email
</Text>
</Pressable>
</>
)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

The verification process has successfully identified that there is indeed duplicated code in the platform-specific checks for iOS and Android within the signin.tsx file. Both platform checks utilize similar Pressable and Text components, which suggests that there might be opportunities for optimization and refactoring to reduce redundancy and improve maintainability.

Recommendations:

  • Consider abstracting the common UI components into a separate component or function to reduce duplication and simplify the codebase.
  • Ensure that any platform-specific differences are clearly documented and justified to maintain clarity in the code's intent.
Analysis chain

Review the rendering logic and platform-specific code for potential optimizations and ensure consistency in UI components usage.

Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify consistent usage of UI components across different platforms.

# Test: Check for duplicated code in iOS and Android platform checks.
rg 'Platform.OS === "ios"' src/app/(auth)/signin.tsx -A 20 | rg 'Pressable|Image|Text'
rg 'Platform.OS === "android"' src/app/(auth)/signin.tsx -A 20 | rg 'Pressable|Image|Text'

Length of output: 223



Script:

#!/bin/bash
# Description: Verify consistent usage of UI components across different platforms.

# Test: Check for duplicated code in iOS and Android platform checks.
rg 'Platform.OS === "ios"' 'src/app/(auth)/signin.tsx' -A 20 | rg 'Pressable|Image|Text'
rg 'Platform.OS === "android"' 'src/app/(auth)/signin.tsx' -A 20 | rg 'Pressable|Image|Text'

Length of output: 1238

src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
@owengretzinger owengretzinger changed the title Sign in page [HAB-46] Sign in page May 3, 2024
Copy link

linear bot commented May 3, 2024

HAB-46 Code login page

src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
assets/images/Logo.png Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

@habits-together habits-together deleted a comment from coderabbitai bot May 4, 2024
Copy link
Collaborator

@owengretzinger owengretzinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to all these, there is too much space at the bottom of the screen. Add more space between the header and tutorial picture to make the buttons go at the bottom.

src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
src/app/(auth)/signin.tsx Outdated Show resolved Hide resolved
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Comment on lines 72 to 84
function TutorialItem({ item }: { item: { pageNum: string; text: string } }) {
return (
<View
className="m-0 items-center justify-center p-0"
style={{
width: width,
}}
>
<Icon icon={IconPhotoScan} size={270} strokeWidth={0.8} />
<Text className="px-2 text-center text-3xl font-bold">{item.text}</Text>
</View>
);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The TutorialItem function is well-implemented for rendering individual tutorial items. Consider using memoization to prevent unnecessary re-renders if the tutorial data does not change often.

- function TutorialItem({ item }: { item: { pageNum: string; text: string } }) {
+ const TutorialItem = React.memo(function({ item }: { item: { pageNum: string; text: string } }) {

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
function TutorialItem({ item }: { item: { pageNum: string; text: string } }) {
return (
<View
className="m-0 items-center justify-center p-0"
style={{
width: width,
}}
>
<Icon icon={IconPhotoScan} size={270} strokeWidth={0.8} />
<Text className="px-2 text-center text-3xl font-bold">{item.text}</Text>
</View>
);
}
const TutorialItem = React.memo(function({ item }: { item: { pageNum: string; text: string } }) {
return (
<View
className="m-0 items-center justify-center p-0"
style={{
width: width,
}}
>
<Icon icon={IconPhotoScan} size={270} strokeWidth={0.8} />
<Text className="px-2 text-center text-3xl font-bold">{item.text}</Text>
</View>
);
}

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

@@ -26,75 +43,161 @@ import { resetNavigationStack } from "@/src/lib/resetNavigationStack";
// const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);


Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure proper cleanup of commented-out Firebase initialization code.

Consider removing the commented-out Firebase initialization code if it's no longer needed, or properly integrate it if it's supposed to be part of the application's functionality.

Comment on lines 78 to 82
const tutorialData = [
{ pageNum: "1", text: "Create habits and keep track of completions" },
{ pageNum: "2", text: "Add friends and do habits together" },
{ pageNum: "3", text: "Help each other reach your goals" },
];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Externalize tutorial data to a JSON file or a service for easier management and localization.

The tutorial data is hardcoded within the component. Consider externalizing this data to a JSON file or a service to facilitate easier updates and localization. Would you like me to help with this implementation?

source={require("../../../assets/images/Logo.svg")}
/> */}
<Logo height={24} width={24} />
<Text className="ml-2 text-2xl font-bold">Habit Together</Text>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct the application name to match the brand guidelines.

The text "Habit Together" should be corrected to "Habits Together" as per the previous comments and brand guidelines.

- <Text className="ml-2 text-2xl font-bold">Habit Together</Text>
+ <Text className="ml-2 text-2xl font-bold">Habits Together</Text>

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<Text className="ml-2 text-2xl font-bold">Habit Together</Text>
<Text className="ml-2 text-2xl font-bold">Habits Together</Text>

Comment on lines 96 to 98
<Pressable className="rounded-2xl bg-stone-200 px-4 py-1 dark:border-2 dark:border-stone-300 dark:bg-stone-800">
<Text className="text-base font-semibold">Skip</Text>
</Pressable>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adjust the dark mode styling for the 'Skip' button to match the design specifications.

The 'Skip' button should not have a border in dark mode, and should only have a grey fill according to the design specifications.

- <Pressable className="rounded-2xl bg-stone-200 px-4 py-1 dark:border-2 dark:border-stone-300 dark:bg-stone-800">
+ <Pressable className="rounded-2xl bg-stone-200 px-4 py-1 dark:bg-stone-800">

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<Pressable className="rounded-2xl bg-stone-200 px-4 py-1 dark:border-2 dark:border-stone-300 dark:bg-stone-800">
<Text className="text-base font-semibold">Skip</Text>
</Pressable>
<Pressable className="rounded-2xl bg-stone-200 px-4 py-1 dark:bg-stone-800">
<Text className="text-base font-semibold">Skip</Text>
</Pressable>

Comment on lines 147 to 163
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2">
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduce redundancy by abstracting common elements in platform-specific rendering paths.

There is duplicated code in the platform-specific rendering for iOS and Android. Consider creating a single SignInButton component that takes platform-specific properties to reduce duplication and improve maintainability.

- {Platform.OS === "ios" && (
-   <>
-     <AppleButton />
-     <GoogleButton />
-     <Pressable className="mt-2">
-       <Text className="text-base font-semibold">
-         Sign up or log in with Email
-       </Text>
-     </Pressable>
-   </>
- )}
- {Platform.OS === "android" && (
-   <>
-     <GoogleButton />
-     <EmailButton />
-   </>
- )}
+ <SignInButtons platform={Platform.OS} />

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2">
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
<SignInButtons platform={Platform.OS} />

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Comment on lines 46 to 207
scrollX={scrollX}
dotSize={10}
containerStyle={{ position: "relative" }}
dotStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
marginHorizontal={10}
slidingIndicatorStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
/>

<Text className="mb-3 w-2/3 text-center text-xs text-stone-400">
By continuing, I agree to the {"\n"}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Terms & Conditions
</Text>
</Link>{" "}
and{" "}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Privacy Policy
</Text>
</Link>
</Text>

<View className="w-full flex justify-center items-center px-4">
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2">
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
</View>
</View>
);
}

const styles = StyleSheet.create({
container: {
marginTop: 40,
padding: 12,
},
verticallySpaced: {
paddingTop: 4,
paddingBottom: 4,
alignSelf: "stretch",
},
mt20: {
marginTop: 20,
},
});
function GoogleButton() {
return (
<Pressable
className="h-14 mt-2 flex w-full flex-row items-center justify-center rounded-xl border-2 p-2 dark:bg-white"
onPress={signInWithGoogle}
>
<Image className="h-5 w-5 rounded-[20px]" source={require("../../../assets/images/google.png")} />
<Text className="ml-2 text-lg font-semibold text-black">Continue with Google</Text>
</Pressable>
)
}

function AppleButton() {
return (
<Pressable
className="h-14 mt-2 flex w-full flex-row items-center justify-center rounded-xl border-2 p-2 dark:bg-white"
onPress={signInWithApple}
>
<Image className="h-5 w-5 rounded-[20px]" source={require("../../../assets/images/apple.png")} />
<Text className="ml-2 text-lg font-semibold text-black">Continue with Apple</Text>
</Pressable>
)
}

function EmailButton() {
return (
<Pressable
className="h-14 mt-2 flex w-full flex-row items-center justify-center rounded-xl border-2 p-2 dark:bg-white"
onPress={signInWithEmail}
>
<Icon icon={IconMail} lightColor={colors.black} darkColor={colors.black} strokeWidth={2.2} />
<Text className="ml-2 text-lg font-semibold text-black">Continue with Email</Text>
</Pressable>
)
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review the overall structure and logic of the Signin function. Ensure that the function's complexity is manageable and that it adheres to best practices for readability and maintainability.

Consider breaking down the Signin function into smaller, more manageable components or hooks to improve readability and maintainability.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Comment on lines 46 to 169
value={email}
// placeholder="test@gmail.com"
autoCapitalize={"none"}
/>
<View className="flex-1 items-center pt-14">
<View className="w-full px-4 flex-row items-center justify-between pb-5">
<View className="flex-row items-center">
{/* <Image
className="h-6 w-6 rounded-[20px]"
source={require("../../../assets/images/Logo.svg")}
/> */}
<Logo height={24} width={24} />
<Text className="ml-2 text-2xl font-bold">Habits Together</Text>
</View>
<Pressable className="rounded-2xl bg-stone-200 dark:bg-stone-700 px-4 py-1"
onPress={continueAsGuest}>
<Text className="text-base font-semibold">Skip</Text>
</Pressable>
</View>
<View style={styles.verticallySpaced}>
<Input
label="Password"
leftIcon={{ type: "font-awesome", name: "lock" }}
onChangeText={(text) => setPassword(text)}
value={password}
secureTextEntry={true}
// placeholder="password"
autoCapitalize={"none"}

<View className="flex-1 w-full flex justify-center items-center pb-3">
<FlatList
data={tutorialData}
renderItem={({ item }) => TutorialItem({ item })}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
keyExtractor={(item) => item.pageNum}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: scrollX } } }],
{
useNativeDriver: false,
},
)}
className="mb-14 grow-0"
/>
</View>
<View style={[styles.verticallySpaced, styles.mt20]}>
<Button
title="Sign in"
disabled={loading}
onPress={() => signInWithEmail()}

<SlidingDot
data={tutorialData}
scrollX={scrollX}
dotSize={10}
containerStyle={{ position: "relative" }}
dotStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
marginHorizontal={10}
slidingIndicatorStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
/>

<Text className="mb-3 w-2/3 text-center text-xs text-stone-400">
By continuing, I agree to the {"\n"}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Terms & Conditions
</Text>
</Link>{" "}
and{" "}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Privacy Policy
</Text>
</Link>
</Text>

<View className="w-full flex justify-center items-center px-4">
{Platform.OS === "android" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2">
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "ios" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
</View>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider refactoring the Signin function to improve readability and maintainability.

The Signin function is quite large and handles multiple responsibilities. Consider breaking it down into smaller components or hooks. This will not only improve readability but also make the code easier to maintain and test.

Comment on lines 152 to 168
{Platform.OS === "android" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2">
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "ios" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduce redundancy by abstracting common elements in platform-specific rendering paths.

There is duplicated code in the platform-specific rendering for iOS and Android. Consider creating a single SignInButton component that takes platform-specific properties to reduce duplication and improve maintainability.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

Comment on lines 46 to 170
// placeholder="test@gmail.com"
autoCapitalize={"none"}
/>
<View className="flex-1 items-center pt-14">
<View className="w-full px-4 flex-row items-center justify-between pb-5">
<View className="flex-row items-center">
{/* <Image
className="h-6 w-6 rounded-[20px]"
source={require("../../../assets/images/Logo.svg")}
/> */}
<Logo height={24} width={24} />
<Text className="ml-2 text-2xl font-bold">Habits Together</Text>
</View>
<Pressable className="rounded-2xl bg-stone-200 dark:bg-stone-700 px-4 py-1"
onPress={continueAsGuest}>
<Text className="text-base font-semibold">Skip</Text>
</Pressable>
</View>
<View style={styles.verticallySpaced}>
<Input
label="Password"
leftIcon={{ type: "font-awesome", name: "lock" }}
onChangeText={(text) => setPassword(text)}
value={password}
secureTextEntry={true}
// placeholder="password"
autoCapitalize={"none"}

<View className="flex-1 w-full flex justify-center items-center pb-3">
<FlatList
data={tutorialData}
renderItem={({ item }) => TutorialItem({ item })}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
keyExtractor={(item) => item.pageNum}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: scrollX } } }],
{
useNativeDriver: false,
},
)}
className="mb-14 grow-0"
/>
</View>
<View style={[styles.verticallySpaced, styles.mt20]}>
<Button
title="Sign in"
disabled={loading}
onPress={() => signInWithEmail()}

<SlidingDot
data={tutorialData}
scrollX={scrollX}
dotSize={10}
containerStyle={{ position: "relative" }}
dotStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
marginHorizontal={10}
slidingIndicatorStyle={{
backgroundColor: colorScheme === "dark" ? colors.white : colors.black,
}}
/>

<Text className="mb-3 w-2/3 text-center text-xs text-stone-400">
By continuing, I agree to the {"\n"}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Terms & Conditions
</Text>
</Link>{" "}
and{" "}
<Link href="/">
<Text className="text-xs text-stone-400 underline">
Privacy Policy
</Text>
</Link>
</Text>

<View className="w-full flex justify-center items-center px-4">
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2"
onPress={signInWithEmail}>
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
</View>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider refactoring the Signin function to improve readability and maintainability. The function is quite large and handles multiple responsibilities. Breaking it down into smaller components or hooks will not only improve readability but also make the code easier to maintain and test.

Comment on lines 152 to 169
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2"
onPress={signInWithEmail}>
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduce redundancy by abstracting common elements in platform-specific rendering paths. Consider creating a single SignInButton component that takes platform-specific properties to reduce duplication and improve maintainability.

- {Platform.OS === "ios" && (
-   <>
-     <AppleButton />
-     <GoogleButton />
-     <Pressable className="mt-2">
-       <Text className="text-base font-semibold">
-         Sign up or log in with Email
-       </Text>
-     </Pressable>
-   </>
- )}
- {Platform.OS === "android" && (
-   <>
-     <GoogleButton />
-     <EmailButton />
-   </>
- )}
+ <SignInButtons platform={Platform.OS} />

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2"
onPress={signInWithEmail}>
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
<SignInButtons platform={Platform.OS} />

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

Out of diff range and nitpick comments (2)
src/app/(auth)/signin.tsx (2)

177-191: Ensure that the Google sign-in button is using a high-resolution icon as per the design specifications.


197-207: Ensure that the Apple sign-in button is using a high-resolution icon as per the design specifications.

import Icon from "@/src/components/Icon";
import { SlidingDot } from "react-native-animated-pagination-dots";
import { useRef, useState } from "react";
import Logo from "@/assets/images/Logo.svg";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider removing the commented-out Firebase initialization code if it's no longer needed.

Comment on lines +47 to +64
const { colorScheme } = useColorScheme();
const { width } = Dimensions.get("window");
const [email, setEmail] = useState("test@gmail.com");
const [password, setPassword] = useState("password");
const [loading, setLoading] = useState(false);

async function signInWithGoogle() {
resetNavigationStack("/");
}
async function signInWithApple() {
resetNavigationStack("/");
}
async function signInWithEmail() {
setLoading(true);

// see if the account exists

setLoading(false);
resetNavigationStack("/");
}
async function continueAsGuest() {
resetNavigationStack("/");
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

The verification process has confirmed that the sign-in functions (signInWithGoogle, signInWithApple, signInWithEmail, continueAsGuest) are indeed present in the src/app/(auth)/signin.tsx file. However, the implementation of these functions, as shown in the provided code snippet, only includes calls to resetNavigationStack("/"), which suggests that the actual authentication logic might not be implemented within these functions.

Given this, it seems that the original review comment is accurate in pointing out that the current implementation might not be sufficient for actual authentication processes. The functions are present, but they do not perform any authentication-related tasks beyond resetting the navigation stack.

Action Required:

  • Review and possibly extend the implementation of the sign-in functions to include actual authentication logic.
Analysis chain

Ensure that the sign-in functions (signInWithGoogle, signInWithApple, signInWithEmail, continueAsGuest) are properly implemented. Currently, they only reset the navigation stack, which might not be sufficient for actual authentication processes.

Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify that the sign-in functions are properly implemented.

# Test: Search for the sign-in function implementations.
rg 'signInWithGoogle|signInWithApple|signInWithEmail|continueAsGuest' src/app/(auth)/signin.tsx

Length of output: 232



Script:

#!/bin/bash
# Description: Verify that the sign-in functions are properly implemented.

# Test: Search for the sign-in function implementations.
rg 'signInWithGoogle|signInWithApple|signInWithEmail|continueAsGuest' src/app/auth/signin.tsx

Length of output: 159



Script:

#!/bin/bash
# Description: Verify that the sign-in functions are properly implemented.

# Test: Search for the sign-in function implementations.
rg 'signInWithGoogle|signInWithApple|signInWithEmail|continueAsGuest' --glob '*signin.tsx'

Length of output: 683

Comment on lines +66 to +77
function TutorialItem({ item }: { item: { pageNum: string; text: string } }) {
return (
<View
className="m-0 items-center justify-center p-0"
style={{
width: width,
}}
>
<Icon icon={IconPhotoScan} size={270} strokeWidth={0.8} />
<Text className="px-2 text-center text-3xl font-bold">{item.text}</Text>
</View>
);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using memoization for the TutorialItem function to prevent unnecessary re-renders if the tutorial data does not change often.

- function TutorialItem({ item }: { item: { pageNum: string; text: string } }) {
+ const TutorialItem = React.memo(function({ item }: { item: { pageNum: string; text: string } }) {

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
function TutorialItem({ item }: { item: { pageNum: string; text: string } }) {
return (
<View
className="m-0 items-center justify-center p-0"
style={{
width: width,
}}
>
<Icon icon={IconPhotoScan} size={270} strokeWidth={0.8} />
<Text className="px-2 text-center text-3xl font-bold">{item.text}</Text>
</View>
);
const TutorialItem = React.memo(function({ item }: { item: { pageNum: string; text: string } }) {
return (
<View
className="m-0 items-center justify-center p-0"
style={{
width: width,
}}
>
<Icon icon={IconPhotoScan} size={270} strokeWidth={0.8} />
<Text className="px-2 text-center text-3xl font-bold">{item.text}</Text>
</View>
);

Comment on lines +80 to +84
const tutorialData = [
{ pageNum: "1", text: "Create habits and keep track of completions" },
{ pageNum: "2", text: "Add friends and do habits together" },
{ pageNum: "3", text: "Put interactive widgets on your home screen" },
];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Externalize tutorial data to a JSON file or a service for easier management and localization.

Would you like me to help with this implementation?

Comment on lines +154 to +172
<View className="flex w-full items-center justify-center px-4">
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2" onPress={signInWithEmail}>
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
</View>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduce redundancy by abstracting common elements in platform-specific rendering paths. Consider creating a single SignInButton component that takes platform-specific properties to reduce duplication and improve maintainability.

- {Platform.OS === "ios" && (
-   <>
-     <AppleButton />
-     <GoogleButton />
-     <Pressable className="mt-2">
-       <Text className="text-base font-semibold">
-         Sign up or log in with Email
-       </Text>
-     </Pressable>
-   </>
- )}
- {Platform.OS === "android" && (
-   <>
-     <GoogleButton />
-     <EmailButton />
-   </>
- )}
+ <SignInButtons platform={Platform.OS} />

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<View className="flex w-full items-center justify-center px-4">
{Platform.OS === "ios" && (
<>
<AppleButton />
<GoogleButton />
<Pressable className="mt-2" onPress={signInWithEmail}>
<Text className="text-base font-semibold">
Sign up or log in with Email
</Text>
</Pressable>
</>
)}
{Platform.OS === "android" && (
<>
<GoogleButton />
<EmailButton />
</>
)}
</View>
<View className="flex w-full items-center justify-center px-4">
<SignInButtons platform={Platform.OS} />
</View>

@owengretzinger owengretzinger merged commit 1f67bfe into main May 4, 2024
@owengretzinger owengretzinger deleted the signInPage branch May 4, 2024 04:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants