Merge pull request #73 from Vizzuality/staging

merge

client/.env.development

@@ -1,4 +1,6 @@
 NEXT_PUBLIC_URL=http://localhost:$PORT
-NEXT_PUBLIC_API_URL=http://0.0.0.0:1337/cms
+NEXT_PUBLIC_API_URL=http://0.0.0.0:1337/api
+NEXT_PUBLIC_CMS_URL=http://0.0.0.0:1337
 NEXT_PUBLIC_GA_TRACKING_ID=UA-000000-01
 NEXT_PUBLIC_MAPBOX_API_TOKEN=your-token-here
+

client/.eslintignore

@@ -1,3 +1,4 @@
 /.next
 /node_modules
-/public
+/public
+/src/types/generated

client/.husky/post-checkout

@@ -0,0 +1,13 @@
+#!/bin/bash
+. "$(dirname -- "$0")/_/husky.sh"
+
+SCRIPT_DIR="$(pwd)"
+CMS_ENV_FILE="$SCRIPT_DIR/cms/.env"
+echo $CMS_ENV_FILE
+if [ -f "$CMS_ENV_FILE" ] ; then
+    echo "Importing CMS config.."
+    cd ./cms && yarn config-sync import -y
+else
+    echo "CMS env file does not exist, can't import config"
+    echo "DEBUG: looking for env file in $CMS_ENV_FILE"
+fi

client/.husky/post-merge

@@ -0,0 +1,29 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# If client yarn.lock has changed, run yarn to install dependencies
+CLIENT_CHANGED=`git diff HEAD@{1} --stat -- ./client/yarn.lock | wc -l`
+if [ "$CLIENT_CHANGED" -gt 0 ];
+then
+    echo "client/yarn.lock has changed!"
+    cd ./client && yarn
+fi
+
+# If CMS yarn.lock has changed, run yarn to install dependencies
+CMS_CHANGED=`git diff HEAD@{1} --stat -- ./cms/yarn.lock | wc -l`
+if [ "$CMS_CHANGED" -gt 0 ];
+then
+    echo "cms/yarn.lock has changed!"
+    cd ./cms && yarn
+fi
+
+# If CMS env file exists and there are changes to the config sync files, import them into the DB
+CMS_CONFIG_CHANGED=`git diff HEAD@{1} --stat -- ./cms/config/sync/ | wc -l`
+SCRIPT_DIR="$(pwd)"
+CMS_ENV_FILE="$SCRIPT_DIR/../cms/.env"
+if [[ ! -f "$CMS_ENV_FILE" ]] ; then
+    echo "CMS env file does not exist, can't import config."
+elif [[ -f "$CMS_ENV_FILE" && "$CMS_CONFIG_CHANGED" -gt 0 ]]; then
+    echo "Importing CMS config..."
+    cd ./cms && yarn config-sync import -y
+fi

client/next.config.mjs

@@ -3,10 +3,23 @@ import("./src/env.mjs");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'api.mapbox.com',
+        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",
       },
     ],
   },

client/orval.config.ts

@@ -31,9 +31,23 @@ module.exports = {
           "Pillar",
           "Sdg",
           "Download-email",
+          "Objective",
+          "Organization-type",
           "Other-tool",
+          "Other-tools-category",
+          "Project-edit-suggestion",
+          "Project-status",
+          "Types-of-funding",
+          "Tool-edit-suggestion",
           "Dataset-value",
+          "Dataset-edit-suggestion",
           "Collaborator",
+          "Collaborator-edit-suggestion",
+          "User",
+          "Users-Permissions - Auth",
+          "Users-Permissions - Users & Roles",
+          "Welcome-message",
+          "World-country",
         ],
       },
     },

client/package.json

@@ -25,6 +25,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@next/third-parties": "^14.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-checkbox": "1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
@@ -41,35 +42,45 @@
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "4.35.3",
     "@turf/centroid": "7.0.0-alpha.2",
+    "@types/chroma-js": "^2.4.4",
     "@types/react-world-flags": "^1.4.5",
     "@typescript-eslint/eslint-plugin": "6.7.3",
     "@typescript-eslint/parser": "6.7.3",
+    "@uiw/react-md-editor": "^4.0.4",
+    "@vinhpd/react-simple-captcha": "^9.0.1",
     "autoprefixer": "10.4.16",
     "axios": "^1.5.1",
     "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",
     "glslify": "^7.1.1",
     "jotai": "^2.5.0",
     "lodash-es": "^4.17.21",
     "mapbox-gl": "2.15.0",
     "next": "^14.0.3",
+    "next-auth": "4.24.7",
     "next-usequerystate": "^1.9.1",
     "pino": "8.15.1",
     "pino-http": "8.5.0",
     "pino-pretty": "10.2.0",
     "postcss": "8.4.30",
     "react": "18.2.0",
+    "react-cookie": "^7.1.4",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.48.2",
     "react-icons": "4.11.0",
     "react-map-gl": "7.1.6",
     "react-markdown": "^9.0.0",
+    "react-player": "^2.16.0",
+    "react-toastify": "^10.0.5",
     "react-world-flags": "^1.6.0",
     "rooks": "7.14.1",
+    "screenfull": "^6.0.2",
     "tailwind-merge": "1.14.0",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "1.0.7",
@@ -78,6 +89,8 @@
   },
   "devDependencies": {
     "@playwright/test": "1.38.1",
+    "@radix-ui/react-separator": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.4",
     "@tanstack/eslint-plugin-query": "4.34.1",
     "@types/express": "4.17.18",
     "@types/geojson": "^7946.0.12",
@@ -86,10 +99,13 @@
     "@types/node": "20.7.0",
     "@types/react": "18.2.23",
     "@types/react-dom": "18.2.8",
-    "eslint": "8.50.0",
+    "chroma-js": "2.6.0",
+    "date-fns": "3.6.0",
+    "eslint": "^9.8.0",
     "eslint-config-next": "13.5.3",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "8.0.3",
     "orval": "^6.19.0",
     "prettier": "3.0.3",

client/src/app/(app)/collaborators/page.tsx

@@ -1,18 +1,15 @@
 import CollaboratorsList from "@/containers/collaborators";
+import CollaboratorsTitle from "@/containers/collaborators/title";
 
 import PageTitle from "@/components/ui/page-title";
 
-export const metadata = {
-  title: "Collaborators",
-};
-
 export default function CollaboratorsPage() {
   return (
     <div className="relative z-10 h-full w-full bg-white">
       <div className="h-full overflow-auto">
         <PageTitle />
         <div className="space-y-5 px-5 pb-10 pt-[30px]">
-          <h1 className="font-metropolis text-3xl tracking-tight text-gray-700">Collaborators</h1>
+          <CollaboratorsTitle />
 
           <div className="space-y-5">
             <CollaboratorsList />

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

@@ -2,14 +2,21 @@
 
 import { PropsWithChildren } from "react";
 
+import { CookiesProvider } from "react-cookie";
 import { MapProvider } from "react-map-gl";
 
 import { Provider as JotaiProvider } from "jotai";
 
 export default function LayoutProviders({ children }: PropsWithChildren) {
   return (
-    <JotaiProvider>
-      <MapProvider>{children}</MapProvider>
-    </JotaiProvider>
+    <CookiesProvider
+      defaultSetOptions={{
+        path: "/",
+      }}
+    >
+      <JotaiProvider>
+        <MapProvider>{children}</MapProvider>
+      </JotaiProvider>
+    </CookiesProvider>
   );
 }

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

@@ -1,12 +1,14 @@
 import { PropsWithChildren } from "react";
 
+import dynamic from "next/dynamic";
 import { headers } from "next/headers";
 
 import { Hydrate, dehydrate } from "@tanstack/react-query";
 
 import getQueryClient from "@/lib/react-query/getQueryClient";
 
 import { getGetCategoriesQueryKey, getGetCategoriesQueryOptions } from "@/types/generated/category";
+import { getGetCollaboratorsQueryOptions } from "@/types/generated/collaborator";
 import { getGetCountriesQueryOptions } from "@/types/generated/country";
 import { getGetDatasetsQueryOptions } from "@/types/generated/dataset";
 import { getGetPillarsQueryOptions } from "@/types/generated/pillar";
@@ -27,7 +29,8 @@ import Navigation from "@/containers/navigation";
 import Sidebar from "@/containers/sidebar";
 
 import LayoutProviders from "./layout-providers";
-import { getGetCollaboratorsQueryOptions } from "@/types/generated/collaborator";
+
+const WelcomeMessage = dynamic(() => import("@/containers/welcome-message"), { ssr: false });
 
 export default async function AppLayout({ children }: PropsWithChildren) {
   const url = new URL(headers().get("x-url")!);
@@ -87,6 +90,8 @@ export default async function AppLayout({ children }: PropsWithChildren) {
           <Sidebar>{children}</Sidebar>
           <Map />
         </main>
+
+        <WelcomeMessage />
       </Hydrate>
     </LayoutProviders>
   );

client/src/app/(app)/other-tools/page.tsx

@@ -1,7 +1,12 @@
 import { dehydrate, Hydrate } from "@tanstack/react-query";
-import { getGetOtherToolsQueryOptions } from "@/types/generated/other-tool";
+
 import getQueryClient from "@/lib/react-query/getQueryClient";
+
+import { getGetOtherToolsQueryOptions } from "@/types/generated/other-tool";
+
 import OtherToolsList from "@/containers/other-tools";
+import OtherToolsTitle from "@/containers/other-tools/title";
+
 import PageTitle from "@/components/ui/page-title";
 
 export const metadata = {
@@ -37,7 +42,7 @@ export default async function OtherTools() {
           <div className="h-full overflow-auto">
             <PageTitle />
             <div className="space-y-5 px-5 pb-10 pt-[30px]">
-              <h1 className="font-metropolis text-3xl tracking-tight text-gray-700">Other Tools</h1>
+              <OtherToolsTitle />
 
               <div className="space-y-5">
                 <OtherToolsList />

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

@@ -1,9 +1,10 @@
-import PageTitle from "@/components/ui/page-title";
 import CountryPopup from "@/containers/countries/popup";
 import DatasetsCategories from "@/containers/datasets/categories";
 import DatasetsHeader from "@/containers/datasets/header";
 import DatasetsSearch from "@/containers/datasets/search";
 
+import PageTitle from "@/components/ui/page-title";
+
 export default function HomePage() {
   return (
     <>

client/src/app/(app)/projects/page.tsx

@@ -1,9 +1,10 @@
-import PageTitle from "@/components/ui/page-title";
 import Projects from "@/containers/projects";
 import ProjectsFilters from "@/containers/projects/filters";
 import ProjectsHeader from "@/containers/projects/header";
 import ProjectPopup from "@/containers/projects/popup";
 
+import PageTitle from "@/components/ui/page-title";
+
 export const metadata = {
   title: "Projects",
 };

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

@@ -0,0 +1,23 @@
+import { dehydrate } from "@tanstack/react-query";
+import { Hydrate } from "@tanstack/react-query";
+
+import getQueryClient from "@/lib/react-query/getQueryClient";
+
+import Footer from "@/containers/footer";
+import Header from "@/containers/header";
+
+export default async function AuthLayout({ children }: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
+
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <main className="h-[100svh] w-full divide-y-2 divide-gray-300/20">
+        <Header />
+        <section className="flex grow flex-col items-center justify-center">{children}</section>
+        <Footer />
+      </main>
+    </Hydrate>
+  );
+}

client/src/app/(auth)/signin/page.tsx

@@ -0,0 +1,17 @@
+import { Metadata } from "next";
+
+import Signin from "@/components/forms/signin";
+
+export const metadata: Metadata = {
+  title: "Sign in | Caribbean Climate smart map",
+  description: "Generated by create next app",
+};
+
+export default function SigninPage() {
+  return (
+    <>
+      <h1 className="py-10 text-3xl font-bold -tracking-[0.0375rem]">Log in</h1>
+      <Signin />
+    </>
+  );
+}

client/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,17 @@
+import { Metadata } from "next";
+
+import Signup from "@/components/forms/signup";
+
+export const metadata: Metadata = {
+  title: "Sign up | Caribbean Climate smart map",
+  description: "Caribbean Climate smart map",
+};
+
+export default function SignupPage() {
+  return (
+    <>
+      <h1 className="py-10 text-3xl font-bold -tracking-[0.0375rem]">Sign up</h1>
+      <Signup />
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { Metadata } from "next";
+
+import DashboardContent from "@/containers/dashboard";
+
+export const metadata: Metadata = {
+  title: "Dashboard | Caribbean Climate smart map",
+  description: "Generated by create next app",
+};
+
+export default function DashboardPage() {
+  return (
+    <div className="w-full">
+      <DashboardContent />
+    </div>
+  );
+}