Commit 602b5aeb authored by ErlendHer's avatar ErlendHer
Browse files

#2 bug: fix css selectors to work on both android and web.

parent 03ed3a6d
import React from "react";
import { Controller, useFormContext } from "react-hook-form";
import {View, Text, TextInput, StyleSheet, useWindowDimensions} from "react-native";
import React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import {
View,
Text,
TextInput,
StyleSheet,
useWindowDimensions,
} from 'react-native';
interface CustomInputProps{
error: boolean,
name: string,
placeholder: string;
secureTextEntry?: boolean;
errorMessage: string;
required: boolean;
interface CustomInputProps {
error: boolean;
name: string;
placeholder: string;
secureTextEntry?: boolean;
errorMessage: string;
required: boolean;
}
export default function CustomInput({required, errorMessage, error, name, placeholder, secureTextEntry}: CustomInputProps) {
export default function CustomInput({
required,
errorMessage,
error,
name,
placeholder,
secureTextEntry,
}: CustomInputProps) {
const { control } = useFormContext();
const { height } = useWindowDimensions();
const {control} = useFormContext();
const {height} = useWindowDimensions();
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
minHeight: 30,
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
width: "100%",
minHeight: "30px",
borderColor: "#e8e8e8",
borderWidth: 1,
borderRadius: 5,
marginVertical: 5,
},
input: {
paddingHorizontal: 10,
alignItems: "center",
minHeight: "30px",
},
errorText: {
color: "red",
},
component: {
marginTop: height*0.01,
}
});
borderColor: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
return (
<View style={styles.component}>
<View style={styles.container}>
<Controller
name={name}
control={control}
rules={{required: required, validate: (value) => true}}
render={({field: {onChange, onBlur, value }}) => (
<TextInput
secureTextEntry={secureTextEntry}
onChangeText={onChange}
onBlur={onBlur}
value={value}
placeholder={placeholder}
style={styles.input}/>
)}/>
</View>
{error && <Text style={styles.errorText}>{errorMessage}</Text>}
marginVertical: 5,
},
input: {
paddingHorizontal: 10,
alignItems: 'center',
minHeight: 30,
},
errorText: {
color: 'red',
},
component: {
marginTop: height * 0.01,
},
});
</View>
)
return (
<View style={styles.component}>
<View style={styles.container}>
<Controller
name={name}
control={control}
rules={{ required: required, validate: (value) => true }}
render={({ field: { onChange, onBlur, value } }) => (
<TextInput
secureTextEntry={secureTextEntry}
onChangeText={onChange}
onBlur={onBlur}
value={value}
placeholder={placeholder}
style={styles.input}
/>
)}
/>
</View>
{error && <Text style={styles.errorText}>{errorMessage}</Text>}
</View>
);
}
import React from "react";
import { StyleSheet, TextInput } from "react-native";
import { View } from "../components/Themed";
import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
import { View } from '../components/Themed';
import {
FilterKeys,
FilterValues,
SortDirection,
SortKeys,
} from "../constants/filterOptions/interface";
import { genres, sortDirections, sortValues } from "../constants/filterOptions";
import SelectInput from "./SelectInput";
import SearchInput from "./SearchInput";
} from '../constants/filterOptions/interface';
import { genres, sortDirections, sortValues } from '../constants/filterOptions';
import SelectInput from './SelectInput';
import SearchInput from './SearchInput';
export type FilterPaneProps = {
onSearchChange: (value: string) => void;
......@@ -31,18 +31,18 @@ const FilterPane: React.FC<FilterPaneProps> = ({
<SelectInput
defaultValue="Genres"
data={genres}
onChange={(value) => onFilterChange("genres", value ? [value] : [])}
onChange={(value) => onFilterChange('genres', value ? [value] : [])}
/>
</View>
<View style={styles.inlineRow}>
<SelectInput
defaultValue="Order by"
data={sortValues}
onChange={(value) => onSortChange(value ? value : "title")}
onChange={(value) => onSortChange(value ? value : 'title')}
/>
<SelectInput
data={sortDirections}
onChange={(value) => onSortDirectionChange(value ? value : "asc")}
onChange={(value) => onSortDirectionChange(value ? value : 'asc')}
/>
</View>
</View>
......@@ -59,21 +59,21 @@ const FilterPane: React.FC<FilterPaneProps> = ({
const styles = StyleSheet.create({
container: {
marginTop: "6rem",
marginHorizontal: "1rem",
width: "100%",
marginTop: 96,
marginHorizontal: 16,
width: '100%',
},
row: {
flex: 1,
display: "flex",
flexDirection: "row",
paddingVertical: "0.25rem",
alignItems: "center",
justifyContent: "space-between",
display: 'flex',
flexDirection: 'row',
paddingVertical: 4,
alignItems: 'center',
justifyContent: 'space-between',
},
inlineRow: {
display: "flex",
flexDirection: "row",
display: 'flex',
flexDirection: 'row',
},
});
......
import React, { useEffect, useState } from "react";
import { useForm, SubmitHandler, FormProvider } from "react-hook-form";
import { useDispatch, useSelector } from "react-redux";
import { signIn, signUp } from "../store/ducks/auth/actions";
import { ApplicationState } from "../store/interface";
import Logo from "../assets/images/cinema.png";
import { View, Text, Image, StyleSheet, useWindowDimensions, Button, Pressable } from "react-native";
import CustomInput from "./CustomInput";
import React, { useEffect, useState } from 'react';
import { useForm, SubmitHandler, FormProvider } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { signIn, signUp } from '../store/ducks/auth/actions';
import { ApplicationState } from '../store/interface';
import Logo from '../assets/images/cinema.png';
import {
View,
Text,
Image,
StyleSheet,
useWindowDimensions,
Button,
Pressable,
} from 'react-native';
import CustomInput from './CustomInput';
export default function App() {
const {height} = useWindowDimensions();
const { height } = useWindowDimensions();
const methods = useForm<FormValues>({
defaultValues: {
email: "",
password: "",
email: '',
password: '',
},
mode: "onSubmit",
reValidateMode: "onBlur",
});
const { formState: { errors }, handleSubmit } = methods;
mode: 'onSubmit',
reValidateMode: 'onBlur',
});
const {
formState: { errors },
handleSubmit,
} = methods;
const onSubmit: SubmitHandler<FormValues> = (values: FormValues) => onFinish(values);
const onSubmit: SubmitHandler<FormValues> = (values: FormValues) =>
onFinish(values);
interface FormValues {
email: string;
password: string;
......@@ -33,48 +41,55 @@ const { formState: { errors }, handleSubmit } = methods;
}
const [isLogin, setIsLogin] = useState(true);
const dispatch = useDispatch();
const { loading, error, loggedIn } = useSelector(({ auth }: ApplicationState) => auth);
// TODO Redirect to homepage if user is already logged in
useEffect(() => {
if (loggedIn) {
console.log("push");
}
}, [loggedIn, location]);
// Form completed
const onFinish = (values: FormValues) => {
const dispatch = useDispatch();
const { loading, error, loggedIn } = useSelector(
({ auth }: ApplicationState) => auth
);
// TODO Redirect to homepage if user is already logged in
useEffect(() => {
if (loggedIn) {
console.log('push');
}
}, [loggedIn]);
// Form completed
const onFinish = (values: FormValues) => {
if (isLogin) {
dispatch(signIn({ email: values.email, password: values.password }));
} else {
dispatch(signUp({ email: values.email, username: values.username || "", password: values.password }));
dispatch(
signUp({
email: values.email,
username: values.username || '',
password: values.password,
})
);
}
};
};
// TODO If the redux state contains an error, display an error alert
useEffect(() => {
if (error) {
console.log("Show error");
console.log('Show error');
}
}, [error]);
const styles = StyleSheet.create({
root: {
alignItems: "center",
alignItems: 'center',
padding: 20,
},
logo: {
width: "70%",
width: '70%',
maxWidth: 300,
maxHeight: 200,
},
container: {
width: "100%",
width: '100%',
padding: 15,
marginVertical: 5,
alignItems: "center",
alignItems: 'center',
borderRadius: 5,
},
subText: {
......@@ -82,30 +97,64 @@ const { formState: { errors }, handleSubmit } = methods;
},
button: {
marginTop: 10,
}
})
},
});
return (
<View>
<Image source={Logo} style={[styles.logo, {height: height* 0.3}]} resizeMode="contain"/>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
{isLogin ? null : <CustomInput required={isLogin ? false : true} error={errors.username ? true : false} errorMessage="Du må fylle inn brukernavn" name="username" placeholder="username" /> }
<CustomInput required={true} error={errors.email ? true : false } errorMessage="Du må fylle inn e-post" name="email" placeholder="email" />
<CustomInput required={true} error={errors.password ? true : false } errorMessage="Passorder må oppfylle krav ..." name="password" secureTextEntry={true} placeholder="password" />
<View style={styles.button}>
<Button disabled={loading} onPress={handleSubmit(onSubmit)} title={isLogin ? "Login" : "Register"}/>
<Pressable onPress={() => {setIsLogin(!isLogin); methods.clearErrors()}} style={styles.container}>
<Text style={styles.subText}>
{!isLogin ? "Already have a user? Login." : "Need a new user? Register."}
</Text>
</Pressable>
</View>
</form>
</FormProvider>
<Image
source={Logo}
style={[styles.logo, { height: height * 0.3 }]}
resizeMode="contain"
/>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
{isLogin ? null : (
<CustomInput
required={isLogin ? false : true}
error={errors.username ? true : false}
errorMessage="Du må fylle inn brukernavn"
name="username"
placeholder="username"
/>
)}
<CustomInput
required={true}
error={errors.email ? true : false}
errorMessage="Du må fylle inn e-post"
name="email"
placeholder="email"
/>
<CustomInput
required={true}
error={errors.password ? true : false}
errorMessage="Passorder må oppfylle krav ..."
name="password"
secureTextEntry={true}
placeholder="password"
/>
<View style={styles.button}>
<Button
disabled={loading}
onPress={handleSubmit(onSubmit)}
title={isLogin ? 'Login' : 'Register'}
/>
<Pressable
onPress={() => {
setIsLogin(!isLogin);
methods.clearErrors();
}}
style={styles.container}
>
<Text style={styles.subText}>
{!isLogin
? 'Already have a user? Login.'
: 'Need a new user? Register.'}
</Text>
</Pressable>
</View>
</form>
</FormProvider>
</View>
);
}
\ No newline at end of file
}
import React from "react";
import { StyleSheet, TextInput } from "react-native";
import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
type IProps = {
searchThreshold: number;
placeholder: string;
......@@ -11,7 +11,7 @@ const SearchInput: React.FC<IProps> = (props: IProps) => {
// Return string value if the string's length is above the set threshold
// else, return an empty string
function handleChange(value: string) {
onChange(value.length >= searchThreshold ? value : "");
onChange(value.length >= searchThreshold ? value : '');
}
return (
<TextInput
......@@ -25,12 +25,12 @@ const SearchInput: React.FC<IProps> = (props: IProps) => {
const styles = StyleSheet.create({
input: {
borderRadius: 15,
borderColor: "#333",
width: "100%",
marginLeft: "0.25rem",
marginRight: "0.25rem",
paddingVertical: "0.25rem",
paddingHorizontal: "0.75rem",
borderColor: '#333',
width: '100%',
marginLeft: 4,
marginRight: 4,
paddingVertical: 4,
paddingHorizontal: 12,
},
});
......
import React from "react";
import { StyleProp, StyleSheet, TextStyle } from "react-native";
import { Picker } from "@react-native-picker/picker";
import { capitalize } from "../utils/textTransform";
import React from 'react';
import { StyleProp, StyleSheet, TextStyle } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { capitalize } from '../utils/textTransform';
type IProps<T> = {
data: T[];
......@@ -37,9 +37,9 @@ function SelectInput<T extends string>(props: IProps<T>) {
const styles = StyleSheet.create({
input: {
borderRadius: 15,
marginLeft: "0.25rem",
marginRight: "0.25rem",
padding: "0.25rem",
marginLeft: 4,
marginRight: 4,
padding: 4,
},
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment