diff --git a/src/components/Match/Match.js b/src/components/Match/Match.js index ba37497a6..55ab2e158 100644 --- a/src/components/Match/Match.js +++ b/src/components/Match/Match.js @@ -4,7 +4,7 @@ import LocationSection import MapSection from "components/ObsDetailsDefaultMode/MapSection/MapSection"; import { - ActivityIndicator, Button, Divider, ScrollViewWrapper + ActivityIndicator, Button, ScrollViewWrapper } from "components/SharedComponents"; import { View } from "components/styledComponents"; import _ from "lodash"; @@ -18,6 +18,9 @@ import MatchHeader from "./MatchHeader"; import PhotosSection from "./PhotosSection"; import SaveDiscardButtons from "./SaveDiscardButtons"; +const cardClassTop = "rounded-t-2xl border-lightGray border-[2px] p-4 border-b-0 -mb-0.5"; +const cardClassBottom = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-4"; + type Props = { observation: Object, obsPhotos: Array, @@ -27,7 +30,8 @@ type Props = { topSuggestion: Object, otherSuggestions: Array, suggestionsLoading: boolean, - onSuggestionChosen: ( ) => void + onSuggestionChosen: ( ) => void, + scrollRef: Object } const Match = ( { @@ -39,7 +43,8 @@ const Match = ( { topSuggestion, otherSuggestions, suggestionsLoading, - onSuggestionChosen + onSuggestionChosen, + scrollRef }: Props ) => { const { t } = useTranslation( ); const { isConnected } = useNetInfo( ); @@ -49,9 +54,8 @@ const Match = ( { return ( <> - - - + + { suggestionsLoading ? ( @@ -78,6 +82,7 @@ const Match = ( { ? handleLocationPickerPressed : null} /> + { isConnected && ( diff --git a/src/components/Match/MatchContainer.js b/src/components/Match/MatchContainer.js index 583842ed2..d1db449d5 100644 --- a/src/components/Match/MatchContainer.js +++ b/src/components/Match/MatchContainer.js @@ -72,6 +72,7 @@ const { useRealm } = RealmContext; const MatchContainer = ( ) => { const hasLoadedRef = useRef( false ); + const scrollRef = useRef( null ); const currentObservation = useStore( state => state.currentObservation ); const getCurrentObservation = useStore( state => state.getCurrentObservation ); const cameraRollUris = useStore( state => state.cameraRollUris ); @@ -152,6 +153,12 @@ const MatchContainer = ( ) => { onlineSuggestionsAttempted } ); + const scrollToTop = useCallback( ( ) => { + if ( scrollRef.current ) { + scrollRef.current.scrollTo( { y: 0, animated: true } ); + } + }, [] ); + const onSuggestionChosen = useCallback( selection => { const suggestionsList = [...orderedSuggestions]; @@ -177,9 +184,9 @@ const MatchContainer = ( ) => { orderedSuggestions: sortedList } ); } - // TODO: scroll to top of screen + scrollToTop( ); // TODO: should this set owners_identification_from_vision: false? - }, [orderedSuggestions] ); + }, [orderedSuggestions, scrollToTop] ); const createUploadParams = useCallback( async ( uri, showLocation ) => { const newImageParams = await flattenUploadParams( uri ); @@ -274,6 +281,7 @@ const MatchContainer = ( ) => { topSuggestion={topSuggestion} otherSuggestions={otherSuggestions} suggestionsLoading={suggestionsLoading} + scrollRef={scrollRef} /> {renderPermissionsGate( { onPermissionGranted: openLocationPicker } )} diff --git a/src/components/Match/PhotosSection.js b/src/components/Match/PhotosSection.js index 3977c4e5f..ebef772ee 100644 --- a/src/components/Match/PhotosSection.js +++ b/src/components/Match/PhotosSection.js @@ -1,5 +1,8 @@ import classnames from "classnames"; import MediaViewerModal from "components/MediaViewer/MediaViewerModal"; +import { + PhotoCount +} from "components/SharedComponents"; import { Image, Pressable, View } from "components/styledComponents"; @@ -76,6 +79,12 @@ const PhotosSection = ( { className="w-full h-full" accessibilityIgnoresInvertColors /> + {observationPhotos.length > 1 && ( + + + + )} + ); diff --git a/src/components/ObsDetailsDefaultMode/LocationSection/LocationSection.tsx b/src/components/ObsDetailsDefaultMode/LocationSection/LocationSection.tsx index 762a88d2c..99281a808 100644 --- a/src/components/ObsDetailsDefaultMode/LocationSection/LocationSection.tsx +++ b/src/components/ObsDetailsDefaultMode/LocationSection/LocationSection.tsx @@ -1,4 +1,3 @@ -import classnames from "classnames"; import { DateDisplay, Heading5, @@ -28,10 +27,8 @@ const LocationSection = ( { const geoprivacy = observation?.geoprivacy; const taxonGeoprivacy = observation?.taxon_geoprivacy; - const cardClass = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mx-0.5"; - return ( - + {t( "OBSERVED-IN--label" )} @@ -67,7 +64,6 @@ const LocationSection = ( { /> ) } - ); }; diff --git a/src/components/SharedComponents/ScrollViewWrapper.js b/src/components/SharedComponents/ScrollViewWrapper.js index 5f1b82831..d0485dc0d 100644 --- a/src/components/SharedComponents/ScrollViewWrapper.js +++ b/src/components/SharedComponents/ScrollViewWrapper.js @@ -7,7 +7,8 @@ import { Keyboard, StatusBar } from "react-native"; type Props = { children: React.Node, testID?: string, - style?: Object + style?: Object, + scrollRef?: Object, }; const CONTENT_CONTAINER_STYLE = { @@ -18,7 +19,8 @@ const CONTENT_CONTAINER_STYLE = { const ScrollViewWrapper = ( { children, testID, - style + style, + scrollRef }: Props ): React.Node => { const dismissKeyboard = () => Keyboard.dismiss(); @@ -26,6 +28,7 @@ const ScrollViewWrapper = ( {