Describe the bug
I want to say that this is not a hackatalk-mobile's own bug,
just want to discuss why this happens and how can resolve this.

I commited to PR#115 and didn't pass in ci/circleci: node section. (I attached detailed error message down below at Expected behavior section)

I feel strange and so I tried to run yarn test in my local workspace, and I found same error message.

weird thing is that I haven't seen this error before I push my commits to PR.

and I googled it, I found this issues in jest repo

so I put jest.useFakeTimers() in following test codes that kinds of error happens, and error disappeared.
(can see codes in 0b77338)

• src/components/screen/tests/ProfileUpdate.test.tsx
• src/components/screen/tests/WebView.test.tsx
• src/components/shared/tests/ErrorView.test.tsx
• src/components/shared/tests/GiftedChat.test.tsx
• src/components/shared/tests/UserListItem.test.tsx

I've seen ci/circleci: node's Jest test terminal contexts in other PRs (for example, can see this, I could see this kind of error exist.

but the reason it can pass the test is, it processed within 30000ms.
Unfortunately my test case doesn't make it passed within 30000ms.

To Reproduce
remove jest.useFakeTimers() in test code

Expected behavior
You'll see the error like this below

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at parseErrorStack (node_modules/react-native/Libraries/Core/Devtools/parseErrorStack.js:27:28)
      at createStack (node_modules/react-native/Libraries/YellowBox/Data/YellowBoxWarning.js:110:10)
      at Function.parse (node_modules/react-native/Libraries/YellowBox/Data/YellowBoxWarning.js:39:14)
      at Object.add (node_modules/react-native/Libraries/YellowBox/Data/YellowBoxRegistry.js:80:57)
      at registerWarning (node_modules/react-native/Libraries/YellowBox/YellowBox.js:138:23)
 FAIL  src/components/screen/__tests__/ChangePw.test.tsx
  ● [ChangePw] screen › interactions › should simulate textChanged

    TypeError: stacktraceParser.parse is not a function

If you have some idea to resolve this error or have some opinion or advice, please let me know in the comments.

Given initial works provided in #96, I'd like to share with others on apollo integrations.
Below are the tasks we can try today 🥇 .

You can see all integrated GraphqlAPIs in https://stage.hackatalk.dev/graphql

** Currently provided **

• Add / Remove push notifications
• Search all users not including user.
• Add / Remove friend
• Update profile
• Find password
• Facebook signin
• Apple signin
• Google signin
• Change password

** Not yet provided in server **

• Manage on / offline users
• Add channel (This can be done automatically when you've sent first message to user)
• Send message (Message, Photo, File)
• Get messages with pagination
• Friend subscription
• Channel subscription
• Message subscription

** Planed for integration **

• Auth flow (signin, me, signup, verify email)
• Social auth (apple signin, facebook signin, google signin)
  • signInWithSocialAccount
• Find & change password / check auth type
  • me
  • findPassword
  • changePassword
• Search users / add friends / show friends
  • users
  • addFriend
  • friends
  • deleteFriend
• Update profile
  • updateProfile
  • rest api : post /upload_single with body inputFile

⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️

Recommended steps

1. Try to test apis in https://stage.hackatalk.dev/graphql
2. Write up integration senario in medium.
   • This can be used in pull request for better understanding.
3. Write codes and integrate graphql APIs with installed apollo client.
   • The medium blog will tell you how to do so.
   • Youtube tutorial
   • Please mind the typings.
4. Write test code.
   • This step is also in the medium and youtube.
5. Provide docs on medium and submit to dooboolab or react-native-seoul.
6. Add enhancement if you see anything that should be improved such as UI.

Specify project
Client

Describe the bug
To type the text on name label, keyboard hides it.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Login view'.
2. Click on 'Sign Up' button.
3. Click the 'Name' textfield label to type.
4. See error.

Expected behavior
The view will go up and label that I'm typing should be shown above the keyboard.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser: chrome
• Version: 10.15.4

Smartphone (please complete the following information):

• Device: iPhone 11 pro
• OS: iOS13.6
• Browser: safari
• Version: 11.6

Describe the bug
A clear and concise description of what the bug is.

pod install makes error as below.

...
Installing react-native-config (0.12.0)
Installing react-native-safe-area-context (0.7.3)
Installing react-native-webview (8.1.2)
[!] The 'Pods-HackaTalk' target has transitive dependencies that include statically linked binaries: (./hackatalk-mobile/ios/Pods/GoogleSignIn/Frameworks/GoogleSignIn.framework)

To Reproduce
Steps to reproduce the behavior:

1. Clone master
2. Install npm dependencies
3. Try pod install in ios folder

Expected behavior
A clear and concise description of what you expected to happen.

Podfile.lock should be created without error.

Desktop (please complete the following information):

• Pod version: 1.9.1

Is your feature request related to a problem? Please describe.
When I followed up the README to run first, I need to know facebookAppId, iosClinetId, androidClientId. etc. Usually, people just want to add some features but they need to figure out where those can be found before doing it.

Describe the solution you'd like
All configuration change to optional. and throw exception only when the configuration is needed.

Describe alternatives you've considered
Plz, add docs people can understand why it is needed and where they can find it. or break down the steps when run it on iOS or Android respectively

Additional context
Thanks

Problem

Currently we are using React.ReactElement for typing a component
Which doesn't let typescript to infer children from its React component props

As we can see, we have to declare children explicitly to use it.

But if we use React.FC or React.SFC, typescript knows that it is React component and properly shows the children of React component prop

Solution

We can migrate it little by little

Instead of using PinchZoomView in react-native-image-zoom-viewer, it'd be more essential if we can directly use react-native-gesture-handler. See below.

https://kmagiera.github.io/react-native-gesture-handler/docs/handler-pinch.html

• Make above view into Shared component.

We'd like to migrate our graphql client from apollo to relay since we think it is more powerful and ideal.

More specific reasons are listed.

1. Powerful declarative data fetching with co-location pattern.
2. Works well with future react, the concurrent mode.
3. Looks like other communities are also moving to relay.

typescript-eslint/recommended added in #6 makes this project to improve considerable typings. Currently 92 warnings 😫

• Add clickable map icon
• Add clickable calendar icon
• Add clickable file icon
• Add clickable sound icon
• Add clickable contact icon
• Should add test cases on onPress interactions

Related issue

#98

Notice

I opened issue in geoseong's repository. so please leave any opinions and thoughts in that comments

Branch name

feat/usermgmt

Collaboration Flow

Assignee

users: Search users

• branch: feat/usermgmt/users
• assignee: @geoseong @marktoope

friends: show friends

• branch: feat/usermgmt/friends
• assignee: @dlgmltjr0925 @00aney

addFriend: add friend

• branch: feat/usermgmt/add-friend
• assignee: @godon019 @haerang94

deleteFriend: delete friend

• branch: feat/usermgmt/delete-friend
• assignee: @qkreltms

Specify project
Client

Describe the bug
"Update" button inside the profile page does nothing.

To Reproduce

1. Open Hackatalk.
2. Sign in.
3. Press profile icon on the top left corner.
4. Modify profile info.
5. Press the update button.

Expected behavior

• Profile gets updated.
• A message is shown on screen that the profile update was successful, or an error message if there was an error.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Firefox
• Version: 79.0

There's a vulunerablility that enables us to verify email and reset password without actual verification.

On server side, Server verifies an email address by comparing real email address and bcrypt hash of it in an verification url. This logic is used in email verification and password reset logic.
It sounds simple but makes an security vulunerablility, because it enables to reset password or verify email without actual email verification.
We can make bcrypt hash with only email address. That means verification email actually not needed to verify email.
Using this vulunerablility, we can verify email address and reset password without verification.

Is your feature request related to a problem? Please describe.
In the Hackatak, there is no application settings screen. This is a common menu in other applications like Kakaotalk, Telegram, Whatsapp and so on.

Describe the solution you'd like
Add [Settings] screen

Describe alternatives you've considered
At this stage, it seems like that all menus are not needed. So, I will add just the main [Settings] screen showing dummy menu bars not working. These dummy menus will be [Notifications and Sounds] [Privacy and Security] [Language] [Announcement]

Additional context

Refactor context & dispatch pattern to provider and functional pattern so we can use use... in else where.

• Follow the read.
• Implement feature in your own dev env (creating your own facebook dev account). Only erase facebook secret before PRing.
• Write minimal test code (don't need to be perfect).
• Write readme on how to manage facebook secrets in config.ts.
• Write necessary variables in config.sample.ts.
• Write a blog (extra $10) in one of medium dooboolab or medium react-native-seoul if you prefer Korean.

Specify project
Client

I found my plain password is stored in local storage after sign in.
Would you mind if I want to know the reason to store it?

Thank you.

I'm drawing diagrams of hackatalk's client and server using VSCode's drawio extension which is great!.

here is my work in my fork repository's wiki page.

the reason why I did this is to understand the project's structure.

and if my diagrams might help people who are interested in this project, I'm about to put this content here.

but need to decide which place would be proper.

into Code

If I put this content into Code, I'm planning to make new diagrams directory and put diagrams in it.
It needs to do Pull Request when the diagram changed due to changing project structure.

into Wiki

put the diagrams into the Wiki page to make the diagrams change easier.
can decorate in some ways like documentation page.

so please let me know you guys opinion.

Integration of apollo-client to hackatalk-stage server.

Add [PinchZoomView] with full screen to show image in full screen with pinch zoom ability.

• Design below screen
  
  • Image should be pinch zoomed.
  • Image area should be implemented in shared component named [PinchZoomView] or [PinchZoomHorizontalScrollView]. Imagine that this will be ported to @dooboo-ui/native.
  • bonus: Image should be carousel. left right scroll by screen.

Using WebView in expo, please do the following.

• Implement the design in Login screen and put below localized text at the very bottom. The design should be done in a personal sense.

  • en: We consider that you agree with terms for agreement and privacy policy by going onto next step.
  • ko: 다음 단계로 진행함과 동시에 이용약관 및 개인정보취급방침에 동의하는 것으로 간주합니다.

• should open up webview with url provided when clicking on terms and privacy text.

• should open up webview with url provided when clicking on privacy policy text.

We now need to add Apple Authentication in order to add other 3rd parties social auth.

• Follow the doc.

Specify project

Server

To Reproduce

1. Remove below code in client/src/App.tsx

// @ts-ignore ==> TODO

2. Type this in the terminal

$ cd client
$ yarn tsc

3. See the error

Expected behavior

No error when running yarn tsc

Screenshots

Describe the bug

There is a type error in the below code.

// client/src/App.tsx

const initUser = async (me: AppUserQueryResponse['me']): Promise<void> => {
  if (!me) return;
  await initializeEThree(me.id);
  setUser(me);
};

The error occurs in setUser(me); because the type of argument me is not compatible with the type of setUser func's argument.

A) The type of argument me

type AppUserQueryResponse['me']

// src/__generated__/AppUserQuery.graphql.ts

export type AppUserQueryResponse = {
    readonly me: {
        readonly id: string;
        readonly email: string | null;
        readonly verified: boolean | null;
        readonly profile: {
            readonly authType: AuthType;
        } | null;
    };
};

-> type AuthType

// src/__generated__/AppUserQuery.graphql.ts

export type AuthType = "apple" | "email" | "facebook" | "google" | "%future added value";

B) the type of setUser func's argument

type User

// src/providers/AuthProvider.tsx

const setUser = (dispatch: React.Dispatch<SetUserAction>) => (
  authUser: User,
): void => {
  if (!authUser) Relay.init();
  dispatch({
    type: ActionType.SetUser,
    payload: { user: authUser, relay: Relay.environment },
  });
};

// src/types/graphql.ts

export type User = {
  __typename?: 'User';
  id: Scalars['String'];
  email?: Maybe<Scalars['String']>;
  name?: Maybe<Scalars['String']>;
  nickname?: Maybe<Scalars['String']>;
  thumbURL?: Maybe<Scalars['String']>;
  photoURL?: Maybe<Scalars['String']>;
  birthDay?: Maybe<Scalars['DateTime']>;
  gender?: Maybe<Scalars['Gender']>;
  phone?: Maybe<Scalars['String']>;
  statusMessage?: Maybe<Scalars['String']>;
  verified?: Maybe<Scalars['Boolean']>;
  lastSignedIn?: Maybe<Scalars['DateTime']>;
  isOnline?: Maybe<Scalars['Boolean']>;
  createdAt?: Maybe<Scalars['DateTime']>;
  updatedAt?: Maybe<Scalars['DateTime']>;
  deletedAt?: Maybe<Scalars['DateTime']>;
  profile?: Maybe<Profile>;
  notifications?: Maybe<Array<Notification>>;
};

-> type AuthType

// src/types/graphql.ts

export enum AuthType {
  email = 'email',
  facebook = 'facebook',
  google = 'google',
  apple = 'apple'
}

As you can see A) AuthType in src/__generated__/AppUserQuery.graphql.ts is union type, but B) AuthType in src/types/graphql.ts is enum type, which makes an error since union type is not compatible with enum type.

As we know the problem, we could simply check there is no error occurred if we change AuthType's type from union to enum.

// src/__generated__/AppUserQuery.graphql.ts

// export type AuthType = "apple" | "email" | "facebook" | "google" | "%future added value";
export enum AuthType {
    email = 'email',
    facebook = 'facebook',
    google = 'google',
    apple = 'apple'
  }

$ yarn tsc
yarn run v1.22.4
$ tsc
✨  Done in 5.65s.

Unfortunately, AppUserQuery.graphql.ts is generated by relay-compiler library, which means we should not change it manually.
And it seems that this default behavior, changing enum to union type, is no problem to the community and its users according to some issues.

relay-tools/relay-compiler-language-typescript#81
relay-tools/relay-compiler-language-typescript#164

And we can't change AuthType enum type in src/types/graphql.ts to union type either. Because AuthType enum is also generated by graphql-codegen library, and also it is widely used in the clilent side code like below and it seems irreplaceable.

// src/components/screen/Settings.tsx

  switch (user?.profile?.authType) {
    case AuthType.google:
      signInInfoOption = {
      ...

// src/components/screen/SignIn.tsx

<SocialSignInButton
  clientId={facebookAppId}
  clientSecret={facebookSecret}
  svgIcon={<SvgFacebook width={18} height={18} fill={theme.facebookIcon}/>}
  onUserCreated={(user?: User): void => {
    if (user) setUser(user);
  }}
  socialProvider={AuthType.facebook}
/>

...

So, in my opinion, we should deal with union Type AuthType in src/__generated__/AppUserQuery.graphql.ts to fix the compatibility issue.

Possible workarounds

1. Change union type AuthType to enum Type in src/__generated__/AppUserQuery.graphql.ts by a compiler or something else.

To be honest, I don't know how to do this.
And I'm not sure whether this change makes no side effect.

2. Current makeshift

Add // @ts-ignore ==> TODO

Related Issues

#147

• Rename [Chat] => [Message], [Message] => [Channel]
• Design interface models
  * User, Profile, Chatroom, Chat

Requirements

• Add friend from [SearchUser] screen.
  
  • Show message under online that friend has been added.
• Add friend in [Friend] screen.
  
• Delete friend from [Friend] screen when clicking Delete in [ProfileModal] shared component.
  
• Use immer
• Test code should be provided

Specify project
Document issue.

Describe the issue
Below CONTRIBUTING GUILDEGUIDE link was broken.

I'm not sure if it's ok to get rid of this.

This issue is server related issue.

On server side, the templates for password reset and email verification use table tag for usually design purpose.
I think using table tag for design purpose should be avoided. Is there an reason to do that?

• Follow the read
• Implement feature in your own dev env (creating your own google dev account). Only erase google secret before PRing.
• Write minimal test code (don't need to be perfect).
• Write readme on how to manage google secrets in config.ts.
• Write necessary variables in config.sample.ts.
• Write a blog (extra $10) in one of medium dooboolab or medium react-native-seoul if you prefer Korean.

Describe the bug
Error happened when run simulator

undefined is not an object (evaluating 'locale.replace')

To Reproduce

1. $ expo start
2. Run on iOS simulator in expo console
3. remove expo app and rerun, same error happen

Expected behavior

• error happened on iPhone 11 Pro Max Simulator
• worked well on iPhone X Simulator but when I modified some code of SearchUser.tsx, same error happened again
• executed simulator menu Hardware -> Erase All Content And Settings, but same error happened

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 11 Pro Max, iPhone X
• OS: iOS 13.1
• Expo 3.3.0

Additional context
Am I only one who got this error??

Specify project
Client

Is your feature request related to a problem? Please describe.
The client/types/graphql.ts contains a lot of any types right now.
https://github.com/dooboolab/hackatalk/blob/41d3cf72eab0a8b40fdcd9d4058fd6e316f8c0a0/client/src/types/graphql.ts#L4-L25

This is because GraphQL does not provide any information about custom scalar types (hence the any type here).
Clients are expected to just know what to expect from those scalar types. For example, Date scalar is an ISO formatted string. The problem is, even if we know how to handle custom types, it is difficult to automatically convert GraphQL response to something we can work with.

Describe the solution you'd like

1. The generated type for custom scalars should be unknown instead of any.
2. There needs to be a way to convert GraphQL Date scalar to js Date.

Describe alternatives you've considered
It seems like relay compiler allows user extensions: docs

Additional context

• Here's an issue from relay repo: facebook/relay#91
• Prisma client supports DateTime and JSON scalar: docs

Specify project
Is this Client issue or Server side issue?
This is a server-side issue.

Is your feature request related to a problem? Please describe.
"From" address of the outbound SendGrid message is hard-coded here:
https://github.com/dooboolab/hackatalk/blob/5d3b4e6ff29d692694fc71284c6f3a32bae61975/server/src/types/resolvers/User/mutation.ts#L282

Describe the solution you'd like
It would be nice to allow developers to use their own SendGrid API key. Currently, there is no way to send a verification email when testing locally without a SendGrid sender identity with "hackatalk.dev" domain. Attempt to use any other domain for a sender identity would result in 403 Forbidden status.

Describe alternatives you've considered
An easy way to setup local testing environment is desirable, but I think it is not okay to share an API key of "hackatalk.dev" domain publicly, as it has potential to be abused.

My best proposal is to add SENDGRID_EMAIL or SENDGRID_DOMAIN environment variable, so that emails can be sent from noreply@<SENDGRID_DOMAIN>. Developers would need to buy a domain & sign up for SendGrid themselves if we choose to do it this way.

I'm open to discuss alternatives here because I don't think my proposal is any better than the current state of the project.

Remove shared/TextInput and replace it with @dooboo-ui's EditText.

Specify project

• server side issue

Is your feature request related to a problem? Please describe.

• In hackatalk project, npm bcrypt-nodejs is being used. npm bcrypt-nodejs says as following

bcrypt-nodejs is no longer actively maintained. Please use bcrypt or bcryptjs. See https://github.com/kelektiv/node.bcrypt.js/wiki/bcrypt-vs-brypt.js to learn more about these two options

So i suggest to replace bcrypt-nodejs with bcryptjs bcrypt

Describe the solution you'd like
write codes in below sequence, so make sure changes does not affect products.

1. write test codes for function encryptCredential and validateCredential in server/src/utils/auth.ts
2. replace bcrypt-nodejs with bcryptjs bcrypt

Describe alternatives you've considered
use alternative npm

Below is an example

[SettingAccount]

[ChangePasswordCurrent]

[ChangePasswordNew]

• Migrate [SignUp] screen to react-hook-form.

Specify project
Client

Describe the bug
Client is not fetching friend list inside ChannelCreate component.
Only fake friends are present.

To Reproduce

1. Sign in.
2. Press CHANNEL tab.
3. Press "+" FAB.

Expected behavior
"Real" friends should be displayed inside ChannelCreate component.

Additional context
Fake friend list is defined here:
https://github.com/dooboolab/hackatalk/blob/32c98a64a8d9b9be892d36f1b8bfde26bed95555/client/src/components/screen/ChannelCreate.tsx#L25-L114
Which is used in component state:
https://github.com/dooboolab/hackatalk/blob/32c98a64a8d9b9be892d36f1b8bfde26bed95555/client/src/components/screen/ChannelCreate.tsx#L143
Friend list should be fetched from server via graphql query.

Our new design has rises today 🎉 .

Check out the link and see how you can improve our current status.

Some test codes are not matured yet.

[Gifted] Dev who contributes to improving test code will be rewarded in our open meetup!

Hi! It's my first issue.

In this [Chat] screen,
I wanna float [ProfileModal] (below) if I click 'ios-person' icon.

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Recognize the system dark mode setting and automatically activate the dark mode.

Describe alternatives you've considered
A method has been added to automatically recognize dark mode (from version 35 of the Expo). I am going to apply dark mode automatic recognition using the API.

Additional context
https://docs.expo.io/versions/latest/sdk/appearance/
https://github.com/expo/react-native-appearance

Describe the bug
Small ui bug. Send button in [Chat] screen isn't beautiful.

Screenshots

Smartphone (please complete the following information):

• Device: iphoneX
• OS: [e.g. iOS13]

Describe the bug
Button was taking up all space through vertical way
the red color is a background color of Button's root component

see its height is 762. which is much bigger than button itself(blue color)

To Reproduce

// at root component of Button.tsx
const StyledContainer = styled.View`
  flex: 1;
  background: red; // this is what I added
`;

put button on empty screen
and set backgroundColor as red
then you can see it takes up all the space in vertical way

Expected behavior
it should only show the button color(blue).
and not takes up all the space where the red colors are at

With a ui provided in #11, build email TextInput and send Button.

[Server]

• CRUD on private messages
  • aes-192-crc encryption as described in hackatalk website
• Inviting / removing user to Channel (for public)
  • Follow membership section on our doc.
• Create service layer for maintenance
• Testing features and improving test coverage
• Testing without database?
  • apollo-server-testing
  • nexus-testing
• Bug fixes

[Client]

• Create Channel with / without message.
• Add expo push notification token after sign in and remove it after sign out.
  
  • Use above queries in client.
• Integrate add / delete friends
• Add messaging
• UI bug fixes
  • A lot to go with it.
• Shared component enhancement
  • I would prefer working on GiftedChat.
    

Use ImagePicker.

• Should open the camera when [camera] image in [Chat] screen is pressed.

  • Should grab the captured camera. (check by the console)

• Should open gallery when [image] image in [Chat] screen is pressed.

  • Should grab the selected image. (check by the console)

• Should open the camera or gallery when pressing profile icon in [ProfileUpdate]
  

• Write the test code as described above.

• Write a blog (extra $10) in one of medium dooboolab or medium react-native-seoul if you prefer Korean.

We'd like to implement our reusable components in @dooboo-ui/native. However we are using our [Button] component seperately.

Would like to remove it and use [Button] in @dooboo-ui/native.

Describe the bug
I am adding some features in this application. I need to sign in to check my function is correctly worked. But, when I tried to sign up with an email address, then verification is failed with seems like a technical issue.

Cannot GET /verify_email/[email protected]/$2a$10$rqSSK7iq4Lii6ZtLDObnz.x7b7s/xpBfEhAlIj0ojEwHwcfYWxZ5C

To Reproduce
Steps to reproduce the behavior:

1. Sign up with email and try to verify your email address.

• OS: macOS catalina(10.15.3) with verification email
• Browser : Chrome

Smartphone (please complete the following information):

• Device: iPhone 11 simulator
• OS: iOS 13.4.1

Additional context

react-native info