2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
7d2a27c3 1 parent 014b19bf

update chat presenter

Inline Side-by-side
Showing 1 changed file with 132 additions and 166 deletions
import React, { useEffect } from "react";
import React from "react";
import styled from "styled-components";
import Header from "../../Components/Header";
import Input from "../../Components/Input";
import Button from "../../Components/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAddressBook } from "@fortawesome/free-solid-svg-icons";
import { Link } from "react-router-dom";
import Category from "../Category/CategoryContainer";
import Message from "../../Components/Message";
import { faPlusSquare } from "@fortawesome/free-solid-svg-icons";
const Wrapper = styled.div`
display: grid;
display: block;
width: 100%;
height: 100%;
grid-template-rows: 80px auto min-content;
grid-template-areas:
"Header"
"Workspace";
.Header {
box-shadow: none;
}
height: 100vh;
background-color: #2f3136;
`;
const ServerListBox = styled.div`
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 72px;
background-color: #202225;
color: white;
`;
const ChatWrapper = styled.div`
const ServerNav = styled.nav`
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
grid-template-columns: 200px auto;
grid-area: "Workspace";
flex-direction: column;
`;
const ChatMenuContainer = styled.div`
display: grid;
width: 200px;
height: 100%;
background-color: #667aff;
color: white;
grid-template-rows: 80px 80px 1fr;
const ServerBox = styled.div``;
const MainContainer = styled.div`
position: absolute;
top: 0;
left: 72px;
right: 0;
bottom: 0;
`;
const TitleContainer = styled.div`
const MainContentBox = styled.div`
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
flex: 1 1 auto;
`;
const Title = styled.span`
font-family: "Chelsea Market", cursive;
const MainSideBar = styled.div`
background-color: #2f3136;
color: white;
`;
const ItemText = styled.span`
font-family: "Ubuntu", sans-serif;
const MainBox = styled.div`
width: 100%;
`;
const PeopleContainer = styled.div`
const HeaderSection = styled.section`
background-color: #36393f;
color: white;
padding: 15px;
`;
const SectionContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
svg {
font-size: 20px;
}
span {
margin-left: 10px;
font-size: 20px;
}
border-top: 1px solid rgba(255, 255, 255, 0.5);
flex-direction: row;
height: auto;
`;
const ChatScreenContainer = styled.div`
display: grid;
width: 100%;
height: 100%;
grid-template-rows: 70px 1fr;
const ChatSection = styled.section`
background-color: #36393f;
color: white;
flex: 1 1 auto;
`;
const ChatScreenHeader = styled.div`
const MessageWrapper = styled.div`
position: relative;
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
flex: 1 1 auto;
`;
const ChatScreenBox = styled.div`
const ScrollWrapper = styled.div`
overflow-y: scroll;
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
height: 100%;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
width: 16px;
height: 16px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: gray;
background-color: #202225;
border-color: #36393f;
}
&::-webkit-scrollbar-button {
width: 0;
height: 0;
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
border-width: 4px;
border-radius: 8px;
}
`;
const InputWrapper = styled.div`
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const ScrollInner = styled.div``;
const InputContainer = styled.div`
position: fixed;
bottom: 0;
justify-content: center;
align-items: center;
width: 50%;
margin-bottom: 20px;
display: flex;
flex-direction: row;
background-color: #b2bec3;
border: none;
form {
width: 100%;
button {
background-color: #27ae60;
width: 20%;
color: white;
border-radius: 10px;
}
input {
background-color: #b2bec3;
width: 70%;
const ScrollInnerTitle = styled.div`
padding: 10px;
p {
text-align: center;
}
`;
const CardWrapper = styled.div`
padding: 5px;
text-align: center;
&:last-child {
margin-bottom: 10px;
}
border-radius: 10px;
`;
const StyledLink = styled(Link)`
width: 100%;
const StyleForm = styled.form``;
const InputArea = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
cursor: pointer;
&:hover {
background-color: white;
color: #667aff;
}
`;
export default ({
location,
message,
onSubmit,
messageArray,
subscribeToNewMessage,
}) => {
const { pathname } = location;
const roomName = pathname.slice(1, pathname.length);
useEffect(() => subscribeToNewMessage(), []);
const AttachArea = styled.div``;
const TextArea = styled.div``;
const ButtonArea = styled.div``;
const PeopleSection = styled.section`
background-color: #2f3136;
color: white;
flex: 0 1 30%;
min-width: 360px;
max-width: 420px;
`;
export default () => {
return (
<Wrapper>
<Header text={"KhuChat"} />
<ChatWrapper className="ChatWrapper">
<ChatMenuContainer>
<TitleContainer>
<Title>{roomName} Room</Title>
</TitleContainer>
<PeopleContainer>
<StyledLink to={`/${roomName}/People`}>
<FontAwesomeIcon icon={faAddressBook} />
<ItemText>People</ItemText>
</StyledLink>
</PeopleContainer>
<Category />
</ChatMenuContainer>
<ChatScreenContainer>
<ChatScreenHeader>
<Title>{roomName}</Title>
</ChatScreenHeader>
<ChatScreenBox>
{messageArray &&
messageArray.seeAllMessage.map((e) => (
<Message
text={e.text}
time={e.createdAt}
key={e.id}
avatar={e.sender.avatarUrl}
/>
))}
<InputWrapper>
<InputContainer className="InputContainer">
<form onSubmit={onSubmit}>
<Input
placeholder={"Enter any words"}
type="text"
{...message}
/>
<Button text={"Submit"} />
</form>
</InputContainer>
</InputWrapper>
</ChatScreenBox>
</ChatScreenContainer>
</ChatWrapper>
<ServerListBox>
<ServerNav>
<ServerBox>Test</ServerBox>
</ServerNav>
</ServerListBox>
<MainContainer>
<MainContentBox>
<MainSideBar>채널 및 DM 목록</MainSideBar>
<MainBox>
<HeaderSection>상태 표시바</HeaderSection>
<SectionContainer>
<ChatSection>
<MessageWrapper>
<ScrollWrapper>
<ScrollInner>
<ScrollInnerTitle>
<p>.. Server 에 오신 것을 환영합니다.</p>
<p>We Introduce some guides below.</p>
</ScrollInnerTitle>
<CardWrapper>초대하기</CardWrapper>
<CardWrapper>데스크톱 앱 다운로드</CardWrapper>
<CardWrapper>아이콘</CardWrapper>
</ScrollInner>
</ScrollWrapper>
</MessageWrapper>
<StyleForm>
<InputArea>
<AttachArea>
<FontAwesomeIcon icon={faPlusSquare} />
</AttachArea>
<TextArea>
<Input placeholder="# 보낼 메시지 입력" />
</TextArea>
<ButtonArea></ButtonArea>
</InputArea>
</StyleForm>
</ChatSection>
<PeopleSection>활동중인 친구 리스트</PeopleSection>
</SectionContainer>
</MainBox>
</MainContentBox>
</MainContainer>
</Wrapper>
);
};
......