selenaaasi
/
trampa-frontend
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

Merge branch 'feature/595' of http://176.104.105.124:3000/selenaaasi/trampa-frontend

bugfix/600
jovan.cirkovic 3 anos atrás
pai
e7596dc852 c35f0a0d3d
commit
2e842c7dd3
10 arquivos alterados com 719 adições e 46 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. 19
    5
      src/components/DirectChat/DirectChat.js
  2. 36
    22
      src/components/DirectChat/DirectChatContent/DirectChatContent.js
  3. 98
    0
      src/components/DirectChat/DirectChatContent/SkeletonDirectChatContent/SkeletonDirectChatContent.js
  4. 220
    0
      src/components/DirectChat/DirectChatContent/SkeletonDirectChatContent/SkeletonDirectChatContent.styled.js
  5. 25
    15
      src/components/DirectChat/MiniChatColumn/MiniChatColumn.js
  6. 53
    0
      src/components/DirectChat/MiniChatColumn/SkeletonMiniChatColumn/SkeletonMiniChatColumn.js
  7. 59
    0
      src/components/DirectChat/MiniChatColumn/SkeletonMiniChatColumn/SkeletonMiniChatColumn.styled.js
  8. 57
    0
      src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.js
  9. 143
    0
      src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.styled.js
  10. 9
    4
      src/store/actions/chat/chatActionConstants.js

+ 19
- 5
src/components/DirectChat/DirectChat.js Ver arquivo

import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useLocation, useRouteMatch } from "react-router-dom"; import { useLocation, useRouteMatch } from "react-router-dom";
import { fetchOneChat, setOneChat } from "../../store/actions/chat/chatActions"; import { fetchOneChat, setOneChat } from "../../store/actions/chat/chatActions";
import {
selectSelectedChat,
} from "../../store/selectors/chatSelectors";
import { selectSelectedChat } from "../../store/selectors/chatSelectors";
import DirectChatContent from "./DirectChatContent/DirectChatContent"; import DirectChatContent from "./DirectChatContent/DirectChatContent";
import { selectOffer } from "../../store/selectors/offersSelectors"; import { selectOffer } from "../../store/selectors/offersSelectors";
import { fetchOneOffer } from "../../store/actions/offers/offersActions"; import { fetchOneOffer } from "../../store/actions/offers/offersActions";
import SkeletonDirectChat from "./SkeletonDirectChat/SkeletonDirectChat";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants";


const DirectChat = () => { const DirectChat = () => {
const chat = useSelector(selectSelectedChat); const chat = useSelector(selectSelectedChat);
const routeMatch = useRouteMatch(); const routeMatch = useRouteMatch();
const location = useLocation(); const location = useLocation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const isLoadingDirectChat = useSelector(
selectIsLoadingByActionType(CHAT_SCOPE)
);


const offerObject = useMemo(() => { const offerObject = useMemo(() => {
if (location?.state?.offerId) { if (location?.state?.offerId) {
}; };
return ( return (
<DirectChatContainer> <DirectChatContainer>
<DirectChatHeaderTitle />
<DirectChatHeader offer={offerObject} interlocutor={interlocutorObject} />
{isLoadingDirectChat || isLoadingDirectChat === undefined ? (
<SkeletonDirectChat />
) : (
<>
<DirectChatHeaderTitle />
<DirectChatHeader
offer={offerObject}
interlocutor={interlocutorObject}
/>
</>
)}

<DirectChatContent <DirectChatContent
chat={chatObject} chat={chatObject}
interlucator={interlocutorObject} interlucator={interlocutorObject}

+ 36
- 22
src/components/DirectChat/DirectChatContent/DirectChatContent.js Ver arquivo

import { selectUserId } from "../../../store/selectors/loginSelectors"; import { selectUserId } from "../../../store/selectors/loginSelectors";
import { selectMineProfilePicture } from "../../../store/selectors/profileSelectors"; import { selectMineProfilePicture } from "../../../store/selectors/profileSelectors";
import DirectChatNewMessage from "../DirectChatNewMessage/DirectChatNewMessage"; import DirectChatNewMessage from "../DirectChatNewMessage/DirectChatNewMessage";
import SkeletonDirectChatContent from "./SkeletonDirectChatContent/SkeletonDirectChatContent";
import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
import { CHAT_SCOPE } from "../../../store/actions/chat/chatActionConstants";


const DirectChatContent = (props) => { const DirectChatContent = (props) => {
const messages = props?.chat?.messages; const messages = props?.chat?.messages;
const myProfileImage = useSelector(selectMineProfilePicture); const myProfileImage = useSelector(selectMineProfilePicture);
const messagesRef = useRef(null); const messagesRef = useRef(null);
const interlucatorProfileImage = props?.interlucator?.image; const interlucatorProfileImage = props?.interlucator?.image;
const isLoadingChatContent = useSelector(
selectIsLoadingByActionType(CHAT_SCOPE)
);
const handleRefresh = () => { const handleRefresh = () => {
props.refreshChat(); props.refreshChat();
}; };
messagesRef.current?.scrollTo({ top: offsetBottom, behaviour: "smooth" }); messagesRef.current?.scrollTo({ top: offsetBottom, behaviour: "smooth" });
}, [messages]); }, [messages]);
return ( return (
<DirectChatContentContainer>
<DirectChatContentHeader interlucator={props?.interlucator} />
<MessagesList ref={messagesRef}>
{messages?.map((item) => {
const isMyMessage = userId === item.userId;
const image = isMyMessage ? myProfileImage : interlucatorProfileImage;
return (
<MessageContainer key={item?._id}>
<MessageCard
message={item}
image={image}
isMyMessage={isMyMessage}
/>
</MessageContainer>
);
})}
</MessagesList>
<DirectChatNewMessage
chatId={props?.chat?._id}
refreshChat={handleRefresh}
/>
</DirectChatContentContainer>
<>
{isLoadingChatContent || isLoadingChatContent === undefined ? (
<SkeletonDirectChatContent />
) : (
<DirectChatContentContainer>
<DirectChatContentHeader interlucator={props?.interlucator} />
<MessagesList ref={messagesRef}>
{messages?.map((item) => {
const isMyMessage = userId === item.userId;
const image = isMyMessage
? myProfileImage
: interlucatorProfileImage;
return (
<MessageContainer key={item?._id}>
<MessageCard
message={item}
image={image}
isMyMessage={isMyMessage}
/>
</MessageContainer>
);
})}
</MessagesList>
<DirectChatNewMessage
chatId={props?.chat?._id}
refreshChat={handleRefresh}
/>
</DirectChatContentContainer>
)}
</>
); );
}; };



+ 98
- 0
src/components/DirectChat/DirectChatContent/SkeletonDirectChatContent/SkeletonDirectChatContent.js Ver arquivo

import React from "react";
import {
SkeletonChatContentContainer,
SkeletonChatContentHeader,
SkeletonChatContentHeaderFirstColumn,
SkeletonChatContentHeaderFirstColumnFirstLine,
SkeletonChatContentHeaderFirstColumnImage,
SkeletonChatContentHeaderSecondColumnImageSmall,
SkeletonChatContentHeaderFirstColumnInfo,
SkeletonChatContentHeaderFirstColumnSecondLine,
SkeletonChatContentMain,
SkeletonChatContentMainRow,
SkeletonChatContentMainImage,
SkeletonChatContentMainLeftRowInfo,
SkeletonChatContentMainFirstRowInfoFirstLine,
SkeletonChatContentMainFirstRowInfoSecondLine,
SkeletonChatContentMainRightRowInfo,
SkeletonChatContentSecondRowFirstLine,
SkeletonChatContentSecondRowSecondLine,
SkeletonChatContentThirdRowFirstLine,
SkeletonChatContentThirdRowSecondLine,
SkeletonChatContentFourthRowFirstLine,
SkeletonChatContentFourthRowSecondLine,
SkeletonChatContentFifthRowFirstLine,
SkeletonChatContentFifthRowSecondLine,
SkeletonChatContentHorizontalLine,
SkeletonChatContentVerticalLine,
SkeletonChatContentFooter,
SkeletonChatContentFooterFirstColumn,
SkeletonChatContentFooterColumnInside,
SkeletonChatContentFooterSecondColumn,
} from "./SkeletonDirectChatContent.styled";

const SkeletonDirectChatContent = () => {
return (
<SkeletonChatContentContainer>
<SkeletonChatContentHeader>
<SkeletonChatContentHeaderFirstColumn>
<SkeletonChatContentHeaderFirstColumnImage />
<SkeletonChatContentHeaderFirstColumnInfo>
<SkeletonChatContentHeaderFirstColumnFirstLine />
<SkeletonChatContentHeaderFirstColumnSecondLine />
</SkeletonChatContentHeaderFirstColumnInfo>
</SkeletonChatContentHeaderFirstColumn>
<SkeletonChatContentHeaderSecondColumnImageSmall />
</SkeletonChatContentHeader>
<SkeletonChatContentMain>
<SkeletonChatContentMainRow>
<SkeletonChatContentMainImage />
<SkeletonChatContentMainLeftRowInfo>
<SkeletonChatContentMainFirstRowInfoFirstLine />
<SkeletonChatContentMainFirstRowInfoSecondLine />
</SkeletonChatContentMainLeftRowInfo>
</SkeletonChatContentMainRow>
<SkeletonChatContentMainRow>
<SkeletonChatContentMainRightRowInfo>
<SkeletonChatContentSecondRowFirstLine />
<SkeletonChatContentSecondRowSecondLine />
</SkeletonChatContentMainRightRowInfo>
<SkeletonChatContentMainImage />
</SkeletonChatContentMainRow>
<SkeletonChatContentMainRow>
<SkeletonChatContentMainImage />
<SkeletonChatContentMainLeftRowInfo>
<SkeletonChatContentThirdRowFirstLine />
<SkeletonChatContentThirdRowSecondLine />
</SkeletonChatContentMainLeftRowInfo>
</SkeletonChatContentMainRow>
<SkeletonChatContentMainRow>
<SkeletonChatContentMainRightRowInfo>
<SkeletonChatContentFourthRowFirstLine />
<SkeletonChatContentFourthRowSecondLine />
</SkeletonChatContentMainRightRowInfo>
<SkeletonChatContentMainImage />
</SkeletonChatContentMainRow>
<SkeletonChatContentMainRow>
<SkeletonChatContentMainImage />
<SkeletonChatContentMainLeftRowInfo>
<SkeletonChatContentFifthRowFirstLine />
<SkeletonChatContentFifthRowSecondLine />
</SkeletonChatContentMainLeftRowInfo>
</SkeletonChatContentMainRow>
<SkeletonChatContentHorizontalLine />
<SkeletonChatContentVerticalLine />
<SkeletonChatContentFooter>
<SkeletonChatContentFooterFirstColumn>
<SkeletonChatContentFooterColumnInside />
</SkeletonChatContentFooterFirstColumn>
<SkeletonChatContentFooterSecondColumn>
<SkeletonChatContentFooterColumnInside />
</SkeletonChatContentFooterSecondColumn>
</SkeletonChatContentFooter>
</SkeletonChatContentMain>
</SkeletonChatContentContainer>
);
};

export default SkeletonDirectChatContent;

+ 220
- 0
src/components/DirectChat/DirectChatContent/SkeletonDirectChatContent/SkeletonDirectChatContent.styled.js Ver arquivo

import styled from "styled-components";
import { Box } from "@mui/system";
import selectedTheme from "../../../../themes";

export const SkeletonChatContentContainer = styled(Box)`
display: flex;
flex-direction: column;
margin-top: 19px;
`;

export const SkeletonChatContentHeader = styled(Box)`
display: flex;
padding: 17px 35px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
justify-content: space-between;
align-items: center;
`;

export const SkeletonChatContentHeaderFirstColumn = styled(Box)`
display: flex;
`;

export const SkeletonChatContentHeaderFirstColumnImage = styled(Box)`
width: 54px;
height: 54px;
border-radius: 100%;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentHeaderFirstColumnInfo = styled(Box)`
display: flex;
flex-direction: column;
margin-left: 18px;
`;

export const SkeletonChatContentHeaderFirstColumnFirstLine = styled(Box)`
width: 124px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 15px;
`;

export const SkeletonChatContentHeaderFirstColumnSecondLine = styled(Box)`
width: 72px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentHeaderSecondColumnImageSmall = styled(Box)`
width: 40px;
height: 40px;
border-radius: 100%;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentMain = styled(Box)`
padding: 27px 36px 18px 36px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentMainRow = styled(Box)`
display: flex;
clear: both;

&:nth-child(even) {
float: right;
}
`;

export const SkeletonChatContentMainImage = styled(Box)`
width: 54px;
height: 54px;
border-radius: 100%;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
`;

export const SkeletonChatContentMainLeftRowInfo = styled(Box)`
display: flex;
flex-direction: column;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
padding: 9px;
align-items: flex-end;
margin-left: 18px;
margin-bottom: 18px;
border-radius: 0px 9px 9px 9px;
`;

export const SkeletonChatContentMainFirstRowInfoFirstLine = styled(Box)`
width: 715px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 15px;

@media (max-width: 1200px) {
width: 480px;
}

@media (max-width: 600px) {
width: 200px;
}
`;

export const SkeletonChatContentMainFirstRowInfoSecondLine = styled(Box)`
width: 72px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentMainRightRowInfo = styled(Box)`
display: flex;
flex-direction: column;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
padding: 9px;
align-items: flex-start;
margin-right: 18px;
margin-bottom: 18px;
border-radius: 9px 0px 9px 9px;
`;

export const SkeletonChatContentSecondRowFirstLine = styled(Box)`
width: 354px;
height: 18px;
margin-bottom: 15px;
background-color: ${selectedTheme.filterSkeletonBackground};

@media (max-width: 600px) {
width: 180px;
}
`;

export const SkeletonChatContentSecondRowSecondLine = styled(Box)`
width: 72px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentThirdRowFirstLine = styled(Box)`
width: 394px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 15px;

@media (max-width: 600px) {
width: 170px;
}
`;

export const SkeletonChatContentThirdRowSecondLine = styled(Box)`
width: 93px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentFourthRowFirstLine = styled(Box)`
width: 101px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 15px;
`;

export const SkeletonChatContentFourthRowSecondLine = styled(Box)`
width: 72px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentFifthRowFirstLine = styled(Box)`
width: 131px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 15px;
`;

export const SkeletonChatContentFifthRowSecondLine = styled(Box)`
width: 87px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

export const SkeletonChatContentHorizontalLine = styled(Box)`
width: 100%;
height: 1px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin: 9px 0 18px 0;
`;

export const SkeletonChatContentVerticalLine = styled(Box)`
width: 5px;
height: 180px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
position: absolute;
top: 490px;
right: 35px;
`;

export const SkeletonChatContentFooter = styled(Box)`
display: flex;
`;

export const SkeletonChatContentFooterFirstColumn = styled(Box)`
flex: 1;
padding: 17px 16px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-right: 36px;
`;

export const SkeletonChatContentFooterColumnInside = styled(Box)`
width: 108px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};

@media (max-width: 600px) {
width: 80px;
}
`;

export const SkeletonChatContentFooterSecondColumn = styled(Box)`
padding: 17px 36px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
`;

+ 25
- 15
src/components/DirectChat/MiniChatColumn/MiniChatColumn.js Ver arquivo

import MiniChatColumnHeader from "./MiniChatColumnHeader/MiniChatColumnHeaderTitle"; import MiniChatColumnHeader from "./MiniChatColumnHeader/MiniChatColumnHeaderTitle";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { selectOffer } from "../../../store/selectors/offersSelectors"; import { selectOffer } from "../../../store/selectors/offersSelectors";
import SkeletonMiniChatColumn from "./SkeletonMiniChatColumn/SkeletonMiniChatColumn";
import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
import { CHAT_SCOPE } from "../../../store/actions/chat/chatActionConstants";


const MiniChatColumn = () => { const MiniChatColumn = () => {
const chats = useSelector(selectLatestChats); const chats = useSelector(selectLatestChats);
const offer = useSelector(selectOffer); const offer = useSelector(selectOffer);
const location = useLocation(); const location = useLocation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const isLoadingMiniChat = useSelector(
selectIsLoadingByActionType(CHAT_SCOPE)
);
const newChat = useMemo(() => { const newChat = useMemo(() => {
if (location.state?.offerId) { if (location.state?.offerId) {
return { return {
dispatch(fetchChats()); dispatch(fetchChats());
}, []); }, []);
return ( return (
<MiniChatColumnContainer>
<MiniChatColumnHeader />
{location.state?.offerId && <MiniChatCard chat={newChat} selected />}
{chats.map((item) => {
return (
<MiniChatCard
key={Date.now() * Math.random()}
chat={item}
selected={
item?.chat?._id === selectedChat?.chat?._id
}
/>
);
})}
</MiniChatColumnContainer>
<>
{isLoadingMiniChat || isLoadingMiniChat === undefined ? (
<SkeletonMiniChatColumn />
) : (
<MiniChatColumnContainer>
<MiniChatColumnHeader />
{location.state?.offerId && <MiniChatCard chat={newChat} selected />}
{chats.map((item) => {
return (
<MiniChatCard
key={Date.now() * Math.random()}
chat={item}
selected={item?.chat?._id === selectedChat?.chat?._id}
/>
);
})}
</MiniChatColumnContainer>
)}
</>
); );
}; };



+ 53
- 0
src/components/DirectChat/MiniChatColumn/SkeletonMiniChatColumn/SkeletonMiniChatColumn.js Ver arquivo

import React from "react";
import {
SkeletonMiniChatColumnContainer,
SkeletonMiniChatColumnHeading,
SkeletonMiniChatColumnItem,
SkeletonMiniChatItemImage,
SkeletonMiniChatItemInfo,
SkeletonMiniChatItemInfoFirstLine,
SkeletonMiniChatItemInfoSecondLine,
SkeletonMiniChatItemInfoThirdLine,
} from "./SkeletonMiniChatColumn.styled";

const SkeletonMiniChatColumn = () => {
return (
<SkeletonMiniChatColumnContainer>
<SkeletonMiniChatColumnHeading />
<SkeletonMiniChatColumnItem>
<SkeletonMiniChatItemImage />
<SkeletonMiniChatItemInfo>
<SkeletonMiniChatItemInfoFirstLine />
<SkeletonMiniChatItemInfoSecondLine />
<SkeletonMiniChatItemInfoThirdLine />
</SkeletonMiniChatItemInfo>
</SkeletonMiniChatColumnItem>
<SkeletonMiniChatColumnItem>
<SkeletonMiniChatItemImage />
<SkeletonMiniChatItemInfo>
<SkeletonMiniChatItemInfoFirstLine />
<SkeletonMiniChatItemInfoSecondLine />
<SkeletonMiniChatItemInfoThirdLine />
</SkeletonMiniChatItemInfo>
</SkeletonMiniChatColumnItem>
<SkeletonMiniChatColumnItem>
<SkeletonMiniChatItemImage />
<SkeletonMiniChatItemInfo>
<SkeletonMiniChatItemInfoFirstLine />
<SkeletonMiniChatItemInfoSecondLine />
<SkeletonMiniChatItemInfoThirdLine />
</SkeletonMiniChatItemInfo>
</SkeletonMiniChatColumnItem>
<SkeletonMiniChatColumnItem>
<SkeletonMiniChatItemImage />
<SkeletonMiniChatItemInfo>
<SkeletonMiniChatItemInfoFirstLine />
<SkeletonMiniChatItemInfoSecondLine />
<SkeletonMiniChatItemInfoThirdLine />
</SkeletonMiniChatItemInfo>
</SkeletonMiniChatColumnItem>
</SkeletonMiniChatColumnContainer>
);
};

export default SkeletonMiniChatColumn;

+ 59
- 0
src/components/DirectChat/MiniChatColumn/SkeletonMiniChatColumn/SkeletonMiniChatColumn.styled.js Ver arquivo

import styled from "styled-components";
import { Box } from "@mui/system";
import selectedTheme from "../../../../themes";

export const SkeletonMiniChatColumnContainer = styled(Box)`
display: flex;
flex-direction: column;

@media (max-width: 600px) {
display: none;
}
`;

export const SkeletonMiniChatColumnHeading = styled(Box)`
width: 90px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 18px;
`;

export const SkeletonMiniChatColumnItem = styled(Box)`
display: flex;
background-color: ${selectedTheme.filterSkeletonBackground};
padding: 18px;
margin-bottom: 18px;
`;

export const SkeletonMiniChatItemImage = styled(Box)`
width: 72px;
height: 72px;
border-radius: 100%;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
`;

export const SkeletonMiniChatItemInfo = styled(Box)`
display: flex;
flex-direction: column;
margin-left: 13px;
`;

export const SkeletonMiniChatItemInfoFirstLine = styled(Box)`
width: 117px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-bottom: 9px;
`;

export const SkeletonMiniChatItemInfoSecondLine = styled(Box)`
width: 90px;
height: 9px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-bottom: 4px;
`;

export const SkeletonMiniChatItemInfoThirdLine = styled(Box)`
width: 90px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
`;

+ 57
- 0
src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.js Ver arquivo

import React from "react";
import {
SkeletonDirectChatContainer,
SkeletonDirectChatFirstColumn,
SkeletonDirectChatFirstLine,
SkeletonDirectChatFourthLine,
SkeletonDirectChatFourthLineContainer,
SkeletonDirectChatHeading,
SkeletonDirectChatImage,
SkeletonDirectChatRoundImage,
SkeletonDirectChatSecondColumn,
SkeletonDirectChatSecondColumnFirstLine,
SkeletonDirectChatSecondColumnSecondLine,
SkeletonDirectChatSecondLine,
SkeletonDirectChatThirdColumn,
SkeletonDirectChatThirdColumnSecondLine,
SkeletonDirectChatThirdColumnSecondLineInside,
SkeletonDirectChatThirdLine,
SkeletonDirectChatVerticalLine,
} from "./SkeletonDirectChat.styled";

const SkeletonDirectChat = () => {
return (
<>
<SkeletonDirectChatHeading />
<SkeletonDirectChatContainer>
<SkeletonDirectChatImage />
<SkeletonDirectChatFirstColumn>
<SkeletonDirectChatFirstLine />
<SkeletonDirectChatSecondLine />
<SkeletonDirectChatThirdLine />
<SkeletonDirectChatFourthLineContainer>
<SkeletonDirectChatFourthLine />
<SkeletonDirectChatFourthLine />
<SkeletonDirectChatFourthLine />
</SkeletonDirectChatFourthLineContainer>
</SkeletonDirectChatFirstColumn>
<SkeletonDirectChatVerticalLine />
<SkeletonDirectChatSecondColumn>
<SkeletonDirectChatSecondColumnFirstLine />
<SkeletonDirectChatSecondColumnSecondLine />
<SkeletonDirectChatSecondColumnSecondLine />
<SkeletonDirectChatSecondColumnSecondLine />
<SkeletonDirectChatSecondColumnSecondLine />
</SkeletonDirectChatSecondColumn>
<SkeletonDirectChatThirdColumn>
<SkeletonDirectChatRoundImage />
<SkeletonDirectChatThirdColumnSecondLine>
<SkeletonDirectChatThirdColumnSecondLineInside />
</SkeletonDirectChatThirdColumnSecondLine>
</SkeletonDirectChatThirdColumn>
</SkeletonDirectChatContainer>
</>
);
};

export default SkeletonDirectChat;

+ 143
- 0
src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.styled.js Ver arquivo

import styled from "styled-components";
import { Box } from "@mui/system";
import selectedTheme from "../../../themes";

export const SkeletonDirectChatHeading = styled(Box)`
width: 90px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackground};
margin-bottom: 18px;
`;

export const SkeletonDirectChatContainer = styled(Box)`
background-color: ${selectedTheme.filterSkeletonBackground};
display: flex;
border: 1px solid ${selectedTheme.filterSkeletonBackgroundSecond};
padding: 18px;
justify-content: space-between;
`;

export const SkeletonDirectChatImage = styled(Box)`
width: 144px;
height: 144px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};

@media (max-width: 600px) {
width: 108px;
height: 108px;
position: absolute;
margin-top: 20px;
}
`;

export const SkeletonDirectChatFirstColumn = styled(Box)`
display: flex;
flex-direction: column;
margin-left: 18px;

@media (max-width: 600px) {
margin-left: 125px;
}
`;

export const SkeletonDirectChatFirstLine = styled(Box)`
width: 90px;
height: 27px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-bottom: 28px;
`;

export const SkeletonDirectChatSecondLine = styled(Box)`
width: 117px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-bottom: 4px;
`;

export const SkeletonDirectChatThirdLine = styled(Box)`
width: 90px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-bottom: 35px;
`;

export const SkeletonDirectChatFourthLineContainer = styled(Box)`
display: flex;
`;

export const SkeletonDirectChatFourthLine = styled(Box)`
width: 72px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-right: 27px;

@media (max-width: 600px) {
width: 50px;
}
`;

export const SkeletonDirectChatVerticalLine = styled(Box)`
width: 1px;
height: 108px;
background-color: #4d4d4d;
opacity: 0.12;
margin-top: 18px;
margin-left: 12px;
margin-right: 36px;

@media (max-width: 1200px) {
display: none;
}
`;

export const SkeletonDirectChatSecondColumn = styled(Box)`
display: flex;
flex-direction: column;

@media (max-width: 1200px) {
display: none;
}
`;

export const SkeletonDirectChatSecondColumnFirstLine = styled(Box)`
width: 72px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-top: 18px;
margin-bottom: 4px;
`;

export const SkeletonDirectChatSecondColumnSecondLine = styled(Box)`
width: 221px;
height: 18px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
margin-bottom: 4px;
`;

export const SkeletonDirectChatThirdColumn = styled(Box)`
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-left: 65px;
`;

export const SkeletonDirectChatRoundImage = styled(Box)`
width: 40px;
height: 40px;
border-radius: 100%;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
`;

export const SkeletonDirectChatThirdColumnSecondLine = styled(Box)`
width: 180px;
height: 48px;
background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
padding: 17px 36px;
`;

export const SkeletonDirectChatThirdColumnSecondLineInside = styled(Box)`
width: 108px;
height: 14px;
background-color: ${selectedTheme.filterSkeletonBackground};
`;

+ 9
- 4
src/store/actions/chat/chatActionConstants.js Ver arquivo

import { createErrorType, createFetchType, createSetType, createSuccessType } from "../actionHelpers";
import {
createErrorType,
createFetchType,
createSetType,
createSuccessType,
} from "../actionHelpers";


const CHAT_SCOPE = "CHAT_SCOPE";
const CHAT_HEADER_SCOPE = "CHAT_HEADER_SCOPE";
export const CHAT_SCOPE = "CHAT_SCOPE";
export const CHAT_HEADER_SCOPE = "CHAT_HEADER_SCOPE";
const CHAT_ONE_SCOPE = "CHAT_ONE_SCOPE"; const CHAT_ONE_SCOPE = "CHAT_ONE_SCOPE";
const CHAT_SEND_SCOPE = "CHAT_SEND_SCOPE"; const CHAT_SEND_SCOPE = "CHAT_SEND_SCOPE";
const CHAT_NEW_SCOPE = "CHAT_NEW_SCOPE"; const CHAT_NEW_SCOPE = "CHAT_NEW_SCOPE";
export const CHAT_SET = createSetType("CHAT_SET"); export const CHAT_SET = createSetType("CHAT_SET");
export const CHAT_ONE_SET = createSetType("CHAT_ONE_SET"); export const CHAT_ONE_SET = createSetType("CHAT_ONE_SET");
export const CHAT_CLEAR = createSetType("CHAT_CLEAR"); export const CHAT_CLEAR = createSetType("CHAT_CLEAR");
// export const ADD_ONE_CHAT = "CHAT_ONE_ADD";
// export const ADD_ONE_CHAT = "CHAT_ONE_ADD";

Escrever Pré-visualização
Carregando…
Cancelar
Salvar