From 1449c0a810f5064fe72a45691f3ee3622a8b65e2 Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Sun, 26 Nov 2023 21:52:25 +0900
Subject: [PATCH] [ADD] API
---
react-whenMeet/package-lock.json | 29 ++++
react-whenMeet/package.json | 1 +
react-whenMeet/src/App.js | 4 +-
react-whenMeet/src/components/HomeMakeForm.js | 2 +-
.../src/components/HomeParticipateForm.js | 127 ++++++++++++++----
react-whenMeet/src/components/LinkPageForm.js | 16 ++-
.../src/components/MeetingInfoForm.js | 37 +++--
react-whenMeet/src/routes/UserTimeInfo.js | 20 ++-
8 files changed, 189 insertions(+), 47 deletions(-)
diff --git a/react-whenMeet/package-lock.json b/react-whenMeet/package-lock.json
index 11a4fcd..e6355a5 100644
--- a/react-whenMeet/package-lock.json
+++ b/react-whenMeet/package-lock.json
@@ -11,6 +11,7 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "axios": "^1.6.2",
"gh-pages": "^6.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
@@ -5362,6 +5363,29 @@
"node": ">=4"
}
},
+ "node_modules/axios": {
+ "version": "1.6.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+ "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
+ "node_modules/axios/node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/axobject-query": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -14606,6 +14630,11 @@
"node": ">= 0.10"
}
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"node_modules/psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/react-whenMeet/package.json b/react-whenMeet/package.json
index 7ed2481..1341b78 100644
--- a/react-whenMeet/package.json
+++ b/react-whenMeet/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "axios": "^1.6.2",
"gh-pages": "^6.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
diff --git a/react-whenMeet/src/App.js b/react-whenMeet/src/App.js
index 6468946..15b0c4d 100644
--- a/react-whenMeet/src/App.js
+++ b/react-whenMeet/src/App.js
@@ -12,8 +12,8 @@ function App() {
<Router>
<Routes>
<Route path="/meetinginfo/linkpage" element={<LinkPage />}></Route>
- <Route path="/homeparticipate/usertimeinfo" element={<UserTimeInfo />}></Route>
- <Route path="/homeparticipate" element={<HomeParticipate />}></Route>
+ <Route path="/homeparticipate/:id/usertimeinfo" element={<UserTimeInfo />}></Route>
+ <Route path="/homeparticipate/:id" element={<HomeParticipate />}></Route>
<Route path="/meetinginfo" element={<MeetingInfo />}></Route>
<Route path="/result" element={<ResultMake />}></Route>//결과확인페이지
<Route path="/resultend" element={<ResultEnd />}></Route>// 투표 종료
diff --git a/react-whenMeet/src/components/HomeMakeForm.js b/react-whenMeet/src/components/HomeMakeForm.js
index 7e7c8f4..315b9fd 100644
--- a/react-whenMeet/src/components/HomeMakeForm.js
+++ b/react-whenMeet/src/components/HomeMakeForm.js
@@ -23,7 +23,7 @@ function HomeMakeForm() {
} else if (password === "") {
return alert("Password를 입력하세요");
} else {
- navigate("/MeetingInfo");
+ navigate("/MeetingInfo", {state : {title, password}});
}
};
diff --git a/react-whenMeet/src/components/HomeParticipateForm.js b/react-whenMeet/src/components/HomeParticipateForm.js
index 860dd7c..8353487 100644
--- a/react-whenMeet/src/components/HomeParticipateForm.js
+++ b/react-whenMeet/src/components/HomeParticipateForm.js
@@ -1,55 +1,124 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
import Input from "./Input";
import Button from "./Button";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import axios from "axios";
function HomeParticipateForm() {
- const [name,setName] = useState("");
- const [password,setPassword] = useState("");
- const [email,setEmail] = useState("");
+ const [name, setName] = useState("");
+ const [password, setPassword] = useState("");
+ const [email, setEmail] = useState("");
const navigate = useNavigate();
+ const location = useLocation();
+ const { id } = location.state;
- const handleName = (event)=>{
+ const handleName = (event) => {
setName(event.target.value);
}
- const handlePassword = (event)=>{
+ const handlePassword = (event) => {
setPassword(event.target.value);
}
- const handleEmail = (event)=>{
+ const handleEmail = (event) => {
setEmail(event.target.value);
}
+ const checkParticipantExistence = async()=>{
+ const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/participants/?name=${name}`);
+ if(response.data){
+ alert('이미 존재하는 이름입니다.')
+ }
+ return response.data.name;
+ }
- const handleSubmit = (event) => {
+ const newHandleSubmit = async (event) => {
+ event.preventDefault();
+ if (name === "") {
+ alert('이름을 입력하세요')
+ }
+ else {
+ try {
+ const response = await axios.post(`http://43.200.79.42:3000/meetings/${id}/participants`, {
+ name: name,
+ password: password,
+ email: email
+ });
+ navigate('UserTimeInfo', { state: { id } });
+ }
+ catch (error) {
+ console.error(error);
+ }
+ }
+ };
+ const oldHandleSubmit = async (event) => {
event.preventDefault();
- name === "" ? alert('이름을 입력하세요') : navigate('UserTimeInfo');
+ if (name === "") {
+ alert('이름을 입력하세요')
+ }
+ else {
+ try {
+ const response = await axios.post(`http://43.200.79.42:3000/meetings/${id}/entry`,{
+ name : name,
+ password : password
+ });
+ if(response.status === 401 ){
+ alert('이름 또는 Password를 잘못 입력하였습니다');
+ return;
+ }
+ else if(response.status === 404){
+ alert('일치하는 참가자가 존재하지 않습니다');
+ return;
+ }
+ //navigate('UserTimeInfo', { state: { id } });
+ }
+ catch (error) {
+ if (error.response) {
+ if (error.response.status === 401) {
+ alert('이름 또는 Password를 잘못 입력하였습니다');
+ } else if (error.response.status === 404) {
+ alert('일치하는 참가자가 존재하지 않습니다');
+ } else {
+ alert(`Unexpected status code: ${error.response.status}`);
+ }
+ } else {
+ // Handle other types of errors
+ console.error(error);
+ }
+
+ }
+ }
};
return (
<form>
<div>
- <h1>약속 Title</h1>
- <Input
- type="text"
- value={name}
- onChange={handleName}
- placeholder="이름"
+ <h1>투표에 참여하기</h1>
+ {console.log({id})}
+ <Input
+ type="text"
+ value={name}
+ onChange={handleName}
+ placeholder="이름"
/>
- <Input
- type="password"
- value={password}
- onChange={handlePassword}
- placeholder="Password(선택)"
+ <Input
+ type="password"
+ value={password}
+ onChange={handlePassword}
+ placeholder="Password"
/>
- <Input
- type="text"
- value={email}
- onChange={handleEmail}
- placeholder="이메일(선택)"
+ <Input
+ type="text"
+ value={email}
+ onChange={handleEmail}
+ placeholder="이메일(선택)"
+ />
+ <Button
+ type='submit'
+ text='신규참여'
+ onClick={newHandleSubmit}
/>
<Button
- type='submit'
- text='다음'
- onClick={handleSubmit}
+ type='submit'
+ text='재참여'
+ onClick={oldHandleSubmit}
/>
</div>
</form>
diff --git a/react-whenMeet/src/components/LinkPageForm.js b/react-whenMeet/src/components/LinkPageForm.js
index 45edc9a..c676b0c 100644
--- a/react-whenMeet/src/components/LinkPageForm.js
+++ b/react-whenMeet/src/components/LinkPageForm.js
@@ -1,15 +1,19 @@
import { useState } from "react";
import Input from "../components/Input";
import Button from "../components/Button";
-import { useNavigate } from "react-router-dom";
+import { useNavigate,useLocation } from "react-router-dom";
+import axios from "axios";
function LinkPageForm() {
const [link, setLink] = useState("");
+ const location = useLocation();
const navigate = useNavigate();
+ const {id} = location.state;
+
const copyToClipboard = async (link) => {
try {
- const textToCopy = `localhost:3000/HomeParticipate`;
+ const textToCopy = `localhost:3000/HomeParticipate/${id}`;
await navigator.clipboard.writeText(textToCopy);
alert('클립보드에 복사되었습니다');
} catch (err) {
@@ -17,17 +21,17 @@ function LinkPageForm() {
}
};
- const handleSubmit = (event) => {
+ const handleSubmit = async(event) => {
event.preventDefault();
- setLink(`/HomeParticipate`)
- navigate(link);
+ console.log({id});
+ navigate(`/HomeParticipate/${id}`,{state : {id}});
}
return (
<form onSubmit={handleSubmit}>
<div>
<Input
- value={`localhost:3000/HomeParticipate/`}
+ value={`localhost:3000/HomeParticipate/${id}`}
/>
<Button
type="button"
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index 38fcec8..a9cee24 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -2,7 +2,8 @@ import { useState } from "react";
import Input from "../components/Input";
import Button from "../components/Button";
import Calendar from "../components/Calendar";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import axios from "axios";
function MeetingInfoForm() {
const [meetingPurpose, setMeetingPurpose] = useState("");
@@ -18,6 +19,8 @@ function MeetingInfoForm() {
'기타'
];
const navigate = useNavigate();
+ const location = useLocation();
+ const { title, password } = location.state;
const [usingDate, setUsingDate] = useState([]);
@@ -45,11 +48,29 @@ function MeetingInfoForm() {
setEnd(event.target.value);
}
- const handleSubmit = (event) => {
+ const handleSubmit = async (event) => {
event.preventDefault();
- console.log(usingDate);
- (meetingPurpose === "" || meetingPurpose === "선택") ? alert("목적을 선택하세요") : navigate("LinkPage");
- }
+
+ if (meetingPurpose === "" || meetingPurpose === "선택") {
+ alert("목적을 선택하세요");
+ } else {
+ try {
+ const response = await axios.post("http://43.200.79.42:3000/meetings", {
+ title: title,
+ adminPassword: password,
+ purpose: meetingPurpose,
+ startDate: start,
+ endDate: end,
+ maxParticipants: number,
+ voteExpiresAt: endVote
+ });
+ const id = response.data.id;
+ navigate("LinkPage",{state : {id}});
+ } catch (error) {
+ console.error("Error sending data to the backEnd", error);
+ }
+ }
+ };
return (
<form onSubmit={handleSubmit}>
@@ -66,18 +87,18 @@ function MeetingInfoForm() {
</label>
</div>
- <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate}/>
+ <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate} />
<div className="timeStartEnd">
시작:
<Input
- type="time"
+ type="date"
value={start}
onChange={handleStart}
placeholder="시작"
/>
종료:
<Input
- type="time"
+ type="date"
value={end}
onChange={handleEnd}
placeholder="종료"
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 610bc18..6eeb7ea 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -1,17 +1,35 @@
-import { useState } from "react";
+import { useState,useEffect } from "react";
import Button from "../components/Button";
import Calendar from "../components/Calendar"
import "../styles/HomeMake.css"
+import axios from "axios";
+import { useNavigate, useLocation } from "react-router-dom";
function UserTimeInfo() {
const [state, setState] = useState(true);
+
+ const location = useLocation();
+ const {id} = location.state;
+
const handleState = () => {
setState((state) => !state);
}
const handleCalendar = (value) => {
console.log('Selected Date:', value);
};
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/`);
+ console.log(response.data.title);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+ fetchData();
+ }, [id]);
return (
<div className="center-container">
<Button
--
GitLab