From d126e54e3e5660b1ffc6d717ad6d1839edcf0a16 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 16:24:38 +0200
Subject: [PATCH] useNavigateTabs();
---
src/contents/engineering.tsx | 36 ++---------------------------------
src/contents/safety.tsx | 37 ++++--------------------------------
src/utils/createSidebar.tsx | 35 +---------------------------------
src/utils/navigation.ts | 33 ++++++++++++++++++++++++++++++++
4 files changed, 40 insertions(+), 101 deletions(-)
create mode 100644 src/utils/navigation.ts
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index d14906ab..01e17ae3 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,46 +1,14 @@
import { ButtonOneEngineering } from "../components/Buttons";
import { LoremShort } from "../components/Loremipsum";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
import { openElement } from "../utils/openElement";
import { H3 } from "../components/Headings";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
+import { useNavigateTabs } from "../utils/navigation";
export function Engineering() {
- 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">
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 948a6a6b..acc561de 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -1,39 +1,10 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import { openNestedTab, openTab, handleScrollToCollapse } from "../utils/TabNavigation";
+
import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "./sections";
-export function Safety() {
- const location = useLocation();
+import { useNavigateTabs } from "../utils/navigation";
- 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]);
+export const Safety: React.FC = () =>{
+ useNavigateTabs();
return (
<>
diff --git a/src/utils/createSidebar.tsx b/src/utils/createSidebar.tsx
index 39e21171..80af7e9a 100644
--- a/src/utils/createSidebar.tsx
+++ b/src/utils/createSidebar.tsx
@@ -1,7 +1,6 @@
import { useEffect, useState } from "react";
import { ScrollLink } from "../components/ScrollLink";
import { Highlight, NewHighlight } from "./Highlight-functions";
-import { stringToSlug } from "./stringToSlug";
// Funktion zur Erstellung der Sidebar
export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
@@ -65,11 +64,6 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
scrolling(tab)
};
- const toggleTabAndScroll = (tab: string) => {
- setOpenTab(openTab === tab ? null : tab);
- // onsole.log(`Status of tab ${tab} is ${openTab}`)
-
- };
let subtitlenumber = 0;
return (
<>
@@ -154,7 +148,7 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
tabs.forEach(tab => {
numsBig.push(`${tab.tab}H`); // z.B. RoleH, ChecksH
if (tab.subtabs) {
- tab.subtabs.forEach((subtab, index) => {
+ tab.subtabs.forEach((index) => {
numsSub.push(`${tab.tab}${index + 1}`); // z.B. Role1H, Role2H
});
}
@@ -164,30 +158,3 @@ export function createSidebar(tabs: Array<{ tab: string; subtabs?: Array<string>
}
-/* function deriveTabsData(tabs: Array<{ tab: string; subtabs?: Array<string> }>) {
- let numsBig: string[] = [];
- let numsSub: string[] = [];
-
- tabs.forEach((tab) => {
- let bigslugname = stringToSlug(tab.tab);
- numsBig.push(bigslugname);
- if (tab.subtabs) {
- let subtabid = 0;
- tab.subtabs.forEach((_index) => {
- subtabid = subtabid +1;
- // console.log(subtabid)
- let tabname = `${tab.tab}${subtabid}`;
- let slugname = stringToSlug(tabname);
- numsSub.push(slugname);
- });
- }
- });
-
- return { numsBig, numsSub };
- }
-
-
- */
-
-
-
\ No newline at end of file
diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
new file mode 100644
index 00000000..79264072
--- /dev/null
+++ b/src/utils/navigation.ts
@@ -0,0 +1,33 @@
+// navigation.ts
+
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { handleScrollToCollapse, openNestedTab, openTab } from './TabNavigation';
+import { openFromOtherPage } from './openFromOtherpAge';
+
+export const useNavigateTabs = (): void => {
+ 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');
+
+ if (tabId) {
+ if (subTabId) {
+ openNestedTab(tabId, subTabId);
+ } else {
+ openTab(tabId);
+ }
+ }
+
+ if (collapseId) {
+ handleScrollToCollapse(collapseId);
+ }
+
+ if (tabId) {
+ openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
+ }
+ }, [location.search]);
+};
--
GitLab