Add useId to react-select components and remove unused fetch function

- Add instanceId via useId() to all FormikSelect components to prevent SSR hydration mismatches
- Remove unused getAllScanReportFieldsV3 from scanreports.ts

Author: Kehindecodes

app/api/api/views.py

@@ -884,11 +884,6 @@ def get_queryset(self):
             )
         )
 
-    def list(self, request, *args, **kwargs):
-        return super().list(request, *args, **kwargs)
-
-
-
 class ScanReportValueListV2(ScanReportPermissionMixin, GenericAPIView, ListModelMixin):
     """
     A view for listing ScanReportValue objects associated with a

app/next-client-app/api/scanreports.ts

@@ -319,21 +319,6 @@ export async function getScanReportValuesV3(
   }
 }
 
-export async function getAllScanReportFieldsV3(
-  scanReportId: string,
-  tableId: string,
-  filter: string | undefined,
-): Promise<ScanReportFieldV3[]> {
-  try {
-    return await fetchAllPages<ScanReportFieldV3>(
-      fetchKeys.fieldsV3(scanReportId, tableId, filter),
-    );
-  } catch (error) {
-    console.warn("Failed to fetch data.");
-    return [];
-  }
-}
-
 export async function getScanReportFieldsV3(
   scanReportId: string,
   tableId: string,

app/next-client-app/components/form-components/FormikSelect.tsx

@@ -1,4 +1,5 @@
 import { Field, FieldInputProps, FieldProps, FormikProps } from "formik";
+import { useId } from "react";
 import Select from "react-select";
 import makeAnimated from "react-select/animated";
 import config from "@/tailwind.config";
@@ -26,6 +27,7 @@ const CustomSelect = ({
   isDisabled: boolean;
   required?: boolean;
 }) => {
+  const instanceId = useId();
   const animatedComponents = makeAnimated();
 
   // Optional: detect dark mode for better contrast
@@ -53,6 +55,7 @@ const CustomSelect = ({
 
   return (
     <Select
+      instanceId={instanceId}
       name={field.name}
       value={selected()}
       onChange={onChange}

app/next-client-app/components/form-components/FormikSelectDataset.tsx

@@ -9,7 +9,7 @@ import {
 import Select from "react-select";
 import makeAnimated from "react-select/animated";
 import { getDatasetList } from "@/api/datasets";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { getAllProjects } from "@/api/projects";
 
 type Option = {
@@ -80,6 +80,7 @@ const CustomSelect = ({
   isDisabled: boolean;
   required?: boolean;
 }) => {
+  const instanceId = useId();
   const animatedComponents = makeAnimated();
   const onChange = (newValue: any, actionMeta: any) => {
     const selectedValues = isMulti
@@ -102,6 +103,7 @@ const CustomSelect = ({
 
   return (
     <Select
+      instanceId={instanceId}
       name={field.name}
       value={selected()}
       onChange={onChange}

app/next-client-app/components/form-components/FormikSelectEditors.tsx

@@ -10,7 +10,7 @@ import Select from "react-select";
 import makeAnimated from "react-select/animated";
 import config from "@/tailwind.config";
 import { getDataUsers } from "@/api/datasets";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { FindAndFormat } from "./FormikUtils";
 import { getProjectsDataset } from "@/api/projects";
 
@@ -47,6 +47,7 @@ const CustomSelect = ({
   form: FormikProps<any>;
   isDisabled: boolean;
 }) => {
+  const instanceId = useId();
   const animatedComponents = makeAnimated();
   const onChange = (newValue: any, actionMeta: any) => {
     const selectedValues = isMulti
@@ -68,6 +69,7 @@ const CustomSelect = ({
 
   return (
     <Select
+      instanceId={instanceId}
       name={field.name}
       value={selected()}
       onChange={onChange}

app/next-client-app/components/form-components/FormikSelectUsers.tsx

@@ -9,7 +9,7 @@ import {
 import Select from "react-select";
 import makeAnimated from "react-select/animated";
 import { getDataUsers } from "@/api/datasets";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { FindAndFormat } from "./FormikUtils";
 import { getAllProjects } from "@/api/projects";
 
@@ -49,6 +49,7 @@ const CustomSelect = ({
   form: FormikProps<any>;
   isDisabled: boolean;
 }) => {
+  const instanceId = useId();
   const animatedComponents = makeAnimated();
   const onChange = (newValue: any, actionMeta: any) => {
     const selectedValues = isMulti
@@ -70,6 +71,7 @@ const CustomSelect = ({
 
   return (
     <Select
+      instanceId={instanceId}
       name={field.name}
       value={selected()}
       onChange={onChange}