Skip to content

Feature/ios keyboard fix #17

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.

Sign up for GitHub

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

Open
JanneJulius wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feature/ios keyboard fix #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f7e1718
Create DismissKeyboard.tsx
JanneJulius Jan 17, 2024
5e8419d
Merge branch 'feature/logout' into feature/iosKeyboardFix
JanneJulius Jan 17, 2024
9619d66
Add keyboard dismiss to login page
JanneJulius Jan 17, 2024
c0e82db
Merge branch 'main' into feature/iosKeyboardFix
JanneJulius Jan 17, 2024
f6d48e6
Add keyboard fix to NewProduct and Product
JanneJulius Jan 17, 2024
d4296a0
Limit price to 2 decimals in NewProduct.tsx
JanneJulius Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 63 additions & 56 deletions src/components/auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { useState } from "react";
import { TextInput, View, StyleSheet, Text } from "react-native";
import {
TextInput,
View,
StyleSheet,
Text,
Keyboard,
TouchableWithoutFeedback,
} from "react-native";
import FormStyles from "../../styles/Forms";
import Button from "../Button";
import TextStyles from "../../styles/Text";
import { Formik } from "formik";
import * as Yup from "yup";
import { login } from "../../services/auth";
import useAuth from "../../hooks/useAuth";

const LoginSchema = Yup.object().shape({
Expand All @@ -17,64 +22,66 @@ const Login = () => {
const { fetchingLogin, errorLogin, login } = useAuth();

return (
<View style={styles.container}>
<Text style={TextStyles.h1}>Welcome to Resty</Text>
<Text style={{ ...TextStyles.body, paddingBottom: 30, paddingTop: 15 }}>
Please authenticate to access the platform
</Text>
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={styles.container}>
<Text style={TextStyles.h1}>Welcome to Resty</Text>
<Text style={{ ...TextStyles.body, paddingBottom: 30, paddingTop: 15 }}>
Please authenticate to access the platform
</Text>

<View style={styles.formComponent}>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={LoginSchema}
onSubmit={(values) => login(values.email, values.password)}
>
{({ handleChange, handleBlur, handleSubmit, errors, values }) => (
<>
<TextInput
style={FormStyles.input}
placeholder="Email"
value={values.email}
testID="email"
onChangeText={handleChange("email")}
onBlur={handleBlur("email")}
/>
{errors.email && (
<Text style={FormStyles.error}>{errors.email}</Text>
)}
<View style={styles.formComponent}>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={LoginSchema}
onSubmit={(values) => login(values.email, values.password)}
>
{({ handleChange, handleBlur, handleSubmit, errors, values }) => (
<>
<TextInput
style={FormStyles.input}
placeholder="Email"
value={values.email}
testID="email"
onChangeText={handleChange("email")}
onBlur={handleBlur("email")}
/>
{errors.email && (
<Text style={FormStyles.error}>{errors.email}</Text>
)}

<TextInput
style={FormStyles.input}
value={values.password}
testID="password"
placeholder="Password"
secureTextEntry
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
/>
{errors.password && (
<Text style={{ ...FormStyles.error, paddingBottom: 12 }}>
{errors.password}
</Text>
)}
<TextInput
style={FormStyles.input}
value={values.password}
testID="password"
placeholder="Password"
secureTextEntry
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
/>
{errors.password && (
<Text style={{ ...FormStyles.error, paddingBottom: 12 }}>
{errors.password}
</Text>
)}

{errorLogin && (
<Text style={{ ...FormStyles.error, paddingBottom: 12 }}>
Invalid email or password
</Text>
)}
{errorLogin && (
<Text style={{ ...FormStyles.error, paddingBottom: 12 }}>
Invalid email or password
</Text>
)}

<Button
testID="submit"
text="Login"
onPress={handleSubmit}
loading={fetchingLogin}
/>
</>
)}
</Formik>
<Button
testID="submit"
text="Login"
onPress={handleSubmit}
loading={fetchingLogin}
/>
</>
)}
</Formik>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
};

Expand Down
236 changes: 124 additions & 112 deletions src/components/products/NewProduct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ import DropDownPicker from "react-native-dropdown-picker";
import theme from "../../theme";
import { Formik } from "formik";
import * as Yup from "yup";
import { View, StyleSheet, TextInput } from "react-native";
import {
View,
StyleSheet,
TextInput,
Keyboard,
TouchableWithoutFeedback,
} from "react-native";
import ContainerStyle from "../../styles/Containers";
import Header from "../headers/Header";
import Divider from "../Divider";
Expand Down Expand Up @@ -53,126 +59,132 @@ const NewProduct = ({ navigation, route }: NewProductProps) => {
setLoading(false);
};
return (
<View style={ContainerStyle.contentContainer}>
<Header
title="New product"
goBack={() => navigation.navigate("Products")}
/>
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={ContainerStyle.contentContainer}>
<Header
title="New product"
goBack={() => navigation.navigate("Products")}
/>

<Divider />
<Divider />

<Formik
initialValues={{ name: "", price: "", category: "" }}
validationSchema={ProductSchema}
onSubmit={(values) => {
onCreateProduct(values.name, values.price, values.category);
}}
>
{({
handleChange,
handleBlur,
handleSubmit,
setFieldValue,
errors,
touched,
values,
}) => (
<View>
<View style={Styles.rowContainer}>
<Text fontSize="body" fontWeight="bold" color="textPrimary">
Product name
</Text>
<TextInput
placeholder="Name for the product"
onChangeText={handleChange("name")}
onBlur={handleBlur("name")}
value={values.name}
style={{ paddingTop: 5 }}
></TextInput>
{touched.name && errors.name && (
<Text style={{ color: theme.colors.error }}>{errors.name}</Text>
)}
</View>
<Formik
initialValues={{ name: "", price: "", category: "" }}
validationSchema={ProductSchema}
onSubmit={(values) => {
onCreateProduct(values.name, values.price, values.category);
}}
>
{({
handleChange,
handleBlur,
handleSubmit,
setFieldValue,
errors,
touched,
values,
}) => (
<View>
<View style={Styles.rowContainer}>
<Text fontSize="body" fontWeight="bold" color="textPrimary">
Product name
</Text>
<TextInput
placeholder="Name for the product"
onChangeText={handleChange("name")}
onBlur={handleBlur("name")}
value={values.name}
style={{ paddingTop: 5 }}
></TextInput>
{touched.name && errors.name && (
<Text style={{ color: theme.colors.error }}>
{errors.name}
</Text>
)}
</View>

<Divider />
<Divider />

<View style={Styles.rowContainer}>
<Text fontSize="body" fontWeight="bold" color="textPrimary">
Price
</Text>
<TextInput
placeholder="Price in euros (€)"
onChangeText={(text) => {
const cleanedText = text.replace(",", ".");
setFieldValue("price", cleanedText);
handleChange("price")(cleanedText);
}}
onBlur={handleBlur("price")}
value={values.price}
keyboardType="numeric"
style={{ paddingTop: 5 }}
></TextInput>
{touched.price && errors.price && (
<Text style={{ color: theme.colors.error }}>
{errors.price}
<View style={Styles.rowContainer}>
<Text fontSize="body" fontWeight="bold" color="textPrimary">
Price
</Text>
)}
</View>
<TextInput
placeholder="Price in euros (€)"
onChangeText={(text) => {
const cleanedText = text.replace(",", ".");
const decimalRegex = /^\d*\.?\d{0,2}$/;
if (decimalRegex.test(cleanedText)) {
setFieldValue("price", cleanedText);
}
}}
onBlur={handleBlur("price")}
value={values.price}
keyboardType="numeric"
style={{ paddingTop: 5 }}
></TextInput>
{touched.price && errors.price && (
<Text style={{ color: theme.colors.error }}>
{errors.price}
</Text>
)}
</View>

<Divider />
<Divider />

<View style={[Styles.rowContainer, { zIndex: 1 }]}>
<Text fontSize="body" fontWeight="bold" color="textPrimary">
Category
</Text>
<DropDownPicker
open={open}
value={values.category}
items={categories.map((category) => ({
label: category.name,
value: category.id.toString(),
}))}
setOpen={(isOpen) => {
setOpen(isOpen);
}}
setValue={(val) => {
const actualValue = val({});
setFieldValue("category", actualValue);
}}
placeholder="Select a category"
style={{
backgroundColor: "transparent",
minHeight: 30,
borderWidth: 0,
borderRadius: 0,
paddingLeft: 0,
}}
dropDownContainerStyle={{
zIndex: 2,
borderWidth: 0,
}}
placeholderStyle={{
color: "#C2B7AB",
}}
/>
{touched.category && errors.category && (
<Text style={{ color: theme.colors.error }}>
{errors.category}
<View style={[Styles.rowContainer, { zIndex: 1 }]}>
<Text fontSize="body" fontWeight="bold" color="textPrimary">
Category
</Text>
)}
</View>
<Divider />
<DropDownPicker
open={open}
value={values.category}
items={categories.map((category) => ({
label: category.name,
value: category.id.toString(),
}))}
setOpen={(isOpen) => {
setOpen(isOpen);
}}
setValue={(val) => {
const actualValue = val({});
setFieldValue("category", actualValue);
}}
placeholder="Select a category"
style={{
backgroundColor: "transparent",
minHeight: 30,
borderWidth: 0,
borderRadius: 0,
paddingLeft: 0,
}}
dropDownContainerStyle={{
zIndex: 2,
borderWidth: 0,
}}
placeholderStyle={{
color: "#C2B7AB",
}}
/>
{touched.category && errors.category && (
<Text style={{ color: theme.colors.error }}>
{errors.category}
</Text>
)}
</View>
<Divider />

<Button
text="Create"
onPress={handleSubmit}
icon="add"
loading={loading}
></Button>
</View>
)}
</Formik>
</View>
<Button
text="Create"
onPress={handleSubmit}
icon="add"
loading={loading}
></Button>
</View>
)}
</Formik>
</View>
</TouchableWithoutFeedback>
);
};

Expand Down
Loading