Setup ProfileModalProvider correctly.

Made workaround for issue I have posted in facebook/react-native#22750.
hyochan · Dec 22, 2018 · 6a83381 · 6a83381
1 parent af451c7
commit 6a83381
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 42 deletions.
diff --git a/STRINGS.js b/STRINGS.js
@@ -1,24 +1,68 @@
 import LocalizedStrings from 'react-native-localization';
 
-const strings = new LocalizedStrings({
+export const strings = new LocalizedStrings({
   en: {
+    LOADING: 'LOADING...',
     HELLO: 'Hello',
     LOGIN: 'Login',
     EMAIL: 'Email',
     PASSWORD: 'Password',
     SIGNUP: 'SIGN UP',
+    LOGIN: 'LOGIN',
+    LOGOUT: 'LOGOUT',
     FORGOT_PW: 'Forgot password?',
+    FIND_PW: 'FIND PASSWORD',
+    NAME: 'NAME',
+    STATUS_MSG: 'Status message',
+    REGISTER: 'REGISTER',
+    SEND_LINK: 'Send Link',
+    FRIEND: 'Friend',
+    MESSAGE: 'Message',
+    MY_PROFILE: 'My profile',
+    UPDATE: 'Update',
+    NO_CONTENT: 'No content',
+    ADD_FRIEND: 'ADD',
+    DELETE_FRIEND: 'DELETE',
+    SEARCH_USER: 'Search User',
+    CHAT: 'CHAT',
+    SEND: 'Send',
+    WRITE_MESSAGE: 'Write message...',
+    ERROR: 'Error',
+    FRIEND_ADDED: 'Added to your friend.',
+    FRIEND_ALREADY_ADDED: 'Already your friend.',
   },
   ko: {
+    LOADING: '로딩중...',
     HELLO: '안녕하세요',
     LOGIN: '로그인',
+    LOGOUT: '로그아웃',
     EMAIL: '이메일',
     PASSWORD: '패스워드',
     SIGNUP: '회원가입',
+    LOGIN: '로그인',
     FORGOT_PW: '비밀번호를 잊어버리셨나요?',
+    FIND_PW: '비밀번호 찾기',
+    NAME: '이름',
+    STATUS_MSG: '상태메세지',
+    REGISTER: '가입',
+    SEND_LINK: '링크 보내기',
+    FRIEND: '친구',
+    MESSAGE: '메세지',
+    MY_PROFILE: '나의 프로필',
+    UPDATE: '수정',
+    NO_CONTENT: '컨텐츠가 없습니다',
+    ADD_FRIEND: '친구추가',
+    DELETE_FRIEND: '친구삭제',
+    SEARCH_USER: '사용자 검색',
+    CHAT: '채팅',
+    SEND: '보내기',
+    WRITE_MESSAGE: '메세지를 입력해주세요…',
+    Error: '에러',
+    FRIEND_ADDED: '친구로 등록되었습니다.',
+    FRIEND_ALREADY_ADDED: '이미 친구입니다.',
   },
 });
 
-export const getString = (str: string) => {
+export const getString = (str) => {
   return strings[str];
 };
diff --git a/src/components/navigation/MainStackNavigator.js b/src/components/navigation/MainStackNavigator.js
@@ -14,7 +14,7 @@ import Chat from '../screen/Chat';
 import NotFound from '../screen/NotFound';
 import ProfileModal from '../shared/ProfileModal';
 import { colors } from '../../utils/Styles';
-import { ProfileProvider, ProfileConsumer } from '../../providers/ProfileProvider';
+import { ProfileModalProvider, ProfileModalConsumer } from '../../providers/ProfileModalProvider';
 
 const routeConfig = {
   Main: { screen: MainTabNavigator, navigationOptions: MainTabNavigationOptions },
@@ -51,32 +51,11 @@ class RootNavigator extends React.Component<any, any> {
   render() {
     return (
       <View style={{ flex: 1, flexDirection: 'column' }}>
-        <ProfileProvider>
+        <ProfileModalProvider navigation={this.props.navigation}>
           <MainStackNavigator
             navigation={this.props.navigation}
           />
-          {/* ref is called */}
-          <ProfileModal
-            ref={(v) => {
-              console.log('v', v);
-            }}
-          />;
-          {/* ref is not called */}
-          <ProfileConsumer>
-            {
-              (data) => {
-                console.log(data);
-                <ProfileModal
-                  ref={(v) => {
-                    console.log('v', v);
-                    data.modal = v;
-                  }}
-                  onChat={ () => data.actions.onChatPressed(this.props.navigation) }
-                />;
-              }
-            }
-          </ProfileConsumer>
-        </ProfileProvider>
+        </ProfileModalProvider>
       </View>
     );
   }

diff --git a/src/components/screen/Friend.js b/src/components/screen/Friend.js
@@ -15,7 +15,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 
 import { ratio, colors } from '../../utils/Styles';
-import { ProfileConsumer } from '../../providers/ProfileProvider';
+import { ProfileModalConsumer } from '../../providers/ProfileModalProvider';
 
 type Styles = {
   container: ViewStyle,
@@ -45,7 +45,7 @@ class Screen extends Component<Props, State> {
 
   render() {
     return (
-      <ProfileConsumer>
+      <ProfileModalConsumer>
         {
           (data) => {
             return (
@@ -60,7 +60,7 @@ class Screen extends Component<Props, State> {
             );
           }
         }
-      </ProfileConsumer>
+      </ProfileModalConsumer>
     );
   }
 }

diff --git a/src/components/screen/SearchUser.js b/src/components/screen/SearchUser.js
@@ -15,7 +15,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 
 import { ratio, colors } from '../../utils/Styles';
-import { ProfileConsumer } from '../../providers/ProfileProvider';
+import { ProfileModalConsumer } from '../../providers/ProfileModalProvider';
 
 type Styles = {
   container: ViewStyle,
@@ -45,7 +45,7 @@ class Screen extends Component<Props, State> {
 
   render() {
     return (
-      <ProfileConsumer>
+      <ProfileModalConsumer>
         {
           (data) => {
             <View style={styles.container}>
@@ -57,7 +57,7 @@ class Screen extends Component<Props, State> {
             </View>;
           }
         }
-      </ProfileConsumer>
+      </ProfileModalConsumer>
     );
   }
 }

diff --git a/src/components/shared/ProfileModal.js b/src/components/shared/ProfileModal.js
@@ -38,7 +38,7 @@ const styles: Styles = StyleSheet.create({
     backgroundColor: 'transparent',
     alignSelf: 'center',
     height: 320,
-    marginTop: 160,
+    marginTop: 200,
 
     alignContent: 'center',
     alignItems: 'center',
@@ -111,7 +111,7 @@ const styles: Styles = StyleSheet.create({
 
 type Props = {
   style?: ViewStyle;
-  onChat?: () => void;
+  onChatPressed?: () => void;
 };
 
 type State = {
@@ -197,11 +197,11 @@ class Shared extends Component<Props, State> {
             <View style={styles.viewBtnDivider}/>
             <TouchableOpacity
               activeOpacity={0.5}
-              onPress={this.props.onChat}
+              onPress={this.props.onChatPressed}
               style={styles.viewBtn}
             >
               <View style={styles.viewBtn}>
-                <Text style={styles.txtBtn}>{getString('GO_CHAT')}</Text>
+                <Text style={styles.txtBtn}>{getString('CHAT')}</Text>
               </View>
             </TouchableOpacity>
           </View>

diff --git a/src/providers/ProfileProvider.js → src/providers/ProfileModalProvider.js b/src/providers/ProfileProvider.js → src/providers/ProfileModalProvider.js
@@ -1,11 +1,12 @@
 import React, { createContext } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
+import ProfileModal from '../components/shared/ProfileModal';
 
-const ProfileContext = createContext();
+const ProfileModalContext = createContext();
 
-export const ProfileConsumer = ProfileContext.Consumer;
+export const ProfileModalConsumer = ProfileModalContext.Consumer;
 
-export class ProfileProvider extends React.Component {
+export class ProfileModalProvider extends React.Component {
   static modal;
 
   state = {
@@ -20,7 +21,7 @@ export class ProfileProvider extends React.Component {
     showModal: (user) => {
       console.log('showModal');
       this.setState({ user }, () => {
-        if (this.state.profileModal) {
+        if (this.modal) {
           console.log('openModal');
           this.modal.showAddBtn(true);
           this.modal.open();
@@ -39,9 +40,16 @@ export class ProfileProvider extends React.Component {
     const { state, actions, modal } = this;
     const value = { state, actions, modal };
     return (
-      <ProfileContext.Provider value={value}>
+      <ProfileModalContext.Provider value={value}>
         {this.props.children}
-      </ProfileContext.Provider>
+        <ProfileModal
+          ref={(v) => {
+            console.log('v', v);
+            this.modal = v;
+          }}
+          onChatPressed={ () => this.actions.onChatPressed(this.props.navigation) }
+        />
+      </ProfileModalContext.Provider>
     );
   }
 }