markdown-viewer

package.json

@@ -18,7 +18,6 @@
   },
   "dependencies": {
     "@artsy/fresnel": "6.1.0",
-    "@deck.gl/core": "^8.9.6",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
@@ -54,6 +53,7 @@
     "@turf/bbox": "6.5.0",
     "@types/d3-format": "^3.0.1",
     "@types/lodash-es": "4.17.7",
+    "autoprefixer": "^10.4.19",
     "axios": "1.6.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
@@ -74,6 +74,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
     "react-map-gl": "7.0.21",
+    "react-markdown": "^9.0.1",
     "react-virtualized": "9.22.5",
     "recharts": "^2.5.0",
     "recoil": "^0.7.7",
@@ -88,18 +89,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.41.0",
-    "@transifex/cli": "6.0.2",
     "@transifex/native": "6.0.2",
     "@transifex/react": "6.0.2",
     "@types/geojson": "7946.0.10",
-    "@types/google.analytics": "0.0.42",
     "@types/mapbox-gl": "2.7.11",
-    "@types/node": "18.15.0",
+    "@types/node": "20.12.7",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "5.48.2",
-    "assert": "2.0.0",
-    "autoprefixer": "10.4.14",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.2",
     "eslint-config-prettier": "8.6.0",
@@ -108,9 +105,7 @@
     "prettier": "2.8.3",
     "prettier-plugin-tailwindcss": "0.2.1",
     "react-icons": "4.11.0",
-    "start-server-and-test": "1.12.1",
     "svg-sprite-loader": "6.0.11",
-    "svgo": "3.0.2",
     "svgo-loader": "3.0.3",
     "typescript": "4.9.4"
   },

src/components/contextual/contextual-basemaps.tsx

@@ -40,8 +40,8 @@ const BasemapsMapSettings = () => {
   );
 
   return (
-    <div className="relative flex flex-col text-sm text-black/85">
-      <RadioGroup onValueChange={handleClick} defaultValue={defaultActive}>
+    <div className="relative flex flex-col text-sm leading-4 text-black/85">
+      <RadioGroup onValueChange={handleClick} defaultValue={defaultActive} className="space-y-2">
         <div className="flex space-x-4">
           <RadioGroupItem
             option={{ value: 'no-layer', label: 'No layer' }}

src/components/markdown-viewer/index.tsx

@@ -0,0 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+
+function MarkdownViewer({ markdownText }) {
+  return (
+    <div className="prose prose-sm mx-auto p-4 sm:prose-lg lg:prose-xl">
+      <ReactMarkdown>{markdownText}</ReactMarkdown>
+    </div>
+  );
+}
+
+export default MarkdownViewer;

src/components/radio-group/index.tsx

@@ -11,7 +11,7 @@ export interface RadioGroupDemoProps extends RadioGroupProps {
 }
 
 const RadioGroup = ({ options, children, ...props }: RadioGroupDemoProps) => (
-  <RadioGroupPrimitive.Root className="space-y flex flex-col" {...props}>
+  <RadioGroupPrimitive.Root className="flex flex-col" {...props}>
     {!!options
       ? options.map((option) => (
           <div key={option.value}>

src/components/suggested-layers/index.tsx

@@ -44,9 +44,9 @@ const SuggestedLayers = ({
   // };
 
   return (
-    <div className="flex flex-col space-y-4 rounded-xl bg-black bg-opacity-[4%] p-3">
+    <div className="flex flex-col space-y-5 rounded-xl bg-black bg-opacity-[4%] p-3">
       <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-4">
           {!!thumbSource && (
             <div className="relative h-[42px] w-[42px] shrink-0 rounded-2xl">
               <Image
@@ -62,7 +62,7 @@ const SuggestedLayers = ({
           {color && (
             <div className="h-[42px] w-[42px] rounded-2xl" style={{ backgroundColor: color }} />
           )}
-          <p className="text-sm">{description}</p>
+          <p className="text-sm font-light">{description}</p>
         </div>
         <div className="flex items-start space-x-2">
           <SwitchWrapper id={id}>

src/containers/datasets/alerts/hooks.tsx

@@ -4,6 +4,7 @@ import type { SourceProps, LayerProps } from 'react-map-gl';
 
 import sortBy from 'lodash-es/sortBy';
 
+import Error from 'next/error';
 import { useRouter } from 'next/router';
 
 import { formatAxis } from 'lib/format';
@@ -110,6 +111,7 @@ export function useAlerts<T>(
   const setStartDate = useSetRecoilState(alertsStartDate);
   const setEndDate = useSetRecoilState(alertsEndDate);
   const {
+    push,
     query: { params: queryParams },
   } = useRouter();
 
@@ -132,7 +134,7 @@ export function useAlerts<T>(
         .then((response) => response.data)
         .catch((err: CanceledError<unknown> | AxiosError) => {
           if (err.code === 'ERR_CANCELED') onCancel?.();
-          return err;
+          return <Error statusCode={err.response.status} />;
         });
     }
 
@@ -144,17 +146,30 @@ export function useAlerts<T>(
           location_id,
           ...params,
         },
-      }).then((response) => response.data);
+      }).then((response) => {
+        console.log(response, 'response no analysis');
+        return response.data;
+      });
     }
   };
 
   const query = useQuery(['alerts', params, location_id], fetchAlerts, {
     placeholderData: [],
+    select: (data) => {
+      if (!data) return null;
+      if (data?.props?.statusCode === 500) {
+        console.log('dentro', data.props);
+        return <Error statusCode={500} />;
+      }
+      console.log(data, 'data');
+      return data;
+    },
     ...queryOptions,
   });
 
   const { data, isFetched } = query;
-
+  console.log('isError', data);
+  // if (isError) return <Error statusCode={500} />;
   const fullData = getData(data);
   const noData = isFetched && !fullData?.length;
 

src/containers/datasets/alerts/widget.tsx

@@ -218,16 +218,14 @@ const AlertsWidget = () => {
               name="Planet-NICFI Satellite Imagery"
               thumbSource="/images/thumbs/basemaps/basemap-satellite.jpg"
               id="planet_medres_visual_monthly"
-              description="We recommend you to use Planet-NICFI Satellite Imagery to validate the alerts."
+              description="We recommend you to use ## Planet-NICFI Satellite Imagery to validate the alerts."
             >
               {isActive && (
-                <div className="pb-4">
-                  <DateSelect
-                    mosaic_id="45d01564-c099-42d8-b8f2-a0851accf3e7"
-                    id="planet_medres_visual_monthly"
-                    className={{ content: 'w-[420px]' }}
-                  />
-                </div>
+                <DateSelect
+                  mosaic_id="45d01564-c099-42d8-b8f2-a0851accf3e7"
+                  id="planet_medres_visual_monthly"
+                  className={{ content: 'w-[420px]' }}
+                />
               )}
             </SuggestedLayers>
           </div>

src/containers/datasets/drawing-tool/index.tsx

@@ -59,7 +59,6 @@ const WidgetDrawingTool = () => {
   }, [setDrawingToolState, isDrawingToolEnabled, resetDrawingUploadToolState]);
 
   useUploadFile(acceptedFiles?.[0], onUploadFile);
-
   useEffect(() => {
     setMapCursor(isDrawingToolEnabled ? 'cell' : 'grab');
   }, [setMapCursor, isDrawingToolEnabled]);

src/containers/datasets/national-dashboard/indicator-source/index.tsx

@@ -47,6 +47,7 @@ const IndicatorSource = ({
   );
 
   const compareNationalLayers = activeLayersIds.includes(id);
+
   useEffect(() => {
     if (isActive && !compareNationalLayers) {
       const layersUpdate = updateLayers(activeLayers, {

src/containers/datasets/restoration-sites/hooks.tsx

@@ -8,7 +8,6 @@ import {
 } from 'store/widgets/restoration-sites';
 
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
-import { GeoJsonProperties, GeoJsonTypes } from 'geojson';
 import { Visibility } from 'mapbox-gl';
 import { useRecoilValue } from 'recoil';
 
@@ -19,7 +18,7 @@ import type { UseParamsOptions } from 'types/widget';
 
 import API from 'services/api';
 
-import type { Data, DataResponse, DataFilters, RestorationSite } from './types';
+import type { Data, DataResponse, DataFilters } from './types';
 
 // widget data
 export function useMangroveRestorationSites(

src/containers/navigation/index.tsx

@@ -3,7 +3,6 @@ import GuideSwitcher from 'containers/guide/switcher';
 import LanguageSelector from 'containers/navigation/language-selector';
 import Menu from 'containers/navigation/menu';
 import News from 'containers/navigation/news';
-
 const HELPER_ID = 'menu-categories';
 
 const AppTools = () => (

src/hooks/analysis/index.ts

@@ -29,8 +29,8 @@ export const useUploadFile = (
 ) => {
   const [, setUploadErrorModal] = useRecoilState(uploadFileAtom);
   const data = new FormData();
-  data.append('file', file);
 
+  data.append('file', file);
   return useQuery(['converter'], () => fetchUploadFile(data), {
     ...queryOptions,
     enabled: !!file && enabled,

src/pages/500.tsx

@@ -1,3 +1,5 @@
-export default function Custom500() {
-  return <h1>500 - Server-side error occurred</h1>;
+export default function Custom500({ statusCode }) {
+  return (
+    <h1 className="h-screen w-screen text-black">500 - Server-side error occurred {statusCode}</h1>
+  );
 }

tests/navigation.spec.ts

@@ -1,5 +1,4 @@
 import { expect, test } from '@playwright/test';
-import { fi } from 'date-fns/locale';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');