From fa0c840395a73eb3a30927179270748e99335e43 Mon Sep 17 00:00:00 2001 From: mjms0214 Date: Sun, 20 Aug 2023 21:36:38 +0900 Subject: [PATCH] [feat/#54] modify API URL & pagination --- package-lock.json | 112 ++++++++++++++++++++++++++--- src/components/Assignment.tsx | 11 ++- src/components/AssignmentPage.tsx | 12 ++-- src/components/Home.tsx | 8 ++- src/components/LecturePage.tsx | 10 +-- src/components/Login.tsx | 12 ++-- src/components/MyPage.tsx | 116 +++++++++++++++++++++--------- src/components/Navbar.tsx | 5 +- src/components/NewAssignment.tsx | 6 +- src/components/Paging.tsx | 8 +-- src/components/Score.tsx | 24 +++---- src/components/SignUp.tsx | 8 +-- src/components/Submit.tsx | 6 +- src/utils/api.tsx | 15 ++++ src/utils/env.tsx | 2 + 15 files changed, 258 insertions(+), 97 deletions(-) create mode 100644 src/utils/api.tsx create mode 100644 src/utils/env.tsx diff --git a/package-lock.json b/package-lock.json index bf049ec..74e0e06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "bootstrap": "^5.2.3", + "http-proxy-middleware": "^2.0.6", "moment": "^2.29.4", "react": "^18.2.0", "react-datepicker": "^4.12.0", @@ -2279,6 +2280,14 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, + "node_modules/@types/http-proxy": { + "version": "1.17.11", + "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.11.tgz", + "integrity": "sha512-HC8G7c1WmaF2ekqpnFq626xd3Zz0uvaqFmBJNRZCGEZCXkvSdJoNFn/8Ygbd9fKNQj8UzLdCETaI0UWPAjK7IA==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/jest": { "version": "27.5.2", "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz", @@ -9717,17 +9726,79 @@ } }, "node_modules/http-proxy-middleware": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz", - "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz", + "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==", "dependencies": { - "http-proxy": "^1.16.2", - "is-glob": "^4.0.0", - "lodash": "^4.17.5", - "micromatch": "^3.1.9" + "@types/http-proxy": "^1.17.8", + "http-proxy": "^1.18.1", + "is-glob": "^4.0.1", + "is-plain-obj": "^3.0.0", + "micromatch": "^4.0.2" }, "engines": { - "node": ">=4.0.0" + "node": ">=12.0.0" + }, + "peerDependencies": { + "@types/express": "^4.17.13" + }, + "peerDependenciesMeta": { + "@types/express": { + "optional": true + } + } + }, + "node_modules/http-proxy-middleware/node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/http-proxy-middleware/node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/http-proxy-middleware/node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/http-proxy-middleware/node_modules/micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dependencies": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/http-proxy-middleware/node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" } }, "node_modules/http-signature": { @@ -10400,6 +10471,17 @@ "node": ">=0.10.0" } }, + "node_modules/is-plain-obj": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", + "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -20838,6 +20920,20 @@ "node": ">=6" } }, + "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz", + "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==", + "dependencies": { + "http-proxy": "^1.16.2", + "is-glob": "^4.0.0", + "lodash": "^4.17.5", + "micromatch": "^3.1.9" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/webpack-dev-server/node_modules/import-local": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", diff --git a/src/components/Assignment.tsx b/src/components/Assignment.tsx index 0ab624d..e939eb4 100644 --- a/src/components/Assignment.tsx +++ b/src/components/Assignment.tsx @@ -4,8 +4,7 @@ import "../style/home.css"; import Modal from "../props/Modal"; import Navbar from "./Navbar"; import { navPropsType } from "./Navbar"; -import axios from "axios"; -import { stringify } from "querystring"; +import api from "../utils/api"; const Assignment: FC = () => { interface UrlResp { @@ -32,16 +31,16 @@ const Assignment: FC = () => { const [isProfessor, setIsProfessor] = useState(false); useEffect(() => { - axios - .get("http://moaroom-back.duckdns.org:8080/url/" + user_id) + api.client + .get("/urls/" + user_id) .then((response) => { setUrl(response.data.containerAddress); }); }, []); useEffect(() => { - axios - .get("http://moaroom-back.duckdns.org:8080/user/" + user_id) + api.client + .get("/users/" + user_id) .then((response) => { if (response.data.role == 2) { setIsProfessor(true); diff --git a/src/components/AssignmentPage.tsx b/src/components/AssignmentPage.tsx index dfa4175..98de1d5 100644 --- a/src/components/AssignmentPage.tsx +++ b/src/components/AssignmentPage.tsx @@ -1,13 +1,13 @@ import React, { FC, useState, useCallback, useEffect } from "react"; import { useNavigate, useLocation } from "react-router-dom"; import { useForm } from "react-hook-form"; -import axios from "axios"; import "../style/LecturePage.css"; import Paging from "../components/Paging"; import Assignment from "../props/Assignment"; import AssignmentModal from "../props/AssignmentModal"; import Navbar from "./Navbar"; import { navPropsType } from "./Navbar"; +import api from "../utils/api"; export type AssignmentType = { lecture_id: string; @@ -56,8 +56,8 @@ const AssignmentPage: FC = () => { }; const deleteAssignment = (data: any) => { const title = data.title; - axios - .delete("http://moaroom-back.duckdns.org:8080/assignment/" + title) + api.client + .delete("/assignments/" + title) .then(function(response) { if (response.data == "삭제 성공") { alert("과제가 삭제되었습니다."); @@ -74,8 +74,8 @@ const AssignmentPage: FC = () => { useEffect(() => { var tmpList: AssignmentPropType[] = []; - axios - .get("http://moaroom-back.duckdns.org:8080/assignment/all/" + user_id) + api.client + .get("/assignments/users/" + user_id) .then((response) => { for (let i = 0; i < response.data.length; i++) { if (lecture_id == response.data[i].lecture_id) { @@ -202,7 +202,7 @@ const AssignmentPage: FC = () => { )} { assignmentPropsList == null &&( - + ) } diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 2ba77a2..f3effb3 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -5,8 +5,12 @@ import { navPropsType } from "./Navbar"; import { useLocation } from "react-router-dom"; const Home: FC = () => { const location = useLocation(); - const user_id = location.state.user_id; - const isProfessor = location.state.isProfessor; + var user_id = null; + var isProfessor = null; + if(localStorage.getItem("isLogin")){ + user_id = location.state.user_id; + isProfessor = location.state.isProfessor; + } return ( <>
diff --git a/src/components/LecturePage.tsx b/src/components/LecturePage.tsx index 435a044..6f3e04f 100644 --- a/src/components/LecturePage.tsx +++ b/src/components/LecturePage.tsx @@ -1,17 +1,17 @@ import React, { FC, useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; import "../style/LecturePage.css"; -import axios from "axios"; import Lecture from "../props/Lecture"; import Paging from "../components/Paging"; import Navbar from "./Navbar"; import { navPropsType } from "./Navbar"; +import api from "../utils/api"; export type LectureType = { lecture_id: string; title: string; - professor_name: string; room: number; + professor_name: string; enroll: Boolean | null; }; @@ -21,8 +21,8 @@ const LecturePage: FC = () => { const [lectureList, setLectureList] = useState([]); const [isProfessor, setIsProfessor] = useState(true); useEffect(() => { - axios - .get("http://moaroom-back.duckdns.org:8080/lecture/all/" + user_id) + api.client + .get("/lectures/users/" + user_id) .then((response) => { setLectureList(response.data); if (response.data.length != 0 && response.data[0].enroll != null) { @@ -73,7 +73,7 @@ const LecturePage: FC = () => { ))} { lectureList != null && ( - + ) }
diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 914d9d5..e53d690 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -1,12 +1,11 @@ import React, { FC, useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import "../style/home.css"; -import axios from "axios"; import { ToastContainer, toast, Flip } from "react-toastify"; import "react-toastify/dist/ReactToastify.min.css"; import { useNavigate } from "react-router"; import Navbar from "./Navbar"; -import navPropsType from "./Navbar"; +import api from "../utils/api"; const Login: FC = (): JSX.Element => { const navigate = useNavigate(); const [loginInfo, setLoginInfo] = useState({ @@ -33,8 +32,8 @@ const Login: FC = (): JSX.Element => { }); }; useEffect(() => { - axios - .get("http://moaroom-back.duckdns.org:8080/user/" + user_id) + api.client + .get("/users/" + user_id) .then((response) => { if (response.data.role == 2) { setIsProfessor(true); @@ -49,9 +48,8 @@ const Login: FC = (): JSX.Element => { }; console.log(params); - // TODO 서버 나오면 디버깅 필요 - axios - .post("http://moaroom-back.duckdns.org:8080/login", params) + api.client + .post("/login", params) .then(function(response) { if (response.data === "") { alert("로그인 정보가 없습니다. 다시 로그인 해주세요."); diff --git a/src/components/MyPage.tsx b/src/components/MyPage.tsx index 8c315c1..b7c9428 100644 --- a/src/components/MyPage.tsx +++ b/src/components/MyPage.tsx @@ -1,12 +1,11 @@ import React, { FC, useState, useCallback, useEffect } from "react"; import { useForm } from "react-hook-form"; import { useNavigate, useLocation } from "react-router-dom"; -import axios from "axios"; import "../style/home.css"; import MyPageLectureList, { LectureType } from "../props/MyPageLectureList"; import Modal from "../props/Modal"; import Navbar from "./Navbar"; -import { isDOMComponent } from "react-dom/test-utils"; +import api from "../utils/api"; const MyPage: FC = () => { const { register, @@ -52,15 +51,18 @@ const MyPage: FC = () => { const [userNum, setUserNum] = useState(""); useEffect(() => { - axios - .get("http://moaroom-back.duckdns.org:8080/lecture/all/" + user_id) + api.client + .get("/lectures/users/" + user_id) .then((response) => { + console.log(response) setLectureList(response.data); + }).catch(function(error) { + console.log(error) }); }, [lectureList, iscreateModalOpen, isdeleteModalOpen]); // refresh 가능하도록 useEffect(() => { - axios - .get("http://moaroom-back.duckdns.org:8080/user/" + user_id) + api.client + .get("/users/" + user_id) .then((response) => { setUserInfo(response.data); setName(response.data.name); @@ -72,20 +74,69 @@ const MyPage: FC = () => { const navigate = useNavigate(); // 유저 수정/탈퇴 관련 - // const updateProfile = () => {}; - // const deleteProfile = () => {}; + const updateProfile = (data: any) => { + let params = { + id: data.id, + password: user_id, + name: data.name, + user_num: data.user_num, + role:data.role + }; + console.log(params); + + api.client + .post("/users/"+user_id, params) + .then(function(response) { + if (response.data === null) { + alert("정보 수정 완료"); + setcreateModalOpen(!iscreateModalOpen); + } else { + alert("수정 실패"); + } + }) + .catch(function(error) { + console.log(error); + }); + }; + const deleteProfile = () => { + let params = { + user_id: user_id + }; + console.log(params); + + api.client + .post("/users/"+user_id, {data: params}) + .then(function(response) { + if (response.data === "삭제 성공") { + alert("삭제 성공"); + localStorage.removeItem("isLogin") + localStorage.removeItem("auth") + setTimeout(() => { + navigate("/login", { + state: { user_id: null, isProfessor: null }, + }); + }, 1000); + } else { + alert("삭제 실패"); + setcreateModalOpen(!iscreateModalOpen); + } + }) + .catch(function(error) { + console.log(error); + }); + }; const createLecture = (data: any) => { let params = { title: data.title, - professor_id: user_id, + professorId: user_id, room: data.room, - room_count: data.room_count, + roomCount: data.room_count, }; console.log(params); - axios - .post("http://moaroom-back.duckdns.org:8080/lecture/new", params) + api.client + .post("/lecture", params) .then(function(response) { if (response.data === "") { alert("강의 생성 안 됨"); @@ -95,7 +146,7 @@ const MyPage: FC = () => { } }) .catch(function(error) { - console.log("delete" + error); + console.log(error); }); }; const deleteLecture = (data: any) => { @@ -103,25 +154,21 @@ const MyPage: FC = () => { lecture_title: data.lecture_title, lecture_room: data.lecture_room, }; - // TODO: 강의 삭제 기능 구현 - // axios - // .delete( - // "http://moaroom-back.duckdns.org:8080/lecture/" + - // params.lecture_title + - // "/" + - // params.lecture_room - // ) - // .then(function(response) { - // if (response.data === "") { - // alert("강의 삭제 안 됨"); - // } else { - // alert("강의 삭제 완료"); - // setdeleteModalOpen(!isdeleteModalOpen); - // } - // }) - // .catch(function(error) { - // console.log(error); - // }); + //TODO: 강의 삭제 기능 구현 + api.client + .delete( + "/lectures/title-class", {data : params}) + .then(function(response) { + if (response.data === "삭제 성공") { + alert("강의 삭제 완료"); + setdeleteModalOpen(!isdeleteModalOpen); + } else { + alert("강의 삭제 안 됨"); + } + }) + .catch(function(error) { + console.log(error); + }); }; return ( @@ -270,8 +317,7 @@ const MyPage: FC = () => { float: "right", }} > - {/* TODO: 유저 수정/탈퇴 관련 */} - {/* */} + diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 6e59406..04f6746 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -12,7 +12,8 @@ const Navbar = ({ navProps }: { navProps: navPropsType }) => { const { user_id, isProfessor } = navProps; const navigate = useNavigate(); const logout = () => { - localStorage.removeItem("isLogin"); + localStorage.removeItem("isLogin") + localStorage.removeItem("auth") navigate("/home", { state: { user_id: user_id, isProfessor: isProfessor }, }); @@ -63,7 +64,7 @@ const Navbar = ({ navProps }: { navProps: navPropsType }) => { }} >
-

Logo

+