Observation & Track Detail view

[ximenabb]

User has joined a project with observations and/or tracks, or a user created a project and imported observations.

Observation Detail View

• Create the screen as designed and the copy on the figma
• Tapping the back arrow moves user 
back to Observations List view

Design Notes:
Both View Observation and View Track are exactly as they are on Mobile with the exception is that the map preview is now displayed on the map pane to the right.

Track Detail View

• Create the screen as designed and the copy on the figma
• Tapping the back arrow moves user 
back to Observations List view

Figma

https://www.figma.com/design/UIA00RSP8Sz24V0vXvQHeL/(Desktop)-CoMapeo?node-id=447-444&node-type=section&t=wrAswGbGPcuFsB0Y-0

[ErikSin]

Proposed architecture:

 export function Observation() {

	const {observation, preset, attachments} = useObservationWithPresetAndAttachments()

	const {data:fields} = useSingleDocByDocId({projectId, docType: 'field', docId: preset.fields})

       // Any component with `Styled` in the name refers to a styledcomponent with no internal logic or state (aka styled wrappers)
	return (
		<StyledContainer>
			<StyledHeader>header text</StyledHeader>
			<Text>{formattedDate(observation.createdAt)}</Text>
			<StylePresetAndLocationWrapper>
				<StylePreset>
                                      {preset.iconRef.docId ? <PresetImage iconId={preset.iconRef.docId} projectId={projectId}/> :
                                         <DefaultIconImage />
                                     {preset.name}
                                </StylePreset>
				{observation.lat + observation.lon}
			</StylePresetAndLocationWrapper>
			<Text>Notes</Text>
			{observation.tags.notes && <Text>{observation.tags.notes}</Text>}
			<StyledGrid>
				{/* Ignore on press for now */}
				{attachments.map((attachment) => {
					if (isPhoto(attachment)) {
						return (<SavedPhoto projectId={projectId} blobId={attachment.blobId} />)
					}

					if (isAudio(attachment)) {
						return (
							<StyledPressable onPress={onPress}>
								<AudioPlayImage />
							</StyledPressable>
						)
					}
				})}
			</StyledGrid>
			<Text>Details</Text>
			<Text>Observed by</Text>
			<Text>{authorName}</Text>
			{fields.length > 0 &&
				fields.map((field) => {
					return {Fields details need to be fleshed out here}
				})}
		</StyledContainer>
	)
}

const SavedPhoto = ({projectId, blobId, onPress}) => {
	const{data:url} = useAttachmentUrl({projectId, blobId}) // form @comapeo-core/react
	return (
		// Same styled StyledPressable as above
		<StyledPressable disabled={!!isLoading} onPress={onPress}>
			{isLoading ?
                            (<LoadingIndicator/>) :
                            (<Image uri={uri} />)
                        }
		</StyledPressable>
	)
}

const PresetImage ={... similar to SavedPhoto, but uses useIconUrl}

Main points:

1. All data is pulled at the top level of screen
2. No prop drilling/prop forwarding except for SavedPhoto and PresetImage which requires the use of a hook. Only the necessary props are passed to these components
3. the data querying is encapsulated in hooks. These hooks should be written to simply return the values. This will allow us to change the implmentation of how data is retrieved without effecting the implementation of the component

To Do

• create hook to return observation, preset, attachments
• Flesh out Field Details. There are several types of fields and they are presented differently (refer to mobile). But it should follow the same pattern above of minimal prop drilling, and simple styled wrapper components

[ErikSin]

The track screen should follow suite. The reusable components should be the smaller Styled wrapper components.