From 97f1b76079e80ce031ffc5e8a987d7902bbea558 Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Tue, 28 Nov 2023 21:09:29 +0900
Subject: [PATCH] [ADD] API connect
---
.../src/components/CalendarMonth.jsx | 2 +-
.../src/components/HomeParticipateForm.js | 62 ++++++++++---------
react-whenMeet/src/components/LinkPageForm.js | 2 +-
.../src/components/MeetingInfoForm.js | 54 +++++++++-------
react-whenMeet/src/routes/UserTimeInfo.js | 7 +--
5 files changed, 66 insertions(+), 61 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index 2cb81d8..6f02017 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -79,7 +79,7 @@ function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//二쇱감 ��
}
// console.log(startDate);
// console.log(endDate);
- setUsingDate([{startDate:startDate, endDate:endDate}])
+ setUsingDate({startDate:startDate, endDate:endDate})
};
const handleClick = (newDate) => {
diff --git a/react-whenMeet/src/components/HomeParticipateForm.js b/react-whenMeet/src/components/HomeParticipateForm.js
index 8353487..7a031d4 100644
--- a/react-whenMeet/src/components/HomeParticipateForm.js
+++ b/react-whenMeet/src/components/HomeParticipateForm.js
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import Input from "./Input";
import Button from "./Button";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
import axios from "axios";
function HomeParticipateForm() {
@@ -9,8 +9,7 @@ function HomeParticipateForm() {
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const navigate = useNavigate();
- const location = useLocation();
- const { id } = location.state;
+ const { id } = useParams();
const handleName = (event) => {
setName(event.target.value);
@@ -22,11 +21,13 @@ function HomeParticipateForm() {
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('�대� 議댁옱�섎뒗 �대쫫�낅땲��.')
+ try{
+ const response = await axios.get(`http://43.200.79.42:3000/meetings/${id}/participants/?name=${name}`);
+ return false;
+ }
+ catch(err){
+ return true;
}
- return response.data.name;
}
const newHandleSubmit = async (event) => {
@@ -35,16 +36,22 @@ function HomeParticipateForm() {
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 } });
+ let checkParticipant = await checkParticipantExistence();
+ if(checkParticipant){
+ 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);
+ }
}
- catch (error) {
- console.error(error);
+ else{
+ alert('�대� 議댁옱�섎뒗 �대쫫�낅땲��.');
}
}
};
@@ -59,27 +66,22 @@ function HomeParticipateForm() {
name : name,
password : password
});
- if(response.status === 401 ){
- alert('�대쫫 �먮뒗 Password瑜� �섎せ �낅젰�섏��듬땲��');
- return;
- }
- else if(response.status === 404){
- alert('�쇱튂�섎뒗 李멸��먭� 議댁옱�섏� �딆뒿�덈떎');
- return;
- }
- //navigate('UserTimeInfo', { state: { id } });
+ navigate('UserTimeInfo', { state: { id } });
}
catch (error) {
if (error.response) {
if (error.response.status === 401) {
- alert('�대쫫 �먮뒗 Password瑜� �섎せ �낅젰�섏��듬땲��');
+ alert('Password瑜� �섎せ �낅젰�섏��듬땲��');
} else if (error.response.status === 404) {
- alert('�쇱튂�섎뒗 李멸��먭� 議댁옱�섏� �딆뒿�덈떎');
- } else {
+ alert('�대떦�섎뒗 �대쫫�� 議댁옱�섏� �딆뒿�덈떎');
+ }
+ else if(error.response.status === 400){
+ alert("鍮꾨�踰덊샇瑜� �ㅼ젙�섏뀲�듬땲��. 鍮꾨�踰덊샇瑜� �낅젰�댁＜�몄슂")
+ }
+ else {
alert(`Unexpected status code: ${error.response.status}`);
}
} else {
- // Handle other types of errors
console.error(error);
}
@@ -102,7 +104,7 @@ function HomeParticipateForm() {
type="password"
value={password}
onChange={handlePassword}
- placeholder="Password"
+ placeholder="Password(�좏깮)"
/>
<Input
type="text"
diff --git a/react-whenMeet/src/components/LinkPageForm.js b/react-whenMeet/src/components/LinkPageForm.js
index c676b0c..8ee09f3 100644
--- a/react-whenMeet/src/components/LinkPageForm.js
+++ b/react-whenMeet/src/components/LinkPageForm.js
@@ -24,7 +24,7 @@ function LinkPageForm() {
const handleSubmit = async(event) => {
event.preventDefault();
console.log({id});
- navigate(`/HomeParticipate/${id}`,{state : {id}});
+ navigate(`/HomeParticipate/${id}`);
}
return (
diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js
index a9cee24..ff5c86e 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -11,27 +11,16 @@ function MeetingInfoForm() {
const [endVote, setEndVote] = useState("");
const [start, setStart] = useState();
const [end, setEnd] = useState();
- const toDo = [
- '�좏깮',
- '�앹궗',
- '怨듬�',
- '��湲�',
- '湲고�'
- ];
const navigate = useNavigate();
const location = useLocation();
const { title, password } = location.state;
- const [usingDate, setUsingDate] = useState([]);
+ const [usingDate, setUsingDate] = useState({});
const handleOnChange = (event) => {
setMeetingPurpose(event.target.value);
}
- const handleCalendar = (value) => {
- console.log('Selected Date:', value);
- };
-
const handleNumber = (event) => {
setNumber(event.target.value);
}
@@ -53,25 +42,39 @@ function MeetingInfoForm() {
if (meetingPurpose === "" || meetingPurpose === "�좏깮") {
alert("紐⑹쟻�� �좏깮�섏꽭��");
- } else {
+ }
+ else {
+ let transformedPurpose = meetingPurpose; // 湲곕낯媛믪� 洹몃�濡� �좎�
+
+ if (meetingPurpose === "�ㅽ꽣��") {
+ transformedPurpose = 'STUDY';
+ } else if (meetingPurpose === '�뚯쓽') {
+ transformedPurpose = 'MEETING';
+ } else if (meetingPurpose === '��湲�') {
+ transformedPurpose = 'PLAYING';
+ } else if (meetingPurpose === '�앹궗') {
+ transformedPurpose = 'FOOD';
+ } else if (meetingPurpose === '湲고�') {
+ transformedPurpose = 'ETC';
+ }
try {
const response = await axios.post("http://43.200.79.42:3000/meetings", {
title: title,
adminPassword: password,
- purpose: meetingPurpose,
- startDate: start,
- endDate: end,
+ purpose: transformedPurpose,
+ startDate: usingDate.startDate,
+ endDate: usingDate.endDate,
maxParticipants: number,
voteExpiresAt: endVote
});
const id = response.data.id;
- navigate("LinkPage",{state : {id}});
+ navigate("LinkPage", { state: { id } });
} catch (error) {
console.error("Error sending data to the backEnd", error);
}
+ console.log(meetingPurpose);
}
};
-
return (
<form onSubmit={handleSubmit}>
<div>
@@ -80,25 +83,28 @@ function MeetingInfoForm() {
<label>
紐⑹쟻:
<select value={meetingPurpose} onChange={handleOnChange}>
- {toDo.map((todo, index) => (
- <option key={index}>{todo}</option>
- ))}
+ <option value="�좏깮">�좏깮</option>
+ <option value="�ㅽ꽣��">�ㅽ꽣��</option>
+ <option value="�뚯쓽">�뚯쓽</option>
+ <option value="��湲�">��湲�</option>
+ <option value="�앹궗">�앹궗</option>
+ <option value="湲고�">湲고�</option>
</select>
</label>
</div>
- <Calendar onChange={handleCalendar} usingDate={usingDate} setUsingDate={setUsingDate} />
+ <Calendar usingDate={usingDate} setUsingDate={setUsingDate} />
<div className="timeStartEnd">
�쒖옉:
<Input
- type="date"
+ type="time"
value={start}
onChange={handleStart}
placeholder="�쒖옉"
/>
醫낅즺:
<Input
- type="date"
+ type="time"
value={end}
onChange={handleEnd}
placeholder="醫낅즺"
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 3b09b48..0257ab5 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -3,16 +3,13 @@ import Button from "../components/Button";
import CalendarWeek2 from "../components/CalendarWeek2"
import "../styles/HomeMake.css"
import axios from "axios";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
function UserTimeInfo() {
const [state, setState] = useState(true);
const [availableSchedules, setAvailableSchedules] = useState([]);
const [availableTimes, setAvailableTimes] = useState([]);
-
-
- const location = useLocation();
- const {id} = location.state;
+ const {id} = useParams();
const handleState = () => {
setState((state) => !state);
--
GitLab