diff --git a/.eslintrc.js b/.eslintrc.js
index f0c09b29..1285accb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -33,6 +33,7 @@ module.exports = {
"react/react-in-jsx-scope": "off",
"react/no-unescaped-entities": "off",
"no-unused-vars": "off",
+ "unused-imports/no-unused-imports": "error",
"prefer-const": "error",
"react/no-unstable-nested-components": "warn",
},
diff --git a/cypress/integration/e2e/e2e_home.js b/cypress/integration/e2e/e2e_home.js
index a3fc6364..85174f04 100644
--- a/cypress/integration/e2e/e2e_home.js
+++ b/cypress/integration/e2e/e2e_home.js
@@ -22,9 +22,6 @@ describe("Home page e2e test", () => {
});
it("Navigate to recruiting page", () => {
cy.visit("/");
- cy.get("button").contains("加入我們").click();
- cy.url().should("include", "/recruiting");
- cy.go(-1);
cy.get("button").contains("夥伴招募").click();
cy.url().should("include", "/recruiting");
});
diff --git a/package.json b/package.json
index 59400e00..3f63c984 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"react-sortable-hoc": "^2.0.0",
"react-spinners": "^0.11.0",
"react-table-drag-select": "^0.3.1",
+ "react-use": "^17.4.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"uuid": "^8.3.2",
@@ -67,19 +68,24 @@
"last 1 safari version"
]
},
+ "resolutions": {
+ "//": "See https://github.com/facebook/create-react-app/issues/11773",
+ "react-error-overlay": "6.0.9"
+ },
"devDependencies": {
- "cypress": "9.6.0",
- "eslint-plugin-cypress": "^2.12.1",
"@babel/eslint-parser": "^7.17.0",
"@babel/preset-react": "^7.16.7",
+ "cypress": "9.6.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "^7.0.1",
+ "eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^8.0.1",
"lint-staged": "^12.4.1",
- "prettier": "^2.6.2"
+ "prettier": "^2.6.2",
+ "react-error-overlay": "6.0.9"
}
}
diff --git a/src/App.js b/src/App.js
index 23688257..1f66932c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
import { React } from "react";
-import { ChakraProvider, useColorModeValue, Box, useMediaQuery } from "@chakra-ui/react";
+import { ChakraProvider, useColorModeValue, Box } from "@chakra-ui/react";
import theme from "theme";
import HeaderBar from "components/HeaderBar";
import Footer from "components/Footer";
@@ -25,8 +25,6 @@ if (process.env.REACT_APP_ENV === "prod") {
function App(props) {
const { code } = useParams();
- const [isMobile] = useMediaQuery("(max-width: 1000px)");
- const miniFooterPages = ["home", "course", "courseinfo", "user/my", "user/info", "recruiting"];
const content = (route) => {
switch (route) {
@@ -61,10 +59,10 @@ function App(props) {
cacheLocation={"localstorage"}
>
-
+
{content(props.route)}
-
+
diff --git a/src/actions/index.js b/src/actions/index.js
index abcd0dd6..fe8dd4a3 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -8,6 +8,7 @@ import {
LOG_IN_SUCCESS,
LOG_OUT_SUCCESS,
SET_DISPLAY_TAGS,
+ SET_HOVER_COURSE,
} from "constants/action-types";
import instance from "api/axios";
@@ -20,6 +21,7 @@ const logOut = () => ({ type: LOG_OUT_SUCCESS });
const logIn = (user_data) => ({ type: LOG_IN_SUCCESS, payload: user_data });
const setNewDisplayTags = (new_display_tags) => ({ type: SET_DISPLAY_TAGS, payload: new_display_tags });
const setBatchSize = (new_batch_size) => ({ type: SET_BATCH_SIZE, payload: new_batch_size });
+const setHoveredCourse = (course) => ({ type: SET_HOVER_COURSE, payload: course });
// data =
// when filter_name == 'department', arr of dept_code (4-digits),
@@ -55,4 +57,5 @@ export {
setFilter,
setFilterEnable,
setBatchSize,
+ setHoveredCourse,
};
diff --git a/src/components/CourseInfoRow.js b/src/components/CourseInfoRow.js
index cce6adec..240ec02f 100644
--- a/src/components/CourseInfoRow.js
+++ b/src/components/CourseInfoRow.js
@@ -18,8 +18,9 @@ import {
Tooltip,
useToast,
Collapse,
- useMediaQuery,
- IconButton,
+ useBreakpointValue,
+ Text,
+ HStack,
} from "@chakra-ui/react";
import { CourseDrawerContainer } from "containers/CourseDrawerContainer";
import { FaPlus, FaHeart, FaInfoCircle } from "react-icons/fa";
@@ -33,6 +34,27 @@ import { useNavigate } from "react-router-dom";
const LOCAL_STORAGE_KEY = "NTU_CourseNeo_Course_Table_Key";
+function DeptBadge({ course }) {
+ if (!course.department || course.department.length === 0 || (course.department.length === 1 && course.department[0].length === 0)) {
+ return <>;
+ }
+ if (course.department.length > 1) {
+ const dept_str = course.department.join(", ");
+ return (
+
+
+ 多個系所
+
+
+ );
+ }
+ return (
+
+ {course?.department[0] ?? ""}
+
+ );
+}
+
function CourseInfoRow({ courseInfo, selected, isfavorite, displayTags, displayTable }) {
const dispatch = useDispatch();
const navigate = useNavigate();
@@ -44,8 +66,6 @@ function CourseInfoRow({ courseInfo, selected, isfavorite, displayTags, displayT
const toast = useToast();
const { user, isLoading, getAccessTokenSilently } = useAuth0();
- const [isMobile] = useMediaQuery("(max-width: 760px)");
-
// TODO: better naming
const handleButtonClick = async (course) => {
if (!isLoading) {
@@ -203,165 +223,67 @@ function CourseInfoRow({ courseInfo, selected, isfavorite, displayTags, displayT
}
};
- const renderDeptBadge = (course) => {
- if (!course.department || course.department.length === 0 || (course.department.length === 1 && course.department[0].length === 0)) {
- return <>;
- }
- if (course.department.length > 1) {
- const dept_str = course.department.join(", ");
- return (
-
-
- 多個系所
-
-
- );
- }
- return (
-
- {courseInfo.department[0]}
-
- );
- };
- if (isMobile) {
- return (
-
-
-
-
-
-
- {courseInfo.course_name}
-
-
- {courseInfo.teacher}
-
-
-
- {renderDeptBadge(courseInfo)}
-
-
- {courseInfo.id}
-
-
-
- {courseInfo.credit}
-
-
-
-
- {courseInfo.time_loc}
-
-
-
- {displayTags.map((tag, index) => {
- if (tag === "area") {
- let display_str = "";
- let tooltip_str = "";
- if (courseInfo.area.length === 0) {
- display_str = "無";
- tooltip_str = info_view_map[tag].name + ": 無";
- } else if (courseInfo.area.length > 1) {
- display_str = "多個領域";
- tooltip_str = courseInfo.area.map((area) => info_view_map[tag].map[area].full_name).join(", ");
- } else if (courseInfo[tag][0] === "g") {
- display_str = "通識 " + info_view_map[tag].map[courseInfo[tag][0]].code;
- tooltip_str = info_view_map[tag].name + ": " + info_view_map[tag].map[courseInfo[tag][0]].full_name;
- } else {
- display_str = info_view_map[tag].map[courseInfo[tag][0]].full_name;
- tooltip_str = info_view_map[tag].name + ":" + info_view_map[tag].map[courseInfo[tag][0]].full_name;
- }
- return (
-
-
-
- {display_str}
-
-
- );
- }
- return (
-
-
-
- {"map" in info_view_map[tag] ? info_view_map[tag].map[courseInfo[tag]] : courseInfo[tag]}
-
-
- );
- })}
-
-
-
-
-
- }
- variant="ghost"
- onClick={() => {
- navigate(`/courseinfo/${courseInfo._id}`);
- }}
- />
-
-
-
-
-
-
-
-
- );
- }
-
return (
-
-
-
+
+
+
{courseInfo.id}
- {renderDeptBadge(courseInfo)}
+
-
- {courseInfo.course_name}
-
-
-
- {courseInfo.credit}
-
-
-
+
+
+ {courseInfo.course_name}
+
+
+ {courseInfo.teacher}
+
+
+
+
+
+ {courseInfo.id}
+
+
+
+
+ {courseInfo.credit}
+
+
+
+
+
+
+
{courseInfo.teacher}
-
+
{courseInfo.time_loc}
-
+
{displayTags.map((tag, index) => {
if (tag === "area") {
let display_str = "";
@@ -399,21 +321,23 @@ function CourseInfoRow({ courseInfo, selected, isfavorite, displayTags, displayT
})}
-
+
}
variant="ghost"
onClick={() => {
navigate(`/courseinfo/${courseInfo._id}`);
}}
>
- 詳細
+
+
+ 詳細
+
-
);
}
+function SettingSwitch({ label, setterFunc, defaultValue, isDisabled }) {
+ if (isDisabled) {
+ return <>;
+ }
+ return (
+
+ {
+ setterFunc(e.currentTarget.checked);
+ }}
+ isDisabled={isDisabled}
+ />
+
+ {label}
+ {isDisabled ? (
+
+ 即將推出
+
+ ) : (
+ <>
+ )}
+
+
+ );
+}
+
+function CourseSearchInput({ displayPanel }) {
+ const dispatch = useDispatch();
+ const toast = useToast();
+
+ const available_tags = ["required", "total_slot", "enroll_method", "area"];
+ const search_filters = useSelector((state) => state.search_filters);
+ const search_settings = useSelector((state) => state.search_settings);
+ const search_filters_enable = useSelector((state) => state.search_filters_enable);
+ const display_tags = useSelector((state) => state.display_tags);
+
+ // filters local states
+ const [selectedTime, setSelectedTime] = useState(mapStateToTimeTable(search_filters.time));
+ const [selectedDept, setSelectedDept] = useState(search_filters.department);
+ const [selectedType, setSelectedType] = useState(search_filters.category);
+
+ const [timeFilterOn, setTimeFilterOn] = useState(search_filters_enable.time);
+ const [deptFilterOn, setDeptFilterOn] = useState(search_filters_enable.department);
+ const [catFilterOn, setCatFilterOn] = useState(search_filters_enable.category);
+ const [enrollFilterOn, setEnrollFilterOn] = useState(search_filters_enable.enroll_method);
+
+ // search_settings local states
+ const [show_selected_courses, set_show_selected_courses] = useState(search_settings.show_selected_courses);
+ const [only_show_not_conflicted_courses, set_only_show_not_conflicted_courses] = useState(search_settings.only_show_not_conflicted_courses);
+ const [sync_add_to_nol, set_sync_add_to_nol] = useState(search_settings.sync_add_to_nol);
+ const [strict_search_mode, set_strict_search_mode] = useState(search_settings.strict_search_mode);
+
+ useMount(() => {
+ setSelectedTime(mapStateToTimeTable(search_filters.time));
+ });
+
+ const set_enroll_method = (e) => {
+ // console.log(e.currentTarget.value)
+ const new_enroll_method = e.currentTarget.value;
+ const idx = search_filters.enroll_method.indexOf(new_enroll_method);
+ if (idx === -1) {
+ //add
+ dispatch(setFilter("enroll_method", [...search_filters.enroll_method, new_enroll_method]));
+ } else {
+ // remove
+ dispatch(
+ setFilter(
+ "enroll_method",
+ search_filters.enroll_method.filter((item) => item !== new_enroll_method)
+ )
+ );
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+ 篩選
+
+
+
+
+ 設定
+
+
+
+
+
+ {/* Filters: time, department, type of courses */}
+
+
+
+ {
+ setTimeFilterOn(e.currentTarget.checked);
+ dispatch(setFilterEnable("time", e.currentTarget.checked));
+ }}
+ />
+
+
+
+
+
+ {
+ setDeptFilterOn(e.currentTarget.checked);
+ dispatch(setFilterEnable("department", e.currentTarget.checked));
+ }}
+ />
+
+
+
+
+
+ {
+ setCatFilterOn(e.currentTarget.checked);
+ dispatch(setFilterEnable("category", e.currentTarget.checked));
+ }}
+ />
+
+
+
+
+
+ {
+ setEnrollFilterOn(e.currentTarget.checked);
+ dispatch(setFilterEnable("enroll_method", e.currentTarget.checked));
+ }}
+ />
+
+
+
+
+
+
+ {/* Settings */}
+
+
+
+ 課表設定
+
+
+
+
+
+
+
+
+
+
+
+ 自訂顯示欄位
+
+
+ {available_tags.map((tag) => {
+ // console.log(displayTags)
+ const selected = display_tags.includes(tag);
+ return (
+ {
+ dispatch(setNewDisplayTags([...display_tags.filter((t) => t !== tag)]));
+ }
+ : () => {
+ dispatch(setNewDisplayTags([...display_tags, tag]));
+ }
+ }
+ transition="all 200ms ease-in-out"
+ >
+
+ {info_view_map[tag].name}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ );
+}
+
export default CourseSearchInput;
diff --git a/src/components/CourseTableCard/CourseTableCard.js b/src/components/CourseTableCard/CourseTableCard.js
index 3f4f97f8..72407021 100644
--- a/src/components/CourseTableCard/CourseTableCard.js
+++ b/src/components/CourseTableCard/CourseTableCard.js
@@ -1,5 +1,5 @@
import * as React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
import { arrayMoveImmutable as arrayMove } from "array-move";
import "components/CourseTableCard/CourseTableCard.css";
import {
@@ -36,29 +36,27 @@ function CourseBox({ courseId, courseData, isOpen, hoverId }) {
}
return (
- <>
-
-
-
-
+
+
+
);
}
-function CourseTableCard({ courseTime, courseData, day, interval, grow, hoverId, isHover }) {
+function CourseTableCard({ courseInitialOrder, courseData, day, interval, hoverId }) {
const dispatch = useDispatch();
const course_table = useSelector((state) => state.course_table);
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -69,8 +67,8 @@ function CourseTableCard({ courseTime, courseData, day, interval, grow, hoverId,
when open Popover, overwrite the courseList by courseOrder
when click save, overwrite the courseOrder by courseList
*/
- // initial state or sorting result
- const [courseOrder, setCourseOrder] = useState(courseTime);
+ // initial order of courses
+ const courseOrder = courseInitialOrder;
// temp state (buffer), used for decide the NEW course order / dispatch to server, when press "save"
const [courseList, setCourseList] = useState([]);
const [prepareToRemoveCourseId, setPrepareToRemoveCourseId] = useState([]);
@@ -160,38 +158,6 @@ function CourseTableCard({ courseTime, courseData, day, interval, grow, hoverId,
setCourseList([]);
};
- // set state and force re-render
- useEffect(() => {
- setCourseOrder(courseTime);
- }, [courseTime, courseData, day, interval, grow, hoverId, isHover]); // depend on all props
-
- // debugger
- // useEffect(()=>{console.log('CourseTableCard--courseOrder: ', courseOrder);},[courseOrder])
- // useEffect(()=>{console.log('CourseTableCard--courseList: ', courseList);},[courseList])
- // useEffect(()=>{console.log('CourseTableCard--prepareToRemoveCourseId: ', prepareToRemoveCourseId);},[prepareToRemoveCourseId])
-
- if (isHover) {
- const course = courseData;
- return (
-
- );
- }
-
return (
<>
);
+const DragHandle = sortableHandle(() => );
- const SortableElement = sortableElement(({ key, course }) => (
-
-
-
+const SortableElement = sortableElement(({ course, prepareToRemoveCourseId, handlePrepareToDelete }) => {
+ const navigate = useNavigate();
+ return (
+
+
+
{course.id}
{course.course_name}
- {RenderNolContentBtn(course, "", key)}
-
+ }
+ size="sm"
+ onClick={() => {
+ navigate(`/courseinfo/${course._id}`);
+ }}
+ />
+
}
size="sm"
colorScheme="red"
- key={"Sortable_" + key + "_IconButton"}
onClick={() => {
handlePrepareToDelete(course._id);
}}
/>
- ));
+ );
+});
- const SortableContainer = sortableContainer(({ children }) => {
- return {children};
- });
+const SortableContainer = sortableContainer(({ children }) => {
+ return {children};
+});
+function SortablePopover({ courseData, courseList, prepareToRemoveCourseId, onSortEnd, handlePrepareToDelete }) {
return (
{courseList.map((courseId, index) => {
const course = courseData[courseId];
- return ;
+ return (
+
+ );
})}
);
diff --git a/src/components/FilterModals/CategoryFilterModal.js b/src/components/FilterModals/CategoryFilterModal.js
index 3fb911b3..626a00d5 100644
--- a/src/components/FilterModals/CategoryFilterModal.js
+++ b/src/components/FilterModals/CategoryFilterModal.js
@@ -11,7 +11,7 @@ import {
Heading,
Divider,
Flex,
- useMediaQuery,
+ useBreakpointValue,
} from "@chakra-ui/react";
import { useDispatch, useSelector } from "react-redux";
import { type_list, code_map } from "data/course_type";
@@ -23,7 +23,6 @@ function CategoryFilterModal({ title, isEnabled, selectedType, setSelectedType }
const dispatch = useDispatch();
const search_filters = useSelector((state) => state.search_filters);
const { isOpen, onOpen, onClose } = useDisclosure();
- const [isMobile] = useMediaQuery("(max-width: 760px)");
const onOpenModal = () => {
// overwrite local states by redux store
@@ -99,7 +98,7 @@ function CategoryFilterModal({ title, isEnabled, selectedType, setSelectedType }
return (
<>
+
+
+
+
+
+
+
+
+
diff --git a/src/components/FilterModals/components/TimetableSelector.js b/src/components/FilterModals/components/TimetableSelector.js
index 70dbc2ce..43f37a7f 100644
--- a/src/components/FilterModals/components/TimetableSelector.js
+++ b/src/components/FilterModals/components/TimetableSelector.js
@@ -1,29 +1,28 @@
import { React } from "react";
import TableDragSelect from "react-table-drag-select";
import "react-table-drag-select/style.css";
-import { Flex, Text, useMediaQuery } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
function TimetableSelector({ selectedTime, setSelectedTime }) {
- const [isMobile] = useMediaQuery("(max-width: 760px)");
const days = ["一", "二", "三", "四", "五", "六", "日"];
const interval = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "A", "B", "C", "D"];
return (
-
+
{days.map((day, j) => {
return (
-
+
{day}
);
})}
-
+
{interval.map((interval, j) => {
return (
-
+
{interval}
);
@@ -40,10 +39,10 @@ function TimetableSelector({ selectedTime, setSelectedTime }) {
);
})}
-
+
{interval.map((interval, j) => {
return (
-
+
{interval}
);
diff --git a/src/components/Footer.js b/src/components/Footer.js
index dff54b00..4ae06435 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,129 +1,108 @@
-import { Flex, Spacer, Text, Button, ButtonGroup, useMediaQuery, Image, IconButton, HStack, Icon } from "@chakra-ui/react";
+import { Flex, Spacer, Text, Button, ButtonGroup, Image, HStack, Icon, Center } from "@chakra-ui/react";
import { FaCodeBranch, FaGithub, FaHeartbeat } from "react-icons/fa";
import { Link } from "react-router-dom";
import ncnLogo from "img/ncn_logo.png";
import { DiscordIcon } from "components/CustomIcons";
-function Footer({ mini }) {
- const ver = "beta (20220306)";
+function Footer() {
+ const ver = "beta (20220619)";
const handleOpenPage = (page) => {
window.open(page, "_blank");
};
- const [isMobile] = useMediaQuery("(max-width: 760px)");
return (
- {mini && isMobile ? (
- <>
-
-
-
-
-
-
-
- {ver}
-
-
-
- }
- mx="1"
- onClick={() => handleOpenPage("https://status.course.myntu.me/")}
- />
- }
- mx="1"
- onClick={() => handleOpenPage("https://discord.gg/M7NrenYEbS")}
- />
- }
- mx="1"
- onClick={() => handleOpenPage("https://github.com/NTUCourse-Neo")}
- />
-
-
-
- ) : (
- <>
-
- NTUCourse Neo
+
+
+
+
+
+
+ NTUCourse Neo
+
+
+
+
+
+ {ver}
+
+
+
+
+ Made with 💖 by{" "}
+
+
+ } color="gray.300" variant="ghost" onClick={() => handleOpenPage("https://github.com/jc-hiroto")}>
+ jc-hiroto
+
+ } color="gray.300" variant="ghost" onClick={() => handleOpenPage("https://github.com/swh00tw")}>
+ swh00tw
+
+ } color="gray.300" variant="ghost" onClick={() => handleOpenPage("https://github.com/Wil0408")}>
+ Wil0408
+
+
+
+
+
+
- } color="gray.300" variant="ghost" onClick={() => handleOpenPage("https://github.com/swh00tw")}>
- swh00tw
-
- } color="gray.300" variant="ghost" onClick={() => handleOpenPage("https://github.com/Wil0408")}>
- Wil0408
-
-
- {isMobile ? <> : }
-
- }
- mx="1"
- onClick={() => handleOpenPage("https://status.course.myntu.me/")}
- >
- 服務狀態
-
- }
- mx="1"
- onClick={() => handleOpenPage("https://discord.gg/M7NrenYEbS")}
- >
- Discord
-
- }
- mx="1"
- onClick={() => handleOpenPage("https://github.com/NTUCourse-Neo")}
- >
- Github
-
-
-
- )}
+
+
+
);
}
diff --git a/src/components/HeaderBar.js b/src/components/HeaderBar.js
index 7dec1ae6..f3c00f2c 100644
--- a/src/components/HeaderBar.js
+++ b/src/components/HeaderBar.js
@@ -1,10 +1,8 @@
import React from "react";
-import { useMediaQuery } from "@chakra-ui/react";
import {
Flex,
Heading,
Button,
- Spacer,
Avatar,
AvatarBadge,
Menu,
@@ -15,232 +13,153 @@ import {
MenuDivider,
Text,
Badge,
+ HStack,
} from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";
-import { FaCheck, FaExclamation, FaBook, FaInfoCircle, FaBookmark } from "react-icons/fa";
+import { FaCheck, FaExclamation, FaBook, FaInfoCircle } from "react-icons/fa";
import { Link } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import BeatLoader from "react-spinners/BeatLoader";
import { logOut } from "actions/";
import { useDispatch } from "react-redux";
-function HeaderBar() {
- const [isMobile] = useMediaQuery("(max-width: 760px)");
+function SignInButton() {
const dispatch = useDispatch();
const { loginWithRedirect, user, isAuthenticated, isLoading, logout } = useAuth0();
- const renderSignInButton = () => {
- if (isMobile) {
- if (isLoading) {
- return } isLoading />;
- }
- if (isAuthenticated) {
- return (
- <>
-
-
- );
- }
- return (
- <>
-
-
- );
- }
- if (isLoading) {
- return } isLoading />;
- }
- if (isAuthenticated) {
- return (
- <>
-
- }>
- 最愛
-
-
-
-
- );
- }
- return (
- <>
-
- } size="md" ml="10px" mr="10px">
- 關於
-
-
- } size="md" ml="10px" mr="10px" onClick={() => loginWithRedirect()}>
- 登入 / 註冊
-
-
- );
- };
- if (isMobile) {
+
+ if (isLoading) {
+ return } isLoading />;
+ }
+
+ if (isAuthenticated) {
return (
- <>
-
-
-
- NTUCourse Neo
-
-
-
- }>
- 課程
+
+
+
);
}
+
+ return (
+ <>
+
+ }
+ size="md"
+ ml="10px"
+ mr="10px"
+ onClick={() => loginWithRedirect()}
+ display={{ base: "none", md: "inline-block" }}
+ >
+ 登入 / 註冊
+
+
+ );
+}
+
+function HeaderBar() {
return (
-
-
+
+
-
+
NTUCourse Neo
- }>
+ }>
課程
-
-
- {renderSignInButton()}
+
+
+
+
+
);
diff --git a/src/components/SignUpCard.js b/src/components/SignUpCard.js
index 9e78b454..da9a31ad 100644
--- a/src/components/SignUpCard.js
+++ b/src/components/SignUpCard.js
@@ -18,7 +18,6 @@ import {
PopoverCloseButton,
ButtonGroup,
Textarea,
- useMediaQuery,
useToast,
useDisclosure,
} from "@chakra-ui/react";
@@ -48,7 +47,6 @@ function SignUpCard({ post, SignUpPostData, setSignUpPostData, fetchSignUpPostDa
const is_owner = post.is_owner;
const dispatch = useDispatch();
const toast = useToast();
- const [isMobile] = useMediaQuery("(max-width: 1000px)");
const { getAccessTokenSilently } = useAuth0();
const [isVotingPost, setIsVotingPost] = useState(0);
const [isDeletingPost, setIsDeletingPost] = useState(false);
@@ -194,12 +192,12 @@ function SignUpCard({ post, SignUpPostData, setSignUpPostData, fetchSignUpPostDa
px="8"
justifyContent="space-around"
alignItems="start"
- flexDirection={isMobile ? "column" : "row"}
+ flexDirection={{ base: "column", md: "row" }}
bg="gray.200"
borderRadius="lg"
boxShadow="lg"
>
-
+
加簽人數
{post.content.amount}
@@ -217,7 +215,7 @@ function SignUpCard({ post, SignUpPostData, setSignUpPostData, fetchSignUpPostDa
-
+
@@ -250,7 +248,7 @@ function SignUpCard({ post, SignUpPostData, setSignUpPostData, fetchSignUpPostDa
<>
)}
-
+
{post.content.comment === "" ? "無" : post.content.comment}
diff --git a/src/components/SignUpReportForm.js b/src/components/SignUpReportForm.js
new file mode 100644
index 00000000..bcd4d42f
--- /dev/null
+++ b/src/components/SignUpReportForm.js
@@ -0,0 +1,215 @@
+import {
+ Flex,
+ Text,
+ HStack,
+ Button,
+ useToast,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ PopoverArrow,
+ PopoverCloseButton,
+ ButtonGroup,
+ Badge,
+ Textarea,
+ Input,
+ Select,
+ useDisclosure,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { social_user_type_map } from "data/mapping_table";
+import { createSocialPost } from "actions/social";
+import { useAuth0 } from "@auth0/auth0-react";
+
+function SignUpReportForm({ courseId, haveSubmitted, submitCallback }) {
+ const { onOpen, onClose, isOpen } = useDisclosure();
+ const toast = useToast();
+ const dispatch = useDispatch();
+ const { getAccessTokenSilently } = useAuth0();
+ const [sendingForm, setSendingForm] = useState(false);
+ const [signUpCardForm, setSignUpCardForm] = useState({
+ user_type: "",
+ amount: "",
+ when: "",
+ rule: "",
+ comment: "",
+ });
+
+ const handleSubmitSignUpCardForm = async () => {
+ // check all fields first
+ for (const key in signUpCardForm) {
+ // check negative amount
+ if (key === "amount") {
+ const amount = parseInt(signUpCardForm[key]);
+ if (amount < 0) {
+ toast({
+ title: "加簽人數請填入大於0的數字",
+ description: "",
+ status: "error",
+ duration: 3000,
+ isClosable: true,
+ });
+ return false;
+ }
+ }
+ // each field should not be empty except comment
+ if (key !== "comment") {
+ if (signUpCardForm[key] === "") {
+ toast({
+ title: "請填寫所有欄位",
+ description: "",
+ status: "error",
+ duration: 3000,
+ isClosable: true,
+ });
+ return false;
+ }
+ }
+ }
+ // send to server
+ try {
+ const token = await getAccessTokenSilently();
+ const post = {
+ type: "sign_up_info",
+ content: {
+ amount: signUpCardForm.amount,
+ when: signUpCardForm.when,
+ rule: signUpCardForm.rule,
+ comment: signUpCardForm.comment,
+ },
+ user_type: signUpCardForm.user_type,
+ };
+ dispatch(createSocialPost(token, courseId, post));
+ toast({
+ title: "發送成功",
+ description: "感謝您的填寫！",
+ status: "success",
+ duration: 3000,
+ isClosable: true,
+ });
+ } catch (e) {
+ toast({
+ title: "發送失敗，請稍後再試",
+ description: "或填寫問題回報表單，讓我們幫助你！",
+ status: "error",
+ duration: 3000,
+ isClosable: true,
+ });
+ }
+ return true;
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ 提供加簽相關資訊
+
+
+
+ 我是...
+
+ 必填
+
+
+
+
+ 加簽人數
+
+ 必填
+
+ {
+ setSignUpCardForm({ ...signUpCardForm, amount: e.currentTarget.value });
+ }}
+ />
+
+
+ 加簽時間
+
+ 必填
+
+ {
+ setSignUpCardForm({ ...signUpCardForm, when: e.currentTarget.value });
+ }}
+ />
+
+
+ 加簽方式
+
+ 必填
+
+ {
+ setSignUpCardForm({ ...signUpCardForm, rule: e.currentTarget.value });
+ }}
+ />
+
+ 更多資訊
+
+