From ec600f083214797118a1bf138d292f3f89ddc866 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 23 Sep 2024 01:33:25 +0200
Subject: [PATCH] Loading Screen auskommentiert
---
src/App/App.tsx | 29 ++++++++------------
src/utils/openElement.ts | 9 +++---
src/utils/useNavigation.ts | 56 ++++++++++++++++++++++++++------------
3 files changed, 56 insertions(+), 38 deletions(-)
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 098917d3..e2c63171 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,4 +1,4 @@
- import { useEffect, useState } from "react";
+ import { useEffect } from "react";
import "./App.css";
import "./HP.css"
import "./mediarules.css"
@@ -11,7 +11,6 @@ import "./App.scss";
import 'beautiful-react-diagrams/styles.css';
import "bootstrap/dist/css/bootstrap.min.css";
import "./Graph.css"
-import LoadingScreen from "../components/LoadingScreen.tsx";
import { Routes, Route } from "react-router-dom";
import { Footer } from "../components/Footer.tsx";
import { NotFound } from "../components/NotFound.tsx";
@@ -22,10 +21,9 @@ import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion";
-import { useNavigation } from "../utils/useNavigation.ts";
const App = () => {
- const { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll } = useNavigation();
+ /* const { isLoading } = useNavigation(); */
const { scrollYProgress } = useScroll({
offset: ["start start", "end end"],
@@ -50,23 +48,20 @@ const App = () => {
}, [title]);
- useEffect(() => {
- const timer = setTimeout(() => {
- console.log("Hiding loading screen");
- setIsLoading(false);
- }, 0); // Adjust the delay as needed, Update the loading state after 3 seconds
+ /* useEffect(() => {
+
+ if (isLoading) {
+ console.log("Hiding loading screen");
+ } else {
+ }
+}, [isLoading]); */
- return () => {
- console.log("Cleaning up timer");
- clearTimeout(timer); // Clear the timer on component unmount
- };
- }, []);
return (
<>
- {isLoading ? (
+ {/* {isLoading ? (
<LoadingScreen />
- ) : (
+ ) : ( */}
<>
@@ -138,7 +133,7 @@ const App = () => {
{/* Footer */}
<Footer />
</>
- )}
+ {/* )} */}
</>
);
};
diff --git a/src/utils/openElement.ts b/src/utils/openElement.ts
index 19ac2f1a..2dcb1020 100644
--- a/src/utils/openElement.ts
+++ b/src/utils/openElement.ts
@@ -1,10 +1,11 @@
+import { useTabNavigation } from "./TabNavigation";
+
export function openElement({
elementToOpen,
classToHide, /* tabcontent */
elementToClose,
buttonClass, /* = "tablinks" */
- eventTargetClass = "active",
- handleTabChange /* Hier handleTabChange als Parameter einfügen */
+ eventTargetClass = "active", /* Hier handleTabChange als Parameter einfügen */
}: {
elementToOpen: string,
classToHide: string,
@@ -12,7 +13,7 @@ export function openElement({
elementToClose?: string,
buttonClass?: string,
eventTargetClass?: string,
- handleTabChange: (tabId: string, subTabId?: string) => void /* Neuer Parameter für die Tab-Änderungslogik */
+ /* Neuer Parameter für die Tab-Änderungslogik */
}) {
const openElement = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
let i, elementsToHide, elementsToClose, tabLinks;
@@ -47,7 +48,7 @@ export function openElement({
// Add the "active" class to the clicked element
event.currentTarget.className += ` ${eventTargetClass}`;
-
+ const { handleTabChange } = useTabNavigation();
// Rufe handleTabChange auf, um die URL entsprechend anzupassen
handleTabChange(elementToOpen); // Hier wird die Tab-Änderung und URL-Update durchgeführt
};
diff --git a/src/utils/useNavigation.ts b/src/utils/useNavigation.ts
index 39f76f7d..b09e3cd0 100644
--- a/src/utils/useNavigation.ts
+++ b/src/utils/useNavigation.ts
@@ -1,25 +1,50 @@
-import { useNavigate, useLocation } from "react-router-dom";
-import { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
export const useNavigation = () => {
const navigate = useNavigate();
- const location = useLocation();
- const previousPath = useRef(location.pathname);
+
const [isLoading, setIsLoading] = useState(false);
-
+
const goToPagesAndOpenTab = (tabId: string, path: string) => {
- if (previousPath.current !== path) {
- setIsLoading(true);
- }
+
+
navigate(`${path}?tab=${tabId}`);
- setTimeout(() => setIsLoading(false), 500);
+
+ };
+ const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
+
+
+ navigate(`${path}?collapseId=${collapseId}`);
};
+ const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
+
+
+ let url = `${path}?tab=${tabId}`;
+ if (collapseId) {
+ url += `&collapseId=${collapseId}`;
+ }
+ navigate(url);
+ };
+ const goToPageWithNestedTabs = ({ path, tabId, subTabId, collapseId }: { path: string, tabId: string, subTabId?: string, collapseId?: string }) => {
+
+
+ let url = `${path}?tab=${tabId}`;
+ if (subTabId) {
+ url += `&subTab=${subTabId}`;
+ }
+ if (collapseId) {
+ url += `&collapseId=${collapseId}`;
+ }
+ navigate(url);
+ };
+
+
const goToPageWithTabAndScroll = ({ path, tabId, scrollToId }: { path: string, tabId: string, scrollToId?: string }) => {
- if (previousPath.current !== path) {
- setIsLoading(true);
- }
+
+
let url = `${path}?tab=${tabId}`;
if (scrollToId) {
url += `&scrollTo=${scrollToId}`;
@@ -40,9 +65,6 @@ export const useNavigation = () => {
};
- useEffect(() => {
- previousPath.current = location.pathname;
- }, [location.pathname]);
-
- return { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll };
+
+ return { isLoading, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
};
--
GitLab