feat: fetch loo names

src/api/resolvers.ts

@@ -1,5 +1,6 @@
 import { stringifyAndCompressLoos } from '../lib/loo';
 import ngeohash from 'ngeohash';
+import { async } from 'hasha';
 
 const { Loo, Report, Area, MapGeo } = require('./db');
 const { GraphQLDateTime } = require('graphql-iso-date');
@@ -102,6 +103,8 @@ const resolvers = {
         page: res.page,
       };
     },
+    looNamesByIds: async (parent, args) =>
+      await Loo.find({ _id: { $in: args.idList } }),
     loosByProximity: async (parent, args) =>
       await Loo.findNear(args.from.lng, args.from.lat, args.from.maxDistance),
     loosByGeohash: async (parent, args, context) => {

src/api/schema.graphql

@@ -203,6 +203,7 @@ type Query {
     "A Point from which to begin the search"
     from: ProximityInput!
   ): [Loo!]!
+  looNamesByIds(idList: [ID]): [Loo!]!
   ukLooMarkers: [String!]! @cacheControl(maxAge: 360, scope: PUBLIC)
   "Retrieve a list of areas in existance, name and type only"
   areas: [AdminGeo!]!

src/components/LooMap/AccessibilityList.tsx

@@ -5,6 +5,8 @@ import { useTheme, css } from '@emotion/react';
 import Box from '../Box';
 import Text from '../Text';
 import Spacer from '../Spacer';
+import { CompressedLooObject } from '../../lib/loo';
+import { useLooNamesByIdsQuery } from '../../api-client/graphql';
 
 const Key = ({ children, ...props }) => (
   <Box
@@ -82,26 +84,35 @@ const Content = ({ toilets }) => {
   );
 };
 
-const AccessibilityList = (
-  props: JSX.IntrinsicAttributes & { toilets: any }
-) => {
+const AccessibilityList = ({ toilets, ...props }) => {
   const [showContent, setShowContent] = React.useState(false);
 
+  // Fetch proper loo names
+  const unorderedNames = useLooNamesByIdsQuery({
+    variables: { idList: toilets.map((t) => t?.id) },
+  });
+
   // to ensure it gets announced, there must be a delay between the existence of the aria live element and the content
   useEffect(() => {
     setTimeout(() => {
       setShowContent(true);
     }, 300);
   }, []);
 
+  const mapIdToName = Object.fromEntries(
+    unorderedNames.data?.looNamesByIds.map((e) => [e.id, e.name]) || []
+  );
+
+  const names = toilets.map((t) => mapIdToName[t?.id] || 'Toilet Loading');
+
   return (
     <div
       role="status"
       aria-atomic="true"
       aria-live="polite"
       aria-relevant="additions text"
     >
-      {showContent && <Content {...props} />}
+      {showContent && <Content toilets={names || []} {...props} />}
     </div>
   );
 };

src/components/LooMap/LooMap.tsx

@@ -268,11 +268,7 @@ const LooMap: React.FC<LooMapProps> = ({
               center={center}
             />
 
-            <AccessibilityList
-              toilets={intersectingToilets.map(
-                (toilet: { name: any }) => toilet.name
-              )}
-            />
+            <AccessibilityList toilets={intersectingToilets} />
 
             <VisuallyHidden>
               <div