added react router

compendium_v2/routes/user.py

@@ -3,7 +3,9 @@ from typing import Any, Union
 
 from flask import Blueprint, jsonify
 from flask_login import current_user, AnonymousUserMixin  # type: ignore
+from sqlalchemy import select
 
+from compendium_v2.db import db
 from compendium_v2.db.auth_model import User
 from compendium_v2.routes import common
 
@@ -33,7 +35,7 @@ USER_RESPONSE_SCHEMA = {
 
 @routes.route('/', methods=['GET'])
 @common.require_accepts_json
-def charging_structure_view() -> Any:
+def current_user_view() -> Any:
     """
     handler for /api/user/ requests
 
@@ -55,3 +57,21 @@ def charging_structure_view() -> Any:
         }
 
     return jsonify(_extract_data(current_user))
+
+
+@routes.route('/list', methods=['GET'])
+@common.require_accepts_json
+def all_users_view() -> Any:
+    # TODO schema and docstring
+
+    def _extract_data(entry: User):
+        return {
+            'email': entry.email,
+            'roles': entry.roles.value,
+            'active': entry.active,
+            'nrens': [nren.name for nren in entry.nrens] if entry.nrens else []
+        }
+
+    entries = [_extract_data(entry) for entry in db.session.scalars(
+        select(User).order_by(User.email))]
+    return jsonify(entries)

compendium_v2/static/survey-bundle.js.LICENSE.txt

@@ -2073,3 +2073,25 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/**
+ * @remix-run/router v1.6.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.11.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */

survey-frontend/src/App.tsx

+import React, { ReactElement } from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import SurveySelectionComponent from './SurveySelectionComponent';
+import ShowUser from './ShowUser';
+import UserManagementComponent from "./UserManagementComponent";
+
+
+function App(): ReactElement {
+    return (
+        <div className="app">
+            <Router>
+                <Routes>
+                    <Route path="admin/surveys" element={<SurveySelectionComponent />} />
+                    <Route path="admin/users" element={<UserManagementComponent />} />
+                    <Route path="*" element={<ShowUser />} />
+                </Routes>
+            </Router>
+        </div>
+    );
+}
+
+export default App;

survey-frontend/src/UserManagementComponent.tsx

+import React, { useState, useEffect } from "react";
+
+
+async function fetchUsers(): Promise<User[]> {
+    try {
+        const response = await fetch('/api/user/list');
+        const userList = await response.json();
+        return userList
+    } catch (error) {
+        console.log('handle this better..');
+        return [];
+    }
+}
+
+interface User {
+    email: string,
+    role: string,
+    active: boolean,
+    nrens: string[]
+}
+
+function UserManagementComponent() {
+    const [users, setUsers] = useState<User[]>([]);
+
+    useEffect(() => {
+        // Fetch user
+        fetchUsers().then((userList) => {
+            setUsers(userList);
+        });
+    }, []);
+
+    return (
+        <div>
+            <table>
+            {users.map(user => (
+                <tr key={user.email}>
+                    {user.email} - {user.active} - {user.role} - {user.nrens.join()}
+                </tr>
+            ))}
+            </table>
+        </div>
+    );
+
+}
+
+export default UserManagementComponent;

survey-frontend/src/index.tsx

 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import SurveySelectionComponent from './SurveySelectionComponent';
-import ShowUser from './ShowUser';
-
+import App from './App';
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
@@ -11,7 +9,6 @@ const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <ShowUser />
-    <SurveySelectionComponent />
+    <App />
   </React.StrictMode>
 )
\ No newline at end of file