Skip to content

Sprint2 - Setup match UI #4

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

Merged
BennettTheTiger merged 1 commit into from
Feb 23, 2025
Merged

Sprint2 - Setup match UI #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
EXPO_PUBLIC_NAME_FLAME_ENDPOINT=https://name-flame-server-1090437595615.us-central1.run.app
EXPO_PUBLIC_NAME_FLAME_ENDPOINT=http://localhost:5000
46 changes: 25 additions & 21 deletions app/(app)/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@ import { MaterialIcons } from '@expo/vector-icons';
import { useRouter, useLocalSearchParams } from 'expo-router';

import { useToken } from '../../contexts/authCtx';
import useApi from '@/hooks/useApi';
import { useActiveNameContext } from '../../contexts/activeNameContext';
import { ThemedView } from '@/components/ThemedView';

export default function AppLayout() {
const { token, isLoading } = useToken();

const router = useRouter();
const api = useApi();
const activeNameContext = useActiveNameContext();
const { id } = useLocalSearchParams<{ id: string }>();

// You can keep the splash screen open, or render a loading screen like we do here.
Expand Down Expand Up @@ -50,10 +54,23 @@ export default function AppLayout() {
}}
/>
<Drawer.Screen
name="nameContext/[id]/matches" // This is the name of the page and must match the url from root
name="nameContext/[id]/match" // This is the name of the page and must match the url from root
options={{
headerTitle: 'Name Context Matches',
drawerItemStyle: { display: 'none' }, // Hide from drawer navigation
headerTitle: `${activeNameContext.name} Match`,
headerStyle: {
backgroundColor: Colors.core.tan, // Set header background color
},
drawerItemStyle: { display: 'none' },
headerRight: () => (
<MaterialIcons
name="close"
size={24}
aria-label='Add Name Context'
color={Colors.core.orange}
onPress={() => router.replace(`/nameContext/${activeNameContext.id}`)}
style={{ marginRight: 10 }}
/>
), // Hide from drawer navigation
}}
/>
<Drawer.Screen
Expand All @@ -79,34 +96,21 @@ export default function AppLayout() {
<Drawer.Screen
name="nameContext/[id]" // This is the name of the page and must match the url from root
options={{
headerTitle: 'Name Context Details',
headerTitle: `${activeNameContext.name} Details`,
headerStyle: {
backgroundColor: Colors.core.tan, // Set header background color
},
drawerItemStyle: { display: 'none' }, // Hide from drawer navigation
headerLeft: () => (
headerRight: () => (
<MaterialIcons
name="arrow-back"
name="close"
size={24}
aria-label='Back'
color={Colors.core.orange}
onPress={() => router.back()}
style={{ marginLeft: 10 }}
onPress={router.back}
style={{ marginRight: 10 }}
/>
),
headerRight: () => (
id === 'new'
? null
: (
<MaterialIcons
name="delete"
size={24}
aria-label='Add Name Context'
color={Colors.core.orange}
onPress={() => alert('Delete')}
style={{ marginRight: 10 }}
/>)
),
}}
/>
<Drawer.Screen
Expand Down
50 changes: 42 additions & 8 deletions app/(app)/nameContext/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import React, { useState, useEffect } from 'react';
import { Text, View, TextInput, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { ThemedView } from '@/components/ThemedView';
import { Dropdown } from 'react-native-element-dropdown';
import { Colors } from '@/constants/Colors';
import useApi from '@/hooks/useApi';
import { useActiveNameContext } from '@/contexts/activeNameContext';
import { MaterialIcons } from '@expo/vector-icons';

export default function NameContextDetailsView() {
const { id } = useLocalSearchParams<{ id: string }>();
const router = useRouter();
const activeNameContext = useActiveNameContext();
const api = useApi();
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
// form values
const [nameValue, setNameValue] = useState('');
const [descriptionValue, setDescriptionValue] = useState('');
Expand Down Expand Up @@ -37,6 +42,7 @@ export default function NameContextDetailsView() {
}
else {
resetForm();
activeNameContext.resetContext();
setLoading(false);
}
}, [id]);
Expand All @@ -49,11 +55,18 @@ export default function NameContextDetailsView() {
setNameValue(data.name);
setDescriptionValue(data.description);
setNounValue(data.noun);
setMaxCharacters(data.filter.maxCharacters);
setMaxCharacters('');
setGenderValue(data.gender);
setLoading(false);

activeNameContext.setContext({
id: data.id,
name: data.name,
isOwner: data.isOwner
})

}).catch((err) => {
alert(err);
setError(err);
setLoading(false);
});
}
Expand All @@ -71,12 +84,25 @@ export default function NameContextDetailsView() {
participants
}).then(() => {
alert('Name context created');
router.push('/nameContext');
}).catch((err) => {
console.log(err);
alert('Failed to create name context');
});
}

function handleDelete() {
if (confirm('Are you sure you want to delete this name context?')) {
api.delete(`/nameContext/${id}`).then(() => {
alert('Name context deleted');
router.push('/nameContext');
}).catch((err) => {
console.log(err);
alert('Failed to delete name context');
});
}
}

if (loading) {
return <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color={Colors.core.orange} />
Expand All @@ -86,8 +112,19 @@ export default function NameContextDetailsView() {
return (
<ThemedView style={{ flex: 1, alignItems: 'center'}}>
<View style={styles.container}>
<Text style={{...styles.label, textAlign: 'center' }}>Basic Information</Text>

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{...styles.label, textAlign: 'center' }}>Basic Information</Text>
{isExistingNameContxt &&
<TouchableOpacity onPress={handleDelete} style={{ padding: 5, backgroundColor: Colors.core.purple, borderRadius: 5 }}>
<MaterialIcons name='delete' size={24} color={Colors.core.white} />
</TouchableOpacity>}
<TouchableOpacity onPress={saveNameContext} style={{ padding: 5, backgroundColor: Colors.core.orange, borderRadius: 5 }}>
<MaterialIcons name='save' size={24} color={Colors.core.white} />
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push(`/nameContext/${id}/match`)} style={{ padding: 5, backgroundColor: Colors.core.orange, borderRadius: 5 }}>
<MaterialIcons name='local-fire-department' size={24} color={Colors.core.white} />
</TouchableOpacity>
</View>
<Text style={styles.label}>Name</Text>
<TextInput
style={styles.input}
Expand Down Expand Up @@ -152,9 +189,6 @@ export default function NameContextDetailsView() {
maxLength={1}
/>
</View>
<TouchableOpacity style={styles.buttons} onPress={saveNameContext}>
<Text style={styles.buttonText}>Save</Text>
</TouchableOpacity>
</ThemedView>
);
}
Expand Down
145 changes: 145 additions & 0 deletions app/(app)/nameContext/[id]/match.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import {useState, useEffect } from 'react';
import { View, ScrollView, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText';
import { MaterialIcons } from '@expo/vector-icons';
import { Colors } from '@/constants/Colors';
import useApi from '@/hooks/useApi';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { NamePopularityGraph } from '@/components/NamePopularityGraph';

export default function NameContextDetailsMatchs() {
const api = useApi();
const router = useRouter();
const { id } = useLocalSearchParams<{ id: string }>();
const [isLoading, setLoading] = useState(false);

const [searchValue, setSearchValue] = useState('');
const [currentName, setCurrentName] = useState<{ name: string; description: string; popularity: {}; gender: 'male' | 'female' }>({ name: '', description: '', popularity: {}, gender: 'male' });

function searchForName(name: string) {
setLoading(true);
api.get(`/name/${name}`).then((resp) => {
setCurrentName(resp.data);
}).catch((err) => {
console.log(err);
});
setLoading(false);
}

function fetchNewName() {
api.get('/name/random').then((resp) => {
setCurrentName(resp.data);
}).catch((err) => {
alert(err);
});
}

useEffect(() => {
fetchNewName();
}, []);

function handleLikeName() {
api.patch(`/nameContext/${id}/match`, {
name: currentName.name,
}).then(() => {
setSearchValue('');
fetchNewName();
}
).catch((err) => {
alert(err);
});
}

const disableDislike = searchValue.length > 0;

return (
<ThemedView style={{ flex: 1, alignItems: 'center', padding: 10 }}>
<View style={{ flexDirection: 'row', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
<TextInput
placeholder='Search for a name'
style={{
padding: 10,
borderRadius: 5,
flex: 1,
fontFamily: 'Bricolage-Grotesque',
backgroundColor: Colors.core.white,
}}
value={searchValue}
onChangeText={setSearchValue}
/>
<TouchableOpacity
style={{backgroundColor: Colors.core.orange, padding: 7, borderRadius: 5, marginLeft: 10}}
onPress={() => searchForName(searchValue)}
>
<MaterialIcons name="search" size={24} color={Colors.core.white} />
</TouchableOpacity>
</View>
<View style={{
flex: 1,
width: '100%',
backgroundColor: Colors.core.tanLighter ,
padding: 20,
borderRadius: 10,
marginTop: 10,
}}>
<View style={{ display: 'flex', alignItems: 'center' }}>
<ThemedText type='title' darkColor={Colors.core.black}>{currentName.name}</ThemedText>
</View>
<View style={styles.rowDivider} />
<ScrollView>
<View>
<ThemedText type='subtitle' darkColor={Colors.core.black}>Description:</ThemedText>
<ThemedText type='default' darkColor={Colors.core.black}>Here is where some info about the name will go</ThemedText>
</View>
<View style={styles.rowDivider} />
<View style={{ flexDirection: 'row' }}>
<ThemedText type='subtitle' darkColor={Colors.core.black}>Primary Gender:</ThemedText>
<ThemedText type='default' darkColor={Colors.core.black}>{currentName.gender}</ThemedText>
</View>
<View style={styles.rowDivider} />
<View>
<ThemedText type='subtitle' darkColor={Colors.core.black}>Popularity:</ThemedText>
<NamePopularityGraph popularity={currentName.popularity} gender={currentName.gender} />
</View>
</ScrollView>
</View>
<View style={styles.buttonContainer}>
{ !disableDislike && <TouchableOpacity
style={[styles.buttons, { backgroundColor: Colors.core.purple }]}
onPress={fetchNewName}
>
<MaterialIcons name="cancel" size={24} color={Colors.core.white} />
</TouchableOpacity> }
<TouchableOpacity
style={[styles.buttons, { backgroundColor: Colors.core.orange }]}
onPress={handleLikeName}
>
<MaterialIcons name="favorite" size={24} color={Colors.core.white} />
</TouchableOpacity>
</View>
</ThemedView>
);
}

const styles = StyleSheet.create({
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
},
rowDivider: {
height: 2,
backgroundColor: Colors.core.tan,
borderRadius: 2,
marginVertical: 10,
},
buttons: {
flex: 1,
padding: 10,
borderRadius: 5,
marginTop: 10,
alignItems: 'center',
marginHorizontal: 5, // Add some horizontal margin to create space between buttons
}
});
9 changes: 0 additions & 9 deletions app/(app)/nameContext/[id]/matches.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading