[Feature] Search users / show friends / add friend / delete friend (#115

)

* Search users (#3)
* Add sample error container to handle graphql error (#112)
* Add sample error container for graphql error
* Add error asset
* Implement [ErrorView] shared component
* Set timer before judging the navigation on startup
* Implement [ChannelCreate] screen to start chatting with multiple users (#113)
* Enhance [SearchTextInput] for [SearchUser]
* Add [ChannelCreate] screen and fab in [Channel] screen
* Enhance [ErrorView] and use it in EmptyListComponent
   - Add ability to set custom title, body, buttonText and hide button.
* Implement [ChannelCreate] screen wich [CheckBox]
* CheckBox toggle on press
* Fix [UserListItem] child width
* Add ability render tablet with testUtils
* Improve test coverage
* Add query to collect users
* Attach apollo to collect actual data from server('hackatalk-server')
* Fix tsc errors
* Rebase upstream master branch
* Add "MockedProvider" and clear console.error's Warning message
   - Add "MockedProvider" in test code
   - make following warning message disappear
   "Warning: An update to Screen inside a test was not wrapped in act"
* Apollo Error Handling and add refetch typing
* Add useQuery's error handling test case

Co-authored-by: Hyo Chan Jang <dooboolab@gmail.com>
Co-authored-by: Ted Kim <yenafirst91@gmail.com>
Co-authored-by: Gordon <godon019@gmail.com>
Co-authored-by: Ted Kim <dev.ted.kim@gmail.com>
Co-authored-by: JungHoonPark <wfr112@naver.com>

.gitignore

@@ -63,6 +63,7 @@ coverage/
 package-lock.json
 
 ios/Pods/
+ios/assets/
 
 # IDE
 .idea/

.vscode/settings.json

@@ -23,5 +23,5 @@
   },
   "javascript.preferences.importModuleSpecifier": "relative",
   "typescript.preferences.importModuleSpecifier": "relative",
-  "prettier.configPath": ".prettierrc.js"
+  "prettier.configPath": ".prettierrc.js",
 }

README.md

@@ -111,7 +111,6 @@ MYAPP_RELEASE_KEY_ALIAS=
 MYAPP_RELEASE_STORE_PASSWORD=
 MYAPP_RELEASE_KEY_PASSWORD=
 
-
   | Name                      | default | required | description                 |
   | ------------------- | -------------------------------------------------------------------------------- | --------- | ----------------------- |
   | iOSClientId                  |                                      |     | CLIENT_ID in `GoogleService-Info.plist` `firebase` ios app project. |
@@ -267,7 +266,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/hankkuu"><img src="https://avatars2.githubusercontent.com/u/7829802?v=4" width="60px;" alt=""/><br /><sub><b>hankkuu</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=hankkuu" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/Sandwichj"><img src="https://avatars1.githubusercontent.com/u/11019960?v=4" width="60px;" alt=""/><br /><sub><b>Minseok</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=Sandwichj" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=Sandwichj" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/jb9229"><img src="https://avatars3.githubusercontent.com/u/3200647?v=4" width="60px;" alt=""/><br /><sub><b>cwalker</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=jb9229" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=jb9229" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://geoseong.github.io/"><img src="https://avatars0.githubusercontent.com/u/19166187?v=4" width="60px;" alt=""/><br /><sub><b>TaeSeong Park</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=geoseong" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=geoseong" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/geoseong"><img src="https://avatars0.githubusercontent.com/u/19166187?v=4" width="60px;" alt=""/><br /><sub><b>TaeSeong Park</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=geoseong" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=geoseong" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/daheeahn"><img src="https://avatars3.githubusercontent.com/u/38369729?v=4" width="60px;" alt=""/><br /><sub><b>daheeahn</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=daheeahn" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=daheeahn" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/devohno"><img src="https://avatars1.githubusercontent.com/u/55861805?v=4" width="60px;" alt=""/><br /><sub><b>Eunho Lee</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=devohno" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=devohno" title="Tests">⚠️</a></td>
   </tr>
@@ -276,6 +275,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/dlgmltjr0925"><img src="https://avatars0.githubusercontent.com/u/33364619?v=4" width="60px;" alt=""/><br /><sub><b>dlgmltjr0925</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=dlgmltjr0925" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=dlgmltjr0925" title="Tests">⚠️</a></td>
     <td align="center"><a href="http://utaha.moe/about"><img src="https://avatars0.githubusercontent.com/u/12093323?v=4" width="60px;" alt=""/><br /><sub><b>Jaeho Cho (Barney)</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=real0131" title="Code">💻</a></td>
     <td align="center"><a href="https://selina-park.tistory.com/"><img src="https://avatars3.githubusercontent.com/u/31176502?v=4" width="60px;" alt=""/><br /><sub><b>jinsun Park</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=ilikeu7246" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=ilikeu7246" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/00aney"><img src="https://avatars2.githubusercontent.com/u/20268356?s=460&u=ce4aa5652f28438fb938cb783603f111a7636c41&v=4" width="60px;" alt=""/><br /><sub><b>Ted Kim</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=00aney" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=00aney" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/qkreltms"><img src="https://avatars3.githubusercontent.com/u/25196026?s=460&u=3153e71157042d4bc95a65ed4f06d15da57a1203&v=4" width="60px;" alt=""/><br /><sub><b>junghoon Park</b></sub></a><br /><a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=qkreltms" title="Code">💻</a> <a href="https://github.com/dooboolab/hackatalk-mobile/commits?author=qkreltms" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

config.ts

@@ -0,0 +1,5 @@
+export const iOSClientId = '<your iOSClientId>';
+export const iOSExpoClientId = '<your iOSClientId for exp.host.exponent>';
+export const androidExpoClientId =
+  '<your androidClientId for exp.host.exponent>';
+export const GRAPHQL_URL = 'https://stage.hackatalk.dev/graphql';

ios/Podfile.lock

@@ -285,7 +285,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNBootSplash (2.0.5):
+  - RNBootSplash (2.1.0):
     - React
   - RNCAsyncStorage (1.8.1):
     - React
@@ -295,11 +295,11 @@ PODS:
     - React
   - RNKeychain (5.0.1):
     - React
-  - RNLocalize (1.3.3):
+  - RNLocalize (1.3.4):
     - React
   - RNReanimated (1.7.0):
     - React
-  - RNScreens (2.2.0):
+  - RNScreens (2.3.0):
     - React
   - RNSVG (12.0.3):
     - React
@@ -584,7 +584,7 @@ SPEC CHECKSUMS:
   EXFacebook: c10f77ea97b3003c29b4f0a49942acc1ba8330b5
   EXFileSystem: 6e0d9bb6cc4ea404dbb8f583c1a8a2dcdf4b83b6
   EXFont: 6187b5ab46ee578d5f8e7f2ea092752e78772235
-  EXGoogleSignIn: 65ea35bd97f6f478567fdd95f8fbc76a5b6b6be9
+  EXGoogleSignIn: f44d83d717ecff1d620050770df1076a187c7dee
   EXImagePicker: 756b576180d4f24fabc23ab97bc3330fd8385813
   EXLinearGradient: 75f302f9d6484267a3f6d3252df2e7a5f00e716a
   EXLocalization: 6a3ec1e9dda2ec9ba9dcc4a29dd840e5e950115e
@@ -621,14 +621,14 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNBootSplash: e5e37b64a03a9655e2db8c2e12a7a30853cf3352
+  RNBootSplash: fbf76a4bf1c03e9acd1dd08ce064847f26d6d8bf
   RNCAsyncStorage: e0dd7c8a36543b4ef84969acd9f8aceba3a92dc2
   RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
   RNGestureHandler: dde546180bf24af0b5f737c8ad04b6f3fa51609a
   RNKeychain: a5623de13ec5378bfb8035422e3dee4fa538660d
-  RNLocalize: a734b53c45e77acd3ffb78b92e63bb4d6cd13257
+  RNLocalize: 215c419a17d7585eb7a63c748ebfd042e0cb2c3d
   RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f
-  RNScreens: 812b79d384e2bea7eebc4ec981469160d4948fd5
+  RNScreens: 03bf608b92ac0acf323f47d8f5b63a8f829340c8
   RNSVG: 7e16ddfc6e00d5aa69c9eb83e699bcce5dcb85d4
   RNVirgilCrypto: 670c8e3be15f533e80d11d56df6bba3e82bf4570
   UMBarCodeScannerInterface: 3802c8574ef119c150701d679ab386e2266d6a54
@@ -640,7 +640,7 @@ SPEC CHECKSUMS:
   UMFontInterface: 24fbc0a02ade6c60ad3ee3e2b5d597c8dcfc3208
   UMImageLoaderInterface: 3976a14c588341228881ff75970fbabf122efca4
   UMPermissionsInterface: 0f68a2e35b8951a03fa087e54f33bb2691bbf981
-  UMReactNativeAdapter: 1c38ce7cb8c41f7805d3f2e543aac60099b2ef44
+  UMReactNativeAdapter: fa2c956c93deb92fb918bd920f6c387e61868afe
   UMSensorsInterface: d708a892ef1500bdd9fc3ff03f7836c66d1634d3
   UMTaskManagerInterface: a98e37a576a5220bf43b8faf33cfdc129d2f441d
   VirgilCrypto: c2831582c5230eeb2adba2365336c768cd6d8c59

src/components/navigation/MainStackNavigator.tsx

@@ -8,7 +8,6 @@ import TabNavigator, { MainTabNavigationOptions } from './MainTabNavigator';
 import ChangePw from '../screen/ChangePw';
 import ChannelCreate from '../screen/ChannelCreate';
 import { DefaultTheme } from 'styled-components';
-import { FriendProvider } from '../../providers/FriendProvider';
 import { IC_SETTING_W } from '../../utils/Icons';
 import Message from '../screen/Message';
 import PinchZoomViewPager from '../screen/PinchZoomViewPager';
@@ -180,9 +179,7 @@ function RootNavigator(): ReactElement {
 export default function RootNavigatorWrapper(): ReactElement {
   return (
     <ProfileModalProvider>
-      <FriendProvider>
-        <RootNavigator />
-      </FriendProvider>
+      <RootNavigator />
     </ProfileModalProvider>
   );
 }

src/components/screen/Friend.tsx

@@ -1,13 +1,17 @@
 import React, { ReactElement } from 'react';
 
+import { ApolloQueryResult } from 'apollo-client';
 import EmptyListItem from '../shared/EmptyListItem';
+import ErrorView from '../shared/ErrorView';
 import { FlatList } from 'react-native';
+import { LoadingIndicator } from '@dooboo-ui/native';
+import { QUERY_FRIENDS } from '../../graphql/queries';
 import { User } from '../../types';
 import UserListItem from '../shared/UserListItem';
 import { getString } from '../../../STRINGS';
 import styled from 'styled-components/native';
-import { useFriendContext } from '../../providers/FriendProvider';
 import { useProfileContext } from '../../providers/ProfileModalProvider';
+import { useQuery } from '@apollo/react-hooks';
 
 const Container = styled.View`
   flex: 1;
@@ -19,21 +23,19 @@ const Container = styled.View`
 
 export default function Screen(): ReactElement {
   const { state, showModal } = useProfileContext();
-  const {
-    friendState: { friends },
-  } = useFriendContext();
+
+  // prettier-ignore
+  const { loading, data, error, refetch } = useQuery<{
+    friends: User[];
+  }>(QUERY_FRIENDS, {
+    fetchPolicy: 'network-only',
+  });
 
   const userListOnPress = (user: User): void => {
     if (state.modal) {
       showModal({
         user,
         deleteMode: true,
-        onDeleteFriend: (): void => {
-          if (state.modal && state.modal.current) {
-            const profileModal = state.modal.current;
-            profileModal.close();
-          }
-        },
       });
     }
   };
@@ -55,6 +57,17 @@ export default function Screen(): ReactElement {
     );
   };
 
+  if (loading) {
+    return (<Container><LoadingIndicator /></Container>);
+  }
+
+  if (error) {
+    return <ErrorView
+      body={error.message}
+      onButtonPressed={(): Promise<ApolloQueryResult<{ friends: User[] }>> => refetch()}
+    />;
+  }
+
   return (
     <Container>
       <FlatList
@@ -63,7 +76,7 @@ export default function Screen(): ReactElement {
           alignSelf: 'stretch',
         }}
         contentContainerStyle={
-          friends.length === 0
+          data?.friends.length === 0
             ? {
               flex: 1,
               alignItems: 'center',
@@ -72,7 +85,7 @@ export default function Screen(): ReactElement {
             : null
         }
         keyExtractor={(item, index): string => index.toString()}
-        data={friends}
+        data={data?.friends}
         renderItem={renderItem}
         ListEmptyComponent={
           <EmptyListItem>{getString('NO_CONTENT')}</EmptyListItem>