From d1893911079abc7fdc4471097e20fc8d487f2725 Mon Sep 17 00:00:00 2001
From: BriannaVH <vanheckeb@merrimack.edu>
Date: Thu, 6 Jul 2023 10:44:48 -0400
Subject: [PATCH] Dependencies no longer dissapear when a user clicks the link
 to another artifact

---
 app/src/components/DependencyCards.tsx |  6 +++---
 app/src/pages/[resourceType]/[id].tsx  | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/src/components/DependencyCards.tsx b/app/src/components/DependencyCards.tsx
index dbdcec09..292c5935 100644
--- a/app/src/components/DependencyCards.tsx
+++ b/app/src/components/DependencyCards.tsx
@@ -1,5 +1,4 @@
 import {
-  Anchor,
   ActionIcon,
   Center,
   createStyles,
@@ -11,6 +10,7 @@ import {
   getBreakpointValue,
   rem
 } from '@mantine/core';
+import Link from 'next/link';
 import React from 'react';
 import { SquareArrowRight } from 'tabler-icons-react';
 
@@ -68,13 +68,13 @@ function Dependencies(props: { relatedArtifact: fhir4.RelatedArtifact }) {
               </div>
             </Grid.Col>
             {dependencyInfo.type && (
-              <Anchor href={`/${dependencyInfo.link}`}>
+              <Link href={`/${dependencyInfo.link}`}>
                 <Tooltip label={'Open Dependency Resource'} openDelay={1000}>
                   <ActionIcon radius="md" size="md" variant="subtle" color="gray">
                     {<SquareArrowRight size="24" />}
                   </ActionIcon>
                 </Tooltip>
-              </Anchor>
+              </Link>
             )}
           </Grid>
         </Paper>
diff --git a/app/src/pages/[resourceType]/[id].tsx b/app/src/pages/[resourceType]/[id].tsx
index 99bf984e..0427d7b9 100644
--- a/app/src/pages/[resourceType]/[id].tsx
+++ b/app/src/pages/[resourceType]/[id].tsx
@@ -21,6 +21,7 @@ import Dependency from '@/components/DependencyCards';
 export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const resourceType = jsonData.resourceType;
 
+  const [activeTab, setActiveTab] = useState<string | null>('json');
   const [height, setWindowHeight] = useState(0);
 
   const decodedCql = useMemo(() => {
@@ -48,7 +49,6 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
     };
     handleResize();
     window.addEventListener('resize', handleResize);
-    return window.removeEventListener('resize', handleResize);
   }, []);
 
   const {
@@ -81,6 +81,10 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
     }
   );
 
+  useEffect(() => {
+    setActiveTab('json');
+  }, [jsonData.id]);
+
   const draftMutation = trpc.draft.createDraft.useMutation({
     onSuccess: data => {
       notifications.show({
@@ -133,7 +137,7 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
           </Group>
         </div>
         <Divider my="sm" pb={6} />
-        <Tabs variant="outline" defaultValue="json">
+        <Tabs variant="outline" value={activeTab} onTabChange={setActiveTab}>
           <Tabs.List>
             <Tabs.Tab value="json">JSON</Tabs.Tab>
             {decodedElm != null && <Tabs.Tab value="elm">ELM</Tabs.Tab>}
@@ -182,11 +186,11 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
             <Tabs.Panel value="dependencies">
               <Space h="md" />
               <Text c="dimmed">
-                Number of Dependencies:<b> {dataRequirements?.relatedArtifact.length} </b>
+                Number of Dependencies:<b> {dataRequirements.relatedArtifact.length} </b>
               </Text>
               <Space h="md" />
               <ScrollArea.Autosize mah={height * 0.8} type="hover">
-                {dataRequirements?.relatedArtifact.map((relatedArtifact, index) => (
+                {dataRequirements.relatedArtifact.map((relatedArtifact, index) => (
                   <Dependency key={index} relatedArtifact={relatedArtifact} />
                 ))}
               </ScrollArea.Autosize>