New Link Type

src/components/Link.tsx

@@ -5,4 +5,80 @@ export function TabScrollLink({tab, scrollId, num}:{tab: string, scrollId: strin
     return(
         <sup><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scrollId})}>{num}</a></sup>
     )
+}
+
+interface Ourlink{
+    path: string, 
+    text: string,
+    scrollToId?: string,
+    tabId?: string,
+    subTabId?: string,
+    collapseId?: string
+}
+
+// 2^4 = 16 possible combinations
+
+export function OurLink({path, scrollToId, tabId, subTabId, collapseId, text}:Ourlink){
+    const {goToPlace} = useNavigation(); 
+    // 1. [1-1-1-1] go to page and open tab and open collapsible and open subtab in collapsible and scroll to something
+    if(tabId && subTabId && scrollToId && collapseId) {
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)    
+    } 
+    // 2. [1-1-1-0] go to page and open tab and open subtab and scroll to something
+    else if (tabId && subTabId && scrollToId && !collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, scrollToId:scrollToId})}>{text}</a>)
+    }
+    //++3. [1-1-0-1] go to page and open tab and open collapsible
+    else if (tabId && subTabId && !scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId, collapseId:collapseId})}>{text}</a>)
+    }
+    //++4. [1-1-0-0] go to page and opent tab and open subtab NO SCROLLING
+    else if (tabId && subTabId && !scrollToId && !collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, subTabId: subTabId})}>{text}</a>)
+    }
+    //++5. [1-0-1-1] go to page and open tab and open collapsible and scroll to something in the collapsible
+    else if (tabId && !subTabId && scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
+    } 
+    //++6. [1-0-1-0] go to page and open tab and scroll to something
+    else if (tabId && !subTabId && scrollToId && !collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, scrollToId:scrollToId})}>{text}</a>)
+    }
+    //++7. [1-0-0-1] go to page and open tab and open collapsible in tab
+    else if (tabId && !subTabId && !scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId: tabId, collapseId:collapseId})}>{text}</a>)
+    }
+    //++8. [1-0-0-0] go to page and open a tab
+    else if (tabId && !subTabId && !scrollToId && !collapseId){
+        return(<a onClick={() => goToPlace({path: path, tabId:tabId})}>{text}</a>)
+    }
+    //++9. [0-1-1-1] go to page and open a collapsible and open a subtab in the collapsible and scroll to something in the subtab
+    else if (!tabId && subTabId && scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, subTabId:subTabId, scrollToId:scrollToId})}>{text}</a>)
+    }
+    //++10. [0-1-1-0] it is not possible to only open a subtab and scroll to something there
+    /*  */
+    //++11. [0-1-0-1] go to page and open a collapsible and scroll to something in the collapsible
+    else if (!tabId && subTabId && !scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, collapseId:collapseId, subTabId:subTabId})}>{text}</a>)
+    }
+    //++12: [0-1-0-0] it is not possible to go to a page and only open a subtab 
+    /*  */
+    //++13. [0-0-1-1] go to page and open a collapsible scroll to something in the collapsible
+    else if (!tabId && !subTabId && scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, scrollToId:scrollToId, collapseId:collapseId})}>{text}</a>)
+    }
+    //++14. [0-0-1-0] go to a page and scroll to something
+    else if (!tabId && !subTabId && scrollToId && !collapseId){
+        return(<a onClick={() => goToPlace({path: path, scrollToId:scrollToId})}>{text}</a>)
+    }
+    // 15. [0-0-0-1] go to a page and open a collapsible
+    else if (!tabId && !subTabId && !scrollToId && collapseId){
+        return(<a onClick={() => goToPlace({path: path, collapseId:collapseId})}>{text}</a>)
+    }
+    // 16. [0-0-0-0] Catch all - just go to the page 
+    else {
+        return(<a onClick={() => goToPlace({path: path})}>{text}</a>)
+    }
+    
 }
\ No newline at end of file

src/utils/useNavigation.ts

@@ -16,7 +16,6 @@ export const useNavigation = () => {
     };
     const goToTextsAndOpenCollapsible = (collapseId: string, path: string) => {
         
-        
         navigate(`${path}?collapseId=${collapseId}`);
     };
     const goToPageWithTabAndCollapsible = ({ path, tabId, collapseId }: { path: string, tabId: string, collapseId?: string }) => {
@@ -80,6 +79,31 @@ export const useNavigation = () => {
           }, 500); 
     };
 
+    const goToPlace = ({ path, scrollToId,tabId, subTabId, collapseId}: { path: string, scrollToId?: string, tabId?: string, subTabId?: string, collapseId?: string}) => {
+        let url = `${path}}`;
+        if (tabId) {
+            url += `?tab=${tabId}`;
+            if (collapseId) {
+                url += `&collapseId=${collapseId}`;
+            }
+            if (subTabId) {
+                url += `&subTab=${subTabId}`;
+            }
+        }
+        if (collapseId && !tabId) {
+            url += `?collapseId=${collapseId}`;
+            if (subTabId) {
+                url += `&subTab=${subTabId}`;
+            }
+        }
+        if (scrollToId && !tabId) {
+            url += `?scrollTo=${scrollToId}`;
+        } else if (scrollToId && tabId) {
+            url += `&scrollTo=${scrollToId}`;
+        } 
+        navigate(url);
+    }
+
     
-    return { isLoading, changePageWithLoadingScreen,  goToPageAndScroll, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+    return { isLoading,goToPlace, changePageWithLoadingScreen,  goToPageAndScroll, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
 };