working on new sources page

Author: davidsklar99

pages/maps/sources/+Page.ts

@@ -0,0 +1,18 @@
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import reducers from "./app-state";
+import App from "./components/app";
+import h from "@macrostrat/hyper";
+
+// We should probably make this a little less global
+// import "~/styles/global.styl";
+// import "./searchbar.styl";
+// import "./ui-components.styl";
+
+// Create the data store
+let store = createStore(reducers);
+
+// Render the application
+export function Page() {
+  return h(Provider, { store }, [h(App)]);
+}

pages/maps/sources/+config.ts

@@ -0,0 +1,15 @@
+export default {
+  route: "/maps/sources*",
+  meta: {
+    Page: {
+      /* Sift must be rendered as a single-page app, because that is its design.
+      It must only use server-side links to other pages, 
+      because of its reliance on global styles that could leak to other pages with client routing
+      */
+      env: {
+        client: true,
+        server: false,
+      },
+    },
+  },
+};

pages/maps/sources/app-state/action-runner.ts

@@ -0,0 +1,25 @@
+import { BurwellSourceActions as Action, BurwellState } from "./types";
+import axios from "axios";
+import { apiV2Prefix } from "@macrostrat-web/settings";
+
+async function actionRunner(action: Action): Promise<Action | void> {
+  switch (action.type) {
+    case "fetch-data":
+      const data = await fetchBurwellMapData();
+      return { type: "recieve-data", maps: data };
+    default:
+      return action;
+  }
+}
+
+async function fetchBurwellMapData() {
+  const url = `${apiV2Prefix}/defs/sources`;
+
+  const res = await axios.get(url, {
+    responseType: "json",
+    params: { all: true, format: "geojson_bare" },
+  });
+  return res.data.features;
+}
+
+export default actionRunner;

pages/maps/sources/app-state/hooks.ts

@@ -0,0 +1,21 @@
+import { useDispatch, useSelector } from "react-redux";
+import { BurwellSourceActions as Action, BurwellState } from "./types";
+import actionRunner from "./action-runner";
+
+function useActionDispatch() {
+  return useDispatch<React.Dispatch<Action>>();
+}
+
+function useBurwellActions(): (action: Action) => Promise<void> {
+  const dispatch = useActionDispatch();
+  return async (action) => {
+    const newAction = await actionRunner(action);
+    if (newAction === undefined) return;
+    dispatch(newAction as Action);
+  };
+}
+function useBurwellState<T>(selectorFn: (state: BurwellState) => T): T {
+  return useSelector<BurwellState>(selectorFn) as T;
+}
+
+export { useBurwellActions, useBurwellState };

pages/maps/sources/app-state/index.ts

@@ -0,0 +1,5 @@
+import reducers from "./reducer";
+export default reducers;
+export * from "./hooks";
+export * from "./utils";
+export * from "./types";

pages/maps/sources/app-state/reducer.ts

@@ -0,0 +1,59 @@
+import { BurwellSourceActions, BurwellState } from "./types";
+
+const burwellDefaultState: BurwellState = {
+  isFetching: false,
+  msg: "",
+  clicks: 0,
+  maps: [],
+  selectedScale: "all",
+  selectedFeatures: [],
+  activeFeature: {},
+  menuOpen: false,
+  flyTo: true,
+};
+
+const reducer = (
+  state: BurwellState = burwellDefaultState,
+  action: BurwellSourceActions
+) => {
+  switch (action.type) {
+    case "request-data":
+      return Object.assign({}, state, {
+        isFetching: true,
+      });
+    case "recieve-data":
+      // map ids to features to use mapbox effects appwide
+      const maps = action.maps.map((d, i) => {
+        d.id = i;
+        return d;
+      });
+      return Object.assign({}, state, {
+        isFetching: false,
+        maps: maps,
+      });
+    case "select-scale":
+      return Object.assign({}, state, {
+        selectedScale: action.selectedScale,
+      });
+    case "select-features":
+      return Object.assign({}, state, {
+        selectedFeatures: action.selectedFeatures,
+      });
+    case "activate-feature":
+      return Object.assign({}, state, {
+        activeFeature: action.activeFeature,
+      });
+    case "toggle-menu":
+      return Object.assign({}, state, {
+        menuOpen: action.menuOpen,
+      });
+    case "toggle-fly-option":
+      return Object.assign({}, state, {
+        flyTo: action.flyTo,
+      });
+    default:
+      return state;
+  }
+};
+
+export default reducer;

pages/maps/sources/app-state/types.ts

@@ -0,0 +1,31 @@
+//////////////// Action Types //////////////////
+type FETCH_DATA = { type: "fetch-data" };
+type RECIEVE_DATA = { type: "recieve-data"; maps: object[] };
+type REQUEST_DATA = { type: "request-data" };
+type SELECT_SCALE = { type: "select-scale"; selectedScale: any };
+type SELECT_FEATURES = { type: "select-features"; selectedFeatures: any };
+type ACTIVATE_FEATURE = { type: "activate-feature"; activeFeature: any };
+type TOGGLE_MENU = { type: "toggle-menu"; menuOpen: boolean };
+type TOGGLE_FLY_OPTION = { type: "toggle-fly-option"; flyTo: boolean };
+
+export type BurwellSourceActions =
+  | FETCH_DATA
+  | RECIEVE_DATA
+  | REQUEST_DATA
+  | SELECT_SCALE
+  | SELECT_FEATURES
+  | ACTIVATE_FEATURE
+  | TOGGLE_MENU
+  | TOGGLE_FLY_OPTION;
+
+export interface BurwellState {
+  isFetching: boolean;
+  msg: string;
+  clicks: number;
+  maps: [];
+  selectedScale: string;
+  selectedFeatures: [];
+  activeFeature: {};
+  menuOpen: boolean;
+  flyTo: boolean;
+}

pages/maps/sources/app-state/utils.ts

@@ -0,0 +1,59 @@
+export const addCommas = (x) => {
+  x = parseInt(x);
+  var parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+
+export const getVisibleScale = (maps, filter) => {
+  switch (filter) {
+    case "all":
+      return maps;
+    case "large":
+      return maps.filter((d) => {
+        if (d.properties.scale === "large") return d;
+      });
+    case "medium":
+      return maps.filter((d) => {
+        if (d.properties.scale === "medium") return d;
+      });
+    case "small":
+      return maps.filter((d) => {
+        if (d.properties.scale === "small") return d;
+      });
+    case "tiny":
+      return maps.filter((d) => {
+        if (d.properties.scale === "tiny") return d;
+      });
+    default:
+      return [];
+  }
+};
+
+export function getCenter(coordinates) {
+  const lat = (coordinates[0][0][1] + coordinates[0][2][1]) / 2;
+  const long = (coordinates[0][0][0] + coordinates[0][2][0]) / 2;
+  return [long, lat];
+}
+
+export const zoomMap = {
+  tiny: 1,
+  small: 3,
+  medium: 4,
+  large: 7,
+};
+
+export const offsetMap = {
+  tiny: 10,
+  small: 10,
+  medium: 4,
+  large: 0.05,
+};
+
+export function flyToData(feature) {
+  const [long, lat] = getCenter(feature.geometry.coordinates);
+  const zoom = zoomMap[feature.properties.scale];
+  let offset = offsetMap[feature.properties.scale];
+
+  return { center: [long + offset, lat], zoom };
+}

pages/maps/sources/archive_/content.ts

@@ -0,0 +1,9 @@
+import IndexMapContainer from "../components/map";
+import h from "@macrostrat/hyper";
+import { InfoDrawer } from "../components/info-drawer";
+
+const Content = () => {
+  return h("div.full-height", [h(IndexMapContainer), h(InfoDrawer)]);
+};
+
+export default Content;