121 lines
3.0 KiB
TypeScript
121 lines
3.0 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { supabase } from '../lib/supabase';
|
|
import { StyleSheet, View, Alert } from 'react-native';
|
|
import { Button, Input } from '@rneui/themed';
|
|
import { Session } from '@supabase/supabase-js';
|
|
|
|
export default function Account({ session }: { session: Session }) {
|
|
const [loading, setLoading] = useState(true);
|
|
const [username, setUsername] = useState('');
|
|
const [website, setWebsite] = useState('');
|
|
const [avatarUrl, setAvatarUrl] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (session) getProfile();
|
|
}, [session]);
|
|
|
|
async function getProfile() {
|
|
try {
|
|
setLoading(true);
|
|
if (!session?.user) throw new Error('No user on the session!');
|
|
|
|
const { data, error, status } = await supabase
|
|
.from('profiles')
|
|
.select(`username, website, avatar_url`)
|
|
.eq('id', session?.user.id)
|
|
.single();
|
|
if (error && status !== 406) {
|
|
throw error;
|
|
}
|
|
|
|
if (data) {
|
|
setUsername(data.username);
|
|
setWebsite(data.website);
|
|
setAvatarUrl(data.avatar_url);
|
|
}
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
Alert.alert(error.message);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function updateProfile({
|
|
username,
|
|
website,
|
|
avatar_url,
|
|
}: {
|
|
username: string;
|
|
website: string;
|
|
avatar_url: string;
|
|
}) {
|
|
try {
|
|
setLoading(true);
|
|
if (!session?.user) throw new Error('No user on the session!');
|
|
|
|
const updates = {
|
|
id: session?.user.id,
|
|
username,
|
|
website,
|
|
avatar_url,
|
|
updated_at: new Date(),
|
|
};
|
|
|
|
const { error } = await supabase.from('profiles').upsert(updates);
|
|
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
Alert.alert(error.message);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={[styles.verticallySpaced, styles.mt20]}>
|
|
<Input label='Email' value={session?.user?.email} disabled />
|
|
</View>
|
|
<View style={styles.verticallySpaced}>
|
|
<Input label='Username' value={username || ''} onChangeText={(text) => setUsername(text)} />
|
|
</View>
|
|
<View style={styles.verticallySpaced}>
|
|
<Input label='Website' value={website || ''} onChangeText={(text) => setWebsite(text)} />
|
|
</View>
|
|
|
|
<View style={[styles.verticallySpaced, styles.mt20]}>
|
|
<Button
|
|
title={loading ? 'Loading ...' : 'Update'}
|
|
onPress={() => updateProfile({ username, website, avatar_url: avatarUrl })}
|
|
disabled={loading}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.verticallySpaced}>
|
|
<Button title='Sign Out' onPress={() => supabase.auth.signOut()} />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginTop: 40,
|
|
padding: 12,
|
|
},
|
|
verticallySpaced: {
|
|
paddingTop: 4,
|
|
paddingBottom: 4,
|
|
alignSelf: 'stretch',
|
|
},
|
|
mt20: {
|
|
marginTop: 20,
|
|
},
|
|
});
|