diff --git a/src/routes.js b/src/routes.js index 7fbc7ee..e8051dd 100644 --- a/src/routes.js +++ b/src/routes.js @@ -23,6 +23,8 @@ import IsicSciEssayFormSubmittedView from './views/isic-sci-essay/IsicSciEssayFo import IsicSciEssaySubmissionView from './views/isic-sci-essay/IsicSciEssaySubmissionView'; import ThesisSubmissionView from './views/thesis-bank/submission'; +import ThesisMySubmissionsView from './views/thesis-bank/me'; +import ThesisSearchView from './views/thesis-bank/search'; const routes = [ { @@ -43,8 +45,8 @@ const routes = [ element: , children: [ { path: ':thesisId', element: }, - { path: 'search', element: }, - { path: 'me', element: }, + { path: 'search', element: }, + { path: 'me', element: }, { path: 'submission', element: }, ], }, diff --git a/src/views/profile/ProfileView.js b/src/views/profile/ProfileView.js index e69de29..69391e6 100644 --- a/src/views/profile/ProfileView.js +++ b/src/views/profile/ProfileView.js @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function ProfileView() { + return <>; +} diff --git a/src/views/thesis-bank/components/ThesesTable.js b/src/views/thesis-bank/components/ThesesTable.js new file mode 100644 index 0000000..6b42599 --- /dev/null +++ b/src/views/thesis-bank/components/ThesesTable.js @@ -0,0 +1,84 @@ +import React, { useState, useRef } from 'react'; +import { Table } from 'antd'; + +import { getColumnSearchProps } from '../../member-database/ColumnSearchProps'; +import { Link } from 'react-router-dom'; + +export default function ThesesTable({ theses }) { + const [page, setPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [searchText, setSearchText] = useState(''); + const [searchedColumn, setSearchedColumn] = useState(''); + const searchInput = useRef(null); + + let colSearchParams = [ + searchInput, + searchText, + setSearchText, + searchedColumn, + setSearchedColumn, + ]; + + const cols = [ + { + title: 'No', + key: 'index', + render: (value, item, index) => (page - 1) * pageSize + index + 1, + }, + { + title: 'Type', + dataIndex: 'itemType', + key: 'itemType', + sorter: { + compare: (a, b) => + (a.itemType || '').localeCompare(b.itemType || ''), + }, + ...getColumnSearchProps('itemType', ...colSearchParams), + }, + { + title: 'Title', + dataIndex: 'title', + key: 'title', + sorter: { + compare: (a, b) => (a.title || '').localeCompare(b.title || ''), + }, + ...getColumnSearchProps('title', ...colSearchParams), + }, + { + title: 'Corresponding Author', + dataIndex: 'correspondingAuthor', + key: 'correspondingAuthor', + sorter: { + compare: (a, b) => + (a.correspondingAuthor || '').localeCompare( + b.correspondingAuthor || '' + ), + }, + ...getColumnSearchProps('correspondingAuthor', ...colSearchParams), + // eslint-disable-next-line react/display-name + render: (author) => + typeof author === 'string' ? ( + author + ) : ( + {author.name} + ), + }, + ]; + return ( + + ); +} diff --git a/src/views/thesis-bank/me/index.js b/src/views/thesis-bank/me/index.js new file mode 100644 index 0000000..3384033 --- /dev/null +++ b/src/views/thesis-bank/me/index.js @@ -0,0 +1,31 @@ +import React, { useEffect, useState } from 'react'; + +import axios from 'axios'; +import { useAuth } from '../../../utils/useAuth'; +import { Card, Spin } from 'antd'; +import { CopyOutlined } from '@ant-design/icons'; + +import ThesesTable from '../components/ThesesTable'; + +export default function ThesisMySubmissionsView() { + const auth = useAuth(); + const [theses, setTheses] = useState(null); + + useEffect(() => { + // fetch data + axios.get(`/api/thesis?createdBy=${auth.user._id}`).then((res) => { + setTheses(res.data.theses); + }); + }, []); + return ( + + My Submissions + + } + > + {theses ? : } + + ); +} diff --git a/src/views/thesis-bank/search/index.js b/src/views/thesis-bank/search/index.js new file mode 100644 index 0000000..0af367f --- /dev/null +++ b/src/views/thesis-bank/search/index.js @@ -0,0 +1,29 @@ +import React, { useEffect, useState } from 'react'; + +import axios from 'axios'; +import { Card, Spin } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; + +import ThesesTable from '../components/ThesesTable'; + +export default function ThesisSearchView() { + const [theses, setTheses] = useState(null); + + useEffect(() => { + // fetch data + axios.get(`/api/thesis`).then((res) => { + setTheses(res.data.theses); + }); + }, []); + return ( + + Search + + } + > + {theses ? : } + + ); +} diff --git a/src/views/thesis-bank/submission/index.js b/src/views/thesis-bank/submission/index.js index 77a1891..235aa63 100644 --- a/src/views/thesis-bank/submission/index.js +++ b/src/views/thesis-bank/submission/index.js @@ -1,6 +1,15 @@ import React, { useState } from 'react'; -import { AutoComplete, Button, Card, Form, Input, Select, Upload } from 'antd'; +import { + AutoComplete, + Button, + Card, + Form, + Input, + Modal, + Select, + Upload, +} from 'antd'; import { useForm } from 'antd/lib/form/Form'; import { FormOutlined, @@ -255,8 +264,11 @@ export default function ThesisSubmissionView() { .then((res) => { navigate(`/thesis-bank/${res.data.id}`); }) - .catch(() => { - // TODO: Add message handler + .catch((e) => { + Modal.error({ + title: 'Error', + content: e.response.data.message, + }); }); };