Skip to content

Commit

Permalink
fix: pass old component to work with new context
Browse files Browse the repository at this point in the history 
Signed-off-by: Sacha Froment <sfroment42@gmail.com>
  • Loading branch information
@sfroment
sfroment committed Feb 28, 2019
1 parent 6ac5983 commit ead32ed
Show file tree
Hide file tree
Showing 14 changed files with 185 additions and 215 deletions.
4 changes: 2 additions & 2 deletions client/react-native/common/components/App.js
View file
@@ -1,6 +1,6 @@
import { I18nextProvider } from 'react-i18next'
import { Linking, Platform, View } from 'react-native'
import { SafeAreaView, createAppContainer } from 'react-navigation'
import { Linking, Platform, View, NativeModules } from 'react-native'
import { SafeAreaView, createAppContainer, NavigationActions } from 'react-navigation'
import FlashMessage from 'react-native-flash-message'
import KeyboardSpacer from 'react-native-keyboard-spacer'
import ReactNativeLanguages from 'react-native-languages'
Expand Down
2 changes: 1 addition & 1 deletion client/react-native/common/components/Screens/Chats/Detail.js
View file
Expand Up @@ -309,7 +309,7 @@ class Detail extends PureComponent {
}

onConversationRead = async () => {
const res = await this.props.screenProps.context.mutations.conversationRead(
const res = await this.props.context.mutations.conversationRead(
{
id: this.props.navigation.getParam('id'),
}
Expand Down
200 changes: 98 additions & 102 deletions client/react-native/common/components/Screens/Chats/Settings/List.js
View file
Expand Up @@ -7,6 +7,7 @@ import { Screen, Menu, Header, Badge, Avatar } from '../../../Library'
import { choosePicture } from '../../../../helpers/react-native-image-picker'
import { colors } from '../../../../constants'
import { conversation as utils } from '../../../../utils'
import withRelayContext from '../../../../helpers/withRelayContext'

class List extends PureComponent {
static contextType = RelayContext
Expand Down Expand Up @@ -63,7 +64,7 @@ class List extends PureComponent {
addMembers = async ({ contactsID }) => {
try {
const { id } = this.props.navigation.getParam('conversation')
await this.props.screenProps.context.mutations.conversationInvite({
await this.props.context.mutations.conversationInvite({
conversationID: id,
contactsID,
})
Expand All @@ -85,115 +86,110 @@ class List extends PureComponent {
}

render () {
const { navigation, t } = this.props
const { navigation, t, context } = this.props
const { edit } = this.state
const conversation = this.props.navigation.getParam('conversation')
const title = utils.getTitle(conversation)
this.context = context
return (
<RelayContext.Consumer>
{context =>
(this.context = context) && (
<Screen>
<Menu absolute>
<Menu.Header
icon={
<Badge
background={colors.blue}
icon={edit && 'camera'}
medium
onPress={this.onChoosePicture}
>
<Avatar
data={conversation}
uri={this.state.uri}
size={78}
/>
</Badge>
}
title={!edit && title}
description={
!edit && 'NOT TRANSLATED Conversation started 2 days ago'
}
<Screen>
<Menu absolute>
<Menu.Header
icon={
<Badge
background={colors.blue}
icon={edit && 'camera'}
medium
onPress={this.onChoosePicture}
>
<Avatar
data={conversation}
uri={this.state.uri}
size={78}
/>
{edit && (
<Menu.Section title={t('chats.name')}>
<Menu.Input value={title} />
</Menu.Section>
)}
{!edit && (
<Menu.Section>
<Menu.Item
icon='bell'
title={t('chats.notifications')}
onPress={() =>
navigation.navigate('chats/settings/notifications')
}
/>
<Menu.Item
icon='clock'
title={t('chats.message-retention')}
onPress={() => console.log('Message retention')}
/>
</Menu.Section>
)}
{conversation.members.length <= 2 ? (
<Menu.Section>
<Menu.Item
icon='user'
title={t('contacts.details')}
onPress={() => console.log('Contact details')}
/>
</Menu.Section>
) : (
<Menu.Section
title={`${conversation.members.length} members`}
>
<Menu.Item
icon='user-plus'
title={t('chats.add-members')}
color={colors.blue}
onPress={() =>
this.props.navigation.navigate('chats/add', {
onSubmit: this.addMembers,
})
}
/>
<Menu.Item
icon='link'
title={t('chats.link-invite')}
color={colors.blue}
onPress={() => console.log('Invite to group with a link')}
/>
{conversation.members.map(member => {
const { id, contact, contactId } = member
const { displayName, overrideDisplayName } = contact || {
displayName: '?????',
}
return (
<Menu.Item
key={id}
icon={<Avatar data={{ id: contactId }} size={28} />}
title={overrideDisplayName || displayName}
/>
)
})}
</Menu.Section>
)}
<Menu.Section>
</Badge>
}
title={!edit && title}
description={
!edit && 'NOT TRANSLATED Conversation started 2 days ago'
}
/>
{edit && (
<Menu.Section title={t('chats.name')}>
<Menu.Input value={title} />
</Menu.Section>
)}
{!edit && (
<Menu.Section>
<Menu.Item
icon='bell'
title={t('chats.notifications')}
onPress={() =>
navigation.navigate('chats/settings/notifications')
}
/>
<Menu.Item
icon='clock'
title={t('chats.message-retention')}
onPress={() => console.log('Message retention')}
/>
</Menu.Section>
)}
{conversation.members.length <= 2 ? (
<Menu.Section>
<Menu.Item
icon='user'
title={t('contacts.details')}
onPress={() => console.log('Contact details')}
/>
</Menu.Section>
) : (
<Menu.Section
title={`${conversation.members.length} members`}
>
<Menu.Item
icon='user-plus'
title={t('chats.add-members')}
color={colors.blue}
onPress={() =>
this.props.navigation.navigate('chats/add', {
onSubmit: this.addMembers,
})
}
/>
<Menu.Item
icon='link'
title={t('chats.link-invite')}
color={colors.blue}
onPress={() => console.log('Invite to group with a link')}
/>
{conversation.members.map(member => {
const { id, contact, contactId } = member
const { displayName, overrideDisplayName } = contact || {
displayName: '?????',
}
return (
<Menu.Item
icon='trash-2'
title={t('chats.delete')}
color={colors.error}
onPress={this.onDeleteConversation}
key={id}
icon={<Avatar data={{ id: contactId }} size={28} />}
title={overrideDisplayName || displayName}
/>
</Menu.Section>
</Menu>
</Screen>
)
}
</RelayContext.Consumer>
)
})}
</Menu.Section>
)}
<Menu.Section>
<Menu.Item
icon='trash-2'
title={t('chats.delete')}
color={colors.error}
onPress={this.onDeleteConversation}
/>
</Menu.Section>
</Menu>
</Screen>
)
}
}

export default withNamespaces()(List)
export default withRelayContext(withNamespaces()(List))
81 changes: 39 additions & 42 deletions client/react-native/common/components/Screens/Contacts/ContactCardModal.js
View file
Expand Up @@ -7,63 +7,60 @@ import {
ContactIdentityActions,
ModalScreen,
} from '../../Library'
import { QueryReducer, RelayContext } from '../../../relay'
import { QueryReducer } from '../../../relay'
import { merge } from '../../../helpers'
import withRelayContext from '../../../helpers/withRelayContext'

const modalWidth = 320

class ContactCardModal extends React.Component {
static router = ContactIdentity.router

render () {
const { navigation } = this.props
const { navigation, context } = this.props
const data = {
id: navigation.getParam('id'),
displayName: navigation.getParam('displayName'),
}

return (
<RelayContext.Consumer>
{context => (
<QueryReducer
query={context.queries.Contact.graphql}
variables={merge([
context.queries.Contact.defaultVariables,
{ filter: { id: data.id } },
])}
>
{state =>
console.log(state) || (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}
>
<ModalScreen
showDismiss
width={modalWidth}
loading={state.type === state.loading}
footer={
<ContactIdentityActions
data={(state && state.data && state.data.Contact) || data}
modalWidth={modalWidth}
/>
}
>
<ContactIdentity
data={(state && state.data && state.data.Contact) || data}
/>
</ModalScreen>
</View>
)
}
</QueryReducer>
)}
</RelayContext.Consumer>
<QueryReducer
query={context.queries.Contact.graphql}
variables={merge([
context.queries.Contact.defaultVariables,
{ filter: { id: data.id } },
])}
>
{state =>
console.log(state) || (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}
>
<ModalScreen
showDismiss
width={modalWidth}
loading={state.type === state.loading}
footer={
<ContactIdentityActions
data={(state && state.data && state.data.Contact) || data}
modalWidth={modalWidth}
/>
}
>
<ContactIdentity
data={(state && state.data && state.data.Contact) || data}
/>
</ModalScreen>
</View>
)
}
</QueryReducer>
)
}
}

export default withNavigation(ContactCardModal)
export default withRelayContext(withNavigation(ContactCardModal))
18 changes: 0 additions & 18 deletions client/react-native/common/components/Screens/Landing/index.js
View file

This file was deleted.

7 changes: 5 additions & 2 deletions client/react-native/common/components/Screens/Settings/Devtools/Database.js
View file
Expand Up @@ -3,11 +3,12 @@ import React, { PureComponent } from 'react'

import { Flex, Header, Menu, Screen, Text } from '../../../Library'
import { colors } from '../../../../constants'
import withRelayContext from '../../../../helpers/withRelayContext'
import { RelayContext } from '../../../../relay'

const { CoreModule } = NativeModules

export default class Database extends PureComponent {
class Database extends PureComponent {
static contextType = RelayContext
static navigationOptions = ({ navigation }) => ({
header: () =>
Expand All @@ -23,7 +24,7 @@ export default class Database extends PureComponent {

generateFakeData = async () => {
try {
await this.props.screenProps.context.mutations.generateFakeData({
await this.props.context.mutations.generateFakeData({
t: true,
})
} catch (err) {
Expand Down Expand Up @@ -79,3 +80,5 @@ export default class Database extends PureComponent {
)
}
}

export default withRelayContext(Database)

0 comments on commit ead32ed

Please sign in to comment.