Add list of the latest surveys on the landing page for observers

survey-frontend/src/Landing.tsx

-import React, { ReactElement, useContext } from "react";
+import React, { ReactElement, useContext, useState, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { Container, Row } from "react-bootstrap";
+import { Table, Container, Row } from "react-bootstrap";
 import { userContext } from "./providers/UserProvider";
+import { fetchSurveys } from "./api/survey";
+import { Survey } from "./api/types";
+
 
 function Landing(): ReactElement {
     const { user } = useContext(userContext);
@@ -11,6 +14,7 @@ function Landing(): ReactElement {
     const hasNren = loggedIn ? !!user.nrens.length : false;
     const activeNren = hasNren ? user.nrens[0] : '';
     const isAdmin = loggedIn ? user.permissions.admin : false;
+    const isObserver = loggedIn ? user.role === 'observer' : false;
 
     const moveToSurvey = () => {
         const currentYear = new Date().getFullYear();
@@ -18,6 +22,40 @@ function Landing(): ReactElement {
         return <></>
     }
 
+    const SurveyTable = () => {
+
+        const [survey, setSurvey] = useState<Survey>();
+
+        useEffect(() => {
+            fetchSurveys().then((surveyList) => {
+                // only show the latest survey
+                setSurvey(surveyList[0]);
+            });
+        }, []);
+
+        return (<Table striped bordered responsive>
+            <thead>
+                <tr>
+                    <th>(N)REN</th>
+                    <th>Link</th>
+                    <th>Survey Status</th>
+                </tr>
+            </thead>
+            <tbody>
+                {survey && survey.responses.map(response => (
+                    <tr key={response.nren}>
+                        <td>{response.nren}</td>
+                        <td>
+                            <Link to={`/survey/response/${survey.year}/${response.nren}`}><span>Navigate to survey</span></Link>
+                        </td>
+                        <td>{response.status}</td>
+                    </tr>
+                ))}
+
+            </tbody>
+        </Table>)
+    }
+
     return (
         <Container className="py-5 grey-container">
             <Row>
@@ -43,16 +81,14 @@ function Landing(): ReactElement {
                             <li><span>Click <Link to="/survey/admin/surveys">here</Link> to access the survey management page.</span></li>
                             <li><span>Click <Link to="/survey/admin/users">here</Link> to access the user management page.</span></li>
                         </ul> : <ul>
-                            {!isAdmin && hasNren && moveToSurvey()}
+                            {!isAdmin && !isObserver && hasNren && moveToSurvey()}
                             {loggedIn ? <li><span>You are logged in</span></li> : <li><span>You are not logged in</span></li>}
-                            {loggedIn && !hasNren && <li><span>Your access to the survey has not yet been approved</span></li>}
-                            {loggedIn && !hasNren && <li><span>Once you have been approved, you will immediately be directed to the relevant survey upon visiting this page</span></li>}
+                            {loggedIn && !isObserver && !hasNren && <li><span>Your access to the survey has not yet been approved</span></li>}
+                            {loggedIn && !isObserver && !hasNren && <li><span>Once you have been approved, you will immediately be directed to the relevant survey upon visiting this page</span></li>}
+                            {loggedIn && isObserver && <li><span>You have read-only access to the following surveys:</span></li>}
                         </ul>}
-
-
+                        {loggedIn && isObserver && <SurveyTable />}
                     </div>
-
-
                 </div>
             </Row>
         </Container >

survey-frontend/src/SurveyManagementComponent.tsx

@@ -4,30 +4,8 @@ import Button from 'react-bootstrap/Button';
 import Table from 'react-bootstrap/Table';
 import { useNavigate } from 'react-router-dom';
 import { ResponseStatus, SurveyStatus } from "./Schema";
-
-
-async function fetchSurveys(): Promise<Survey[]> {
-    try {
-        const response = await fetch('/api/survey/list');
-        const userList = await response.json();
-        return userList
-    } catch (error) {
-        console.log('failed fetching survey list..');
-        return [];
-    }
-}
-
-interface Response {
-    nren: string
-    status: string
-    lock_description: string
-}
-
-interface Survey {
-    year: number
-    status: string
-    responses: Response[]
-}
+import { fetchSurveys } from "./api/survey";
+import { Survey } from "./api/types";
 
 function SurveyManagementComponent() {
     const [surveys, setSurveys] = useState<Survey[]>([]);

survey-frontend/src/api/survey.ts

+import { Survey } from './types';
+
+export async function fetchSurveys(): Promise<Survey[]> {
+    try {
+        const response = await fetch('/api/survey/list');
+        const userList = await response.json();
+        return userList
+    } catch (error) {
+        console.log('failed fetching survey list..');
+        return [];
+    }
+}
\ No newline at end of file

survey-frontend/src/api/types.ts

+interface SurveyResponse {
+    nren: string
+    status: string
+    lock_description: string
+}
+
+interface Survey {
+    year: number
+    status: string
+    responses: SurveyResponse[]
+}
+
+export type {
+    Survey,
+    SurveyResponse
+}
\ No newline at end of file