Merge pull request #783 from CodeForAfrica/ft/hurumap-location

HURUMap Location
CodeForAfrica · Jul 22, 2024 · 4032512 · 4032512
2 parents 058afe0 + e7a12a5
commit 4032512
Show file tree

Hide file tree

Showing 18 changed files with 380 additions and 387 deletions.
diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json
@@ -4,7 +4,9 @@
     "paths": {
       "@/climatemappedafrica/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
-      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"]
+      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
+      "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
     }
   },
   "exclude": ["node_modules"]

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -1,4 +1,5 @@
-import { Box } from "@mui/material";
+import { Location } from "@hurumap/core";
+import { Box, useTheme } from "@mui/material";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
@@ -9,7 +10,6 @@ import { primaryGeoStyles, secondaryGeoStyles } from "./useLayerStyles";
 import useProfileGeography from "./useProfileGeography";
 import useStyles from "./useStyles";
 
-import Location from "@/climatemappedafrica/components/HURUmap/Location";
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
 const Map = dynamic(
@@ -30,6 +30,7 @@ function initialState(profiles, onClick) {
 }
 
 function ExplorePage({ panelProps, profile: profileProp, ...props }) {
+  const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
   //       this point, useReducer hasn't been called yet so we can't use
@@ -144,7 +145,18 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) {
             highlights={highlights}
             isLoading={isLoading}
             tags={tags}
-            className={classes.location}
+            sx={{
+              display: "none",
+              [theme.breakpoints.up("md")]: {
+                display: "flex",
+                left: 0,
+                margin: "0 auto",
+                position: "absolute",
+                right: 0,
+                top: theme.typography.pxToRem(52),
+                zIndex: theme.zIndex.appBar,
+              },
+            }}
           />
         </div>
       </Box>

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js
@@ -1,66 +1,52 @@
 import makeStyles from "@mui/styles/makeStyles";
 
-const useStyles = makeStyles(
-  ({ breakpoints, palette, typography, zIndex }) => ({
-    root: {
-      position: "relative",
-      height: "calc(100vh - 88px)",
-      [breakpoints.up("lg")]: {
-        height: "calc(100vh - 110px)",
-        position: "fixed",
-        left: 0,
-        right: 0,
-      },
-      "& .tooltipPop": {
-        background: palette.background.default,
-        boxShadow: "0px 3px 6px #00000029",
-        height: typography.pxToRem(36),
-        width: typography.pxToRem(88),
-        "& .level": {
-          background: palette.primary.main,
-          borderRadius: typography.pxToRem(4),
-          color: palette.text.secondary,
-          display: "flex",
-          fontSize: typography.pxToRem(7),
-          fontWeight: "bold",
-          height: typography.pxToRem(17),
-          justifyContent: "center",
-          lineHeight: 10 / 7,
-          margin: "0 auto",
-          marginTop: typography.pxToRem(-15),
-          paddingTop: typography.pxToRem(2),
-          textTransform: "uppercase",
-          width: typography.pxToRem(62),
-        },
-        "& .name": {
-          textAlign: "center",
-          fontSize: typography.pxToRem(9),
-          fontWeight: "bold",
-          lineHeight: 13 / 9,
-          marginTop: typography.pxToRem(5),
-          textTransform: "capitalize",
-        },
-      },
-    },
-    map: {
-      display: "none",
-      [breakpoints.up("md")]: {
-        display: "block",
-      },
+const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
+  root: {
+    position: "relative",
+    height: "calc(100vh - 88px)",
+    [breakpoints.up("lg")]: {
+      height: "calc(100vh - 110px)",
+      position: "fixed",
+      left: 0,
+      right: 0,
     },
-    location: {
-      display: "none",
-      [breakpoints.up("md")]: {
+    "& .tooltipPop": {
+      background: palette.background.default,
+      boxShadow: "0px 3px 6px #00000029",
+      height: typography.pxToRem(36),
+      width: typography.pxToRem(88),
+      "& .level": {
+        background: palette.primary.main,
+        borderRadius: typography.pxToRem(4),
+        color: palette.text.secondary,
         display: "flex",
-        left: 0,
+        fontSize: typography.pxToRem(7),
+        fontWeight: "bold",
+        height: typography.pxToRem(17),
+        justifyContent: "center",
+        lineHeight: 10 / 7,
         margin: "0 auto",
-        position: "absolute",
-        right: 0,
-        top: typography.pxToRem(52),
-        zIndex: zIndex.appBar,
+        marginTop: typography.pxToRem(-15),
+        paddingTop: typography.pxToRem(2),
+        textTransform: "uppercase",
+        width: typography.pxToRem(62),
+      },
+      "& .name": {
+        textAlign: "center",
+        fontSize: typography.pxToRem(9),
+        fontWeight: "bold",
+        lineHeight: 13 / 9,
+        marginTop: typography.pxToRem(5),
+        textTransform: "capitalize",
       },
     },
-  }),
-);
+  },
+  map: {
+    display: "none",
+    [breakpoints.up("md")]: {
+      display: "block",
+    },
+  },
+}));
 
 export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.js
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js b/apps/climatemappedafrica/src/components/HURUmap/Location/index.stories.js
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Location/useStyles.js
diff --git a/apps/pesayetu/jsconfig.json b/apps/pesayetu/jsconfig.json
@@ -4,6 +4,8 @@
     "paths": {
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
       "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
+      "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"],
       "@/pesayetu/*": ["./src/*"]
     }
   },

diff --git a/apps/pesayetu/src/components/ExplorePage/index.js b/apps/pesayetu/src/components/ExplorePage/index.js
@@ -1,4 +1,5 @@
-import { Box } from "@mui/material";
+import { Location } from "@hurumap/core";
+import { Box, useTheme } from "@mui/material";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
@@ -8,7 +9,6 @@ import useExplore from "./useExplore";
 import useProfileGeography from "./useProfileGeography";
 import useStyles from "./useStyles";
 
-import Location from "@/pesayetu/components/HURUmap/Location";
 import Panel from "@/pesayetu/components/HURUmap/Panel";
 
 const Map = dynamic(() => import("@/pesayetu/components/HURUmap/Map"), {
@@ -26,6 +26,7 @@ function initialState(profiles, onClick) {
 }
 
 function ExplorePage({ panelProps, profile: profileProp, ...props }) {
+  const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
   //       this point, useReducer hasn't been called yet so we can't use
@@ -138,7 +139,18 @@ function ExplorePage({ panelProps, profile: profileProp, ...props }) {
             highlights={highlights}
             isLoading={isLoading}
             tags={tags}
-            className={classes.location}
+            sx={{
+              display: "none",
+              [theme.breakpoints.up("md")]: {
+                display: "flex",
+                left: 0,
+                margin: "0 auto",
+                position: "absolute",
+                right: 0,
+                top: theme.typography.pxToRem(52),
+                zIndex: theme.zIndex.appBar,
+              },
+            }}
           />
         </div>
       </Box>