starting to develop select column

Author: davidsklar99

pages/columns/+Page.client.ts

@@ -4,8 +4,7 @@ import { Divider, AnchorButton, Tag, Card, Collapse, Icon } from "@blueprintjs/c
 import { useData } from "vike-react/useData";
 import { useState } from "react";
 import "./main.scss";
-import { hyperStyled } from "@macrostrat/hyper";
-import styles from "./index.module.sass";
+import h from "@macrostrat/hyper";
 import {
   MapAreaContainer,
   MapMarker,
@@ -21,9 +20,6 @@ import { navigate } from "vike/client/router";
 import { useMapRef } from "@macrostrat/mapbox-react";
 import { ColumnMap } from "../index";
 
-const h = hyperStyled(styles);
-
-
 export function Page(props) {
   return h(ColumnListPage, props);
 }

pages/columns/index.module.sass

@@ -8,6 +8,8 @@ import { ContentPage } from "~/layouts";
 import { usePageContext } from 'vike-react/usePageContext';
 import { titleCase } from "../../index";
 import { ColumnMap } from "../../../index";
+import { navigate } from "vike/client/router";
+import { useState, useCallback } from "react";
 
 export function Page() {
     const pageContext = usePageContext();
@@ -85,18 +87,33 @@ function References({ id }) {
 }
 
 function Map({id}) {
+    const [selectedUnitID, setSelectedUnitID] = useState(null);
     const data = useAPIResult(SETTINGS.apiV2Prefix + "/columns?int_id=" + id + "&response=long&format=geojson")?.success.data;
 
     if (!data) {
         return h("div", "Loading..."); 
     }
+
+    /*
+    const onSelectColumn = useCallback(
+        (col_id: number) => {
+        // do nothing
+        // We could probably find a more elegant way to do this
+        setSelectedUnitID(null);
+        navigate(`/columns/${col_id}`, {
+            overwriteLastHistoryEntry: true,
+        });
+        },
+        [setSelectedUnitID]
+    );
+    */
 
     return h("div.page-container", [
           h(ColumnMap, {
             className: "column-map",
             inProcess: true,
             projectID: null,
-            selectedColumn: null,
+            selectedColumn: selectedUnitID,
             onSelectColumn: () => {},
             columns: data.features,
           }),