Import update:

- verision logic updated and moved into the second useEffect, so that dependencies can be added without getting errors when fetching data.

Otherwise it's typesafety updates

Author: oscarlund121

src/common/ui/SpacedList.tsx

@@ -13,7 +13,7 @@ const SpacedList = ({
   return (
     <List disablePadding sx={{ ...sx }}>
       {React.Children.map(children, (child, idx) => {
-        const baseKey = (child as any)?.key ?? "idx";
+        const baseKey = (child as React.ReactElement)?.key ?? "idx";
         const key = `${String(baseKey)}-${idx}`;
         return (
           <Box

src/features/sidebar/view/internal/ClientSplitView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useContext, useState } from "react";
+import { useEffect, useContext } from "react";
 import { Stack, useMediaQuery, useTheme } from "@mui/material";
 import { isMac, useKeyboardShortcut, SidebarTogglableContext } from "@/common";
 import { useSidebarOpen } from "../../data";

src/features/sidebar/view/internal/diffbar/DiffContent.tsx

@@ -26,29 +26,32 @@ const DiffContent = () => {
   const [selectedChange, setSelectedChange] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
 
-
   useEffect(() => {
-    setData(null);
-    if (version !== undefined) {
-      setFromBranch(version.baseRef || "");
-      setToBranch(version.id);
-    }
-  }, [project, specification, version]);
+      setData(null);
+
+      let currentFromBranch = fromBranch;
+      let currentToBranch = toBranch;
+
+      if (version !== undefined) {
+        currentFromBranch = version.baseRef || "";
+        currentToBranch = version.id;
+        setFromBranch(version.baseRef || "");
+        setToBranch(version.id);
+      }
 
-  useEffect(() => {
     const compare = async () => {
-      if (project && specification && fromBranch && toBranch) {
+      if (project && specification && currentFromBranch && currentToBranch) {
         setLoading(true);
         const res = await fetch(
-          `/api/diff/${project.owner}/${project.name}/${specification.id}?from=${fromBranch}&to=${toBranch}`
+          `/api/diff/${project.owner}/${project.name}/${specification.id}?from=${currentFromBranch}&to=${currentToBranch}`
         );
         setLoading(false);
         const result = await res.json();
         setData(result);
       }
     };
     compare();
-  }, [toBranch, fromBranch]);
+  }, [toBranch, fromBranch, project, specification, version]);
 
   const changes = data?.changes || [];
   const versions = project?.versions || [];

src/features/sidebar/view/internal/diffbar/components/DiffHeader.tsx

@@ -25,7 +25,7 @@ const DiffHeader = ({
           Added changes from main:
         </Typography>
         <Select value={fromBranch} onChange={(e) => onChange(e.target.value)}>
-          {versions.map((v: any) => (
+          {versions.map((v: Version) => (
             <MenuItem key={v.id} value={v.id}>
               {v.name}
             </MenuItem>

src/features/sidebar/view/internal/tertiary/Container.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { SxProps } from "@mui/system"
+
 import { Box } from "@mui/material"
 import { useTheme } from "@mui/material/styles" 
 
 const DiffContainer = ({
   width,
   isOpen,
-  onClose,
+  onClose: _onClose,
   children
 }: {
   width: number