From a40d30f2023ba9e8946159661061140748200a06 Mon Sep 17 00:00:00 2001
From: "saket.agrahari" <saket.agrahari@geant.org>
Date: Tue, 4 Apr 2023 04:14:28 +0100
Subject: [PATCH] COMP-113: clean up page
---
webapp/package-lock.json | 15 ++++++
webapp/package.json | 1 +
webapp/src/components/CollapsibleBox.tsx | 7 +--
webapp/src/pages/CompendiumData.tsx | 69 ++++--------------------
4 files changed, 30 insertions(+), 62 deletions(-)
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index a6b6bc54..2ecf30fe 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -20,6 +20,7 @@
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-dom": "^18.2.0",
+ "react-icons": "4.8.0",
"react-router-dom": "^6.5.0"
},
"devDependencies": {
@@ -12475,6 +12476,14 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-icons": {
+ "version": "4.8.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+ "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -23726,6 +23735,12 @@
"scheduler": "^0.23.0"
}
},
+ "react-icons": {
+ "version": "4.8.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+ "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+ "requires": {}
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index af8176b7..857ea767 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -53,6 +53,7 @@
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-dom": "^18.2.0",
+ "react-icons": "4.8.0",
"react-router-dom": "^6.5.0"
},
"description": "## development environment",
diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
index 52c45e47..890e531e 100644
--- a/webapp/src/components/CollapsibleBox.tsx
+++ b/webapp/src/components/CollapsibleBox.tsx
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
+import { GrAdd, GrSubtract } from 'react-icons/gr';
interface CollapsibleBoxProps {
title: string;
@@ -16,9 +17,9 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
<h1 className="bold-caps-16pt dark-teal">{title}</h1>
</Col>
<Col align="right">
- <button onClick={() => setIsCollapsed(!isCollapsed)}>
- {isCollapsed ? 'Expand' : 'Collapse'}
- </button>
+ <button className="expand-collapse-btn" onClick={() => setIsCollapsed(!isCollapsed)}>
+ {isCollapsed ? <GrAdd/> : <GrSubtract />}
+ </button>
</Col>
</Row>
diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx
index 59386bb5..84b42507 100644
--- a/webapp/src/pages/CompendiumData.tsx
+++ b/webapp/src/pages/CompendiumData.tsx
@@ -13,82 +13,33 @@ function CompendiumData(): ReactElement {
<SectionLink section={"Reports"} />
</PageHeader>
<Banner type={'data'}>
- <p>
- What the Compendium is, the history of it, the aim, what you can find in it etc etc etc etc
- Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
- tetur adi piscing elit, sed do eiusmod tempor inc
- </p>
+ <p className="wordwrap">
+ The GÉANT Compendium provides an authoritative reference source for anyone with an
+ interest in the development of research and education networking in Europe and beyond.
+ Published since 2001, the Compendium provides information on key areas such as users,
+ services, traffic, budget and staffing.
+ </p>
</Banner>
+
<Container className="geant-container">
<Row>
<div className="center">
-
+
<CollapsibleBox title="ORGANISATION">
-
<div className="collapsible-column">
<Row>
<Link to="/analysis" state={{ graph: 'budget' }}>
- <span>Length of NREN dark fibres leased by NRENs</span>
+ <span>Budget of NRENs per Year</span>
</Link>
</Row>
<Row>
<Link to="/funding" state={{ graph: 'fundingsources' }}>
- <span>Length of dark fibres operated by NRENs outside their own countries</span>
+ <span>Income Source of NRENs per Year</span>
</Link>
</Row>
-
- <Row>
- <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
- </Row>
- <Row>
- <span>Length of of dark fibre cables laid by the NREN in their network</span>
- </Row>
- </div>
- <div className="collapsible-column">
- <Row>
- <span>Length of NREN dark fibres leased by NRENs</span>
- </Row>
-
- <Row>
- <span>Length of dark fibres operated by NRENs outside their own countries</span>
- </Row>
-
- <Row>
- <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
- </Row>
- <Row>
- <span>Length of of dark fibre cables laid by the NREN in their network</span>
- </Row>
</div>
</CollapsibleBox>
- <Row>
- <CollapsibleBox title="STANDARDS AND POLICES">
-
- </CollapsibleBox>
- </Row>
-
-
- <Row>
- <CollapsibleBox title="CONNECTED USERS">
-
- </CollapsibleBox>
- </Row>
-
-
- <Row>
- <CollapsibleBox title="NETWORK">
-
- </CollapsibleBox>
- </Row>
-
-
- <Row>
- <CollapsibleBox title="SERVICES">
-
- </CollapsibleBox>
- </Row>
-
</div>
</Row>
--
GitLab