result merge fix

src/features/Results/CaseResult/CaseResultCard/CaseResultCard.styled.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../tokens/spacings';
+import { theme } from '../../../../tokens/theme';
+
+export const CaseResultCard = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 60%;
+  column-gap: ${spacings.LARGE};
+  padding-left: ${spacings.LARGE};
+
+  background-color: ${theme.light.ui.background.light};
+
+  &:hover {
+    background-color: ${theme.light.ui.background.medium};
+    cursor: pointer;
+  }
+`;

src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx

@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+import { ResultType } from '../../../../pages/ModelPages/Results/Results';
+import * as Styled from './CaseResultCard.styled';
+
+export const CaseResultCard = ({ result }: { result: ResultType }) => {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(`${result.id}`);
+  };
+
+  return (
+    <Styled.CaseResultCard onClick={handleClick}>
+      <h2>{result.case}</h2>
+      {result.finished ? <h4>Finished</h4> : <h4>Not computed yet!</h4>}
+    </Styled.CaseResultCard>
+  );
+};

src/features/Results/CaseResult/CaseResultList/CaseResultList.styled.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../tokens/spacings';
+
+export const CaseResultList = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  column-gap: ${spacings.LARGE};
+  row-gap: ${spacings.LARGE};
+
+  margin: ${spacings.XXX_LARGE};
+`;

src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx

@@ -0,0 +1,13 @@
+import { ResultType } from '../../../../pages/ModelPages/Results/Results';
+import { CaseResultCard } from '../../CaseResult/CaseResultCard/CaseResultCard';
+import * as Styled from './CaseResultList.styled';
+
+export const CaseResultList = ({ results }: { results: ResultType[] }) => {
+  return (
+    <Styled.CaseResultList>
+      {results.map((res: ResultType) => (
+        <CaseResultCard key={res.id} result={res} />
+      ))}
+    </Styled.CaseResultList>
+  );
+};

src/features/Results/CaseResult/CaseResults.styled.tsx → src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { spacings } from '../../../tokens/spacings';
-export const CaseResults = styled.div`
+import { spacings } from '../../../../tokens/spacings';
+export const CaseResultView = styled.div`
   display: flex;
   flex-direction: column;
 

src/features/Results/CaseResult/CaseResults.tsx → src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx

@@ -1,7 +1,7 @@
-import { ResultType } from '../../../pages/ModelPages/Results/Results';
-import * as Styled from './CaseResults.styled';
+import { ResultType } from '../../../../pages/ModelPages/Results/Results';
+import * as Styled from './CaseResultView.styled';
 
-export const CaseResults = () => {
+export const CaseResultView = () => {
   const caseResult: ResultType = {
     id: '1',
     case: 'Variogramcase 1',
@@ -14,11 +14,11 @@ export const CaseResults = () => {
 
   return (
     <>
-      <Styled.CaseResults>
+      <Styled.CaseResultView>
         <h2>Case Result</h2>
         <h3>{caseResult.case}</h3>
         {caseResult.finished ? <h4>Finished</h4> : <h4>Not computed yet!</h4>}
-      </Styled.CaseResults>
+      </Styled.CaseResultView>
     </>
   );
 };

src/pages/ModelPages/Results/Results.styled.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
-import { theme } from '../../../tokens/theme';
 
 export const TextDiv = styled.div`
   display: flex;
@@ -9,29 +8,3 @@ export const TextDiv = styled.div`
 
   row-gap: ${spacings.MEDIUM};
 `;
-
-export const ResultCaseList = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  column-gap: ${spacings.LARGE};
-  row-gap: ${spacings.LARGE};
-
-  margin: ${spacings.XXX_LARGE};
-`;
-
-export const ResultCaseCard = styled.div`
-  display: flex;
-  flex-direction: row;
-
-  width: 60%;
-  column-gap: ${spacings.LARGE};
-  padding-left: ${spacings.LARGE};
-
-  background-color: ${theme.light.ui.background.light};
-
-  &:hover {
-    background-color: ${theme.light.ui.background.medium};
-    cursor: pointer;
-  }
-`;

src/pages/ModelPages/Results/Results.tsx

@@ -1,6 +1,5 @@
-import { useNavigate } from 'react-router-dom';
+import { CaseResultList } from '../../../features/Results/CaseResult/CaseResultList/CaseResultList';
 import { NoResults } from '../../../features/Results/NoResults/NoResults';
-import * as Styled from './Results.styled';
 
 export type ResultType = {
   id: string;
@@ -20,27 +19,3 @@ export const Results = () => {
     </>
   );
 };
-
-const CaseResultList = ({ results }: { results: ResultType[] }) => {
-  return (
-    <Styled.ResultCaseList>
-      {results.map((res: ResultType) => (
-        <ResultCaseCard key={res.id} result={res} />
-      ))}
-    </Styled.ResultCaseList>
-  );
-};
-
-const ResultCaseCard = ({ result }: { result: ResultType }) => {
-  const navigate = useNavigate();
-  const handleClick = () => {
-    navigate(`${result.id}`);
-  };
-
-  return (
-    <Styled.ResultCaseCard onClick={handleClick}>
-      <h2>{result.case}</h2>
-      {result.finished ? <h4>Finished</h4> : <h4>Not computed yet!</h4>}
-    </Styled.ResultCaseCard>
-  );
-};

src/router.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter, NonIndexRouteObject } from 'react-router-dom';
 import { App } from './App';
 import { ModelView } from './features/ModelView/ModelView';
-import { CaseResults } from './features/Results/CaseResult/CaseResults';
+import { CaseResultView } from './features/Results/CaseResult/CaseResultView/CaseResultView';
 import { About } from './pages/About/About';
 import { Api } from './pages/Api/Api';
 import { Browse } from './pages/Browse/Browse';
@@ -47,7 +47,7 @@ const appRoutes = (tabs as NonIndexRouteObject[]).concat([
         path: 'results',
         element: <Results />,
       },
-      { path: 'results/:id', element: <CaseResults /> },
+      { path: 'results/:id', element: <CaseResultView /> },
     ],
   },
 ]);