Skip to content

Commit

Permalink
threads fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@dendidibe
dendidibe committed Aug 9, 2023
1 parent bb8e0b6 commit b0d494f
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 53 deletions.
24 changes: 14 additions & 10 deletions client-web/src/components/AppTopNav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";

import Container from "@mui/material/Container";

import { Link, useHistory, useLocation } from "react-router-dom";

import ExploreIcon from "@mui/icons-material/Explore";
import GroupIcon from "@mui/icons-material/Group";
import StarRateIcon from "@mui/icons-material/StarRate";
import {
getApps,
getBalance,
getMyAcl,
httpWithAuth,
Expand All @@ -21,18 +18,17 @@ import {
import xmpp from "../xmpp";
import { TActiveRoomFilter, useStoreState } from "../store";

import { Badge, Divider } from "@mui/material";
import { Badge } from "@mui/material";
import {
coinsMainName,
defaultMetaRoom,
ROOMS_FILTERS,
} from "../config/config";
import { Menu } from "./Menu";
import { ethers } from "ethers";
import { DOMAIN } from "../constants";
import { getFirebaseMesagingToken } from "../services/firebaseMessaging";
import { walletToUsername } from "../utils/walletManipulation";
import { firebase } from "../services/firebase";
import defUserImage from "../assets/images/def-ava.png";

const coinImg = "/coin.png";
function firstLetersFromName(fN: string, lN: string) {
Expand Down Expand Up @@ -274,14 +270,22 @@ const AppTopNav = () => {
alignItems: "center",
paddingX: "5px",
borderRadius: "5px",
// paddingTop: 1
}}
>
<img
alt=""
style={{ width: "20px", height: "20px" }}
src={coinImg}
style={{ width: 30, height: 30, borderRadius: "100%" }}
src={user.profileImage || defUserImage}
/>
{mainCoinBalance?.balance}
<Box sx={{display: 'flex', alignItems: 'center'}}>
<img
alt=""
style={{ width: 16, height: 16, borderRadius: "100%" }}
src={coinImg}
/>
{mainCoinBalance?.balance}
</Box>
</Box>
</Link>
)}
Expand Down
56 changes: 32 additions & 24 deletions client-web/src/components/Chat/Messages/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export const Message: React.FC<IMessage> = ({
const isSameUser = userJid === messageJid;
const history = useHistory();
const [buttons, setButtons] = useState<IButtons[]>();
const [messageHovered, setMessageHovered] = useState(false);

const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const openMenu = Boolean(anchorEl);
Expand All @@ -97,6 +98,12 @@ export const Message: React.FC<IMessage> = ({
openDialogMenu();
};

const onMouseEnter = () => {
setMessageHovered(true);
};
const onMouseLeave = () => {
setMessageHovered(false);
};
const openFileInNewTab = (link: string) => {
window.open(link, "_blank");
};
Expand Down Expand Up @@ -527,33 +534,34 @@ export const Message: React.FC<IMessage> = ({
</Box>
</Box>
</KitMessage.CustomContent>

{/*{(position.type === "last" || position.type === "single") && (*/}
{/* <KitMessage.Footer*/}
{/* sentTime={*/}
{/* differenceInHours(new Date(), new Date(message.date)) > 5*/}
{/* ? format(new Date(message.date), "h:mm a")*/}
{/* : formatDistance(*/}
{/* subDays(new Date(message.date), 0),*/}
{/* new Date(),*/}
{/* {*/}
{/* addSuffix: true,*/}
{/* }*/}
{/* )*/}
{/* }*/}
{/* />*/}
{/*)}*/}
<KitMessage.Footer>
<KitMessage.Footer style={{ marginLeft: 0 }}>
{message.numberOfReplies > 0 &&
messageDirection === "incoming" &&
!isThread && (
<Button onClick={() => openThreadView()} variant="text">
<Typography fontSize={"12px"} textTransform={"none"}>
{message.numberOfReplies}{" "}
{message.numberOfReplies === 1 ? "Reply" : "Replies"} (tap to
review)
</Typography>
</Button>
<Box
onClick={openThreadView}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
sx={{
px: 0,
width: 140,
color: (theme) => theme.palette.primary.main,
cursor: "pointer",
mb: 1
}}
>
{messageHovered ? (
<Typography fontSize={"12px"} textTransform={"none"}>
View thread
</Typography>
) : (
<Typography fontSize={"12px"} textTransform={"none"}>
{message.numberOfReplies}{" "}
{message.numberOfReplies === 1 ? "Reply" : "Replies"} (tap
to review)
</Typography>
)}
</Box>
)}
</KitMessage.Footer>
</KitMessage>
Expand Down
11 changes: 7 additions & 4 deletions client-web/src/components/Chat/Threads/ThreadContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
MessageList,
TypingIndicator,
} from "@chatscope/chat-ui-kit-react";
import { Box, Checkbox, Divider, IconButton, Typography } from "@mui/material";
import { Box, Checkbox, Divider, IconButton, Typography, useTheme } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { Message } from "../Messages/Message";
import { TMessageHistory, TUserChatRooms, useStoreState } from "../../../store";
Expand Down Expand Up @@ -66,7 +66,7 @@ const ThreadContainer: React.FC<ThreadContainerProps> = ({
const messages = useStoreState((state) => state.historyMessages);

const { roomJID } = useParams<{ roomJID: string }>();

const theme = useTheme()
const threadWindowMessages = messages.filter(
(item: TMessageHistory) =>
item.roomJID.includes(roomJID) &&
Expand Down Expand Up @@ -134,7 +134,7 @@ const ThreadContainer: React.FC<ThreadContainerProps> = ({
return (
<ChatContainer
style={{
borderLeftWidth: "2px",
borderLeft: '1px solid #d1dbe3' ,
}}
>
{!!roomData && (
Expand Down Expand Up @@ -180,7 +180,10 @@ const ThreadContainer: React.FC<ThreadContainerProps> = ({
</div>
</span>
</Box>
<Divider>{currentThreadViewMessage.numberOfReplies}</Divider>
<Divider>
{currentThreadViewMessage.numberOfReplies}{" "}
{currentThreadViewMessage.numberOfReplies > 1 ? "replies" : "reply"}{" "}
</Divider>
</div>
)}

Expand Down
30 changes: 15 additions & 15 deletions client-web/src/pages/ChatInRoom/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -797,21 +797,21 @@ export function ChatInRoom() {
)}
</ChatContainer>
{isThreadView && (
<ThreadContainer
chooseRoom={chooseRoom}
currentPickedRoom={currentPickedRoom}
currentRoom={currentRoom}
handleSetThreadView={handleSetThreadView}
handleShowInChannel={handleShowInChannel}
isThreadView={isThreadView}
onYReachStart={onYReachStart}
profile={profile}
roomData={roomData}
sendFile={sendFile}
showInChannel={showInChannel}
toggleMediaModal={toggleMediaModal}
toggleTransferDialog={toggleTransferDialog}
/>
<ThreadContainer
chooseRoom={chooseRoom}
currentPickedRoom={currentPickedRoom}
currentRoom={currentRoom}
handleSetThreadView={handleSetThreadView}
handleShowInChannel={handleShowInChannel}
isThreadView={isThreadView}
onYReachStart={onYReachStart}
profile={profile}
roomData={roomData}
sendFile={sendFile}
showInChannel={showInChannel}
toggleMediaModal={toggleMediaModal}
toggleTransferDialog={toggleTransferDialog}
/>
)}
</div>
</MainContainer>
Expand Down

0 comments on commit b0d494f

Please sign in to comment.