Commit 032e7151 authored by Peter Skaar Nordby's avatar Peter Skaar Nordby
Browse files

Merge branch '1-implementere-profil-side' into 'master'

Resolve "Implementere profil-side"

Closes #1

See merge request !1
parents 70676df2 65fa442c
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type Inputs = {
example: string,
exampleRequired: string,
};
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
console.log(watch("example")) // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}
\ No newline at end of file
......@@ -3,42 +3,28 @@ import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Colors from '../constants/Colors';
import { UserEntity } from '../store/ducks/auth/types';
import { MonoText } from './StyledText';
import { Text, View } from './Themed';
export default function EditScreenInfo({ path }: { path: string }) {
export default function ProfileInfo({ user }: { user: UserEntity }) {
return (
<View>
<View style={styles.getStartedContainer}>
<Text
style={styles.getStartedText}
style={styles.profileName}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
Open up the code for this screen:
{user.username}
</Text>
<View
style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
darkColor="rgba(255,255,255,0.05)"
lightColor="rgba(0,0,0,0.05)">
<MonoText>{path}</MonoText>
</View>
<Text
style={styles.getStartedText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
Change any of the text, save the file, and your app will automatically update.
{user.email}
</Text>
</View>
<View style={styles.helpContainer}>
<TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
<Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
Tap here if your app doesn't automatically update after making changes
</Text>
</TouchableOpacity>
</View>
</View>
);
}
......@@ -61,6 +47,11 @@ const styles = StyleSheet.create({
borderRadius: 3,
paddingHorizontal: 4,
},
profileName: {
fontSize: 20,
lineHeight: 24,
textAlign: 'center',
},
getStartedText: {
fontSize: 17,
lineHeight: 24,
......
......@@ -15,7 +15,7 @@ import useColorScheme from '../hooks/useColorScheme';
import ModalScreen from '../screens/ModalScreen';
import NotFoundScreen from '../screens/NotFoundScreen';
import TabOneScreen from '../screens/TabOneScreen';
import TabTwoScreen from '../screens/TabTwoScreen';
import Profile from '../screens/Profile';
import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
import LinkingConfiguration from './LinkingConfiguration';
......@@ -85,11 +85,25 @@ function BottomTabNavigator() {
})}
/>
<BottomTab.Screen
name="TabTwo"
component={TabTwoScreen}
name="Profile"
component={Profile}
options={{
title: 'Tab Two',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
title: 'Profile',
tabBarIcon: ({ color }) => <TabBarIcon name="user" color={color} />,
headerRight: () => (
<Pressable
onPress={() => logout()}
style={({ pressed }) => ({
opacity: pressed ? 0.5 : 1,
})}>
<FontAwesome
name="sign-out"
size={25}
color={Colors[colorScheme].text}
style={{ marginRight: 15 }}
/>
</Pressable>
),
}}
/>
</BottomTab.Navigator>
......
......@@ -2,7 +2,7 @@ import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { Platform, StyleSheet } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import ProfileInfo from '../components/ProfileInfo';
import { Text, View } from '../components/Themed';
export default function ModalScreen() {
......
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import Login from '../components/LoginComponent';
import EditScreenInfo from '../components/EditScreenInfo';
import ProfileInfo from '../components/ProfileInfo';
import { Text, View } from '../components/Themed';
import { AuthState } from '../store/ducks/auth/types';
import { ApplicationState } from '../store/interface';
export default function TabTwoScreen() {
export default function Profile() {
const auth: AuthState = useSelector(({ auth }: ApplicationState) => auth);
if (!auth.user) {
return (
<View style={styles.container}>
<Text style={styles.title}>Log in or sign up</Text>
<Login></Login>
</View>
);
}
return (
<View style={styles.container}>
<Text style={styles.title}>Tab Two</Text>
<Text style={styles.title}>{auth.user.username}</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="/screens/TabTwoScreen.tsx" />
<ProfileInfo user={auth.user} />
</View>
);
}
......
import * as React from "react";
import { StyleSheet } from "react-native";
import EditScreenInfo from "../components/EditScreenInfo";
import { Text, View } from "../components/Themed";
import { RootTabScreenProps } from "../types";
import ProfileInfo from '../components/ProfileInfo';
import { Text, View } from '../components/Themed';
import { RootTabScreenProps } from '../types';
export default function TabOneScreen({
navigation,
......@@ -11,12 +11,7 @@ export default function TabOneScreen({
return (
<View style={styles.container}>
<Text style={styles.title}>Tab One</Text>
<View
style={styles.separator}
lightColor="#eee"
darkColor="rgba(255,255,255,0.1)"
/>
<EditScreenInfo path="/screens/TabOneScreen.tsx" />
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
</View>
);
}
......
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"jsx": "react",
"strict": true
}
}
This diff is collapsed.
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