merge: filters

.gitignore

@@ -1,7 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-.env
-
 # dependencies
 node_modules
 .pnp
@@ -41,4 +39,4 @@ yarn-error.log*
 # others
 build_keycloak
 storybook-static
-*.jar
+*.jar

apps/goat/app/api/auth/[...nextauth]/options.ts

@@ -27,6 +27,7 @@ async function doFinalSignoutHandshake(token: JWT) {
 
 async function getOrganization(token: JWT) {
   try {
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     const url = new URL(`api/v1/users/organization`, process.env.API_URL);
     const res = await fetch(url.href, {
       headers: {
@@ -44,6 +45,7 @@ async function getOrganization(token: JWT) {
 
 async function getSubscriptions(token: JWT) {
   try {
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     const url = new URL(`api/v1/users/subscriptions`, process.env.API_URL);
     const res = await fetch(url.href, {
       headers: {

apps/goat/app/api/auth/organizations/[organizationId]/route.ts

@@ -19,6 +19,7 @@ export async function GET(_req: NextRequest, context: z.infer<typeof routeContex
       return responses.notAuthenticatedResponse();
     }
     const { params } = routeContextSchema.parse(context);
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     const url = new URL(`api/v1/organizations/${params.organizationId}`, process.env.API_URL);
     const res = await fetch(url.href, {
       headers: {

apps/goat/app/api/auth/organizations/route.ts

@@ -12,6 +12,7 @@ export async function GET() {
     if (!session || !session.access_token) {
       return responses.notAuthenticatedResponse();
     }
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     const url = new URL("api/v1/organizations", process.env.API_URL);
     console.log(url.href);
     const res = await fetch(url.href, {
@@ -37,6 +38,7 @@ export async function POST(req: NextRequest) {
     if (!session || !session.access_token) {
       return responses.notAuthenticatedResponse();
     }
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
     const url = new URL("api/v1/organizations", process.env.API_URL);
     const body = await req.json();
     const payload = postOrganizationSchema.parse(body);

apps/goat/app/api/map/filtering/layer/get-feature-keys/[layer_id]/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 
-const url = "http://127.0.0.1:8081";
+const url = "http://127.0.0.1:8080";
 
 export async function GET(request: Request) {
   const layer_id = request.url.slice(request.url.lastIndexOf("/") + 1);

apps/goat/components/map/Layers.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useEffect } from "react";
 import { Source, Layer as MapLayer } from "react-map-gl";
 import type { XYZ_Layer } from "@/types/map/layer";
 import { useSelector } from "react-redux";
 import type { IStore } from "@/types/store";
 import { FILTERING } from "@/lib/api/apiConstants";
 import { and_operator, or_operator } from "@/lib/utils/filtering_cql";
 import type { LayerProps } from "react-map-gl";
+import { v4 } from "uuid";
 
 interface LayersProps {
   layers: XYZ_Layer[];
@@ -21,20 +22,6 @@ const Layers = (props: LayersProps) => {
 
   const { layers, addLayer } = props;
 
-  const getQuery = useCallback(() => {
-    if (Object.keys(filters).length) {
-      if (Object.keys(filters).length === 1) {
-        return filters["1"];
-      } else {
-        if (logicalOperator === "match_all_expressions") {
-          return and_operator(Object.keys(filters).map((key) => filters[key]));
-        } else {
-          return or_operator(Object.keys(filters).map((key) => filters[key]));
-        }
-      }
-    }
-  }, [filters, logicalOperator]);
-
   useEffect(() => {
     const filterJson = getQuery();
     if (filterJson) {
@@ -63,12 +50,26 @@ const Layers = (props: LayersProps) => {
         {
           id: "layer1",
           sourceUrl:
-            "http://127.0.0.1:8081/collections/user_data.8c4ad0c86a2d4e60b42ad6fb8760a76e/tiles/{z}/{x}/{y}",
+            "http://127.0.0.1:8080/collections/user_data.8c4ad0c86a2d4e60b42ad6fb8760a76e/tiles/{z}/{x}/{y}",
           color: "#FF0000",
         },
       ]);
     }
-  }, [addLayer, filters, getQuery]);
+  }, [filters]);
+
+  function getQuery() {
+    if (Object.keys(filters).length) {
+      if (Object.keys(filters).length === 1) {
+        return filters[Object.keys(filters)[0]];
+      } else {
+        if (logicalOperator === "match_all_expressions") {
+          return and_operator(Object.keys(filters).map((key) => filters[key]));
+        } else {
+          return or_operator(Object.keys(filters).map((key) => filters[key]));
+        }
+      }
+    }
+  }
 
   const clusterLayer: LayerProps = {
     id: "clusters",
@@ -85,13 +86,9 @@ const Layers = (props: LayersProps) => {
     <>
       {layers.length
         ? layers.map((layer: XYZ_Layer) => (
-              <Source
-                type="vector"
-                tiles={[layer.sourceUrl]}
-                key={layer.id}
-              >
-                <MapLayer {...clusterLayer} />
-              </Source>
+            <Source key={v4()} type="vector" tiles={[layer.sourceUrl]}>
+              <MapLayer {...clusterLayer} />
+            </Source>
           ))
         : null}
     </>

apps/goat/components/map/panels/filter/Exppression.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
-import { useGetKeys } from "@/hooks/map/FilteringHooks";
 import { comparerModes } from "@/public/assets/data/comparers_filter";
-import type { ComparerMode, LayerPropsMode } from "@/types/map/filtering";
+import type { ComparerMode } from "@/types/map/filtering";
 
 import { SelectField } from "@p4b/ui/components/Inputs";
 
@@ -14,20 +13,21 @@ import { v4 } from "uuid";
 import { Chip } from "@/components/common/Chip";
 import { makeStyles } from "@/lib/theme";
 import { Button, Menu, MenuItem } from "@mui/material";
+import type { Expression } from "@/types/map/filtering";
+import { useDispatch } from "react-redux";
+import { addExpression, removeFilter } from "@/lib/store/mapFilters/slice";
+import type { LayerPropsMode } from "@/types/map/filtering";
 
 interface ExpressionProps {
   isLast: boolean;
-  expression: {
-    attribute: LayerPropsMode | null;
-    expression: ComparerMode | null;
-    value: (string | number | number[]) | null;
-  };
+  expression: Expression;
   logicalOperator: string;
   id: string;
+  keys: LayerPropsMode[];
 }
 
 const Exppression = (props: ExpressionProps) => {
-  const { isLast, expression, logicalOperator, id } = props;
+  const { isLast, expression, logicalOperator, id, keys } = props;
   const [attributeSelected, setAttributeSelected] = useState<string | string[]>(
     expression.attribute ? expression.attribute.name : "",
   );
@@ -37,11 +37,10 @@ const Exppression = (props: ExpressionProps) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  const sampleLayerID = "user_data.8c4ad0c86a2d4e60b42ad6fb8760a76e";
-  const { keys } = useGetKeys({ layer_id: sampleLayerID });
-
   const { classes } = useStyles();
 
+  const dispatch = useDispatch();
+
   function getFeatureAttribute(type: string | string[]) {
     const valueToFilter = keys.filter((key) => key.name === type);
     if (valueToFilter[0].type === "string") {
@@ -50,6 +49,26 @@ const Exppression = (props: ExpressionProps) => {
     return valueToFilter[0].type;
   }
 
+  function handleAttributeSelect(value: string) {
+    const newExpression = { ...expression };
+    newExpression.attribute = {
+      type: getFeatureAttribute(value),
+      name: value,
+    };
+    setAttributeSelected(value);
+    dispatch(addExpression(newExpression));
+  }
+
+  function handleComparerSelect(value: string) {
+    const newExpression = { ...expression };
+    newExpression.expression = getComparer(value)[0];
+    newExpression.firstInput = "";
+    newExpression.secondInput = "";
+    setComparerSelected(value);
+    dispatch(addExpression(newExpression));
+    dispatch(removeFilter(newExpression.id));
+  }
+
   function getComparer(type: string | string[]) {
     return comparerModes[getFeatureAttribute(attributeSelected)].filter(
       (compAttribute) => type === compAttribute.value,
@@ -94,7 +113,7 @@ const Exppression = (props: ExpressionProps) => {
           label="Select attribute"
           size="small"
           defaultValue={attributeSelected ? attributeSelected : ""}
-          updateChange={setAttributeSelected}
+          updateChange={handleAttributeSelect}
         />
         <SelectField
           className={classes.fields}
@@ -117,7 +136,7 @@ const Exppression = (props: ExpressionProps) => {
           defaultValue={comparerSelected ? comparerSelected : ""}
           size="small"
           disabled={attributeSelected.length ? false : true}
-          updateChange={setComparerSelected}
+          updateChange={handleComparerSelect}
         />
         {attributeSelected.length ? (
           <>
@@ -131,7 +150,8 @@ const Exppression = (props: ExpressionProps) => {
                 prop={
                   typeof attributeSelected === "string" ? attributeSelected : ""
                 }
-                expression={id}
+                expressionId={id}
+                expression={expression}
               />
             ) : null}
           </>