Skip to content

Pull Request - Branch Chat: chat profile modal #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
useonglee merged 4 commits into from
May 28, 2021
Merged

Pull Request - Branch Chat: chat profile modal #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e5ccbe6
Add image radius to profile image component
useonglee May 28, 2021
1ead0ac
Remove chatBucket props
useonglee May 28, 2021
4e521e6
Add socket parameter
useonglee May 28, 2021
0596a04
Add #226 chat profile modal feature
useonglee May 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Chat/ChatContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const WorkSpaceChat = (): JSX.Element => {

return (
<WorkSpaceFrame>
<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} chatBucket={chatBucket} />
<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} />
<Textarea
onSubmitForm={onSubmitForm}
onChangeChat={onChangeChatValue}
Expand Down
36 changes: 23 additions & 13 deletions src/components/Chat/ChatItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import useSocket from '../../../hooks/useSocket';

import dayjs from 'dayjs';
import autosize from 'autosize';
import { useParams } from 'react-router';
import { useHistory, useParams } from 'react-router';

import {
AlertButtonWrapper,
Expand All @@ -21,6 +21,8 @@ import {
ChatEditbutton,
ChatEditButtonWrapper,
ChatEditTextArea,
ChatItemProfileModal,
ChatItemProfileModalWrapper,
ChatNowDateHover,
ChatProfileImageWrapper,
ChatUpdateModal,
Expand All @@ -36,12 +38,13 @@ import useInput from '../../../hooks/useInput';
interface Props {
data: ChatDataType;
isSameSender: boolean;
chatBucket: ChatDataType[];
}

const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
const ChatItem = ({ data, isSameSender }: Props): JSX.Element => {
const { projectUrl, part: room } = useParams<{ projectUrl: string; part: string }>();
const [socket] = useSocket(projectUrl);
const history = useHistory();
const currentAddress = history.location.pathname.split('/')[3];
const [socket] = useSocket(projectUrl, currentAddress);
const textareaRef = useRef<HTMLTextAreaElement>(null);

const [showChatProfileModal, setShowChatProfileModal] = useState<boolean>(false);
Expand All @@ -62,11 +65,8 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
// TODO: 채팅 프로필 모달
const onShowChatProfileModal = useCallback(e => {
e.preventDefault();
if (editChat.trim() === '') {
return;
}
e.stopPropagation();
setShowChatProfileModal(true);
setShowChatProfileModal(prev => !prev);
}, []);

// TODO: 채팅 수정 엔터
Expand All @@ -91,6 +91,10 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
e.preventDefault();
e.stopPropagation();

if (editChat.trim() === '') {
return;
}

const getChatEditData = {
room: room,
id: data.id,
Expand Down Expand Up @@ -136,11 +140,7 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
userName={name}
/>
</ChatProfileImageWrapper>
{showChatProfileModal && (
<Modal backgroundColor={false} setShowModal={setShowChatProfileModal}>
<ChatProfileModal data={data} />
</Modal>
)}

<div>
<ChatUserInfoWrapper isSameSender={isSameSender}>
<ChatUserId>{name}</ChatUserId>
Expand Down Expand Up @@ -203,6 +203,16 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
</ChatDeleteAlert>
</Modal>
)}
{/* showModal={showChatProfileModal} */}
{showChatProfileModal && (
// <Modal backgroundColor={false} setShowModal={setShowChatProfileModal}>
// </Modal>
<ChatItemProfileModalWrapper onClick={onShowChatProfileModal}>
<ChatItemProfileModal>
<ChatProfileModal data={data} />
</ChatItemProfileModal>
</ChatItemProfileModalWrapper>
)}
</ChatWrapper>
);
};
Expand Down
15 changes: 13 additions & 2 deletions src/components/Chat/ChatItem/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,19 @@ export const ChatWrapper = styled.div<{ isSameSender: boolean }>`
`}
`;

// ------------------TODO: 채팅 프로필 이미지 모달 ------------------

export const ChatItemProfileModalWrapper = styled.div``;

export const ChatItemProfileModal = styled.div`
${({ theme }) => theme.align.flexCenter};
flex-direction: row;
position: absolute;
top: 6px;
left: 70px;
z-index: 10;
`;

// ------------------TODO: 채팅 수정 및 삭제 버튼 모달 ------------------

export const ChatUpdateModal = styled.span`
Expand Down Expand Up @@ -82,8 +95,6 @@ export const ChatProfileImageWrapper = styled.div<{ isSameSender: boolean }>`

// ------------------TODO: 채팅 수정 인풋 ------------------

export const ChatEditInputWrapper = styled.div``;

export const ChatEditTextArea = styled.textarea`
resize: none;
${({ theme }) => theme.align.flexVertical};
Expand Down
5 changes: 3 additions & 2 deletions src/components/Chat/ChatProfileModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@ const ChatProfileModal = ({ data }: Props): JSX.Element => {
<ChatProfileModalWrapper>
<ProfileModalTopWrapper>
<ProfileImage
width="140px"
height="140px"
width="100%"
height="100%"
profileImage={uploadImage}
profileColor={profileColor}
userName={name}
radius={false}
/>
</ProfileModalTopWrapper>
<PrfileModalBottomWrapper>
Expand Down
9 changes: 2 additions & 7 deletions src/components/Chat/ChatProfileModal/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@ import styled from 'styled-components';
import { Link } from 'react-router-dom';

export const ChatProfileModalWrapper = styled.div`
position: absolute;
top: 115px;
bottom: 0;
left: 372px;
right: 0;
overflow: hidden;

width: 240px;
height: 330px;
font-family: NanumSquareR;
Expand All @@ -24,8 +21,6 @@ export const ProfileModalTopWrapper = styled.div`
background-color: #eee;
`;

export const ProfileImage = styled.div``;

export const PrfileModalBottomWrapper = styled.div`
display: flex;
flex-direction: column;
Expand Down
7 changes: 3 additions & 4 deletions src/components/Chat/ChatZone/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ import { ChatDataType, ChatSectionType } from '../../../types/types';
export interface Props {
scrollbarRef: RefObject<Scrollbars>;
chatSections: ChatSectionType;
chatBucket: ChatDataType[];
}

const ChatZone = ({ scrollbarRef, chatSections, chatBucket }: Props): JSX.Element => {
const ChatZone = ({ scrollbarRef, chatSections }: Props): JSX.Element => {
const onScrollFrame = useCallback(
values => {
if (values.scrollTop === 0 && scrollbarRef.current) {
Expand Down Expand Up @@ -43,9 +42,9 @@ const ChatZone = ({ scrollbarRef, chatSections, chatBucket }: Props): JSX.Elemen
isSameSender = chat.writer.email === chatsBucket[index - 1].writer.email;
}
return isSameSender ? (
<ChatItem key={index} data={chat} isSameSender={true} chatBucket={chatBucket} />
<ChatItem key={index} data={chat} isSameSender={true} />
) : (
<ChatItem key={index} data={chat} isSameSender={false} chatBucket={chatBucket} />
<ChatItem key={index} data={chat} isSameSender={false} />
);
})}
</ChatList>
Expand Down
6 changes: 6 additions & 0 deletions src/components/Common/ProfileImage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { UserProfileDefault, UserProfileImage } from './styles';
프로필은 프로필 이미지를 변경하였을 경우 유저의 프로필 이미지를 보여주고,
설정하지 않았으면 기본 프로필을 보여준다.

5/28 수정
radius - true: border-radius 100%;
radius - false: border-radius 0;

Props: {
width
height
Expand All @@ -26,6 +30,7 @@ interface Props {
profileImage?: string;
profileColor?: string;
userName?: string;
radius: boolean;
}

const ProfileImage = (props: Props): JSX.Element => {
Expand All @@ -51,6 +56,7 @@ ProfileImage.defaultProps = {
height: '30px',
margin: '0',
userNameSize: '16px',
radius: 'true',
};

export default ProfileImage;
24 changes: 19 additions & 5 deletions src/components/Common/ProfileImage/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,36 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';

export const UserProfileImage = styled.img<{ width: string; margin: string }>`
export const UserProfileImage = styled.img<{ width: string; margin: string; radius: boolean }>`
cursor: pointer;
object-fit: cover;
${({ theme }) => theme.align.flexCenter}
width: ${({ width }) => width};
height: ${({ height }) => height};
margin: ${({ margin }) => margin};
border-radius: 100%;
${props =>
props.radius
? css`
border-radius: 100%;
`
: `
border-radius: 0;
`}
`;

export const UserProfileDefault = styled.div<{ width: string; height: string; margin: string }>`
export const UserProfileDefault = styled.div<{ width: string; height: string; margin: string; radius: boolean }>`
cursor: pointer;
${({ theme }) => theme.align.flexCenter}
width: ${({ width }) => width};
height: ${({ height }) => height};
margin: ${({ margin }) => margin};
border-radius: 100%;
${props =>
props.radius
? css`
border-radius: 100%;
`
: `
border-radius: 0;
`}

& > span {
${({ theme }) => theme.align.flexCenter}
Expand Down