diff --git a/src/components/goto.tsx b/src/components/goto.tsx index 5eb41f1124bcb17abcbfae6e30a00cb388b4525b..9b7a26dc4ed68194688e947edb3b69fc21e26797 100644 --- a/src/components/goto.tsx +++ b/src/components/goto.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from "react-router-dom"; +/* import { useNavigate } from "react-router-dom"; */ export const goTo = (el: HTMLElement): void => { const elementTop = el.getBoundingClientRect().top; @@ -50,12 +50,12 @@ export const SupScrollLink : React.FC<SupScrollLinkProps> = ({label }) => { </sup> ); }; - -export const goToTextsAndOpenCollapsible = (collapseId: string) => { +/* +export const goToTextsAndOpenCollapsible = ({collapseId, path}: {collapseId: string, path: string}) => { const navigate = useNavigate(); - navigate(collapseId); + navigate(`${path}${collapseId}`); }; -export const goToPagesAndOpenTab = (tabId: string) => { +export const goToPagesAndOpenTab = (tabId: string, path: string) => { const navigate = useNavigate(); - navigate(tabId); -}; \ No newline at end of file + navigate(`${path}${tabId}`); +}; */ \ No newline at end of file diff --git a/src/contents/education.tsx b/src/contents/education.tsx index 8d40105e768980930d0d0899b8001ebced96807d..22f9e8b32ff8eee6990210e525e33085f5e3bc9f 100644 --- a/src/contents/education.tsx +++ b/src/contents/education.tsx @@ -1,11 +1,12 @@ import { ButtonOne} from "../components/Buttons"; -import { goToPagesAndOpenTab, goToTextsAndOpenCollapsible } from "../components/goto"; import { useEffect } from "react"; import { useLocation } from "react-router-dom"; import { openFromOtherPage } from "../components/Buttons"; +import { useNavigation } from "../utils/useNavigation"; export function Education() { + const { goToPagesAndOpenTab, goToTextsAndOpenCollapsible } = useNavigation(); const location = useLocation(); useEffect(() => { const params = new URLSearchParams(location.search); @@ -37,9 +38,9 @@ export function Education() { <> <div> <h2>Interviews Page</h2> - <button onClick={() => goToTextsAndOpenCollapsible("/description?collapseId=symptoms-collapsible")}> + <a onClick={() => goToTextsAndOpenCollapsible("symptoms-collapsible", "/description?collapseId=")}> {/* */} Go to Texts and Open Collapsible 1 - </button> + </a> </div> <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}> <div className="col"> @@ -96,7 +97,7 @@ export function Education() { <h3>Why and in which ways were we invested in MUKOmove? </h3> <p>We did not stop at our participation itself – we wanted to make other people from our university and city aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team. - Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('/human-practices?tab=InvWesthoff')}>Kathrin Westhoff</a>, the head of a + Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known this illness still is. Especially the interview with the physiotherapist made us realize how important exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in diff --git a/src/utils/useNavigation.ts b/src/utils/useNavigation.ts new file mode 100644 index 0000000000000000000000000000000000000000..204956bdf3724a559bcb8e41938c3501b5692708 --- /dev/null +++ b/src/utils/useNavigation.ts @@ -0,0 +1,15 @@ +import { useNavigate } from "react-router-dom"; + +export const useNavigation = () => { + const navigate = useNavigate(); + + const goToPagesAndOpenTab = (tabId: string, path: string) => { + navigate(`${path}${tabId}`); + }; + + const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => { + navigate(`${path}${collapseId}`); + }; + + return { goToPagesAndOpenTab, goToTextsAndOpenCollapsible }; +}; \ No newline at end of file