Fixed search bar styling, fixed uiweb package for searching and profi…

…le picture blockie, added group creation stream to get user to group chat
push-protocol · May 14, 2024 · 607220b · 607220b
1 parent 5076dcf
commit 607220b
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 185 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
  "@mui/material": "^5.5.0",
  "@pushprotocol/restapi": "1.7.15",
  "@pushprotocol/socket": "0.5.3",
- "@pushprotocol/uiweb": "1.3.1",
+ "@pushprotocol/uiweb": "1.5.1-alpha.2",
  "@reduxjs/toolkit": "^1.7.1",
  "@testing-library/dom": "^9.0.1",
  "@testing-library/jest-dom": "^4.2.4",

diff --git a/src/App.tsx b/src/App.tsx
@@ -82,15 +82,15 @@ const extendConsole = () => {
  window.console = {};
  }
  if (window.console[level] === 'undefined' || !window.console[level] || window.console[level] === null) {
- window.console[level] = function () { };
+ window.console[level] = function () {};
  }
  if (enabled) {
  if (disabledConsoles[level]) {
  window.console[level] = disabledConsoles[level];
  }
  } else {
  disabledConsoles[level] = window.console[level];
- window.console[level] = function () { };
+ window.console[level] = function () {};
  }
  };
  } catch (e) {
@@ -377,7 +377,7 @@ const HeaderContainer = styled.header`
 const ParentContainer = styled.div`
  flex-wrap: wrap;
  position: relative;
- z-index:0;
+ z-index: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;

diff --git a/src/components/chat/w2wChat/searchBar/SearchBar.tsx b/src/components/chat/w2wChat/searchBar/SearchBar.tsx
@@ -15,6 +15,10 @@ import { Context } from 'modules/chat/ChatModule';
 import { AppContext } from 'types/chat';
 import ArrowLeft from '../../../../assets/chat/arrowleft.svg';
 
+interface InputProps {
+ typed: boolean;
+}
+
 const SearchBar = ({ autofilled, searchedUser, setSearchedUser }) => {
  // get theme
  const theme = useTheme();
@@ -109,20 +113,18 @@ const SearchBar = ({ autofilled, searchedUser, setSearchedUser }) => {
  type="text"
  onKeyUp={(e) => (e.key === 'Enter' ? submitSearch() : null)}
  value={searchedUser}
+ typed={!!searchedUser}
  onChange={onChangeSearchBox}
  placeholder="Search Web3 domain or 0x123..."
  />
  {searchedUser.length > 0 && (
- <ItemVV2
- position="absolute"
- alignItems="flex-end"
+ <CloseIconButton
  width="24px"
  height="24px"
- top="22px"
- right="34px"
+ onClick={clearInput}
  >
- <CloseIcon onClick={clearInput} />
- </ItemVV2>
+ <CloseIconStyled theme={theme} />
+ </CloseIconButton>
  )}
  <ItemVV2
  position="absolute"
@@ -140,11 +142,18 @@ const SearchBar = ({ autofilled, searchedUser, setSearchedUser }) => {
  spinnerColor={theme.default.secondaryColor}
  />
  )}
- {!isLoadingSearch && (
- <SearchIcon
- style={{ cursor: 'pointer' }}
- onClick={submitSearch}
- />
+ {!searchedUser && (
+ <ItemVV2
+ alignItems="center"
+ justifyContent="center"
+ background={theme.chat.snapFocusBg}
+ padding="4px"
+ >
+ <SearchIcon
+ style={{ cursor: 'pointer' }}
+ onClick={submitSearch}
+ />
+ </ItemVV2>
  )}
  </ItemVV2>
  </ItemVV2>
@@ -176,13 +185,13 @@ const SearchBar = ({ autofilled, searchedUser, setSearchedUser }) => {
  );
 };
 
-const Input = styled.input`
+const Input = styled.input<InputProps>`
  box-sizing: border-box;
  display: flex;
  flex: 1;
  width: 100%;
  height: 48px;
- padding: 13px 60px 13px 21px;
+ padding: ${(props) => (props.typed ? '13px 42px 13px 21px' : '13px 21px 13px 21px')};
  margin: 10px 0px 10px 0px;
  border-radius: 99px;
  border: 1px solid transparent !important;
@@ -211,3 +220,15 @@ const Input = styled.input`
 `;
 
 export default SearchBar;
+
+const CloseIconButton = styled(ButtonV2)`
+ position: absolute;
+ cursor: pointer;
+ background: transparent;
+ top: 22px;
+ right: 14px;
+`;
+
+const CloseIconStyled = styled(CloseIcon)`
+ color: ${(props) => props.theme.default.color || '#000'};
+`;
diff --git a/src/modules/chat/ChatModule.tsx b/src/modules/chat/ChatModule.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 // External Packages
-import * as PushAPI from '@pushprotocol/restapi';
+import { CONSTANTS } from '@pushprotocol/restapi';
 import ReactGA from 'react-ga';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
@@ -250,10 +250,12 @@ function Chat({ chatid }) {
 
  let navigate = useNavigate();
 
+ // For setting Push SDK
  useEffect(() => {
  if (userPushSDKInstance?.readmode()) showModal();
  }, [userPushSDKInstance]);
 
+ // For setting selected chat id
  useEffect(() => {
  let formattedchatId = selectedChatId || chatid;
 
@@ -265,6 +267,19 @@ function Chat({ chatid }) {
  }
  }, [selectedChatId]);
 
+ // Handle group creation stream
+ if (userPushSDKInstance && !userPushSDKInstance.readmode() && userPushSDKInstance.stream) {
+ userPushSDKInstance.stream?.on(CONSTANTS.STREAM.CHAT_OPS, (chatops: any) => {
+ if (chatops.event === 'chat.group.create') {
+ // Change Tab to 0 aka Chats
+ setActiveTab(0);
+
+ // Set selected chat id to the group created
+ setSelectedChatId(chatops.chatId);
+ }
+ });
+ }
+
  return (
  <Container>
  <ItemHV2
@@ -406,23 +421,26 @@ const Container = styled.div`
  flex: initial;
  justify-content: center;
  position: relative;
- // overflow: hidden;
+ overflow: hidden;
  box-sizing: border-box;
 
  margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP};
- height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.DESKTOP.TOP} - ${globalsMargin.MINI_MODULES.DESKTOP.BOTTOM
- });
+ height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.DESKTOP.TOP} - ${
+ globalsMargin.MINI_MODULES.DESKTOP.BOTTOM
+});
  
  @media ${device.laptop} {
  margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET};
- height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.TABLET.TOP} - ${globalsMargin.MINI_MODULES.TABLET.BOTTOM
- });
+ height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.TABLET.TOP} - ${
+ globalsMargin.MINI_MODULES.TABLET.BOTTOM
+});
  }
 
  @media ${device.mobileL} {
  margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE};
- height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.MOBILE.TOP} - ${globalsMargin.MINI_MODULES.MOBILE.BOTTOM
- });
+ height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.MOBILE.TOP} - ${
+ globalsMargin.MINI_MODULES.MOBILE.BOTTOM
+});
  border: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};
 `;
 

diff --git a/src/sections/chat/ChatSidebarSection.tsx b/src/sections/chat/ChatSidebarSection.tsx
@@ -11,7 +11,7 @@ import { useClickAway } from 'react-use';
 import styled, { useTheme } from 'styled-components';
 
 // Internal Compoonents
-import { ChatPreviewList, UserProfile } from '@pushprotocol/uiweb';
+import { ChatPreviewList, ChatPreviewSearchList, UserProfile } from '@pushprotocol/uiweb';
 import BlankChat from 'assets/chat/BlankChat.svg?react';
 import CreateGroupIcon from 'assets/chat/group-chat/creategroup.svg?react';
 import CreateGroupFillIcon from 'assets/chat/group-chat/creategroupfill.svg?react';
@@ -228,34 +228,36 @@ const ChatSidebarSection = ({ showCreateGroupModal, setSelectedChatId }) => {
  setSearchedUser={setSearchedUser}
  />
 
- <CreateGroupContainer
- // justifyContent="flex-start"
- flex="none"
- padding="20px 10px 24px 10px"
- zIndex="1"
- borderRadius={GLOBALS.ADJUSTMENTS.RADIUS.MID}
- onClick={() => {
- showCreateGroupModal();
- }}
- background="transparent"
- hover={theme.chat.snapFocusBg}
- hoverBackground="transparent"
- onMouseEnter={() => StyleHelper.changeStyle(createGroupOnMouseEnter)}
- onMouseLeave={() => StyleHelper.changeStyle(createGroupOnMouseLeave)}
- >
- <CreateGroupIcon id="create-group-icon" />
- <CreateGroupFillIcon id="create-group-fill-icon" />
- <SpanV2
- margin="0 8px"
- fontSize="16px"
- fontWeight="500"
- letterSpacing="-0.019em"
- color={theme.default.secondaryColor}
+ {!searchedUser && (
+ <CreateGroupContainer
+ // justifyContent="flex-start"
+ flex="none"
+ padding="20px 10px 24px 10px"
+ zIndex="1"
+ borderRadius={GLOBALS.ADJUSTMENTS.RADIUS.MID}
+ onClick={() => {
+ showCreateGroupModal();
+ }}
+ background="transparent"
+ hover={theme.chat.snapFocusBg}
+ hoverBackground="transparent"
+ onMouseEnter={() => StyleHelper.changeStyle(createGroupOnMouseEnter)}
+ onMouseLeave={() => StyleHelper.changeStyle(createGroupOnMouseLeave)}
  >
- Create Group
- </SpanV2>
- {isNewTagVisible && <NewTag />}
- </CreateGroupContainer>
+ <CreateGroupIcon id="create-group-icon" />
+ <CreateGroupFillIcon id="create-group-fill-icon" />
+ <SpanV2
+ margin="0 8px"
+ fontSize="16px"
+ fontWeight="500"
+ letterSpacing="-0.019em"
+ color={theme.default.secondaryColor}
+ >
+ Create Group
+ </SpanV2>
+ {isNewTagVisible && <NewTag />}
+ </CreateGroupContainer>
+ )}
  </>
  )}
  </ItemVV2>
@@ -272,10 +274,10 @@ const ChatSidebarSection = ({ showCreateGroupModal, setSelectedChatId }) => {
  height="100%"
  flex="1 1 1px"
  style={{ display: activeTab == 0 ? 'flex' : 'none' }}
- overflow="scroll"
+ overflow="hidden auto"
  justifyContent="center"
  >
- {/* Only show recommended chats if there are no chats */}
+ {/* Only show convo prompt if there are no chats */}
  {primaryChatLoading.showConvoPrompt && (
  <ItemVV2
  flex="initial"
@@ -330,7 +332,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, setSelectedChatId }) => {
  justifyContent="flex-start"
  style={{ display: primaryChatLoading.showConvoPrompt ? 'none' : 'flex' }}
  height="100%"
- overflow="scroll"
+ overflow="hidden auto"
  >
  <ChatPreviewList
  key={primaryChatLoading.chatRenderKey}
@@ -366,6 +368,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, setSelectedChatId }) => {
  flexWrap="nowrap"
  width="100%"
  height="100%"
+ overflow="hidden auto"
  style={{ display: activeTab == 1 ? 'flex' : 'none' }}
  >
  <ChatPreviewList
@@ -394,10 +397,10 @@ const ChatSidebarSection = ({ showCreateGroupModal, setSelectedChatId }) => {
  justifyContent="flex-start"
  flexWrap="nowrap"
  width="100%"
- style={{ display: activeTab == 3 || activeTab == 4 ? 'flex' : 'none' }}
+ overflow="hidden auto"
+ style={{ display: activeTab == 3 ? 'flex' : 'none' }}
  >
- <ChatPreviewList
- listType="SEARCH"
+ <ChatPreviewSearchList
  searchParamter={searchedUser || ''}
  onChatSelected={(chatid) => setSelectedChatId(chatid)}
  />