From 58df3a8bead48e857f87a75396a202b2493ae1f4 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 16:33:34 +0200
Subject: [PATCH] useNavigateTabs();
---
src/{contents => components}/sections.tsx | 2 +-
src/contents/Home.tsx | 2 ++
src/contents/contribution.tsx | 35 ++--------------------
src/contents/description.tsx | 36 ++---------------------
src/contents/example.tsx | 2 ++
src/contents/experiments.tsx | 33 ++-------------------
src/contents/human-practices.tsx | 34 ++-------------------
src/contents/igem-bielefeld.tsx | 33 ++-------------------
src/contents/impressum.tsx | 33 ++-------------------
src/contents/judging.tsx | 33 ++-------------------
src/contents/notebook.tsx | 33 ++-------------------
src/contents/partners.tsx | 33 ++-------------------
src/contents/parts.tsx | 33 ++-------------------
src/contents/project-documentation.tsx | 33 ++-------------------
src/contents/results.tsx | 33 ++-------------------
src/contents/safety.tsx | 2 +-
src/contents/supplementary-material.tsx | 33 ++-------------------
src/contents/team.tsx | 33 ++-------------------
18 files changed, 35 insertions(+), 441 deletions(-)
rename src/{contents => components}/sections.tsx (93%)
diff --git a/src/contents/sections.tsx b/src/components/sections.tsx
similarity index 93%
rename from src/contents/sections.tsx
rename to src/components/sections.tsx
index 72027fdc..5d23303f 100644
--- a/src/contents/sections.tsx
+++ b/src/components/sections.tsx
@@ -1,4 +1,4 @@
-import { H2 } from "../components/Headings"
+import { H2 } from "./Headings"
export function Section({id, title, children}: {id: string, title: string, children: React.ReactNode}){
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index d9ee5a75..59564d1a 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,8 +1,10 @@
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
+import { useNavigateTabs } from "../utils/navigation";
export function Home() {
+ useNavigateTabs();
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/contribution.tsx b/src/contents/contribution.tsx
index a35e3dbc..6726f6a1 100644
--- a/src/contents/contribution.tsx
+++ b/src/contents/contribution.tsx
@@ -1,45 +1,14 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { BFHTimeline } from "../components/BFH-Timeline";
import BFHGallery from "../components/Photo-grid";
import BFHpdf, { GuidePDF } from "../components/Pdfs";
import { H2} from "../components/Headings";
import { OLDBFHStyleTabs } from "../components/Tabs";
import { BlockQuoteB } from "../components/Quotes";
-import { handleScrollToCollapse, openNestedTab, openTab } from "../utils/TabNavigation";
+import { useNavigateTabs } from "../utils/navigation";
export function Contribution() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
- const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
-
- // Open the tab specified by tabId (and subTab if nested)
- if (tabId) {
- if (subTabId) {
- // If subTab is provided, open the nested tab
- openNestedTab(tabId, subTabId);
- } else {
- // Otherwise, just open the main tab
- openTab(tabId);
- }
- }
-
- // Scroll to the section specified by collapseId after opening the tab
- if (collapseId) {
- handleScrollToCollapse(collapseId);
- }
-
- // Open the tab from another page
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
+ useNavigateTabs();
return (
<>
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index a4af8721..e52957e8 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -1,4 +1,3 @@
-import { useLocation } from "react-router-dom";
import { InfoBox } from "../components/Boxes";
import { TabButtonRow } from "../components/Buttons";
import Collapsible from "../components/Collapsible";
@@ -8,43 +7,12 @@ import { LoremMedium, LoremShort } from "../components/Loremipsum";
import { Circle } from "../components/Shapes";
import { Complex } from "../components/Svgs";
import { ButtonRowTabs } from "../components/Tabs";
-import { useEffect } from "react";
import PieChart from "../components/Graph";
import PreCyse from "../components/precyse";
-import { handleScrollToCollapse, openNestedTab, openTab } from "../utils/TabNavigation";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { useNavigateTabs } from "../utils/navigation";
export function Description() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
- const subTabId = params.get('subTab'); // Neues Parameter für verschachtelte Tabs
-
- // Open the tab specified by tabId (and subTab if nested)
- if (tabId) {
- if (subTabId) {
- // If subTab is provided, open the nested tab
- openNestedTab(tabId, subTabId);
- } else {
- // Otherwise, just open the main tab
- openTab(tabId);
- }
- }
-
- // Scroll to the section specified by collapseId after opening the tab
- if (collapseId) {
- handleScrollToCollapse(collapseId);
- }
-
- // Open the tab from another page
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<div className="row mt-4">
<div className="col">
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index d3b38dde..9a603727 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -10,6 +10,7 @@ import React from 'react';
import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
import ProteinViewer from '../components/Fanzorviewer.tsx';
+import { useNavigateTabs } from "../utils/navigation.ts";
ChartJS.register(
@@ -23,6 +24,7 @@ ChartJS.register(
);
export function Example() {
+ useNavigateTabs();
return (
<>
<div className="container">
diff --git a/src/contents/experiments.tsx b/src/contents/experiments.tsx
index a87e7aeb..05bb3f89 100644
--- a/src/contents/experiments.tsx
+++ b/src/contents/experiments.tsx
@@ -1,37 +1,8 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Experiments() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<H2 id="heading" text="Heading" ></H2>
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 569000b6..89a475a3 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -49,46 +49,18 @@
<p></p>
*/
import { ButtonOne } from "../components/Buttons";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { BlockQuoteB } from "../components/Quotes";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
import { useNavigation } from "../utils/useNavigation";
import { openElement } from "../utils/openElement";
import { HPTimeline } from "../components/HP-timeline";
import { H2, H3 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function HumanPractices() {
- const { goToPagesAndOpenTab/* , goToTextsAndOpenCollapsible */ } = useNavigation();
+ useNavigateTabs();
+ const { goToPagesAndOpenTab } = useNavigation();
openElement({buttonClass: "tabbutton", elementToOpen: "All", classToHide: "timelinecardtabs", });
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
return (
<div className="row mt-4">
diff --git a/src/contents/igem-bielefeld.tsx b/src/contents/igem-bielefeld.tsx
index 3410f8fa..ce2a81c1 100644
--- a/src/contents/igem-bielefeld.tsx
+++ b/src/contents/igem-bielefeld.tsx
@@ -1,36 +1,7 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { useNavigateTabs } from "../utils/navigation";
export function igemBielefeld() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/impressum.tsx b/src/contents/impressum.tsx
index 1368a8b8..dcfe7f92 100644
--- a/src/contents/impressum.tsx
+++ b/src/contents/impressum.tsx
@@ -1,37 +1,8 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Impressum() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<div className="row">
diff --git a/src/contents/judging.tsx b/src/contents/judging.tsx
index 37bb08eb..65979d64 100644
--- a/src/contents/judging.tsx
+++ b/src/contents/judging.tsx
@@ -1,36 +1,7 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Judging() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<H2 text="Overview" id="overview"/>
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index a7c02531..a123cd9b 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -1,37 +1,8 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import H1 from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Notebook() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<div className="row mt-4">
diff --git a/src/contents/partners.tsx b/src/contents/partners.tsx
index 01d4d1b7..219a906c 100644
--- a/src/contents/partners.tsx
+++ b/src/contents/partners.tsx
@@ -1,37 +1,8 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import H1, { H2 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Partners() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<div id="sidebarbox" className="col-1 d-none d-lg-block"> </div>
diff --git a/src/contents/parts.tsx b/src/contents/parts.tsx
index 4a0606a9..9cbcd009 100644
--- a/src/contents/parts.tsx
+++ b/src/contents/parts.tsx
@@ -1,35 +1,6 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { useNavigateTabs } from "../utils/navigation";
export function Parts() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<div className="row">
diff --git a/src/contents/project-documentation.tsx b/src/contents/project-documentation.tsx
index d510479f..cfa32d5f 100644
--- a/src/contents/project-documentation.tsx
+++ b/src/contents/project-documentation.tsx
@@ -1,36 +1,7 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { useNavigateTabs } from "../utils/navigation";
export function ProDesc() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<></>
);
diff --git a/src/contents/results.tsx b/src/contents/results.tsx
index 5fef62c3..02f75532 100644
--- a/src/contents/results.tsx
+++ b/src/contents/results.tsx
@@ -1,37 +1,8 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Results() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index acc561de..94c8849a 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -1,6 +1,6 @@
import { LoremMedium } from "../components/Loremipsum";
-import { Section, Subesction } from "./sections";
+import { Section, Subesction } from "../components/sections";
import { useNavigateTabs } from "../utils/navigation";
export const Safety: React.FC = () =>{
diff --git a/src/contents/supplementary-material.tsx b/src/contents/supplementary-material.tsx
index 1a2d5b57..84303c34 100644
--- a/src/contents/supplementary-material.tsx
+++ b/src/contents/supplementary-material.tsx
@@ -1,35 +1,6 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import { useNavigateTabs } from "../utils/navigation";
export function Supplementary() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
<div className="row">
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index 2b1735ab..2e4dc499 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -1,37 +1,8 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
import { H2 } from "../components/Headings";
+import { useNavigateTabs } from "../utils/navigation";
export function Team() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
+ useNavigateTabs();
return (
<>
--
GitLab