mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
avoid re-render of session to avoid glitchies
This commit is contained in:
parent
ade5ebb6db
commit
6c4f3b8782
@ -12,6 +12,8 @@ import { AccountContextProvider } from 'context/AccountContext';
|
||||
import { ProfileContextProvider } from 'context/ProfileContext';
|
||||
import { CardContextProvider } from 'context/CardContext';
|
||||
import { ChannelContextProvider } from 'context/ChannelContext';
|
||||
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
|
||||
export default function App() {
|
||||
|
||||
@ -22,16 +24,18 @@ export default function App() {
|
||||
<AccountContextProvider>
|
||||
<ProfileContextProvider>
|
||||
<AppContextProvider>
|
||||
<NativeRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={ <Root /> } />
|
||||
<Route path="/admin" element={ <Admin /> } />
|
||||
<Route path="/login" element={ <Access mode="login" /> } />
|
||||
<Route path="/reset" element={ <Access mode="reset" /> } />
|
||||
<Route path="/create" element={ <Access mode="create" /> } />
|
||||
<Route path="/session" element={ <Session/> } />
|
||||
</Routes>
|
||||
</NativeRouter>
|
||||
<SafeAreaProvider>
|
||||
<NativeRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={ <Root /> } />
|
||||
<Route path="/admin" element={ <Admin /> } />
|
||||
<Route path="/login" element={ <Access mode="login" /> } />
|
||||
<Route path="/reset" element={ <Access mode="reset" /> } />
|
||||
<Route path="/create" element={ <Access mode="create" /> } />
|
||||
<Route path="/session" element={ <NavigationContainer><Session/></NavigationContainer> } />
|
||||
</Routes>
|
||||
</NativeRouter>
|
||||
</SafeAreaProvider>
|
||||
</AppContextProvider>
|
||||
</ProfileContextProvider>
|
||||
</AccountContextProvider>
|
||||
|
@ -17,18 +17,24 @@ import { Details } from './details/Details';
|
||||
import { Conversation } from './conversation/Conversation';
|
||||
import { Welcome } from './welcome/Welcome';
|
||||
|
||||
const ConversationStack = createStackNavigator();
|
||||
const ProfileStack = createStackNavigator();
|
||||
const ContactStack = createStackNavigator();
|
||||
const ProfileDrawer = createDrawerNavigator();
|
||||
const ContactDrawer = createDrawerNavigator();
|
||||
const DetailDrawer = createDrawerNavigator();
|
||||
const CardDrawer = createDrawerNavigator();
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
export function Session() {
|
||||
|
||||
const { state, actions } = useSession();
|
||||
const [ contactDrawer, setContactDrawer ] = useState(null);
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
const openCards = (nav) => {
|
||||
nav.openDrawer();
|
||||
}
|
||||
const closeCards = (nav) => {}
|
||||
const openProfile = (nav) => {
|
||||
setContactDrawer('profile');
|
||||
nav.openDrawer();
|
||||
}
|
||||
const closeProfile = (nav) => {}
|
||||
@ -40,7 +46,6 @@ export function Session() {
|
||||
const closeDetails = (nav) => {}
|
||||
|
||||
// tabbed containers
|
||||
const ConversationStack = createStackNavigator();
|
||||
const ConversationStackScreen = () => {
|
||||
return (
|
||||
<ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
|
||||
@ -63,7 +68,6 @@ export function Session() {
|
||||
const DetailsTabScreen = ({ navigation }) => {
|
||||
return <Details closeDetails={() => closeDetails(navigation)} />
|
||||
}
|
||||
const ProfileStack = createStackNavigator();
|
||||
const ProfileStackScreen = () => {
|
||||
return (
|
||||
<ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
|
||||
@ -71,58 +75,73 @@ export function Session() {
|
||||
</ProfileStack.Navigator>
|
||||
);
|
||||
}
|
||||
const ContactStack = createStackNavigator();
|
||||
const ContactStackScreen = () => {
|
||||
const [cardId, setCardId] = useState(null);
|
||||
const setCardStack = (navigation, id) => {
|
||||
setCardId(id);
|
||||
navigation.navigate('card')
|
||||
}
|
||||
const clearCardStack = (navigation) => {
|
||||
navigation.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<ContactStack.Navigator screenOptions={({ route }) => ({ headerShown: false })}>
|
||||
<ContactStack.Screen name="cards" component={ContactsTabScreen} />
|
||||
<ContactStack.Screen name="card" component={ContactTabScreen} />
|
||||
<ContactStack.Screen name="cards">
|
||||
{(props) => <Cards openContact={(cardId) => setCardStack(props.navigation, cardId)} />}
|
||||
</ContactStack.Screen>
|
||||
<ContactStack.Screen name="card">
|
||||
{(props) => <Contact cardId={cardId} closeContact={() => clearCardStack(props.navigation)} />}
|
||||
</ContactStack.Screen>
|
||||
</ContactStack.Navigator>
|
||||
);
|
||||
}
|
||||
const ContactsTabScreen = ({ navigation }) => {
|
||||
return <Cards openContact={(cardId) => openContact(navigation, cardId)} />
|
||||
}
|
||||
const ContactTabScreen = ({ navigation }) => {
|
||||
return <Contact closeContact={() => closeContact(navigation)} />
|
||||
}
|
||||
|
||||
|
||||
// drawered containers
|
||||
const CardDrawer = createDrawerNavigator();
|
||||
const CardDrawerContent = ({ contactNav, navigation }) => {
|
||||
const CardDrawerContent = ({ navigation, setContact }) => {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Cards openContact={(cardId) => openContact(contactNav, cardId)} />
|
||||
<Cards navigation={navigation} openContact={setContact} />
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
const ProfileDrawerContent = ({ navigation }) => {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Profile closeProfile={() => closeProfile(navigation)} />
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
const DetailDrawerContent = ({ navigation }) => {
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Details closeDetails={() => closeDetails(navigation)} />
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
const ContactDrawer = createDrawerNavigator();
|
||||
const ContactDrawerContent = ({ navigation }) => {
|
||||
const clearContact = () => {
|
||||
navigation.closeDrawer();
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
{ contactDrawer === 'profile' && (
|
||||
<Profile closeProfile={() => closeProfile(navigation)} />
|
||||
)}
|
||||
{ contactDrawer === 'contacts' && (
|
||||
<Contact closeContact={() => closeContact(navigation)} />
|
||||
)}
|
||||
{ contactDrawer === 'details' && (
|
||||
<Details closeDetails={() => closeDetails(navigation)} />
|
||||
)}
|
||||
<Contact closeContact={clearContact} />
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
const HomeScreen = ({ contactNav, navigation }) => {
|
||||
|
||||
const HomeScreen = ({ cardNav, detailNav, contactNav, profileNav }) => {
|
||||
return (
|
||||
<View style={styles.home}>
|
||||
<View style={styles.sidebar}>
|
||||
<SafeAreaView edges={['top', 'left']} style={styles.options}>
|
||||
<TouchableOpacity style={styles.option} onPress={() => openProfile(contactNav)}>
|
||||
<TouchableOpacity style={styles.option} onPress={() => openProfile(profileNav)}>
|
||||
<Ionicons style={styles.icon} name={'user'} size={20} />
|
||||
<Text>Profile</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.option} onPress={() => openCards(navigation)}>
|
||||
<TouchableOpacity style={styles.option} onPress={() => openCards(cardNav)}>
|
||||
<Ionicons style={styles.icon} name={'contacts'} size={20} />
|
||||
<Text>Contacts</Text>
|
||||
</TouchableOpacity>
|
||||
@ -133,7 +152,7 @@ export function Session() {
|
||||
</View>
|
||||
<View style={styles.conversation}>
|
||||
{ state.conversationId && (
|
||||
<Conversation closeConversation={() => closeConversation(null)} openDetails={() => openDetails(contactNav)} />
|
||||
<Conversation closeConversation={() => closeConversation(null)} openDetails={() => openDetails(detailNav)} />
|
||||
)}
|
||||
{ !state.conversationId && (
|
||||
<Welcome />
|
||||
@ -143,70 +162,89 @@ export function Session() {
|
||||
)
|
||||
}
|
||||
|
||||
const CardDrawerScreen = ({ navigation }) => {
|
||||
const CardDrawerScreen = ({ detailNav, contactNav, profileNav, setContact }) => {
|
||||
|
||||
const setCardDrawer = (cardId) => {
|
||||
setContact(cardId);
|
||||
contactNav.openDrawer();
|
||||
}
|
||||
|
||||
return (
|
||||
<CardDrawer.Navigator screenOptions={{
|
||||
drawerPosition: 'right',
|
||||
headerShown: false,
|
||||
swipeEnabled: false,
|
||||
drawerType: 'front',
|
||||
drawerStyle: {
|
||||
width: state.cardWidth,
|
||||
},
|
||||
}}
|
||||
drawerContent={(props) => <CardDrawerContent contactNav={navigation} {...props} />}>
|
||||
<CardDrawer.Screen name="Root">
|
||||
{(props) => <HomeScreen contactNav={navigation} {...props} />}
|
||||
<CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }}
|
||||
drawerContent={(props) => <CardDrawerContent setContact={setCardDrawer} {...props} />}>
|
||||
<CardDrawer.Screen name="home">
|
||||
{(props) => <HomeScreen cardNav={props.navigation} detailNav={detailNav} contactNav={contactNav} profileNav={profileNav} />}
|
||||
</CardDrawer.Screen>
|
||||
</CardDrawer.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
const ContactDrawerScreen = ({ detailNav, profileNav }) => {
|
||||
|
||||
const [cardId, setCardId] = useState(null);
|
||||
const setContact = (id) => {
|
||||
setCardId(id);
|
||||
}
|
||||
|
||||
return (
|
||||
<ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
|
||||
drawerContent={(props) => <ContactDrawerContent cardId={cardId} {...props} />}>
|
||||
<ContactDrawer.Screen name="profile">
|
||||
{(props) => <CardDrawerScreen detailNav={detailNav} profileNav={profileNav} contactNav={props.navigation} setContact={setContact} />}
|
||||
</ContactDrawer.Screen>
|
||||
</ContactDrawer.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const ProfileDrawerScreen = ({ detailNav }) => {
|
||||
return (
|
||||
<ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
|
||||
drawerContent={(props) => <ProfileDrawerContent {...props} />}>
|
||||
<ProfileDrawer.Screen name="card">
|
||||
{(props) => <ContactDrawerScreen detailNav={detailNav} profileNav={props.navigation}/>}
|
||||
</ProfileDrawer.Screen>
|
||||
</ProfileDrawer.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<NavigationContainer>
|
||||
{ state.tabbed === false && (
|
||||
<ContactDrawer.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
swipeEnabled: false,
|
||||
drawerType: 'front',
|
||||
drawerPosition: 'right',
|
||||
drawerStyle: {
|
||||
width: state.profileWidth,
|
||||
<>
|
||||
{ state.tabbed === false && (
|
||||
<DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
|
||||
drawerContent={(props) => <DetailDrawerContent {...props} />}>
|
||||
<DetailDrawer.Screen name="contact">
|
||||
{(props) => <ProfileDrawerScreen detailNav={props.navigation} />}
|
||||
</DetailDrawer.Screen>
|
||||
</DetailDrawer.Navigator>
|
||||
)}
|
||||
{ state.tabbed === true && (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
tabBarStyle: styles.tabBar,
|
||||
headerShown: false,
|
||||
tabBarIcon: ({ focused, color, size }) => {
|
||||
if (route.name === 'Profile') {
|
||||
return <Ionicons name={'user'} size={size} color={color} />;
|
||||
}
|
||||
}}
|
||||
drawerContent={(props) => <ContactDrawerContent {...props} />}>
|
||||
<ContactDrawer.Screen name="Home" component={CardDrawerScreen} />
|
||||
</ContactDrawer.Navigator>
|
||||
)}
|
||||
{ state.tabbed === true && (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
tabBarStyle: styles.tabBar,
|
||||
headerShown: false,
|
||||
tabBarIcon: ({ focused, color, size }) => {
|
||||
if (route.name === 'Profile') {
|
||||
return <Ionicons name={'user'} size={size} color={color} />;
|
||||
}
|
||||
if (route.name === 'Conversation') {
|
||||
return <Ionicons name={'message1'} size={size} color={color} />;
|
||||
}
|
||||
if (route.name === 'Contacts') {
|
||||
return <Ionicons name={'contacts'} size={size} color={color} />;
|
||||
}
|
||||
},
|
||||
tabBarShowLabel: false,
|
||||
tabBarActiveTintColor: Colors.white,
|
||||
tabBarInactiveTintColor: Colors.disabled,
|
||||
})}>
|
||||
<Tab.Screen name="Conversation" component={ConversationStackScreen} />
|
||||
<Tab.Screen name="Profile" component={ProfileStackScreen} />
|
||||
<Tab.Screen name="Contacts" component={ContactStackScreen} />
|
||||
</Tab.Navigator>
|
||||
)}
|
||||
</NavigationContainer>
|
||||
</SafeAreaProvider>
|
||||
if (route.name === 'Conversation') {
|
||||
return <Ionicons name={'message1'} size={size} color={color} />;
|
||||
}
|
||||
if (route.name === 'Contacts') {
|
||||
return <Ionicons name={'contacts'} size={size} color={color} />;
|
||||
}
|
||||
},
|
||||
tabBarShowLabel: false,
|
||||
tabBarActiveTintColor: Colors.white,
|
||||
tabBarInactiveTintColor: Colors.disabled,
|
||||
})}>
|
||||
<Tab.Screen name="Conversation" component={ConversationStackScreen} />
|
||||
<Tab.Screen name="Profile" component={ProfileStackScreen} />
|
||||
<Tab.Screen name="Contacts">
|
||||
{(props) => (<SafeAreaView style={styles.tabframe}><ContactStackScreen /></SafeAreaView>)}
|
||||
</Tab.Screen>
|
||||
</Tab.Navigator>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -41,4 +41,8 @@ export const styles = StyleSheet.create({
|
||||
channels: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
tabframe: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}
|
||||
});
|
||||
|
@ -1,12 +1,18 @@
|
||||
import { useContext } from 'react';
|
||||
import { useState, useContext } from 'react';
|
||||
import { View, TouchableOpacity, Text } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { AppContext } from 'context/AppContext';
|
||||
|
||||
export function Cards() {
|
||||
export function Cards({ navigation, openContact }) {
|
||||
|
||||
const app = useContext(AppContext);
|
||||
const [cardId, setCardId] = useState(0);
|
||||
|
||||
return (<SafeAreaView edges={['top']}><TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={app.actions.logout}><Text>~ CARDS LOGOUT</Text></TouchableOpacity></SafeAreaView>)
|
||||
const onPressCard = () => {
|
||||
openContact(cardId);
|
||||
setCardId(cardId + 1);
|
||||
}
|
||||
|
||||
return <TouchableOpacity onPress={onPressCard}><Text>CARD</Text></TouchableOpacity>
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,7 @@ export function Channels() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.inputwrapper}>
|
||||
<Ionicons style={styles.icon} name="search1" size={18} color={'#ffffff'} />
|
||||
<Ionicons style={styles.icon} name="search1" size={16} color={'#ffffff'} />
|
||||
<TextInput style={styles.inputfield} value={state.topic} onChangeText={actions.setTopic}
|
||||
autoCapitalize="none" placeholderTextColor={'#ffffff'} placeholder="Topic" />
|
||||
<View style={styles.space} />
|
||||
|
@ -12,7 +12,7 @@ export const styles = StyleSheet.create({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
borderRadius: 4,
|
||||
backgroundColor: Colors.lightgrey,
|
||||
backgroundColor: Colors.background,
|
||||
alignItems: 'center',
|
||||
marginRight: 8,
|
||||
marginLeft: 8,
|
||||
@ -20,7 +20,7 @@ export const styles = StyleSheet.create({
|
||||
inputfield: {
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
padding: 8,
|
||||
padding: 4,
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
},
|
||||
|
@ -1,3 +1,12 @@
|
||||
export function Contact() {
|
||||
return <></>
|
||||
import { useState, useContext } from 'react';
|
||||
import { View, TouchableOpacity, Text } from 'react-native';
|
||||
|
||||
export function Contact({ navigation, closeContact }) {
|
||||
|
||||
const onPressCard = () => {
|
||||
closeContact();
|
||||
}
|
||||
|
||||
return <TouchableOpacity onPress={onPressCard}><Text>CLOSE</Text></TouchableOpacity>
|
||||
}
|
||||
|
||||
|
@ -2,11 +2,18 @@ import { useContext } from 'react';
|
||||
import { View, TouchableOpacity, Text } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { AppContext } from 'context/AppContext';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export function Profile() {
|
||||
|
||||
const app = useContext(AppContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (<SafeAreaView edges={['top']}><TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={app.actions.logout}><Text>~ PROFILE LOGOUT</Text></TouchableOpacity></SafeAreaView>)
|
||||
const logout = () => {
|
||||
app.actions.logout();
|
||||
navigate('/');
|
||||
}
|
||||
|
||||
return (<SafeAreaView edges={['top']}><TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={logout}><Text>~ PROFILE LOGOUT</Text></TouchableOpacity></SafeAreaView>)
|
||||
}
|
||||
|
||||
|
@ -8,11 +8,10 @@ export function useSession() {
|
||||
|
||||
const [state, setState] = useState({
|
||||
tabbled: null,
|
||||
profileWidth: '33%',
|
||||
cardWidth: '33%',
|
||||
subWidth: '33%',
|
||||
baseWidth: '33%',
|
||||
cardId: null,
|
||||
converstaionId: null,
|
||||
contactDrawer: 'profile',
|
||||
});
|
||||
const dimensions = useWindowDimensions();
|
||||
const app = useContext(AppContext);
|
||||
@ -26,10 +25,10 @@ export function useSession() {
|
||||
if (dimensions.width > config.tabbedWidth) {
|
||||
const width = Math.floor((dimensions.width * 33) / 100);
|
||||
if (width > 500) {
|
||||
updateStatus({ tabbed: false, cardWidth: 550, profileWidth: 500 });
|
||||
updateStatus({ tabbed: false, baseWidth: 550, subWidth: 500 });
|
||||
}
|
||||
else {
|
||||
updateState({ tabbed: false, cardWidth: width + 50, profileWidth: width });
|
||||
updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
|
||||
}
|
||||
}
|
||||
else {
|
||||
@ -38,9 +37,9 @@ export function useSession() {
|
||||
}, [dimensions]);
|
||||
|
||||
const actions = {
|
||||
setContactDrawer: (contactDrawer) => {
|
||||
updateState({ contactDrawer });
|
||||
},
|
||||
setCardId: (cardId) => {
|
||||
updateState({ cardId });
|
||||
}
|
||||
};
|
||||
|
||||
return { state, actions };
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Image, View, TouchableOpacity, Text } from 'react-native';
|
||||
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { styles } from './Welcome.styled';
|
||||
@ -5,6 +6,11 @@ import { styles } from './Welcome.styled';
|
||||
import session from 'images/session.png';
|
||||
|
||||
export function Welcome() {
|
||||
|
||||
useEffect(() => {
|
||||
console.log("WELCOME");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<Text style={styles.header}>Welcome to Databag</Text>
|
||||
|
Loading…
Reference in New Issue
Block a user