Merge pull request #276 from performant-software/feature/cdc27_events

CDC #27 - Events
performant-software · Apr 30, 2024 · 92e7675 · 92e7675
2 parents 4ceb914 + e88b05d
commit 92e7675
Show file tree

Hide file tree

Showing 68 changed files with 2,637 additions and 788 deletions.
diff --git a/packages/controlled-vocabulary/package.json b/packages/controlled-vocabulary/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.1.3",
-    "@performant-software/shared-components": "^2.1.3",
+    "@performant-software/semantic-components": "^2.2.0",
+    "@performant-software/shared-components": "^2.2.0",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

diff --git a/packages/core-data/package.json b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -31,14 +31,14 @@
     "instantsearch.js": "^4.66.0",
     "lucide-react": "^0.321.0",
     "postcss-import": "^16.1.0",
-    "react-instantsearch": "^7.5.4",
     "react-virtualized-auto-sizer": "^1.0.22",
     "react-window": "^1.8.10",
     "typesense-instantsearch-adapter": "^2.8.0",
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/geospatial": "^2.1.3",
+    "@performant-software/shared-components": "^2.2.0",
+    "@performant-software/geospatial": "^2.2.0",
     "@peripleo/maplibre": "^0.5.2",
     "@peripleo/peripleo": "^0.5.2",
     "react": ">= 16.13.1 < 19.0.0",

diff --git a/packages/core-data/src/components/EventDetails.js b/packages/core-data/src/components/EventDetails.js
@@ -0,0 +1,61 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import EventUtils from '../utils/Event';
+import LoadAnimation from './LoadAnimation';
+import { useEventsService, useLoader } from '../hooks/CoreData';
+
+type Props = {
+  /**
+   * Identifier for the event to fetch.
+   */
+  id: string
+};
+
+/**
+ * This component renders the details for a single event.
+ */
+const EventDetails = (props: Props) => {
+  const EventsService = useEventsService();
+
+  /**
+   * Loads the event record.
+   *
+   * @type {function(*, *): Promise<*>}
+   */
+  const onLoad = useCallback(() => EventsService.fetchOne(props.id), [props.id]);
+
+  const { data: { event } = {}, loading } = useLoader(onLoad);
+
+  if (loading) {
+    return (
+      <LoadAnimation />
+    );
+  }
+
+  if (!event) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h1
+        className='pr-6 py-1 font-bold text-2xl'
+      >
+        { event.name }
+      </h1>
+      <div
+        className='py-1'
+      >
+        { EventUtils.getDateView(event) }
+      </div>
+      <p
+        className='py-1 text-muted'
+      >
+        { event.description }
+      </p>
+    </div>
+  );
+};
+
+export default EventDetails;
diff --git a/packages/core-data/src/components/PlaceDetails.js b/packages/core-data/src/components/PlaceDetails.js
@@ -3,8 +3,7 @@
 import { Image } from 'lucide-react';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import _ from 'underscore';
-import PlacesService from '../services/Places';
-import { useLoader } from '../hooks/CoreData';
+import { useLoader, usePlacesService } from '../hooks/CoreData';
 
 type Props = {
   /**
@@ -24,34 +23,32 @@ type Props = {
  * This component renders a detail view for the passed Core Data place record.
  */
 const PlaceDetails = (props: Props) => {
+  const PlacesService = usePlacesService();
+
   /**
    * Load the base place record.
    *
    * @type {function(*, *): Promise<*>}
    */
-  const onLoad = useCallback((baseUrl, projectIds) => (
-    PlacesService.fetchOne(baseUrl, props.id, projectIds)
-  ), [props.id]);
+  const onLoad = useCallback(() => PlacesService.fetchOne(props.id), [props.id]);
 
-  const { data: place } = useLoader(onLoad);
+  const { data: { place } = {} } = useLoader(onLoad);
 
   /**
    * Load the related media contents.
    *
    * @type {function(*, *): Promise<*>}
    */
-  const onLoadMediaContents = useCallback((baseUrl, projectIds) => (
-    PlacesService.fetchRelatedMedia(baseUrl, props.id, projectIds)
-  ), [props.id]);
+  const onLoadMediaContents = useCallback((params) => PlacesService.fetchRelatedMedia(props.id, params), [props.id]);
 
-  const { data: mediaContents } = useLoader(onLoadMediaContents);
+  const { data: { media_contents: mediaContents } = {} } = useLoader(onLoadMediaContents);
 
   /**
    * Sets the first related image.
    *
    * @type {*}
    */
-  const image = useMemo(() => _.first(mediaContents?.items)?.body, [mediaContents]);
+  const image = useMemo(() => _.first(mediaContents), [mediaContents]);
 
   /**
    * Sets the user defined field values.
@@ -91,7 +88,7 @@ const PlaceDetails = (props: Props) => {
             <img
               className='object-cover h-full w-full'
               src={image.content_iiif_url}
-              alt={image.title}
+              alt={image.name}
             />
           </div>
         </div>
@@ -103,7 +100,7 @@ const PlaceDetails = (props: Props) => {
           <h1
             className='pr-6 font-medium'
           >
-            { place.properties.title }
+            { place.name }
           </h1>
           <ol
             className='text-sm mt-4 leading-6 overflow-hidden'

diff --git a/packages/core-data/src/components/PlaceLayersSelector.js b/packages/core-data/src/components/PlaceLayersSelector.js
@@ -79,21 +79,27 @@ const PlaceLayersSelector = (props: Props) => {
               className='flex gap-1.5 items-center'
             >
               <Checkbox.Root
+                asChild
                 className='hover:bg-transparent mb-0.5'
                 id={layer.name}
                 checked={isSelected(layer)}
                 onCheckedChange={() => onChange(layer)}
               >
-                { isSelected(layer) && (
-                  <CheckSquare2
-                    className='w-5 h-5'
-                  />
-                )}
-                { !isSelected(layer) && (
-                  <Square
-                    className='w-5 h-5'
-                  />
-                )}
+                <button
+                  aria-label={layer.name}
+                  type='button'
+                >
+                  { isSelected(layer) && (
+                    <CheckSquare2
+                      className='w-5 h-5'
+                    />
+                  )}
+                  { !isSelected(layer) && (
+                    <Square
+                      className='w-5 h-5'
+                    />
+                  )}
+                </button>
               </Checkbox.Root>
               <label
                 className='cursor-pointer grow'

diff --git a/packages/core-data/src/components/PlaceMarkers.js b/packages/core-data/src/components/PlaceMarkers.js
@@ -36,7 +36,7 @@ const PlaceMarkers = ({ urls, ...props }: Props) => {
    * @type {function(): *}
    */
   const onFetch = useCallback(() => (
-    _.map(urls, (url) => fetch(url).then((res) => res.json()))
+    _.map(urls, (url) => fetch(url).then((res) => res.json()).then((res) => res.place))
   ), [urls]);
 
   /**
@@ -46,7 +46,7 @@ const PlaceMarkers = ({ urls, ...props }: Props) => {
    */
   const onLoad = useCallback((records) => (
     _.map(records, (record) => setPlaces((prevPlaces) => (
-      record.geometry ? [...prevPlaces, feature(record.geometry, record.properties)] : prevPlaces
+      record.place_geometry ? [...prevPlaces, feature(record.place_geometry.geometry_json, record)] : prevPlaces
     )))
   ), []);