added docbase overview

src/components/DocBaseOverview/DocBaseOverview.scss

@@ -0,0 +1,2 @@
+.DocBaseOverview {
+}

src/components/DocBaseOverview/DocBaseOverview.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react';
+import { useGetOrganizations } from '../../providers/OrganizationProvider';
+import Organization from '../../types/Organization';
+import './DocBaseOverview.scss';
+import APIService from '../../utils/ApiService';
+import MyDocument from '../../types/MyDocument';
+import { Link } from 'react-router-dom';
+
+interface Props {
+	organizationProp: Organization | undefined;
+}
+
+/**
+ * A list of all DocBases of an organization.
+ */
+function DocBaseOverview({ organizationProp }: Props) {
+	const [docBases, setDocBases] = useState<MyDocument[]>([]);
+	const [fileCount, setFileCount] = useState<number>(0);
+	const [selectedOrgID, setSelectedOrgID] = useState<number>(-1);
+
+	const getOrganizations = useGetOrganizations();
+
+	useEffect(() => {
+		APIService.getOrganizationNames().then((orgs) => {
+			let orgID = -1;
+			if (organizationProp !== undefined) {
+				orgID = organizationProp.id;
+			} else if (orgs !== undefined && orgs.length > 0) {
+				orgID = orgs[0].id;
+			}
+			loadDocBases(orgID);
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const loadDocBases = (orgID: number) => {
+		console.log('loadDocBases: ' + orgID);
+		if (orgID === -1) {
+			setDocBases([]);
+			return;
+		}
+		APIService.getDocumentBaseForOrganization(orgID).then(
+			(response: MyDocument[]) => {
+				setDocBases(response);
+			}
+		);
+		APIService.getDocumentForOrganization(orgID).then(
+			(response: MyDocument[]) => {
+				setFileCount(response.length);
+			}
+		);
+		setSelectedOrgID(orgID);
+	};
+
+	if (getOrganizations().length === 0) {
+		return (
+			<p>
+				<i>
+					You have to be a member of an organization to create a
+					DocBase.
+				</i>
+			</p>
+		);
+	}
+
+	return (
+		<div className="DocBaseOverview">
+			{(organizationProp === undefined && getOrganizations().length) ===
+				1 && (
+				<p>
+					Organization:{' '}
+					<b className="ml">{getOrganizations()[0].name}</b>
+				</p>
+			)}
+			{organizationProp == undefined && getOrganizations().length > 1 && (
+				<div className="hor mb">
+					<p>
+						<b>Select an Organization:</b>
+					</p>
+					<select
+						className="btn"
+						style={{
+							marginLeft: '20px',
+							padding: '5px',
+						}}
+						name="organization"
+						id="organization"
+						onChange={(e) => {
+							const name = e.target.value;
+							const organization = getOrganizations().find(
+								(org) => org.name === name
+							);
+							if (organization === undefined) return;
+							loadDocBases(organization.id);
+						}}
+					>
+						{getOrganizations().map((organization) => (
+							<option
+								value={organization.name}
+								key={organization.id}
+							>
+								{organization.name}
+							</option>
+						))}
+					</select>
+				</div>
+			)}
+			{docBases.length === 0 ? (
+				<p>
+					<i>You dont have any DocBase yet.</i>
+				</p>
+			) : (
+				<ul>
+					{docBases.map((docBase) => (
+						<div className="hor" key={docBase.id}>
+							<li
+								className="my-list-item"
+								style={{
+									minWidth: '250px',
+								}}
+							>
+								{docBase.name}
+							</li>
+							<i className="bi bi-list-task icon"></i>
+						</div>
+					))}
+				</ul>
+			)}
+			{fileCount > 0 && (
+				<Link
+					className="lnk mt"
+					to={'/organization/' + selectedOrgID + '/docbase/new'}
+					style={{
+						width: '100px',
+						paddingTop: '10px',
+						paddingBottom: '10px',
+					}}
+				>
+					<i className="bi bi-plus-square icon mr"></i>New
+				</Link>
+			)}
+			{fileCount == 0 && (
+				<i>Please upload a document to create a document base.</i>
+			)}
+		</div>
+	);
+}
+export default DocBaseOverview;

src/components/FileUpload/FileUpload.tsx

@@ -117,15 +117,17 @@ function FileUpload({ organizationProp, afterUpload }: Props) {
 					}}
 				/>
 			)}
-			{getOrganizations().length === 1 && (
+			{(organizationProp === undefined && getOrganizations().length) ===
+				1 && (
 				<p>
-					<b>Organization:</b> {getOrganizations()[0].name}
+					Organization:{' '}
+					<b className="ml">{getOrganizations()[0].name}</b>
 				</p>
 			)}
 			{organizationProp == undefined && getOrganizations().length > 1 && (
 				<div className="hor mb">
 					<p>
-						<b>Select a Organization:</b>
+						<b>Select an Organization:</b>
 					</p>
 					<select
 						className="btn"

src/index.scss

@@ -151,7 +151,6 @@ input {
 	list-style-type: none;
 	margin-left: -20px;
 	margin-bottom: 15px;
-	// make a circle in front of the list item in blue
 	&::before {
 		content: '•';
 		color: #083d60;

src/views/Home/Home.tsx

@@ -1,17 +1,18 @@
 import { Link, useNavigate } from 'react-router-dom';
 import './Home.scss';
 import { useState } from 'react';
-import { useGetUsername } from '../../providers/UserProvider';
+import { useGetUsername, useLogOut } from '../../providers/UserProvider';
 import Navbar from '../../components/Navbar/Navbar';
 import FileUpload from '../../components/FileUpload/FileUpload';
+import DocBaseOverview from '../../components/DocBaseOverview/DocBaseOverview';
 
 /**
  * The home page component
  */
 function Home() {
 	const getUserName = useGetUsername();
 	const navigate = useNavigate();
-	//const logOut = useLogOut();
+	const logOut = useLogOut();
 
 	const [username] = useState(getUserName());
 
@@ -34,11 +35,13 @@ function Home() {
 						Document <span className="db">Up</span>load
 					</h2>
 					<FileUpload organizationProp={undefined}></FileUpload>
-					{/* <AttributeAdder></AttributeAdder> */}
-					{
-						// TODO: Only for development (remove later)
-					}
-					{/* <button
+					<h2>
+						Doc<span className="db">Ba</span>se
+					</h2>
+					<DocBaseOverview
+						organizationProp={undefined}
+					></DocBaseOverview>
+					<button
 						className="btn"
 						style={{
 							marginTop: '100px',
@@ -49,7 +52,7 @@ function Home() {
 						}}
 					>
 						<i className="bi bi-box-arrow-left mr"></i>Logout
-					</button> */}
+					</button>
 				</div>
 			</div>
 		);

src/views/OrgPage/OrgPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useLoggedIn, useGetUsername } from '../../providers/UserProvider';
 import './OrgPage.scss';
 import { useUpdateOrganizations } from '../../providers/OrganizationProvider';
@@ -11,6 +11,7 @@ import MyDocument from '../../types/MyDocument';
 import MyFiles from '../../components/MyFiles/MyFiles';
 import { useSetLoadingScreen } from '../../providers/LoadingScreenProvider';
 import FileUpload from '../../components/FileUpload/FileUpload';
+import DocBaseOverview from '../../components/DocBaseOverview/DocBaseOverview';
 
 /**
  * A page that displays information about an organization.
@@ -21,7 +22,7 @@ function OrgPage() {
 	);
 	const [members, setMembers] = useState<string[]>([]);
 	const [documents, setDocuments] = useState<MyDocument[]>([]);
-	const [documentBases, setDocumentBases] = useState<MyDocument[]>([]);
+	const [render, setRender] = useState<boolean>(false);
 
 	const navigate = useNavigate();
 	const isLoggedIn = useLoggedIn();
@@ -58,12 +59,8 @@ function OrgPage() {
 			});
 			APIService.getDocumentForOrganization(org.id).then((docs) => {
 				setDocuments(docs);
-				APIService.getDocumentBaseForOrganization(org.id).then(
-					(docs) => {
-						setDocumentBases(docs);
-						setLoadingScreen(false);
-					}
-				);
+				setLoadingScreen(false);
+				setRender(true);
 			});
 		});
 
@@ -143,37 +140,8 @@ function OrgPage() {
 						});
 					}}
 				></FileUpload>
-				<div className="ver">
-					<h2>Docbase</h2>
-					{documentBases.length > 0 && (
-						<ul>
-							{documentBases.map((docbase) => (
-								<li key={docbase.id} className="my-list-item">
-									{docbase.name}
-								</li>
-							))}
-						</ul>
-					)}
-					{documentBases.length === 0 && <i>No Document Base</i>}
-					{documents.length > 0 && (
-						<Link
-							className="lnk"
-							to={
-								'/organization/' +
-								organization.id +
-								'/docbase/new'
-							}
-							style={{ width: '100px' }}
-						>
-							<i className="bi bi-plus-square icon mr"></i>New
-						</Link>
-					)}
-					{documents.length == 0 && (
-						<i>
-							Please upload a document to create a document base.
-						</i>
-					)}
-				</div>
+				<h2>Docbase</h2>
+				{render && <DocBaseOverview organizationProp={organization} />}
 				<button
 					className="btn"
 					style={{ marginBottom: '100px', marginTop: '50px' }}