tree structure

src/routes.js

@@ -25,6 +25,9 @@ import IsicSciEssaySubmissionView from './views/isic-sci-essay/IsicSciEssaySubmi
 import ThesisSubmissionView from './views/thesis-bank/submission';
 import ThesisMySubmissionsView from './views/thesis-bank/me';
 import ThesisSearchView from './views/thesis-bank/search';
+import PublicThesesView from './views/thesis-bank/public-root';
+import PublicLayout from './views/thesis-bank/layouts/PublicLayout';
+import PublicThesisView from './views/thesis-bank/public-thesis';
 
 const routes = [
     {
@@ -118,6 +121,21 @@ const routes = [
             { path: '*', element: <Navigate to="/app/profile/me" /> },
         ],
     },
+
+    {
+        path: 'thesis',
+        element: <PublicLayout />,
+        children: [
+            {
+                path: '/:id',
+                element: <PublicThesisView />,
+            },
+            {
+                path: '/',
+                element: <PublicThesesView />,
+            },
+        ],
+    },
     {
         path: 'essay-isic-sci-2021/:id/submitted',
         element: <IsicSciEssayFormSubmittedView />,

src/views/thesis-bank/components/Thesis.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { Typography } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+const baseURL =
+    process.env.NODE_ENV == 'production'
+        ? 'https://portal.ppiuk.org'
+        : 'http://localhost:3000';
+
+export default function Thesis({ id }) {
+    const [thesis, setThesis] = useState(null);
+
+    useEffect(() => {
+        axios.get(`/api/thesis/${id}`).then((res) => {
+            const data = res.data.data;
+            setThesis(data);
+        });
+    }, []);
+
+    return (
+        thesis && (
+            <div>
+                <Typography.Title level={3} style={{ textAlign: 'center' }}>
+                    {thesis.title}
+                </Typography.Title>
+                <Typography.Title level={5}>Abstract</Typography.Title>
+                <Typography>{thesis.abstract}</Typography>
+                <br />
+                <Typography>Item type: {thesis.itemType}</Typography>
+                <Typography>
+                    Contributor/Contact Person:{' '}
+                    {thesis.correspondingAuthor._id === undefined ? (
+                        thesis.correspondingAuthor.fullName
+                    ) : (
+                        <Link
+                            to={`/app/profile/${thesis.correspondingAuthor._id}`}
+                        >
+                            {thesis.correspondingAuthor.fullName}
+                        </Link>
+                    )}
+                </Typography>
+                <Typography>University: {thesis.university}</Typography>
+                {thesis.link && (
+                    <Typography>
+                        URL: <a>{thesis.link}</a>
+                    </Typography>
+                )}
+                {thesis.fileId && (
+                    <Typography.Title level={5}>
+                        Download File{' '}
+                        <a href={`${baseURL}/api/thesis/${thesis._id}/pdf`}>
+                            <DownloadOutlined style={{ fontSize: '24px' }} />
+                        </a>
+                    </Typography.Title>
+                )}
+            </div>
+        )
+    );
+}

src/views/thesis-bank/layouts/PublicLayout/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Card, Layout, Space, Typography } from 'antd';
+import { Link } from 'react-router-dom';
+import { Outlet } from 'react-router';
+
+const { Content } = Layout;
+
+export default function PublicLayout() {
+    return (
+        <Layout
+            style={{
+                background:
+                    'linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(0,212,240,1) 20%, rgba(4,0,255,1) 100%',
+                minHeight: '100vh',
+            }}
+        >
+            <Content
+                style={{
+                    margin: '24px 48px',
+                    marginTop: 24,
+                    padding: 30,
+                    minHeight: '100vh',
+                    overflow: 'initial',
+                }}
+            >
+                <Card>
+                    <Space style={{ width: '100%', justifyContent: 'center' }}>
+                        <Link to={'/'}>
+                            <img
+                                width={100}
+                                src="https://ppiuk.org/wp-content/uploads/2017/05/ppiuk.jpg"
+                            />
+                        </Link>
+                        <Typography.Title
+                            level={2}
+                            style={{ textAlign: 'center' }}
+                        >
+                            PPI UK Thesis Bank
+                        </Typography.Title>
+                    </Space>
+                    <Outlet />
+                </Card>
+            </Content>
+        </Layout>
+    );
+}

src/views/thesis-bank/public-root/index.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+
+import axios from 'axios';
+import { Tree } from 'antd';
+import { Link } from 'react-router-dom';
+
+export default function PublicThesesView() {
+    const initTreeData = [
+        {
+            title: 'Clusters',
+            key: 'clusters',
+            children: [
+                {
+                    title: 'Economics and Business',
+                    key: 'Economics and Business',
+                },
+                {
+                    title: 'Education',
+                    key: 'Education',
+                },
+                {
+                    title: 'Energy',
+                    key: 'Energy',
+                },
+                {
+                    title: 'Health',
+                    key: 'Health',
+                },
+                {
+                    title: 'Infrastructure and Built Environment',
+                    key: 'Infrastructure and Built Environment',
+                },
+                {
+                    title: 'Politics and Law',
+                    key: 'Politics and Law',
+                },
+                {
+                    title: 'Social Development, Arts and Humanity',
+                    key: 'Social Development, Arts and Humanity',
+                },
+                {
+                    title: 'STEM',
+                    key: 'STEM',
+                },
+            ],
+        },
+    ];
+
+    const [theses, setTheses] = useState(initTreeData);
+
+    useEffect(() => {
+        axios.get('/api/thesis/').then((res) => {
+            let clusters = theses.find((item) => {
+                return item.key === 'clusters';
+            });
+            for (const cluster of clusters.children) {
+                let clusteredTheses = res.data.theses.filter((item) => {
+                    return item.cluster === cluster.key;
+                });
+                cluster.children = clusteredTheses.map((item) => {
+                    return {
+                        title: (
+                            <Link to={`/thesis/${item._id}`}>{item.title}</Link>
+                        ),
+                        key: item._id,
+                    };
+                });
+            }
+            setTheses([clusters]);
+        });
+    }, []);
+
+    return (
+        <Tree
+            defaultExpandedKeys={['clusters']}
+            selectable={false}
+            treeData={theses}
+        />
+    );
+}

src/views/thesis-bank/public-thesis/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+import { RollbackOutlined } from '@ant-design/icons';
+
+import Thesis from '../components/Thesis';
+
+export default function PublicThesisView() {
+    const { id } = useParams();
+    return (
+        <div>
+            <Link to={'/thesis'}>
+                <RollbackOutlined />
+                Go back to thesis directory
+            </Link>
+
+            <Thesis id={id} />
+        </div>
+    );
+}