Merge pull request #206 from Vizzuality/feat/project-status

project status and dependecies updates

Author: mluena

client/next.config.mjs

@@ -5,26 +5,25 @@ const nextConfig = {
   images: {
     unoptimized: true,
     remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "api.mapbox.com",
-      },
-      {
-        protocol: "http",
-        hostname: "0.0.0.0",
-      },
-      {
-        protocol: "https",
-        hostname: "staging.ccsa.dev-vizzuality.com",
-      },
-      {
-        protocol: "https",
-        hostname: "map.caribbeanaccelerator.org",
-      },
+      { protocol: "https", hostname: "api.mapbox.com" },
+      { protocol: "http", hostname: "0.0.0.0" },
+      { protocol: "https", hostname: "staging.ccsa.dev-vizzuality.com" },
+      { protocol: "https", hostname: "map.caribbeanaccelerator.org" },
     ],
   },
+
+  // Turbopack config (replaces webpack rules when using --turbopack)
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
+  // Keep webpack config for non-turbopack builds (next build / dev w/o turbopack)
   webpack: (config) => {
-    // Fixes warning Critical dependency: the request of a dependency is an expression
     config.module = {
       ...config.module,
       exprContextCritical: false,

client/package.json

@@ -49,21 +49,21 @@
     "@uiw/react-md-editor": "^4.0.4",
     "@vinhpd/react-simple-captcha": "^9.0.1",
     "autoprefixer": "10.4.16",
-    "axios": "^1.5.1",
+    "axios": "1.13.5",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "cmdk": "^0.2.0",
     "deck.gl": "^8.9.31",
     "eslint-plugin-import": "2.29.1",
     "export-to-csv": "1.2.1",
-    "express": "4.18.2",
+    "express": "4.20.0",
     "glslify": "^7.1.1",
     "jotai": "^2.5.0",
     "jwt-decode": "4.0.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "4.17.23",
     "mapbox-gl": "2.15.0",
-    "next": "^14.0.3",
-    "next-auth": "4.24.7",
+    "next": "16.1.6",
+    "next-auth": "4.24.12",
     "next-usequerystate": "^1.9.1",
     "pino": "8.15.1",
     "pino-http": "8.5.0",

client/src/app/(app)/layout.tsx

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from "react";
 
-import dynamic from "next/dynamic";
 import { headers } from "next/headers";
 
 import { Hydrate, dehydrate } from "@tanstack/react-query";
@@ -31,10 +30,10 @@ import Sidebar from "@/containers/sidebar";
 import LayoutProviders from "./layout-providers";
 import { getGetWelcomeMessageQueryOptions } from "@/types/generated/welcome-message";
 
-const WelcomeMessage = dynamic(() => import("@/containers/welcome-message"), { ssr: false });
+import WelcomeMessageWrapper from "@/containers/welcome-message/wrapper";
 
 export default async function AppLayout({ children }: PropsWithChildren) {
-  const url = new URL(headers().get("x-url")!);
+  const url = new URL((await headers()).get("x-url")!);
   const searchParams = url.searchParams;
 
   const queryClient = getQueryClient();
@@ -81,9 +80,11 @@ export default async function AppLayout({ children }: PropsWithChildren) {
   // Prefetch collaborators
   await queryClient.prefetchQuery(getGetCollaboratorsQueryOptions());
 
-  await queryClient.prefetchQuery(getGetWelcomeMessageQueryOptions({
-    populate: ["video", "image"],
-  }));
+  await queryClient.prefetchQuery(
+    getGetWelcomeMessageQueryOptions({
+      populate: ["video", "image"],
+    }),
+  );
 
   const dehydratedState = dehydrate(queryClient);
 
@@ -96,7 +97,7 @@ export default async function AppLayout({ children }: PropsWithChildren) {
           <Map />
         </main>
 
-        <WelcomeMessage />
+        <WelcomeMessageWrapper />
       </Hydrate>
     </LayoutProviders>
   );

client/src/app/(dashboard)/dashboard/datasets/changes-to-approve/[id]/page.tsx

@@ -35,8 +35,9 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
-export default async function ChangesToApprovePage({ params }: { params: { id: number } }) {
-  const { id } = params;
+export default async function ChangesToApprovePage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const id = parseInt(params.id);
   const queryClient = getQueryClient();
 
   await queryClient.prefetchQuery(

client/src/app/(dashboard)/dashboard/datasets/edit/[id]/page.tsx

@@ -30,8 +30,9 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
-export default async function EditDatasetPage({ params }: { params: { id: number } }) {
-  const { id } = params;
+export default async function EditDatasetPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id: idString } = await params;
+  const id = parseInt(idString, 10);
   const queryClient = getQueryClient();
 
   await queryClient.prefetchQuery(

client/src/app/(embed)/embed/layout.tsx

@@ -28,7 +28,8 @@ import Map from "@/containers/map";
 import LayoutProviders from "./layout-providers";
 
 export default async function EmbedLayout({ children }: PropsWithChildren) {
-  const url = new URL(headers().get("x-url")!);
+  const headersList = await headers();
+  const url = new URL(headersList.get("x-url")!);
   const searchParams = url.searchParams;
 
   const queryClient = getQueryClient();

client/src/app/parsers.ts

@@ -27,7 +27,6 @@ export const projectParser = parseAsInteger;
 export const pillarsParser = parseAsArrayOf(parseAsInteger).withDefault([]);
 export const availableForFundingParser = parseAsBoolean.withDefault(false);
 export const projectStatusParser = parseAsArrayOf(parseAsInteger).withDefault([]);
-export const projectStatusOrderParser = parseAsString.withDefault("asc");
 export const countriesParser = parseAsArrayOf(parseAsString).withDefault([]);
 export const publicationStateParser = parseAsString.withDefault("live");
 export const datasetStepParser = parseAsInteger.withDefault(1);

client/src/app/store.ts

@@ -16,7 +16,6 @@ import {
   projectParser,
   projectStatusParser,
   datasetStepParser,
-  projectStatusOrderParser,
 } from "@/app/parsers";
 
 import { Data, DatasetValuesCSV } from "@/components/forms/dataset/types";

client/src/components/forms/dataset/colors.tsx

@@ -269,7 +269,9 @@ export default function DatasetColorsForm({
   };
 
   const handleDelete = useCallback(() => {
-    mutateDeleteDatasetsId({ id: +datasetId });
+    if (!!datasetId) {
+      mutateDeleteDatasetsId({ id: +datasetId });
+    }
   }, [mutateDeleteDatasetsId, datasetId]);
 
   const handleSubmit = useCallback(

client/src/components/forms/dataset/data.tsx

@@ -103,7 +103,9 @@ export default function DatasetDataForm({
   const URLParams = useSyncSearchParams();
   const params = useParams();
   const { id: datasetId } = params;
-  const editedSuggestionData = useGetDatasetEditSuggestionsId(+datasetId);
+
+  const datasetIdNumber = Number(datasetId);
+  const editedSuggestionData = useGetDatasetEditSuggestionsId(datasetIdNumber);
 
   const { data: session } = useSession();
   const user = session?.user;
@@ -117,7 +119,7 @@ export default function DatasetDataForm({
   const { data: datasetValuesData } = useGetDatasetValues(
     {
       filters: {
-        dataset: datasetId,
+        dataset: datasetIdNumber,
       },
       "pagination[pageSize]": 300,
       populate: {
@@ -322,8 +324,8 @@ export default function DatasetDataForm({
   );
 
   const handleDelete = useCallback(() => {
-    mutateDeleteDatasetsId({ id: +datasetId });
-  }, [mutateDeleteDatasetsId, datasetId]);
+    mutateDeleteDatasetsId({ id: datasetIdNumber });
+  }, [mutateDeleteDatasetsId, datasetIdNumber]);
 
   const checkChanges = useCallback(
     (field: Field, index: number, param: ParamType) => {