Merge branch 'main' of https://github.com/Ebubeker/goat-frontend

goat-community · Sep 12, 2023 · a0790af · a0790af
2 parents 5a0d1a2 + 0f15911
commit a0790af
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 57 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -12,10 +12,10 @@ jobs:
         uses: actions/checkout@v4
 
       - name: 📥 Checkout PR
-        uses: goat-community/.github/.github/actions/pr-git-checkout
+        uses: goat-community/.github/.github/actions/pr-git-checkout@main
 
       - name: 📥 Monorepo install
-        uses: goat-community/.github/.github/actions/pnpm-install
+        uses: goat-community/.github/.github/actions/pnpm-install@main
         with:
           enable-corepack: true
           cwd: ${{ github.workspace }}

diff --git a/.github/workflows/nextjs-bundle-analysis.yml b/.github/workflows/nextjs-bundle-analysis.yml
@@ -21,10 +21,10 @@ jobs:
 
       - name: 📥 Checkout PR
         if: ${{ github.event_name == 'pull_request' }}
-        uses: goat-community/.github/.github/actions/pr-git-checkout
+        uses: goat-community/.github/.github/actions/pr-git-checkout@main
 
       - name: 📥 Monorepo install
-        uses: goat-community/.github/.github/actions/pnpm-install
+        uses: goat-community/.github/.github/actions/pnpm-install@main
         with:
           enable-corepack: true
           cwd: ${{ github.workspace }}

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -13,6 +13,8 @@
 name: "Client - PR"
 
 on:
+  pull_request:
+    branches: [main]
   pull_request_target:
     branches: [main]
   merge_group:
@@ -37,7 +39,7 @@ jobs:
 
   typecheck:
     name: typecheck
-    uses: ./.github/workflows/check-types.yml
+    uses: ./.github/workflows/typecheck.yml
     secrets: inherit
 
   lint:

diff --git a/.github/workflows/production-build.yml b/.github/workflows/production-build.yml
@@ -14,10 +14,10 @@ jobs:
         uses: actions/checkout@v4
 
       - name: 📥 Checkout PR
-        uses: goat-community/.github/.github/actions/pr-git-checkout
+        uses: goat-community/.github/.github/actions/pr-git-checkout@main
 
       - name: 📥 Monorepo install
-        uses: goat-community/.github/.github/actions/pnpm-install
+        uses: goat-community/.github/.github/actions/pnpm-install@main
         with:
           enable-corepack: true
           cwd: ${{ github.workspace }}

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -12,7 +12,7 @@ concurrency:
 jobs:
   release-docker:
     name: release
-    uses: "goat-community/.github/.github/workflows/reusable-docker-build.yml@main"
+    uses: goat-community/.github/.github/workflows/reusable-docker-build.yml@main
     permissions:
       contents: read
       packages: write

diff --git a/.github/workflows/check-types.yml → .github/workflows/typecheck.yml b/.github/workflows/check-types.yml → .github/workflows/typecheck.yml
@@ -13,10 +13,10 @@ jobs:
         uses: actions/checkout@v4
 
       - name: 📥 Checkout PR
-        uses: goat-community/.github/.github/actions/pr-git-checkout
+        uses: goat-community/.github/.github/actions/pr-git-checkout@main
 
       - name: 📥 Monorepo install
-        uses: goat-community/.github/.github/actions/pnpm-install
+        uses: goat-community/.github/.github/actions/pnpm-install@main
         with:
           enable-corepack: true
           cwd: ${{ github.workspace }}

diff --git a/apps/goat/app/[lng]/map/[projectId]/page.tsx b/apps/goat/app/[lng]/map/[projectId]/page.tsx
@@ -21,25 +21,25 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import Map, { MapProvider, Layer, Source } from "react-map-gl";
 import type { CSSObject } from "tss-react";
 import Layers from "@/components/map/Layers";
-
 import { ICON_NAME } from "@p4b/ui/components/Icon";
 import { Fullscren } from "@/components/map/controls/Fullscreen";
 import Geocoder from "@/components/map/controls/Geocoder";
 import { useSelector } from "react-redux";
 import type { IStore } from "@/types/store";
-import { setActiveBasemapIndex } from "@/lib/store/styling/slice";
+import { setActiveBasemapIndex, setIcon } from "@/lib/store/styling/slice";
 import MapStyle from "@/components/map/panels/mapStyle/MapStyle";
 import { fetchLayerData } from "@/lib/store/styling/actions";
 import { useAppDispatch } from "@/hooks/useAppDispatch";
-import { selectMapLayer } from '@/lib/store/styling/selectors'
+import { selectMapLayer } from "@/lib/store/styling/selectors";
 
 const sidebarWidth = 48;
 const toolbarHeight = 52;
 
 export default function MapPage({ params: { projectId } }) {
-  const { basemaps, activeBasemapIndex, initialViewState } =
-  useSelector((state: IStore) => state.styling);
-  const mapLayer = useSelector(selectMapLayer)
+  const { basemaps, activeBasemapIndex, initialViewState } = useSelector(
+    (state: IStore) => state.styling,
+  );
+  const mapLayer = useSelector(selectMapLayer);
 
   const [activeLeft, setActiveLeft] = useState<MapSidebarItem | undefined>(
     undefined,
@@ -272,17 +272,48 @@ export default function MapPage({ params: { projectId } }) {
             mapStyle={basemaps[activeBasemapIndex[0]].url}
             attributionControl={false}
             mapboxAccessToken={MAPBOX_TOKEN}
+            onLoad={(e) => {
+              const changeIcon = (src: string) => {
+                const map = e.target
+
+                const newImage = new Image();
+                newImage.crossOrigin = "Anonymous";
+                newImage.src = src;
+
+                const xhr = new XMLHttpRequest();
+
+                xhr.open('GET',  src, true)
+                xhr.onreadystatechange = () => {
+                  if(xhr.readyState === 4 && xhr.status === 200) {
+
+                    newImage.src = `data:image/svg+xml,${encodeURIComponent(xhr.responseText)}`
+
+                  }
+                }
+
+                xhr.send()
+
+                newImage.onload = () => {
+                  if (map.hasImage("dentist-15")) {
+                    map.removeImage('dentist-15');
+                    map.addImage("dentist-15", newImage, {sdf: true});
+                  }
+                }
+              }
+
+
+
+              dispatch(setIcon(changeIcon))
+
+            }}
           >
             {mapLayer ? (
               <Source
                 id={mapLayer.id}
                 type="vector"
                 url={mapLayer.sources.composite.url}
               >
-                <Layer
-                  {...mapLayer}
-                  source-layer={mapLayer["source-layer"]}
-                />
+                <Layer {...mapLayer} source-layer={mapLayer["source-layer"]} />
               </Source>
             ) : null}
             {/* todo check */}

diff --git a/apps/goat/components/map/panels/mapStyle/ColorOptionSymbol.tsx b/apps/goat/components/map/panels/mapStyle/ColorOptionSymbol.tsx
@@ -4,7 +4,7 @@ import Box from "@p4b/ui/components/Box";
 import { Divider, TextField, Typography } from "@mui/material";
 import React from "react";
 import { useSelector } from "react-redux";
-import { setLayerFillOutLineColor } from "@/lib/store/styling/slice";
+import { setIconFillColor, setLayerFillOutLineColor } from "@/lib/store/styling/slice";
 import { useAppDispatch } from "@/hooks/useAppDispatch";
 import { selectMapLayer } from "@/lib/store/styling/selectors";
 
@@ -17,7 +17,7 @@ const ColorOptionSymbol = () => {
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     console.log("value", event.target.value);
-    // dispatch(setLayerFillColor(event.target.value));
+    dispatch(setIconFillColor(event.target.value));
   };
 
   const handleStrokeColorChange = (
@@ -48,7 +48,7 @@ const ColorOptionSymbol = () => {
               type="color"
               size="small"
               className={classes.inputs}
-              value={mapLayer?.paint?.["fill-color"]}
+              value={mapLayer?.paint?.["icon-color"]}
               onChange={handleFillColorChange}
             />
             {/*<TextField*/}

diff --git a/apps/goat/components/map/panels/mapStyle/MarkerOptionSymbol.tsx b/apps/goat/components/map/panels/mapStyle/MarkerOptionSymbol.tsx
@@ -1,18 +1,32 @@
 import { FormControl, MenuItem, Select, Typography } from "@mui/material";
 import BasicAccordion from "@p4b/ui/components/BasicAccordion";
 
-import React from "react";
+import React, { useState } from "react";
 import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
 import { makeStyles } from "@/lib/theme";
 import { useTheme } from "@p4b/ui/components/theme";
+import { useSelector } from "react-redux";
+import type { IStore } from "@/types/store";
+import star from "@/public/assets/poi-icons/star.svg";
+import circle from "@/public/assets/poi-icons/circle.svg";
 
 const MarkerOptionSymbol = () => {
+  const { changeIcon } = useSelector((state: IStore) => state.styling);
   const { classes } = useStyles();
   const theme = useTheme();
+  const [value, setValue] = useState("icon");
+
   return (
     <BasicAccordion title="Marker" variant="secondary">
       <FormControl sx={{ m: 1, width: "100%" }}>
-        <Select size="small" className={classes.select}>
+        <Select
+          value={value}
+          size="small"
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          className={classes.select}
+        >
           <MenuItem value="icon" className={classes.menuItem}>
             <Icon
               iconName={ICON_NAME.STAR}
@@ -31,6 +45,33 @@ const MarkerOptionSymbol = () => {
           </MenuItem>
         </Select>
       </FormControl>
+      {value === "icon" && (
+        <div
+          style={{
+            paddingBlock: "10px",
+            border: "1px solid rgb(190, 190, 190)",
+            borderRadius: "4px",
+            marginLeft: "4px",
+            display: "flex",
+            justifyContent: "space-evenly",
+          }}
+        >
+          <Icon
+            iconName={ICON_NAME.STAR}
+            style={{
+              cursor: "pointer",
+            }}
+            onClick={() => changeIcon?.(star.src)}
+          />
+          <Icon
+            iconName={ICON_NAME.CIRCLE}
+            style={{
+              cursor: "pointer",
+            }}
+            onClick={() => changeIcon?.(circle.src)}
+          />
+        </div>
+      )}
     </BasicAccordion>
   );
 };

diff --git a/apps/goat/components/map/panels/mapStyle/SizeOptionSymbol.tsx b/apps/goat/components/map/panels/mapStyle/SizeOptionSymbol.tsx
@@ -1,16 +1,21 @@
-import React, { useState } from "react";
 import BasicAccordion from "@p4b/ui/components/BasicAccordion";
 import { Slider, TextField } from "@mui/material";
 import { makeStyles } from "@/lib/theme";
 import Box from "@p4b/ui/components/Box";
+import { useSelector } from "react-redux";
+import { selectMapLayer } from "@/lib/store/styling/selectors";
+import { useAppDispatch } from "@/hooks/useAppDispatch";
+import { setLayerSymbolSize } from "@/lib/store/styling/slice";
+import React from "react";
 
 const SizeOptionSymbol = () => {
-  const [value, setValue] = useState<number>(20);
+  const mapLayer = useSelector(selectMapLayer);
+  const dispatch = useAppDispatch();
 
   const { classes } = useStyles();
   const handleSliderChange = (_: Event, newValue: number | number[]) => {
     if (typeof newValue === "number") {
-      setValue(newValue);
+      dispatch(setLayerSymbolSize({ val: newValue }));
     }
   };
 
@@ -19,7 +24,7 @@ const SizeOptionSymbol = () => {
   ) => {
     const newValue = parseFloat(event.target.value);
     if (!isNaN(newValue)) {
-      setValue(newValue);
+      dispatch(setLayerSymbolSize({ val: newValue }));
     }
   };
 
@@ -30,16 +35,24 @@ const SizeOptionSymbol = () => {
           <TextField
             type="number"
             size="small"
-            value={value.toString()}
+            value={mapLayer?.layout?.["icon-size"] || 1}
             onChange={handleTextFieldChange}
+            inputProps={{
+              min: 0.5,
+              step: 0.1,
+              max: 5,
+            }}
           />
           <Slider
-            value={value}
+            value={mapLayer?.layout?.["icon-size"] || 1}
             onChange={handleSliderChange}
             aria-label="Small"
             valueLabelDisplay="auto"
             color="primary"
             className={classes.slider}
+            step={0.1}
+            min={0.5}
+            max={5}
           />
         </Box>
       </BasicAccordion>

diff --git a/apps/goat/lib/store/index.ts b/apps/goat/lib/store/index.ts
@@ -9,6 +9,9 @@ const store = configureStore({
     styling: stylingReducer,
     mapFilters: filtersReducer,
   },
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+    serializableCheck: false
+  })
 });
 
 export type AppDispatch = typeof store.dispatch;