@performant-software/core-data 2.1.3-beta.1 → 2.1.3-beta.10

package/types/components/PlaceMarker.js.flow

@@ -0,0 +1,77 @@
+// @flow
+
+import { LocationMarker } from '@performant-software/geospatial';
+import { feature, featureCollection } from '@turf/turf';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import _ from 'underscore';
+
+type Props = {
+  animate?: boolean,
+
+  /**
+   * The URL of the Core Data place record.
+   */
+  urls: Array<string>
+};
+
+/**
+ * This component renders a map marker for a given Core Data Place record.
+ */
+const PlaceMarker = (props: Props) => {
+  const [places, setPlaces] = useState([]);
+
+  /**
+   * Converts the set of places into a FeatureCollection.
+   *
+   * @type {FeatureCollection<Geometry, Properties>}
+   */
+  const data = useMemo(() => featureCollection(places), [places]);
+
+  /**
+   * Fetches the passed URLs and converts the response to JSON.
+   *
+   * @type {function(): *}
+   */
+  const onFetch = useCallback(() => (
+    _.map(props.urls, (url) => fetch(url).then((res) => res.json()))
+  ), [props.urls]);
+
+  /**
+   * Converts the passed list of records to Features and sets them on the state.
+   *
+   * @type {function(*): *}
+   */
+  const onLoad = useCallback((records) => (
+    _.map(records, (record) => setPlaces((prevPlaces) => [
+      ...prevPlaces,
+      feature(record.geometry, record.properties)
+    ]))
+  ), []);
+
+  /**
+   * Fetch the place record from the passed URL.
+   */
+  useEffect(() => {
+    Promise
+      .all(onFetch())
+      .then(onLoad);
+  }, [onFetch, onLoad]);
+
+  if (_.isEmpty(data?.features)) {
+    return null;
+  }
+
+  return (
+    <LocationMarker
+      animate={props.animate}
+      data={data}
+    />
+  );
+};
+
+export default PlaceMarker;

package/types/components/SearchResultsLayer.js.flow

@@ -63,8 +63,11 @@ const SearchResultsLayer = (props: Props) => {
   useEffect(() => {
     if (props.fitBoundingBox && data && mapLoaded && searchCompleted) {
       // Set the bounding box on the map
-      const boundingBox = MapUtils.getBoundingBox(data, props.buffer);
-      map.fitBounds(boundingBox, props.boundingBoxOptions, props.boundingBoxData);
+      const bbox = MapUtils.getBoundingBox(data, props.buffer);
+
+      if (bbox) {
+        map.fitBounds(bbox, props.boundingBoxOptions, props.boundingBoxData);
+      }
 
       // Reset search completed
       setSearchCompleted(false);

package/types/components/SearchResultsList.js.flow

@@ -0,0 +1,160 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import { Highlight } from 'react-instantsearch';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
+import _ from 'underscore';
+import type { Feature } from '../types/Feature';
+import type { Place } from '../types/typesense/Place';
+import './SearchResultsList.css';
+
+/**
+ * Converts the passed place result to a feature.
+ *
+ * @param result
+ *
+ * @returns {{
+ *   geometry: {coordinates: number[], type: string},
+ *   id: number,
+ *   type:
+ *   string,
+ *   properties: {
+ *     ccode: *[],
+ *     record_id: string,
+ *     names: *,
+ *     name: string,
+ *     id: string,
+ *     title: string,
+ *     type: string,
+ *     uuid: string
+ *   }
+ * }}
+ */
+const toFeature = (result: Place) => ({
+  id: parseInt(result.record_id, 10),
+  type: 'Feature',
+  properties: {
+    id: result.record_id,
+    ccode: [],
+    title: result.name,
+    uuid: result.uuid,
+    record_id: result.record_id,
+    name: result.name,
+    names: _.map(result.names, (toponym) => ({ toponym })),
+    type: result.type
+  },
+  geometry: {
+    type: 'Point',
+    coordinates: result.coordinates.slice().reverse()
+  }
+});
+
+type HitComponentProps = {
+  hit: any,
+  isHovered: boolean,
+  onClick: () => void
+};
+
+const HitComponent = (props: HitComponentProps) => {
+  const { hit } = props;
+
+  const className = useMemo(() => {
+    const classNames = [
+      'h-[5.5em]',
+      'border-b',
+      'flex',
+      'flex-col',
+      'justify-start'
+    ];
+
+    if (props.isHovered) {
+      classNames.add('bg-teal-700/30');
+    }
+
+    return classNames.join(' ');
+  }, [props.isHovered]);
+
+  return (
+    <div
+      className={className}
+    >
+      <button
+        className='py-2 px-3 flex-grow text-left inline-flex flex-col'
+        onClick={props.onClick}
+        type='button'
+      >
+        <Highlight
+          attribute='name'
+          className='line-clamp-2'
+          hit={hit}
+        />
+        <p
+          className='text-muted text-xs line-clamp-1'
+        >
+          <Highlight
+            hit={hit}
+            attribute='names'
+          />
+        </p>
+      </button>
+    </div>
+  );
+};
+
+type Props = {
+  hits: Array<Place>,
+  hover?: Feature<{ id: string }>,
+  onHoverChange: (hover?: Feature<{ id: string }>) => void,
+  onClick: (result: Place) => void
+};
+
+type RowProps = {
+  index: number,
+  style: any
+};
+
+const SearchResultsList = (props: Props) => {
+  const {
+    hits,
+    hover,
+    onClick,
+    onHoverChange
+  } = props;
+
+  const Row = ({ index, style }: RowProps) => {
+    const hit = hits[index];
+    const id = parseInt(hit.record_id, 10);
+
+    return (
+      <div
+        style={style}
+        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : toFeature(hit))}
+        onPointerLeave={() => onHoverChange(undefined)}
+      >
+        <HitComponent
+          hit={hit}
+          isHovered={hover?.id === parseInt(hit?.record_id, 10)}
+          onClick={() => onClick(hit)}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <FixedSizeList
+          height={height}
+          itemCount={hits.length}
+          width={width}
+          itemSize={88}
+        >
+          {Row}
+        </FixedSizeList>
+      )}
+    </AutoSizer>
+  );
+};
+
+export default SearchResultsList;

package/types/context/I18n.js.flow

@@ -0,0 +1,11 @@
+// @flow
+
+import { createContext } from 'react';
+
+type I18nContextType = {
+  translations: any
+};
+
+const I18nContext = createContext<I18nContextType>();
+
+export default I18nContext;

package/types/types/Translations.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+export type Translations = {
+  [key: string]: string
+};