Skip to content

GitLab

Commit 5a92d901 authored by 우지원's avatar 우지원
Browse files

a

parents e15228f3 eda45ede
Hide whitespace changes
Inline Side-by-side
client/package.json
View file @ 5a92d901
......@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
......
client/src/Components/Menu.js
View file @ 5a92d901
// import axios from 'axios';
// import { response } from 'express';
import { response } from 'express';
import React, { useState, useEffect } from 'react';
import { Navbar, Nav, Button } from 'react-bootstrap';
import { handleLogout, isAuthenticated } from '../utils/auth';
......
client/src/Pages/HomePage.js
View file @ 5a92d901
import React, { useState } from 'react';
import { Row, Col, Modal, Button } from 'react-bootstrap';
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';
import Chat from '../Components/Chat';
import Menu from '../Components/Menu';
import catchErrors from '../utils/catchErrors';
// import styled from 'styled-components';
// const List = styled.div`
// background: #FFFAFA;
// `
const INIT_CHATR = {
name: '',
interest: '',
isOpen: false
}
function Home() {
const [show, setShow] = useState(false);
const [chat, setChat] = useState(false);
const [show, setShow] = useState(false);
const [show2, setShow2] = useState(false);
const [chat, setChat] = useState(false);
// const [checkedI, setCheckedI] = useState(false);
const [chatR, setChatR] = useState(INIT_CHATR);
const [disabled, setDisabled] = useState(true);
const [error, setError] = useState('');
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
const handleClose2 = () => setShow2(false);
const handleShow2 = () => setShow2(true);
// variant="pills"
useEffect(() => {
const isChatR = Object.values(chatR).every(el => Boolean(el))
isChatR ? setDisabled(false) : setDisabled(true)
}, [chatR])
function handleChange(event) {
const { name, value } = event.target
setChatR({ ...chatR, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault()
try {
setError('')
// const response = await fetch('chat/makeChat', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(chatR)
// })
//const data = await response.json()
const response = await axios.post('chat/makeChat', chatR)
setChatR(INIT_CHATR)
} catch (error){
catchErrors(error, setError)
}
}
return (
<>
<Menu />
<Row className="mr-0">
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList />
</Tab>
<Tab eventKey="open" title="공개방" >
<OpenList />
</Tab>
</Tabs>
</Col>
<Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} /> : null}
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleChato = () => setChat(true);
const handleChatc = () => setChat(false);
// variant="pills"
<div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShow} size="lg" block>
생성
</Button>
return (
<>
<Menu />
<Row className="mr-0">
<Col className="list" md={5}>
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList />
</Tab>
<Tab eventKey="open" title="공개방" >
<OpenList />
</Tab>
</Tabs>
</Col>
<Col style={{ padding: "0" }}>
{chat ? <Chat handleChatc={handleChatc} /> : null}
<Button variant="secondary" onClick={handleShow2} size="lg" block>
참가
</Button>
</div>
<Button variant="primary" onClick={handleShow} style={{ position: "fixed", bottom: "10px", right: "10px" }} >
생성
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>방 생성</Modal.Title>
</Modal.Header>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Modal.Body>
<Form onSubmit={handleSubmit}>
<Form.Group as={Row} controlId="chatName">
<Form.Label column sm={4}>방 이름</Form.Label>
<Col>
<Form.Control name='name' type='text' value={chatR.name} onChange={handleChange} />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="chatInterest">
<Form.Label column sm={4}>관심 분야</Form.Label>
<Col>
<Form.Control as="select" defaultValue="Choose..." name='interest' type='text' value={chatR.interest} onChange={handleChange}>
<option>Choose...</option>
<option>과학</option>
<option>수학</option>
<option>예술</option>
<option>언어</option>
<option>취미</option>
</Form.Control>
{/* <Form.Control type="text" /> */}
</Col>
</Form.Group>
<Form.Group as={Row} controlId="chatIsOpen">
<Form.Label column sm={4}>공개방</Form.Label>
<Col>
<Form.Check
type="checkbox"
checked={chatR.isOpen}
name='isOpen'
onChange={() => setChatR({ ...chatR, isOpen: !chatR.isOpen })} />
</Col>
</Form.Group>
{
(chatR.isOpen)
? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
: (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
}
<Form.Group as={Row}>
<Col sm={{ span: 5, offset: 4 }}>
<Button type="submit" >방 생성</Button>
</Col>
</Form.Group>
</Form>
</Modal.Body>
</Modal>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>방 생성</Modal.Title>
</Modal.Header>
<Modal.Body>여기에 form 입력</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={handleClose}>
생성
</Button>
</Modal.Footer>
</Modal>
</Col>
</Row>
</>
);
<Modal show={show2} onHide={handleClose2}>
<Modal.Header closeButton>
<Modal.Title>참여 코드로 채팅 참가</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={() => { console.log('제출') }}>
<Form.Group as={Row} controlId="formCodeE">
<Form.Label column sm={4}>참여 코드</Form.Label>
<Col>
<Form.Control type="text" />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Col sm={{ span: 5, offset: 4 }}>
<Button type="submit">참가</Button>
</Col>
</Form.Group>
</Form>
</Modal.Body>
</Modal>
</Col>
</Row>
</>
);
}
export default Home;
server/controllers/chat.controller.js 0 → 100644
View file @ 5a92d901
// import { useState } from 'react'
import Chat from "../models/Chat.js"
import { customAlphabet } from 'nanoid'
import isLength from 'validator/lib/isLength.js'
const nanoid = customAlphabet('1234567890abcdef', 10)
const makeChat = async (req, res) => {
const { name, interest, isOpen } = req.body;
const roomId = nanoid()
const chat = await Chat.findOne({ roomId })
while (chat) {
roomId = nanoid()
chat = await Chat.findOne({ roomId })
}
try {
if (!isLength(name, { min: 3, max: 20 })) {
return res.status(422).send('채팅방의 이름은 3-20자여야 합니다.')
} else if (interest=='Choose...' || interest==''){
return res.status(422).send('분야를 반드시 선택하여야 합니다.')
}
const newChat = await new Chat({
roomId,
name,
interest,
isOpen
}).save()
console.log(newChat)
res.json(newChat)
} catch (error) {
console.log(error)
res.status(500).send('방생성 에러')
}
}
const hello = (req, res) => {
res.send('Hello from users controller')
}
export default { makeChat, hello }
\ No newline at end of file
server/models/chat.js
View file @ 5a92d901
......@@ -3,6 +3,11 @@ import mongoose from 'mongoose'
const {String} = mongoose.Schema.Types
const ChatSchema = new mongoose.Schema({
roomId: {
type: String,
// default:() => nanoid(),
unique: true
},
name: {
type: String,
required: true,
......@@ -13,13 +18,11 @@ const ChatSchema = new mongoose.Schema({
select: false
},
isOpen: {
type: String,
type: Boolean,
required: true,
default: 'user',
enum: ['user', 'admin', 'root']
}
}, {
timestamps: true
})
export default mongoose.models.User || mongoose.model('chat', ChatSchema)
\ No newline at end of file
export default mongoose.models.Chat || mongoose.model('Chat', ChatSchema)
\ No newline at end of file
server/routes/chat.routers.js 0 → 100644
View file @ 5a92d901
import express from 'express'
import chatCtrl from '../controllers/chat.controller.js'
const router = express.Router()
router.route('/chat/makeChat')
.post(chatCtrl.makeChat)
.get(chatCtrl.hello)
export default router
\ No newline at end of file
server/server.js
View file @ 5a92d901
......@@ -2,6 +2,7 @@ import express from 'express'
import connectDb from './utils/connectDb.js'
import userRouter from './routes/user.routes.js'
import authRouter from './routes/auth.routes.js'
import chatRouter from './routes/chat.routers.js'
connectDb()
......@@ -14,11 +15,16 @@ app.use(express.json())
app.use(userRouter)
app.use(authRouter)
app.use(chatRouter)
//userRouter로 이동
app.get('/', (req, res) => {
res.send('Hello World. 안녕하세요')
})
// app.post('/makeChat', (req, res) => {
// app.use(chatRouter)
// })
// app.get('/', (req, res) => {
// res.send('Hello World. 안녕하세요')
// })
app.listen(3030, () => {
console.log('Listening on port 3030')
......
server/utils/catchErrors.js 0 → 100644
View file @ 5a92d901
function catchErrors(error, displayError){
let errorMsg
if (error.response){
errorMsg = error.response.data
console.log(errorMsg)
} else if (error.request) {
errorMsg = error.request
console.log(errorMsg)
} else {
errorMsg = error.message
console.log(errorMsg)
}
displayError(errorMsg)
}
export default catchErrors
\ 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