Commit 17577aa9 authored by 우지원's avatar 우지원
Browse files

Merge remote-tracking branch 'origin/sooModalTest' into jiweon827

parents 60db2082 308d5b7f
......@@ -126,7 +126,7 @@ function Chat(props) {
return (
<div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "580px", position: "relative" }}>
<div id="chat" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', width: "100%", height: "90vh", position: "relative" }}>
<div id="chat-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", width: "100%", height: "80px" }}>
<a href="#;" onClick={handleClick} style={{ margin: "0px 0px 0px 15px" }}><BsCaretLeftFill size="20" color="#333333" /></a>
<div style={{ justifyContent: "center" }}>
......
import React from 'react'
import { Badge, ListGroup } from 'react-bootstrap';
const INIT_LIST = [{
interest: '',
isOpen: '',
memeber: [],
roomId: '',
roomName: '',
}]
function ClosedList(props) {
function enterChatRoomCH(e) {
......@@ -20,46 +13,11 @@ function ClosedList(props) {
props.setRoomCode(roomCode)
props.setRoomName(roomName)
// console.log('rrrrrrrrrrrrrrr', props.closedlist)
// console.log('1111111111111111111', props.leaveInfo, typeof (props.leaveInfo))
}
// const [checknew, setChecknew] = useState([])
// const [unreadnumber, setUnreadnumber] = useState([''])
// async function dbChat() {
// for (let i = 0; i <= props.closedlist.length - 1; i++) {
// const respond = await axios.get('/room/dbChat', { params: { 'roomId': props.closedlist[i].roomId } })
// setChecknew(respond.data)
// }
// }
// useEffect(() => {
// dbChat()
// }, [props.singleChat, props.recievedMsg])
// useEffect(() => {
// // console.log('chat 클라이언트 변경!')
// unreadMessage()
// }, [checknew])
// async function unreadMessage() {
// //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨
// //물론 그 방 별로 찾아서 list를 맵써서 하던?
// // console.log('ddddddddd', list[0].roomId)
// setUnreadnumber([''])
// let arr = []
// for (let i = 0; i <= props.closedlist.length - 1; i++) {
// const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': props.closedlist[i].roomId } })
// // setUnreadnumber([...unreadnumber, respond.data])
// arr = [...arr, respond.data]
// }
// setUnreadnumber(arr)
// // console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length)
// }
return (
<div>
<div style={{height: "80vh"}}>
<div style={{overflow: 'auto', height:"100%"}}>
{props.closedlist.map((item, index) =>
<ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
......@@ -70,6 +28,7 @@ function ClosedList(props) {
)
}
</div >
</div>
)
}
......
import React from 'react'
import { Navbar, Nav } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
import { handleLogout } from '../utils/auth';
import { BsPeopleCircle } from "react-icons/bs";
import { AiOutlineLogout } from "react-icons/ai";
import "../menu.css";
function Menu() {
function Menu(props) {
const name = sessionStorage.getItem('name');
return (
<Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
<div className="container-fluid">
<Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
{name ?
<>
<Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
<Nav.Item className="mt-2 mr-4">{name} 환영합니다</Nav.Item>
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
</Nav>
</>
: <>
<Nav className="nav navbar-nav">
<Nav.Link href="/login">Login</Nav.Link>
<Nav.Link href="/signup">Signup</Nav.Link>
</Nav>
</>}
</div>
</Navbar>
<div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
<p className="navbar-brand" href="/home" style={{color: 'white', alignItems: "center"}}>YDK Messenger</p>
{name ?
<>
<div className="nav navbar-nav mr-auto" style={{ color: 'white', display: "flex", flexDirection: "row", alignItems: "center"}}>
<p className="mt-2 mr-4">{name} 환영합니다</p>
<div className="showText">
<a href="/profile" style={{color:"#FFFFFF", marginRight: "15px"}}>{'Profile'}</a>
<a onClick={() => handleLogout()} href="/login" style={{color:"#FFFFFF"}}>{'logout'}</a>
</div>
<div className="showIcon">
<a href="/profile" style={{marginRight: "15px"}}><BsPeopleCircle size="25" color="#FFFFFF" /></a>
<a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="25" color="#FFFFFF" /></a>
</div>
</div>
</>
: <>
<Nav className="nav navbar-nav">
<Nav.Link href="/login">Login</Nav.Link>
<Nav.Link href="/signup">Signup</Nav.Link>
</Nav>
</>}
</div>
)
}
export default Menu
......@@ -13,7 +13,7 @@ function OpenList(props) {
}
return (
<div>
<div style={{overflow: 'auto', height: "80vh"}}>
{props.openlist.map((item, index) =>
<ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
......
......@@ -174,10 +174,10 @@ function Home() {
}, [])
return (
<>
<Menu />
<Row className="mr-0">
<Col className="list" md={5} style={{ overflow: 'auto', height: "80%" }}>
<div style={{ weight: "100vw", height: "100vh", backgroundColor: "" }}>
<Menu style={{ weight: "100%", height: "10%" }} />
<Row className="mr-0" style={{ weight: "100%", height: "80%" }}>
<Col className="list" md={5}>
<Sdiv chat={chat}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
......@@ -218,7 +218,7 @@ function Home() {
</Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
</>
</div>
);
}
......
import React, { useState, useEffect } from 'react'
import Menu from '../Components/Menu';
import styled from 'styled-components';
import { Image, Button, Container, Form, Row, Col } from 'react-bootstrap';
import { BrowserRouter as Link } from 'react-router-dom';
import axios from 'axios'
......
.showText {
display: flex;
flex-direction: row;
margin-right: 5px;
margin-left: 5px;
position: absolute;
right: 0;
}
.showIcon {
display: none;
}
@media screen and (max-width: 768px) {
.showText {
display: none;
}
.showIcon {
display: flex;
flex-direction: row;
margin-right: 5px;
margin-left: 5px;
position: absolute;
right: 0;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment