UI: Join chat by entering PIN

[muke1908]

Create this section below the link generation section in the index page

• [ ] Provide an input box to enter PIN.
• [ ] Should be Join button next to the input box.
• [ ] On pressing join button it should call API.
• [ ] If PIN is valid, redirect to the link else, show error.

[aayushmau5]

Hey @muke1908, may i work on this one ?

[muke1908]

@aayushmau5 Sure!

[aayushmau5]

hey @muke1908, is there any component for input field, or should i make one myself? Also this Input and join button should be on the captcha page and Not in generated link page, right ?

[muke1908]

is there any component for input field, or should i make one myself?

No, we don't have a re-usable component.

Also this Input and join button should be on the captcha page and Not in generated link page, right ? captcha page and Not in generated link page

Yes, it should be there before link is generated as you said captcha page. (However, captcha is removed)

[aayushmau5]

Also, Progress so far. Lemme know if you need any change. Though it is a WIP.

BTW calling the API and handling error should be done in generateLink function, right ?

[muke1908]

Hi @aayushmau5, I am sorry I haven't attached any design earlier. Here is the suggested design, let's keep it simple and clean.

[muke1908]

Hey @muke1908, so we removed the captcha and now we are adding a PIN system. I have made an input component but the value of the text field is in its own component, any idea how i can "export" the value of the text field to the index.js file. I'm sorry but i'm kinda learning react, so forgive me if it sounds like a stupid question.

Hi, no problem! You can push your code to a branch and create a draft PR. Then I would be able to help you there.

[aayushmau5]

Hi, no problem! You can push your code to a branch and create a draft PR. Then I would be able to help you there.

I'm using props to pass down the PIN. So it's all good. Also thanks for the design image.

[aayushmau5]

@muke1908 How's this ?

[aayushmau5]

So i made the input as well as button as a whole component. Now, is the API ready? We can then hook it up with the button.

[muke1908]

@aayushmau5 the api is not ready. But you can write the service in client assuming the endpoint is GET - /chat-link/<pin>. for more look ref issue

[aayushmau5]

Help me understand the routes. So i made this service. So what's happening here ? What's the route looks like to the server ?

import makeRequest from '../utils/makeRequest';

const getLink = async (pin) => {
  return makeRequest(`/chat-link/${pin}`, {
    method: 'GET'
  });
};

export default getLink;

Is /chat-link/ equivalent to / ?

[muke1908]

@aayushmau5 In your code, you are making an api call to server - GET request. The endpoint looks like /api/chat-link/<pin> As /api is common for all endpoint, we prepend it at makeRequest function.

In server, we are handling all requests at /api/* check app.js

Chat link specific controllers are in backend/api/index.js

[aayushmau5]

Yup, i figured so. Here's the GET request handler i made.

router.get(
  '/:pin',
  asyncHandler(async (req, res) => {
    const { pin } = req.params;
    await findOneFromDB({ pin: pin }, LINK_COLLECTION);
    return res.send(pin);
  })
);

I don't know what's LINK_COLLECTION doing but it's working. Tested by responding pin. Now, what should i do next ?

[muke1908]

LINK_COLLECTION is the collection name, defined at const.js

Wondering how did you configure your mongo db?

[aayushmau5]

I'm using my own mongoDB instance. I had been working on some personal projects which required mongoDB so i made a mongoDB atlas database and used that.

[aayushmau5]

Now, what should i do next? I feel the API is kinda ready, we need to get the chat link based on the PIN and redirect the user to that link. I'm wondering how to get the chat link?

[muke1908]

const resp = await findOneFromDB({ pin: pin }, LINK_COLLECTION);`
return res.send(resp);

resp will have the link.

[aayushmau5]

Ok. so i was able to get the link. Now, how do i redirect to the link in react ? Sorry, still learning.

[muke1908]

@aayushmau5 You can use hook to get history. import { useHistory } from "react-router-dom";

Inside component,

const history = useHistory();
history.push(`<link>`)

Doc: https://reactrouter.com/web/api/Hooks

[muke1908]

@aayushmau5 https://github.com/muke1908/chat-e2ee/issues/159 is closed now, you might get some conflicts as you also wrote the same controller. https://github.com/muke1908/chat-e2ee/pull/166/files

[aayushmau5]

Pretty cool. Hey, i'm getting a commit error. Something to do with Husky

husky > commit-msg (node v14.10.0)
⧗   input: "Add Join Chat By PIN Functionality"
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings

What to do ?

[muke1908]

@aayushmau5 valid commit message would be something like: feat: Add Join Chat By PIN Functionality

Doc https://github.com/conventional-changelog/commitlint/#what-is-commitlint

[aayushmau5]

I'm pretty sure it is working. Should i make a PR to the master branch ?

[muke1908]

@aayushmau5 sure!

[aayushmau5]

@muke1908 Please check. https://github.com/muke1908/chat-e2ee/pull/167

[muke1908]

@aayushmau5 left a few comments.