-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(app): full scale app starter implemented
- Loading branch information
1 parent
c577f53
commit 0949be0
Showing
11 changed files
with
277 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "backend": { | ||
| "url": "ws://xxx.xxx.xxx.xxx:8000/websocket" | ||
| "url": "ws://192.168.178.49:8000/websocket" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react' | ||
| import { Text, View } from 'react-native' | ||
| import { defaultStyles } from '../styles/defaultStyles' | ||
|
|
||
| export const ErrorMessage = ({ error, message }) => { | ||
| if (!error && !message) { return null } | ||
|
|
||
| return ( | ||
| <View style={defaultStyles.container}> | ||
| <Text style={defaultStyles.danger}>{message || error.message}</Text> | ||
| </View> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { Button } from 'react-native' | ||
| import { useNavigation } from '@react-navigation/native' | ||
| import { defaultColors } from '../styles/defaultStyles' | ||
|
|
||
| /** | ||
| * Renders a button wih a route binding. | ||
| * On press triggers the given route by name. | ||
| * | ||
| * @param title {string} | ||
| * @param route {string} | ||
| * @return {JSX.Element} | ||
| * @component | ||
| */ | ||
| export const NavigateButton = ({ title, route }) => { | ||
| const navigation = useNavigation() | ||
|
|
||
| return ( | ||
| <Button | ||
| title={title} | ||
| color={defaultColors.primary} | ||
| onPress={() => navigation.navigate(route)} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import Meteor from '@meteorrn/core' | ||
| import { useMemo, useState } from 'react' | ||
|
|
||
| const { useTracker } = Meteor | ||
|
|
||
| export const useAccount = () => { | ||
| const [user, setUser] = useState(Meteor.user()) | ||
|
|
||
| useTracker(() => { | ||
| const reactiveUser = Meteor.user() | ||
| if (reactiveUser !== user) { | ||
| setUser(reactiveUser) | ||
| } | ||
| }) | ||
|
|
||
| const api = useMemo(() => ({ | ||
| updateProfile: ({ options, onError, onSuccess }) => { | ||
| Meteor.call('updateUserProfile', options, (err) => { | ||
| return err | ||
| ? onError(err) | ||
| : onSuccess() | ||
| }) | ||
| } | ||
| }), []) | ||
|
|
||
| return { user, ...api } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { AuthContext } from '../contexts/AuthContext' | ||
| import { defaultColors, defaultStyles } from '../styles/defaultStyles' | ||
| import { Button, Text, TextInput, View } from 'react-native' | ||
| import { useContext, useState } from 'react' | ||
| import { ErrorMessage } from '../components/ErrorMessage' | ||
| import { useAccount } from '../hooks/useAccount' | ||
|
|
||
| export const ProfileScreen = () => { | ||
| const [editMode, setEditMode] = useState('') | ||
| const [editValue, setEditValue] = useState('') | ||
| const [error, setError] = useState(null) | ||
| const { signOut, deleteAccount } = useContext(AuthContext) | ||
| const { user, updateProfile } = useAccount() | ||
|
|
||
| const onError = err => setError(err) | ||
|
|
||
| /** | ||
| * Updates a profile field from given text input state | ||
| * by sending update data to the server and let hooks | ||
| * reactively sync with the updated user document. *magic* | ||
| * @param fieldName {string} name of the field to update | ||
| */ | ||
| const updateField = ({ fieldName }) => { | ||
| const options = {} | ||
| options[fieldName] = editValue | ||
| const onSuccess = () => { | ||
| setError(null) | ||
| setEditValue('') | ||
| setEditMode('') | ||
| } | ||
| updateProfile({ options, onError, onSuccess }) | ||
| } | ||
|
|
||
| const renderField = ({ title, fieldName }) => { | ||
| const value = user[fieldName] || '' | ||
|
|
||
| if (editMode === fieldName) { | ||
| return ( | ||
| <> | ||
| <Text style={defaultStyles.bold}>{title}</Text> | ||
| <View style={defaultStyles.row}> | ||
| <TextInput | ||
| placeholder={title} | ||
| autoFocus | ||
| placeholderTextColor={defaultColors.placeholder} | ||
| style={{ ...defaultStyles.text, ...defaultStyles.flex1 }} | ||
| value={editValue} | ||
| onChangeText={setEditValue} | ||
| /> | ||
| <ErrorMessage error={error} /> | ||
| <Button title='Update' onPress={() => updateField({ fieldName })} /> | ||
| </View> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Text style={defaultStyles.bold}>{title}</Text> | ||
| <View style={defaultStyles.row}> | ||
| <Text style={defaultStyles.flex1}>{user[fieldName] || 'Not yet defined'}</Text> | ||
| <Button | ||
| title='Edit' onPress={() => { | ||
| setEditValue(value) | ||
| setEditMode(fieldName) | ||
| }} | ||
| /> | ||
| </View> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <View style={defaultStyles.container}> | ||
| {renderField({ title: 'First Name', fieldName: 'firstName' })} | ||
| {renderField({ title: 'Last Name', fieldName: 'lastName' })} | ||
|
|
||
| <Text style={defaultStyles.bold}>Email</Text> | ||
| <Text>{user.emails[0].address}</Text> | ||
|
|
||
| <View style={{ ...defaultStyles.dangerBorder, padding: 10, marginTop: 10 }}> | ||
| <Text style={defaultStyles.bold}>Danger Zone</Text> | ||
| <Button title='Sign out' color={defaultColors.danger} onPress={() => signOut({ onError })} /> | ||
| <Button title='Delete account' color={defaultColors.danger} onPress={() => deleteAccount({ onError })} /> | ||
| <ErrorMessage error={error} /> | ||
| </View> | ||
| </View> | ||
| ) | ||
| } |
Oops, something went wrong.