mirror/iNaturalistReactNative
1
0
Fork 0
mirror of https://github.com/inaturalist/iNaturalistReactNative.git synced 2025-12-23 22:18:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3276 from inaturalist/mob-722-ts

Browse Source 
MOB-722 match components ts conversion
This commit is contained in:
Seth Peterson
2025-12-15 14:05:45 -06:00
committed by GitHub
parent beee0b64ab 4ce81ea183
commit f4b7d67722
14 changed files with 218 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/types.d.ts vendored
View File

@@ -90,6 +90,9 @@ export interface ApiTaxon {
id?: number;
name?: string;
preferred_common_name?: string;
rank_level?: number;
taxonPhotos?: { photo: ApiPhoto }[];
defaultPhoto?: ApiPhoto;
}
export interface ApiUser {
@@ -144,6 +147,11 @@ export interface ApiObservation extends ApiRecord {
taxon?: ApiTaxon;
}
export interface ApiSuggestion {
taxon: ApiTaxon;
combined_score: number;
}
export interface ApiObservationsSearchResponse extends ApiResponse {
results: ApiObservation[];
}

27
src/components/Match/AdditionalSuggestions/AdditionalSuggestionsScroll.js → src/components/Match/AdditionalSuggestions/AdditionalSuggestionsScroll.tsx
View File

@@ -1,3 +1,4 @@
import type { ApiSuggestion } from "api/types";
import calculateConfidence from "components/Match/calculateConfidence";
import { ActivityIndicator, CustomFlashList, Heading3 } from "components/SharedComponents";
import { View } from "components/styledComponents";
@@ -8,20 +9,27 @@ import { useTranslation } from "sharedHooks";
import SuggestionsResult from "./SuggestionsResult";
type Props = {
noTopSuggestion?: boolean;
otherSuggestions: ApiSuggestion[];
suggestionsLoading: boolean;
onSuggestionChosen: ( suggestion: ApiSuggestion ) => void;
}
const AdditionalSuggestionsScroll = ( {
noTopSuggestion,
otherSuggestions,
suggestionsLoading,
onSuggestionChosen
} ) => {
}: Props ) => {
const { t } = useTranslation( );
const [maxHeight, setMaxHeight] = useState( 0 );
const [isVisible, setIsVisible] = useState( false );
// We're using an extra measuring container to check the heights of every item,
// even the ones that would otherwise be offscreen
const measuredItemsRef = useRef( new Set() );
const suggestionsRef = useRef( [] );
const measuredItemsRef = useRef( new Set<number>() );
const suggestionsRef = useRef<ApiSuggestion[]>( [] );
useEffect( () => {
suggestionsRef.current = otherSuggestions || [];
@@ -34,7 +42,7 @@ const AdditionalSuggestionsScroll = ( {
measuredItemsRef.current = new Set();
}, [otherSuggestions] );
const updateMaxHeight = useCallback( ( height, itemId ) => {
const updateMaxHeight = useCallback( ( height: number, itemId?: number ) => {
if ( !itemId || height <= 0 ) return;
// track each item as measured
@@ -45,7 +53,8 @@ const AdditionalSuggestionsScroll = ( {
const allSuggestions = suggestionsRef.current;
const allItemIds = new Set( allSuggestions.map( s => s?.taxon?.id ) );
const allMeasured = Array.from( allItemIds ).every( id => measuredItemsRef.current.has( id ) );
const allMeasured = Array.from( allItemIds )
.every( id => id && measuredItemsRef.current.has( id ) );
// Make visible when all items in the renderMeasuringContainer are measured
if ( allMeasured && allItemIds.size > 0 ) {
@@ -53,7 +62,7 @@ const AdditionalSuggestionsScroll = ( {
}
}, [] );
const handleSuggestionPress = useCallback( suggestion => {
const handleSuggestionPress = useCallback( ( suggestion: ApiSuggestion ) => {
onSuggestionChosen( suggestion );
}, [onSuggestionChosen] );
@@ -61,7 +70,7 @@ const AdditionalSuggestionsScroll = ( {
if ( isVisible ) return null;
const measuringContainerStyle = {
position: "absolute", opacity: 0, left: -9999, flexDirection: "row"
position: "absolute" as const, opacity: 0, left: -9999, flexDirection: "row" as const
};
const resultStyle = { marginRight: 14 };
@@ -89,7 +98,7 @@ const AdditionalSuggestionsScroll = ( {
);
};
const renderItem = ( { item: suggestion } ) => {
const renderItem = ( { item: suggestion }: { item: ApiSuggestion } ) => {
const confidence = calculateConfidence( suggestion );
return (
@@ -132,7 +141,7 @@ const AdditionalSuggestionsScroll = ( {
ListHeaderComponent={renderHeader}
horizontal
renderItem={renderItem}
keyExtractor={item => item?.taxon?.id}
keyExtractor={( item: ApiSuggestion ) => `${item?.taxon?.id}`}
data={otherSuggestions}
/>
</View>

2
src/components/Match/AdditionalSuggestions/SuggestionsResult.tsx
View File

@@ -15,7 +15,7 @@ import {
} from "sharedHooks";
type Props = {
confidence: number;
confidence: number | null;
handlePress?: ( ) => void;
taxon: RealmTaxon | ApiTaxon;
testID?: string;

12
src/components/Match/IconicSuggestions/IconicSuggestion.js → src/components/Match/IconicSuggestions/IconicSuggestion.tsx
View File

@@ -13,12 +13,12 @@ import {
} from "sharedHooks";
type Props = {
fetchRemote?: boolean,
fromLocal?: boolean,
handlePress?: ( ) => void,
taxon: RealmTaxon | ApiTaxon,
testID?: string,
selected?: boolean
fetchRemote?: boolean;
fromLocal?: boolean;
handlePress?: ( ) => void;
taxon: RealmTaxon | ApiTaxon;
testID?: string;
selected?: boolean;
}
const IconicSuggestion = ( {

14
src/components/Match/IconicSuggestions/IconicSuggestionsScroll.js → src/components/Match/IconicSuggestions/IconicSuggestionsScroll.tsx
View File

@@ -4,27 +4,33 @@ import { RealmContext } from "providers/contexts";
import React, {
useCallback
} from "react";
import type { RealmTaxon } from "realmModels/types";
import IconicSuggestion from "./IconicSuggestion";
const { useRealm } = RealmContext;
type Props = {
iconicTaxonChosen?: RealmTaxon;
onIconicTaxonChosen: ( taxon: RealmTaxon ) => void;
}
const IconicSuggestionsScroll = ( {
iconicTaxonChosen,
onIconicTaxonChosen
} ) => {
}: Props ) => {
const realm = useRealm();
const iconicTaxa = realm?.objects( "Taxon" ).filtered( "isIconic = true" );
const handleIconicSuggestionPress = useCallback(
iconicTaxon => {
( iconicTaxon: RealmTaxon ) => {
onIconicTaxonChosen( iconicTaxon );
},
[onIconicTaxonChosen]
);
const renderItem = ( { item: taxon } ) => {
const renderItem = ( { item: taxon }: { item: RealmTaxon } ) => {
const selected = iconicTaxonChosen?.id === taxon?.id;
return (
<IconicSuggestion
@@ -42,7 +48,7 @@ const IconicSuggestionsScroll = ( {
ListHeaderComponent={renderHeader}
horizontal
renderItem={renderItem}
keyExtractor={item => item?.id}
keyExtractor={( item: RealmTaxon ) => `${item?.id}`}
data={iconicTaxa}
/>
</View>

34
src/components/Match/Match.js → src/components/Match/Match.tsx
View File

@@ -1,4 +1,5 @@
import { useNetInfo } from "@react-native-community/netinfo";
import type { ApiPhoto, ApiSuggestion } from "api/types";
import LocationSection
from "components/ObsDetailsDefaultMode/LocationSection/LocationSection";
import MapSection
@@ -9,12 +10,17 @@ import {
import { View } from "components/styledComponents";
import _ from "lodash";
import React from "react";
import type { ScrollView } from "react-native";
import type {
RealmObservation, RealmObservationPhoto, RealmPhoto, RealmTaxon
} from "realmModels/types";
import { useTranslation } from "sharedHooks";
import AdditionalSuggestionsScroll
from "./AdditionalSuggestions/AdditionalSuggestionsScroll";
import EmptyMapSection from "./EmptyMapSection";
import IconicSuggestionsScroll from "./IconicSuggestions/IconicSuggestionsScroll";
import type { MatchButtonAction } from "./MatchContainer";
import MatchHeader from "./MatchHeader";
import PhotosSection from "./PhotosSection";
import SaveDiscardButtons from "./SaveDiscardButtons";
@@ -25,19 +31,19 @@ export const matchCardClassBottom
= "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-[30px]";
type Props = {
observation: Object,
obsPhotos: Array<Object>,
handleSaveOrDiscardPress: ( ) => void,
navToTaxonDetails: ( ) => void,
isFetchingLocation: boolean,
handleAddLocationPressed: ( ) => void,
topSuggestion: Object,
otherSuggestions: Array<Object>,
suggestionsLoading: boolean,
onSuggestionChosen: ( ) => void,
scrollRef: Object,
iconicTaxon: Object,
setIconicTaxon: ( ) => void
observation: RealmObservation;
obsPhotos: RealmObservationPhoto[];
handleSaveOrDiscardPress: ( action: MatchButtonAction ) => void;
navToTaxonDetails: ( photo?: ApiPhoto | RealmPhoto ) => void;
isFetchingLocation: boolean;
handleAddLocationPressed: ( ) => void;
topSuggestion?: ApiSuggestion;
otherSuggestions: ApiSuggestion[];
suggestionsLoading: boolean;
onSuggestionChosen: ( suggestion: ApiSuggestion ) => void;
scrollRef: React.RefObject<ScrollView | null>;
iconicTaxon?: RealmTaxon;
setIconicTaxon: ( taxon: RealmTaxon ) => void;
}
const Match = ( {
@@ -80,7 +86,6 @@ const Match = ( {
}
</View>
<PhotosSection
representativePhoto={topSuggestion?.taxon?.representative_photo}
taxon={taxon}
obsPhotos={obsPhotos}
navToTaxonDetails={navToTaxonDetails}
@@ -141,7 +146,6 @@ const Match = ( {
}
</View>
<PhotosSection
representativePhoto={topSuggestion?.taxon?.representative_photo}
taxon={taxon}
obsPhotos={obsPhotos}
navToTaxonDetails={navToTaxonDetails}

120
src/components/Match/MatchContainer.js → src/components/Match/MatchContainer.tsx
View File

@@ -2,17 +2,13 @@ import {
useNetInfo
} from "@react-native-community/netinfo";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { ApiPhoto, ApiSuggestion } from "api/types";
import { Body3, Heading4, ViewWrapper } from "components/SharedComponents";
import { View } from "components/styledComponents";
import flattenUploadParams from "components/Suggestions/helpers/flattenUploadParams";
import {
FETCH_STATUS_LOADING,
FETCH_STATUS_OFFLINE_ERROR,
FETCH_STATUS_OFFLINE_FETCHED,
FETCH_STATUS_OFFLINE_SKIPPED,
FETCH_STATUS_ONLINE_ERROR,
FETCH_STATUS_ONLINE_FETCHED,
FETCH_STATUS_ONLINE_SKIPPED,
FETCH_STATUSES,
initialSuggestions
} from "components/Suggestions/SuggestionsContainer";
import _ from "lodash";
@@ -21,6 +17,8 @@ import React, {
useCallback,
useEffect, useReducer, useRef, useState
} from "react";
import type { ScrollView } from "react-native";
import type { RealmPhoto, RealmTaxon } from "realmModels/types";
import fetchPlaceName from "sharedHelpers/fetchPlaceName";
import saveObservation from "sharedHelpers/saveObservation";
import shouldFetchObservationLocation from "sharedHelpers/shouldFetchObservationLocation";
@@ -35,22 +33,57 @@ import tryToReplaceWithLocalTaxon from "./helpers/tryToReplaceWithLocalTaxon";
import Match from "./Match";
import PreMatchLoadingScreen from "./PreMatchLoadingScreen";
const setQueryKey = ( selectedPhotoUri, shouldUseEvidenceLocation ) => [
interface ImageParamsType {
uri?: string;
image: {
uri: string;
name: string;
type: string;
};
lat?: number;
lng?: number;
}
interface NavParams {
id?: number | string;
firstPhotoID?: number | string;
representativePhoto?: { isRepresentativeButOtherTaxon?: boolean; id?: number | string };
}
interface State {
onlineFetchStatus: FETCH_STATUSES;
offlineFetchStatus: FETCH_STATUSES;
scoreImageParams: ImageParamsType | null;
queryKey: ( string | { shouldUseEvidenceLocation: boolean } )[];
shouldUseEvidenceLocation: boolean;
orderedSuggestions: ApiSuggestion[];
}
export type MatchButtonAction = "save" | "discard";
type Action =
| { type: "SET_UPLOAD_PARAMS"; scoreImageParams: ImageParamsType }
| { type: "SET_ONLINE_FETCH_STATUS"; onlineFetchStatus: FETCH_STATUSES }
| { type: "SET_OFFLINE_FETCH_STATUS"; offlineFetchStatus: FETCH_STATUSES }
| { type: "SET_LOCATION"; scoreImageParams: ImageParamsType; shouldUseEvidenceLocation: boolean }
| { type: "ORDER_SUGGESTIONS"; orderedSuggestions: ApiSuggestion[] };
const setQueryKey = ( selectedPhotoUri: string, shouldUseEvidenceLocation: boolean ) => [
"scoreImage",
selectedPhotoUri,
{ shouldUseEvidenceLocation }
];
const initialState = {
onlineFetchStatus: FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUS_LOADING,
const initialState: State = {
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
scoreImageParams: null,
queryKey: [],
shouldUseEvidenceLocation: false,
orderedSuggestions: []
};
const reducer = ( state, action ) => {
const reducer = ( state: State, action: Action ): State => {
switch ( action.type ) {
case "SET_UPLOAD_PARAMS":
return {
@@ -71,8 +104,8 @@ const reducer = ( state, action ) => {
case "SET_LOCATION":
return {
...state,
onlineFetchStatus: FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUS_LOADING,
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
scoreImageParams: action.scoreImageParams,
shouldUseEvidenceLocation: action.shouldUseEvidenceLocation,
queryKey: setQueryKey( action.scoreImageParams.image.uri, action.shouldUseEvidenceLocation )
@@ -91,12 +124,12 @@ const { useRealm } = RealmContext;
const MatchContainer = ( ) => {
const hasLoadedRef = useRef( false );
const isDebug = isDebugMode( );
const scrollRef = useRef( null );
const scrollRef = useRef<ScrollView>( null );
const currentObservation = useStore( state => state.currentObservation );
const getCurrentObservation = useStore( state => state.getCurrentObservation );
const cameraRollUris = useStore( state => state.cameraRollUris );
const updateObservationKeys = useStore( state => state.updateObservationKeys );
const navigation = useNavigation( );
const navigation = useNavigation<NativeStackNavigationProp<Record<string, NavParams>>>( );
const {
hasPermissions,
renderPermissionsGate,
@@ -117,9 +150,12 @@ const MatchContainer = ( ) => {
const evidenceHasLocation = !!currentObservation?.latitude;
const [topSuggestion, setTopSuggestion] = useState( );
const [iconicTaxon, setIconicTaxon] = useState( );
const [currentUserLocation, setCurrentUserLocation] = useState( null );
const [topSuggestion, setTopSuggestion] = useState<ApiSuggestion>( );
const [iconicTaxon, setIconicTaxon] = useState<RealmTaxon>( );
const [currentUserLocation, setCurrentUserLocation] = useState<{
latitude?: number;
longitude?: number;
} | null>( null );
const [state, dispatch] = useReducer( reducer, {
...initialState,
@@ -138,28 +174,29 @@ const MatchContainer = ( ) => {
} = state;
const shouldFetchOnlineSuggestions = ( hasPermissions !== undefined )
&& onlineFetchStatus === FETCH_STATUS_LOADING;
&& onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING;
const onlineSuggestionsAttempted = onlineFetchStatus === FETCH_STATUS_ONLINE_FETCHED
|| onlineFetchStatus === FETCH_STATUS_ONLINE_ERROR;
const onlineSuggestionsAttempted
= onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_ONLINE_FETCHED
|| onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_ONLINE_ERROR;
const onFetchError = useCallback(
( { isOnline }: { isOnline: boolean } ) => {
if ( isOnline ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_ERROR
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_ERROR
} );
} else {
dispatch( {
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUS_OFFLINE_ERROR
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_OFFLINE_ERROR
} );
// If offline is finished, and online still in loading state it means it never started
if ( onlineFetchStatus === FETCH_STATUS_LOADING ) {
if ( onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_SKIPPED
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_SKIPPED
} );
}
}
@@ -172,24 +209,24 @@ const MatchContainer = ( ) => {
if ( isOnline ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_FETCHED
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_FETCHED
} );
// Currently we start offline only when online has an error, so
// we can register offline as skipped if online is successful
dispatch( {
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUS_OFFLINE_SKIPPED
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_OFFLINE_SKIPPED
} );
} else {
dispatch( {
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUS_OFFLINE_FETCHED
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_OFFLINE_FETCHED
} );
// If offline is finished, and online still in loading state it means it never started
if ( onlineFetchStatus === FETCH_STATUS_LOADING ) {
if ( onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_SKIPPED
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_SKIPPED
} );
}
}
@@ -213,7 +250,7 @@ const MatchContainer = ( ) => {
onlineSuggestionsAttempted
} );
const [currentPlaceGuess, setCurrentPlaceGuess] = useState( );
const [currentPlaceGuess, setCurrentPlaceGuess] = useState<string>( );
const [hasRefetchedSuggestions, setHasRefetchedSuggestions] = useState( false );
const scrollToTop = useCallback( () => {
@@ -225,7 +262,7 @@ const MatchContainer = ( ) => {
const [needLocation, setNeedLocation] = useState(
shouldFetchObservationLocation( currentObservation )
);
const shouldFetchLocation = hasPermissions && needLocation;
const shouldFetchLocation = !!( hasPermissions && needLocation );
const {
isFetchingLocation,
@@ -326,7 +363,7 @@ const MatchContainer = ( ) => {
updateObservationKeys( { place_guess: currentPlaceGuess } );
}, [currentPlaceGuess, updateObservationKeys] );
const onSuggestionChosen = useCallback( selection => {
const onSuggestionChosen = useCallback( ( selection: ApiSuggestion ) => {
const suggestionsList = [...orderedSuggestions];
// make sure to reorder the list by confidence score
@@ -355,7 +392,7 @@ const MatchContainer = ( ) => {
// TODO: should this set owners_identification_from_vision: false?
}, [orderedSuggestions, scrollToTop] );
const createUploadParams = useCallback( async ( uri, showLocation ) => {
const createUploadParams = useCallback( async ( uri: string, showLocation: boolean ) => {
const newImageParams = await flattenUploadParams( uri );
if ( showLocation && currentObservation?.latitude ) {
newImageParams.lat = currentObservation?.latitude;
@@ -426,8 +463,8 @@ const MatchContainer = ( ) => {
topSuggestion
);
const suggestionsLoading = onlineFetchStatus === FETCH_STATUS_LOADING
|| offlineFetchStatus === FETCH_STATUS_LOADING;
const suggestionsLoading = onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING
|| offlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING;
useEffect( ( ) => {
if (
@@ -451,17 +488,18 @@ const MatchContainer = ( ) => {
const otherSuggestions = orderedSuggestions
.filter( suggestion => suggestion.taxon.id !== taxonId );
const navToTaxonDetails = photo => {
const navParams = { id: taxonId };
const navToTaxonDetails
= ( photo?: ApiPhoto | RealmPhoto ) => {
const navParams: NavParams = { id: taxonId };
if ( !photo?.isRepresentativeButOtherTaxon ) {
navParams.firstPhotoID = photo.id;
navParams.firstPhotoID = photo?.id;
} else {
navParams.representativePhoto = photo;
}
navigation.push( "TaxonDetails", navParams );
};
const handleSaveOrDiscardPress = async action => {
const handleSaveOrDiscardPress = async ( action: MatchButtonAction ) => {
if ( action === "save" ) {
updateObservationKeys( {
taxon: taxon || iconicTaxon,

23
src/components/Match/MatchHeader.tsx
View File

@@ -1,3 +1,4 @@
import type { ApiSuggestion } from "api/types";
import calculateConfidence from "components/Match/calculateConfidence";
import {
Body2,
@@ -10,15 +11,13 @@ import {
View
} from "components/styledComponents";
import React from "react";
import type { RealmTaxon } from "realmModels/types";
import { useTranslation } from "sharedHooks";
const HIGH_CONFIDENCE_THRESHOLD = 93;
const LIKELY_CONFIDENCE_THRESHOLD = 50;
interface Props {
topSuggestion?: {
combined_score?: number;
score?: number;
taxon?: RealmTaxon;
};
topSuggestion?: ApiSuggestion;
hideObservationStatus?: boolean;
}
@@ -36,10 +35,14 @@ const MatchHeader = ( { topSuggestion, hideObservationStatus }: Props ) => {
const observationStatus = ( ) => {
let confidenceType = "may_have_observed";
if ( confidence >= 93 ) {
confidenceType = "observed";
} else if ( confidence >= 50 && confidence < 93 ) {
confidenceType = "likely_observed";
if ( confidence ) {
if ( confidence >= HIGH_CONFIDENCE_THRESHOLD ) {
confidenceType = "observed";
} else if (
confidence >= LIKELY_CONFIDENCE_THRESHOLD && confidence < HIGH_CONFIDENCE_THRESHOLD
) {
confidenceType = "likely_observed";
}
}
let rankDescription = "organism";

7
src/components/Match/MatchTaxonSearchScreen.tsx
View File

@@ -1,4 +1,5 @@
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { ApiTaxon } from "api/types";
import {
TaxonResult,
@@ -18,11 +19,13 @@ const { useRealm } = RealmContext;
const MatchTaxonSearchScreen = ( ) => {
const [taxonQuery, setTaxonQuery] = useState( "" );
const [selectedTaxon, setSelectedTaxon] = useState<ApiTaxon>( null );
const [selectedTaxon, setSelectedTaxon] = useState<ApiTaxon | null>( null );
const { taxa, isLoading, isLocal } = useTaxonSearch( taxonQuery );
const { t } = useTranslation( );
const realm = useRealm( );
const navigation = useNavigation( );
const navigation = useNavigation<
NativeStackNavigationProp<Record<string, { screen: string; params: {screen: string} }>>
>( );
const getCurrentObservation = useStore( state => state.getCurrentObservation );
const cameraRollUris = useStore( state => state.cameraRollUris );

19
src/components/Match/PhotosSection.js → src/components/Match/PhotosSection.tsx
View File

@@ -1,5 +1,4 @@
// @flow
import type { ApiPhoto, ApiTaxon } from "api/types";
import classnames from "classnames";
import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
import {
@@ -9,17 +8,17 @@ import {
Image, Pressable, View
} from "components/styledComponents";
import _, { compact } from "lodash";
import type { Node } from "react";
import React, { useEffect, useState } from "react";
import { Image as RNImage } from "react-native";
import Photo from "realmModels/Photo";
import type { RealmObservationPhoto, RealmPhoto, RealmTaxon } from "realmModels/types";
type Props = {
representativePhoto?: Object,
taxon: Object,
obsPhotos: Array<Object>,
navToTaxonDetails: ( photo: Object ) => void,
hideTaxonPhotos?: boolean
representativePhoto?: ApiPhoto;
taxon?: ApiTaxon | RealmTaxon;
obsPhotos: RealmObservationPhoto[];
navToTaxonDetails: ( photo: ApiPhoto | RealmPhoto ) => void;
hideTaxonPhotos?: boolean;
}
const PhotosSection = ( {
@@ -28,8 +27,8 @@ const PhotosSection = ( {
obsPhotos,
navToTaxonDetails,
hideTaxonPhotos
}: Props ): Node => {
const [displayPortraitLayout, setDisplayPortraitLayout] = useState( null );
}: Props ) => {
const [displayPortraitLayout, setDisplayPortraitLayout] = useState<boolean | null>( null );
const [mediaViewerVisible, setMediaViewerVisible] = useState( false );
const localTaxonPhotos = taxon?.taxonPhotos;

3
src/components/Match/PreMatchLoadingScreen.tsx
View File

@@ -16,7 +16,8 @@ const fade = ( value: number ) => ( {
interface Props {
isLoading: boolean;
onSkip: ( ) => void;
// TODO rm unused onSkip prop https://linear.app/inaturalist/issue/MOB-1068/remove-unused-onskip-prop
onSkip?: ( ) => void;
}
const PreMatchLoadingScreen = ( { isLoading, onSkip }: Props ) => {

7
src/components/Match/SaveDiscardButtons.js → src/components/Match/SaveDiscardButtons.tsx
View File

@@ -2,23 +2,24 @@ import {
ButtonBar
} from "components/SharedComponents";
import { View } from "components/styledComponents";
import type { Node } from "react";
import React from "react";
import { useTranslation } from "sharedHooks";
import { getShadow } from "styles/global";
import type { MatchButtonAction } from "./MatchContainer";
const DROP_SHADOW = getShadow( {
offsetHeight: -3,
shadowOpacity: 0.2
} );
type Props = {
handlePress: Function
handlePress: ( action: MatchButtonAction ) => void;
}
const SaveDiscardButtons = ( {
handlePress
}: Props ): Node => {
}: Props ) => {
const { t } = useTranslation( );
const saveButton = {

3
src/components/Match/helpers/tryToReplaceWithLocalTaxon.ts
View File

@@ -1,9 +1,10 @@
import type { ApiSuggestion } from "api/types";
import type Taxon from "realmModels/Taxon";
import type { RealmTaxon } from "realmModels/types";
const tryToReplaceWithLocalTaxon = (
localTaxa: ( Taxon & RealmTaxon )[],
suggestion: { taxon: { id: number } }
suggestion: ApiSuggestion
) => {
const localTaxon = localTaxa.find( local => local.id === suggestion.taxon.id );

71
src/components/Suggestions/SuggestionsContainer.tsx
View File

@@ -30,13 +30,15 @@ import TaxonSearchButton from "./TaxonSearchButton";
const logger = log.extend( "SuggestionsContainer" );
export const FETCH_STATUS_LOADING = "loading";
export const FETCH_STATUS_ONLINE_FETCHED = "online-fetched";
export const FETCH_STATUS_ONLINE_ERROR = "online-error";
export const FETCH_STATUS_OFFLINE_FETCHED = "offline-fetched";
export const FETCH_STATUS_OFFLINE_ERROR = "offline-error";
export const FETCH_STATUS_OFFLINE_SKIPPED = "offline-skipped";
export const FETCH_STATUS_ONLINE_SKIPPED = "online-skipped";
export enum FETCH_STATUSES {
FETCH_STATUS_LOADING = "loading",
FETCH_STATUS_ONLINE_FETCHED = "online-fetched",
FETCH_STATUS_ONLINE_ERROR = "online-error",
FETCH_STATUS_OFFLINE_FETCHED = "offline-fetched",
FETCH_STATUS_OFFLINE_ERROR = "offline-error",
FETCH_STATUS_OFFLINE_SKIPPED = "offline-skipped",
FETCH_STATUS_ONLINE_SKIPPED = "online-skipped"
}
export const TOP_SUGGESTION_NONE = "none";
export const TOP_SUGGESTION_HUMAN = "human";
@@ -73,8 +75,8 @@ export const initialSuggestions: Suggestions = {
};
const initialState = {
onlineFetchStatus: FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUS_LOADING,
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
scoreImageParams: null,
mediaViewerVisible: false,
queryKey: [],
@@ -94,8 +96,8 @@ const reducer = ( state, action ) => {
case "SELECT_PHOTO":
return {
...state,
onlineFetchStatus: FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUS_LOADING,
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
selectedPhotoUri: action.selectedPhotoUri,
scoreImageParams: action.scoreImageParams,
queryKey: setQueryKey( action.selectedPhotoUri, state.shouldUseEvidenceLocation )
@@ -118,8 +120,8 @@ const reducer = ( state, action ) => {
case "TOGGLE_LOCATION":
return {
...state,
onlineFetchStatus: FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUS_LOADING,
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING,
scoreImageParams: action.scoreImageParams,
shouldUseEvidenceLocation: action.shouldUseEvidenceLocation,
queryKey: setQueryKey( state.selectedPhotoUri, action.shouldUseEvidenceLocation )
@@ -189,28 +191,29 @@ const SuggestionsContainer = ( ) => {
} = state;
const shouldFetchOnlineSuggestions = ( hasPermissions !== undefined )
&& onlineFetchStatus === FETCH_STATUS_LOADING;
&& onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING;
const onlineSuggestionsAttempted = onlineFetchStatus === FETCH_STATUS_ONLINE_FETCHED
|| onlineFetchStatus === FETCH_STATUS_ONLINE_ERROR;
const onlineSuggestionsAttempted
= onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_ONLINE_FETCHED
|| onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_ONLINE_ERROR;
const onFetchError = useCallback(
( { isOnline }: { isOnline: boolean } ) => {
if ( isOnline ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_ERROR
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_ERROR
} );
} else {
dispatch( {
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUS_OFFLINE_ERROR
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_OFFLINE_ERROR
} );
// If offline is finished, and online still in loading state it means it never started
if ( onlineFetchStatus === FETCH_STATUS_LOADING ) {
if ( onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_SKIPPED
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_SKIPPED
} );
}
}
@@ -223,24 +226,24 @@ const SuggestionsContainer = ( ) => {
if ( isOnline ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_FETCHED
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_FETCHED
} );
// Currently we start offline only when online has an error, so
// we can register offline as skipped if online is successful
dispatch( {
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUS_OFFLINE_SKIPPED
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_OFFLINE_SKIPPED
} );
} else {
dispatch( {
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUS_OFFLINE_FETCHED
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_OFFLINE_FETCHED
} );
// If offline is finished, and online still in loading state it means it never started
if ( onlineFetchStatus === FETCH_STATUS_LOADING ) {
if ( onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING ) {
dispatch( {
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUS_ONLINE_SKIPPED
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_ONLINE_SKIPPED
} );
}
}
@@ -313,8 +316,8 @@ const SuggestionsContainer = ( ) => {
]
);
const isLoading = onlineFetchStatus === FETCH_STATUS_LOADING
|| offlineFetchStatus === FETCH_STATUS_LOADING;
const isLoading = onlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING
|| offlineFetchStatus === FETCH_STATUSES.FETCH_STATUS_LOADING;
const { loadTime } = usePerformance( {
isLoading
@@ -342,8 +345,18 @@ const SuggestionsContainer = ( ) => {
// suggestions
if ( !isConnected ) { return; }
resetTimeout( );
dispatch( { type: "SET_ONLINE_FETCH_STATUS", onlineFetchStatus: FETCH_STATUS_LOADING } );
dispatch( { type: "SET_OFFLINE_FETCH_STATUS", offlineFetchStatus: FETCH_STATUS_LOADING } );
dispatch(
{
type: "SET_ONLINE_FETCH_STATUS",
onlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING
}
);
dispatch(
{
type: "SET_OFFLINE_FETCH_STATUS",
offlineFetchStatus: FETCH_STATUSES.FETCH_STATUS_LOADING
}
);
}, [isConnected, resetTimeout] );
const hideLocationToggleButton = usingOfflineSuggestions