add ability to show icon based on iconId, get icon based on presetNam…

…e, pass new props in all components

src/frontend/hooks/server/presets.ts

@@ -7,6 +7,7 @@ import {
 
 import {useProject} from './projects';
 import {PresetValue} from '@mapeo/schema';
+import {IconSize} from '../../sharedTypes';
 
 export function usePresetsQuery() {
   const project = useProject();
@@ -35,16 +36,20 @@ export function usePresetsMutation() {
   });
 }
 
-export function useGetPresetIcon(iconId?: string) {
+export function useGetPresetIcon(size: IconSize, name?: string) {
   const project = useProject();
 
   return useQuery({
-    queryKey: ['PresetIcon', iconId],
-    enabled: !!iconId,
+    queryKey: ['presetIcon', name],
+    enabled: !!name,
     queryFn: async () => {
-      return await project.$icons.getIconUrl(iconId!, {
+      const currentPreset = await project.preset
+        .getMany()
+        .then(res => res.find(p => p.name === name));
+
+      return await project.$icons.getIconUrl(currentPreset?.iconId!, {
         mimeType: 'image/png',
-        size: 'small',
+        size: size,
         pixelDensity: 3,
       });
     },

src/frontend/screens/Observation/PresetHeader.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import {BLACK} from '../../lib/styles';
 import {FormattedPresetName} from '../../sharedComponents/FormattedData';
@@ -7,7 +8,7 @@ import {Preset} from '@mapeo/schema';
 export const PresetHeader = ({preset}: {preset: Preset}) => {
   return (
     <View style={styles.categoryIconContainer}>
-      <PresetCircleIcon color={BLACK} size="medium" />
+      <PresetCircleIcon size="medium" name={preset.name} />
       <Text style={styles.categoryLabel} numberOfLines={1}>
         <FormattedPresetName preset={preset} />
       </Text>

src/frontend/screens/ObservationEdit/PresetView.tsx

@@ -32,7 +32,7 @@ export const PresetView = () => {
   return (
     <View style={styles.categoryContainer}>
       <View style={styles.categoryIcon}>
-        <PresetCircleIcon />
+        <PresetCircleIcon name={preset?.name} />
       </View>
       <Text style={styles.categoryName}>{name}</Text>
       <TextButton

src/frontend/screens/ObservationsList/ObservationListItem.tsx

@@ -5,7 +5,6 @@ import {Text} from '../../sharedComponents/Text';
 import {TouchableHighlight} from '../../sharedComponents/Touchables';
 import {PresetCircleIcon} from '../../sharedComponents/icons/PresetIcon';
 import {Attachment, ViewStyleProp} from '../../sharedTypes';
-import {BLACK} from '../../lib/styles';
 import {Observation} from '@mapeo/schema';
 import {
   FormattedObservationDate,
@@ -65,11 +64,11 @@ function ObservationListItemNotMemoized({
           <View style={styles.photoContainer}>
             <PhotoStack attachments={observation.attachments} />
             <View style={styles.smallIconContainer}>
-              <PresetCircleIcon iconId={preset.name} size="small" />
+              <PresetCircleIcon name={preset.name} size="small" />
             </View>
           </View>
         ) : (
-          <PresetCircleIcon iconId={preset.name} size="medium" />
+          <PresetCircleIcon name={preset.name} size="medium" />
         )}
       </View>
     </TouchableHighlight>

src/frontend/screens/PresetChooser.tsx

@@ -118,7 +118,7 @@ const Item = React.memo(
       underlayColor="#000033"
       testID={`${item.docId}CategoryButton`}>
       <View style={styles.cellContainer}>
-        <PresetCircleIcon size="medium" />
+        <PresetCircleIcon size="medium" name={item.name} />
         <Text numberOfLines={3} style={styles.categoryName}>
           <DynFormattedMessage
             id={`presets.${item.docId}.name`}

src/frontend/sharedComponents/icons/PresetIcon.tsx

@@ -1,16 +1,15 @@
-import * as React from 'react';
+import React, {memo} from 'react';
 import {Image} from 'react-native';
 
 import {Circle} from './Circle';
 import {IconSize} from '../../sharedTypes';
 import {UIActivityIndicator} from 'react-native-indicators';
 import {useGetPresetIcon} from '../../hooks/server/presets';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
-import {useProject} from '../../hooks/server/projects';
 
 interface CategoryIconProps {
   size?: IconSize;
-  iconId?: string;
+  name?: string;
 }
 
 const iconSizes = {
@@ -25,52 +24,33 @@ const radii = {
   large: 35,
 };
 
-export const PresetIcon = React.memo<CategoryIconProps>(
-  ({size = 'medium', iconId}) => {
-    const project = useProject();
+export const PresetIcon = memo<CategoryIconProps>(({size = 'medium', name}) => {
+  const iconSize = iconSizes[size] || 35;
+  const {data, isLoading} = useGetPresetIcon(size, name);
+  const [error, setError] = React.useState(false);
 
-    const {data, isLoading} = useGetPresetIcon(iconId);
-    const [error, setError] = React.useState(false);
-    const iconSize = iconSizes[size] || 35;
+  if (isLoading) return <UIActivityIndicator size={30} />;
 
-    React.useEffect(() => {
-      project.preset.getMany().then(res => console.log(res, 'res'));
-    }, [project]);
+  // Fallback to a default icon if we can't load the icon from mapeo-server
+  if (error || !name) return <MaterialIcon name="place" size={iconSize} />;
 
-    if (isLoading) return <UIActivityIndicator size={30} />;
-
-    // Fallback to a default icon if we can't load the icon from mapeo-server
-    if (error || !iconId) return <MaterialIcon name="place" size={iconSize} />;
-
-    return (
-      <Image
-        style={{width: iconSize, height: iconSize}}
-        source={{uri: data}}
-        onError={() => setError(true)}
-      />
-    );
-  },
-);
+  return (
+    <Image
+      style={{width: iconSize, height: iconSize}}
+      resizeMode="contain"
+      source={{uri: data}}
+      onError={() => setError(true)}
+    />
+  );
+});
 
 export const PresetCircleIcon = ({
-  iconId,
+  name,
   size = 'medium',
 }: CategoryIconProps) => {
-  // const [{ presets }] = React.useContext(ConfigContext);
-
-  // If the preset defines a "color" field for *any* point-based category
-  // we want to render a thicker border, even if not all categories have a color defined
-  // const presetsUseColors = Array.from(presets.values()).some(
-  //   p => p.geometry.includes("point") && !!p.color
-  // );
-
   return (
-    <Circle
-      radius={radii[size]}
-      style={undefined}
-      //style={presetsUseColors ? { borderWidth: 3 } : undefined}
-    >
-      <PresetIcon iconId={iconId} size={size} />
+    <Circle radius={radii[size]}>
+      <PresetIcon name={name} size={size} />
     </Circle>
   );
 };