Partially implement #16

TODO: View thesis
TODO: Delete/Edit thesis
TODO: Thesis admin 
TODO: Profile view

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: <Outlet />,
                 children: [
                     { path: ':thesisId', element: <Outlet /> },
-                    { path: 'search', element: <Outlet /> },
-                    { path: 'me', element: <Outlet /> },
+                    { path: 'search', element: <ThesisSearchView /> },
+                    { path: 'me', element: <ThesisMySubmissionsView /> },
                     { path: 'submission', element: <ThesisSubmissionView /> },
                 ],
             },

src/views/profile/ProfileView.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ProfileView() {
+    return <></>;
+}

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
+                ) : (
+                    <Link to={`/app/profile/${author.id}`}>{author.name}</Link>
+                ),
+        },
+    ];
+    return (
+        <Table
+            columns={cols}
+            dataSource={theses}
+            pagination={{
+                onChange(current) {
+                    setPage(current);
+                },
+                onShowSizeChange(current, size) {
+                    setPageSize(size);
+                },
+                showSizeChanger: true,
+                pageSizeOptions: [5, 10, 20, 50, 100],
+            }}
+            scroll={{ x: true }}
+        />
+    );
+}

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 (
+        <Card
+            title={
+                <span>
+                    <CopyOutlined /> My Submissions
+                </span>
+            }
+        >
+            {theses ? <ThesesTable theses={theses} /> : <Spin />}
+        </Card>
+    );
+}

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 (
+        <Card
+            title={
+                <span>
+                    <SearchOutlined /> Search
+                </span>
+            }
+        >
+            {theses ? <ThesesTable theses={theses} /> : <Spin />}
+        </Card>
+    );
+}

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,
+                });
             });
     };