🐛 [BUG] - Chat badge getting updated for active/opened conversation>

[corlard3y]

#1320

Changes proposed

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Note to reviewers

[github-actions]

In the file packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx:

1. In the first ChatPreview component, the closing curly brace is missing after the messageContent value.
2. In the second ChatPreview component, there are multiple syntax errors:
   • The chatParticipant value is missing the closing parenthesis.
   • The chatMsg object is missing the messageType field.
   • There are some random strings at the end that seem out of place.

In the file packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx:

1. The Account styled component is missing the closing curly brace.
2. The Dated styled component is missing the closing curly brace.
3. In the ChatPreview component, the formattedAddress is not being used in the getProfileName function. It should return formattedAddress instead of options.chatPreviewPayload?.chatGroup.
4. There are some missing imports, like Badge and Message, which are being used in the component but not imported.
5. The blockieContainerRef is being used before being defined with useRef.

In the file packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx:

1. There are multiple syntax errors in the useEffect hooks:
   • Missing closing brace for the if condition after setting the updatedChatInfo list to 'CHATS'.
   • In the cleanup function of the first useEffect hook, there is a missing closing brace.
   • In the second useEffect hook, the if condition is not closed properly after setting updatedChatInfo list to 'UNINITIALIZED'.
   • If conditions in the last two useEffect hooks are not closed properly.
   • The transformSteamMessage function is missing a closing brace.

Overall, the code needs significant corrections and restructuring. Please make the necessary adjustments.

[github-actions]

In the packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx file, I found a couple of issues:

1. In the ChatPreview component, the chatParticipant property is missing a closing parentheses in the value assignment. It should be 'Web3 Domain Chat (e947857e4f7df13e20f7bfd5a8d256a7)' instead of 'Web3 Domain Chat (e947857e4f7df13e20f7bfd5a8d256a7'.

2. The chatMsg object has an incorrect structure. It should be enclosed in curly braces {} instead of square brackets [] like this:

   chatMsg: {
     messageContent: 'sure thing',
   }

3. There is a syntax error where the string 'Well, hello there, human! ...' is placed outside the chatMsg object. It needs to be inside the chatMsg object.

Apart from these issues, the code looks good.

In the packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx file, I didn't find any mistakes. The code logic looks fine.

In the packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx file, I noticed that the closing bracket for the useEffect hook is missing on line 54. It should be added after the return statement:

return () => {
  // add comment
};

In the packages/uiweb/src/lib/config/constants.ts file, I didn't find any errors. The code seems correct.

Therefore, the overall code in the specified files is good after addressing the mentioned issues.

All looks good.

[github-actions]

In ChatPreview.tsx in packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx:

1. There is a missing closing parenthesis for the chatParticipant property.
2. The chatMsg object is lacking a closing curly brace.
3. The file property under chatMsg object does not have a proper key-value format.

In ChatPreview.tsx in packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx:

1. The closing parentheses for the Account styled component is missing.
2. The if block inside the useEffect hook is missing the closing curly brace.
3. The ThemeProps interface is missing a closing curly brace.

In ChatViewList.tsx in packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx:

1. The useEffect hook containing the logic for chatAcceptStream does not have a closing curly brace.
2. The transformSteamMessage function has a misplaced conditional return.

In constants.ts in packages/uiweb/src/lib/config/constants.ts:

1. The SPAM object is missing a closing curly brace.

Please make the necessary adjustments in the respective files.

[github-actions]

In the first file ChatPreview.tsx:

1. In the first ChatPreview component, there is a missing closing parenthesis ) after setting the selected prop.
2. In the second ChatPreview component, there are several issues:
   • The chatParticipant value is missing a closing parenthesis.
   • The chatMsg object is not properly formatted.
   • The JSX tags are not properly closed.
   • The selected prop is not correctly set.

After fixing the above issues, the below code snippet should remain -

All looks good.

In the second file ChatPreview.tsx:

1. Missing import statements for Badge and Message components.
2. There is an issue with the CSS style in the ChatPreviewContainer component - the closing backtick is missing at the end of the ::before block style definition.
3. The closing backtick is missing in the Account component.

After fixing the above issues, the below code snippet should remain -

All looks good.

In the third file ChatViewList.tsx:

1. The useEffect hook under if (Object.keys(chatAcceptStream || {}).length > 0 && chatAcceptStream.constructor === Object) is not properly closed with a closing brace.
2. The () => { // add comment } function in the empty useEffect hook should be properly commented out.
3. The link between if (Object.keys(participantRemoveStream) and setting initialized.chatInfo.list is missing - it needs to be within the if block.
4. The if (Object.keys(chatStream || {}).length > 0 && chatStream.constructor === Object) block and the if (Object.keys(chatRequestStream || {}).length > 0 && chatRequestStream.constructor === Object) block are missing a closing brace.
5. The transformSteamMessage function has an extra if condition without a closing brace.

After fixing the above issues, the below code snippet should remain -

All looks good.

In the fourth file constants.ts:

1. The SPAM object within PushSubTabTitle is missing a closing brace } after the title key-value pair.
2. The FILE_ICON arrow function is not correctly formatted as it is missing a closing parenthesis ) at the end.
3. The ProfilePicture constant is missing a closing backtick at the end of the data URL.

After fixing the above issues, the below code snippet should remain -

All looks good.

[github-actions]

In the file packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx:

• Line 28: There is a missing closing parenthesis after 'sure thing'.
• The badge prop seems to be missing proper closing tags on line 35. It should be closed before selected={true}.

In the file packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx:

• Line 252: There is a missing closing parenthesis after {hasBadgeCount && !options?.selected before isBot &&.
• Line 350: The <FaFile /> component is placed outside of the JSX element and should be wrapped inside a JSX element.
• Line 116: There is a missing closing parenthesis at the end of the Account styled component.
• Line 185: There seems to be an unclosed style definition block. The closing curly bracket } is missing at the end.

In the file packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx:

• There are missing closing braces } at the end of the useEffect blocks on lines 178 and 192. They need to be added before return () =>.

In the file packages/uiweb/src/lib/config/constants.ts:

• Line 36: The object is missing a closing curly brace } at the end.
• Line 40: The object is missing a closing parenthesis ) at the end of the Spam object definition.

Please fix these issues as mentioned.

[github-actions]

In the file packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx:

1. Line 37: Missing closing parenthesis after 'sure thing'.
2. Line 39: Extra selected={true} that seems out of place.
3. Line 42: Incorrect structure for assigning messageContent on line 40.
4. Line 44: Incorrect closing </div>, should be placed before the last message content.

In the file packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx:

1. Line 43: Unnecessary if condition without a corresponding else.
2. Line 134: Unnecessary if condition within the return statement.
3. Line 116: options.readmode should likely be options.readMode based on the context.
4. Line 167: Inconsistent alignment and closing tag for FaFile and File.

In the file packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx:

1. Line 57: Missing closing brace for the return statement after the clearTimeout call.
2. Line 77: Missing opening brace for the if condition before setInitialized.
3. Line 87: Missing opening brace for the if condition before setInitialized.
4. Lines 103, 111, 119, 125: Inconsistent usage of curly braces for the arrow function body.

In the file packages/uiweb/src/lib/config/constants.ts:

1. Line 35: Missing closing brace for the if condition in the BLOCKNATIVE_PROJECT_ID definition.
2. Line 38: Incomplete object definition for PushSubTabTitle.SPAM.

Please make the necessary corrections as mentioned above.

[github-actions]

In the file packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx:

1. The closing bracket for options?.selected is missing, it should be added after selected={true}.
2. The </div> closing tag seems to be placed incorrectly. It should be placed after the closing bracket of the ChatPreview component.

In the file packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx:

1. There is a missing closing bracket after the return statement in the second useEffect. It should be placed before the return statement that includes a comment.
2. In the same file, the return statement inside the second useEffect seems to be missing a closing bracket, and it should be placed after the clearTimeout function.
3. There are missing curly braces in the second if statement where it checks the length of participantRemoveStream. The logic inside that if statement should be wrapped in curly braces.
4. There is a missing return statement before the initialized.chatInfo.list modification inside the if block of the third useEffect.
5. There is a missing return statement before the if block in the last if statement in the file.
6. The transformSteamMessage function is missing a closing curly brace at the end.

Overall, the code needs proper formatting and corrections in the brackets and closing tags.

In the file packages/uiweb/src/lib/config/constants.ts:

1. The SPAM object is missing a closing curly brace.

Please make the necessary corrections outlined above.