From 60de855f6b8f70eb8093046eb889905de11a7e47 Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Tue, 23 Jan 2024 18:08:36 +0100 Subject: [PATCH] Explore filters (#1067) * Remove Explore Filters screen * State for Explore filters modal * Accept modal state in Header to open modal * Basic explore filters modal * Save taxon object to explore state on update * Update types expected * Pass state and update function into filters modal * Receive new props * Destructure taxon from props * Restyle header View * Add main Heading * Add taxon section * Restyle modal header * Add numbers badge component * TaxonResult add prop for general on press * Make TaxonResult checkmark optional * DisplayTaxon can receive children as right-side component * Refactor ExploreFilters component tree * Move header out of scroll view * Update ExploreFilters.js * Update ExploreFilters.js * Add icon to display taxon * Update ExploreFilters.js * Add basic taxon search screen * Use taxon result without checkmark, send taxon to Explore screen * Add string * Accept taxon on explore screen * Add a dummy screen for explore location search * Add type * Store place in state when received as route param * Basic explore filters location section * Add strings * Move filter modal to separate component, add sort by props * Add screen for testing purposes Because atm we can not have two modals open at the same time, I move filters to a separate screen for testing the other modals. * Add initial filter params and do not pass down undefined ones * Pass function to update sort by down * Create SortBySheet.js * Navigate to test screen instead * Sort by button text * Add default filters definition * Call reset function if filters are not default * Add prop and function to reset * Add user search screen * Move search screens * Move references * Replace list with flash list * Add item separator * Remove footer * Return user to Explore * On press handle for user list item * Fix wrong imports * If a user is in prop show user icon and edit button instead * Refactor display taxon to be inside a Pressable * Missing import * Receive user in explore rout params * Quality grade section header * Placeholder * Add TODO * Calculate number of filters set * Only send user id to explore screen * Do send back user object, filter out user_id * Add project section * Refactor project list item into standalone component * Change initial value to undefined * Add project search screen * Remove loading state * Show project in filter modal * If project is in param set it to state * Add Checkboxes to filter modal * Remove comment * Taxonomic Ranks section UI * Use props for checkboxes * Update ExploreContainer.js * Calculate actual query param * Is Most Faved possible? * Actually set sort by query params * Save hrank and lrank to explore state, prop down * Update ExploreContainer.js * Show ranks in button text * Radio modal to test taxonomic ranks * Add sticky toolbar * Update strings.ftl * Date observed section bottom sheet * Date observed prop * Change padding * Date observed all UI * Taxonomic ranks section * Add todo * Refactor open sheets state * Update button * Add exact date picker sections * Store dates in state * Update strings.ftl * Refactor function name * Refactor constants * Reset date states on mode change * Set new months to state on change * Configuration for showing months checkboxes * Receive and update months with checkboxes * Refactor RadioButton sheet to export radio button row * Add Media section UI * Add media state to Explore * Start with Establishment Means section * Add checkbox texts * Add states * Functions to update state * Add sort by param for most faved * Spacing for checkboxes * Wild Status section UI * Wild status state * Reviewed UI section * Reviewed state * Set current user id as viewer_id for review true to work * Remove testing code * Photo licensing UI section * Photo license state * Prop down photo license update, use param in search Forgotten in previous commit * Unused prop * Add noStatus state * Change Establishment Means status to TODO * Add TODO text * Console log for testing params * After rebase from main this was necessary * Simple switch between two UIs * Simple explore context * Lift Provider one up * Copy over photo license to new provider * Copy over review filter * Refactor to use enum * Copy over wild status, and enum refactors * Refactor some more state * Remove unused navigation * Refactor one state * Refactor some more state * Refactor some more state * Remove testing screen * Refactor some more state and derived state * Do send over project as param from Project Details * Update FilterModal.js * Rename components * Remove unused param handling * Add keys * Remove substring for key * lrank and hrank combined counts as one only * Use the correct constants * Add key * Fix issue with button text * Add View Wrapper for filters section * UI cosmetics * Compare current filters state to a snapshot * Change button level to focus * Add context action to revert to snapshot * Confirmation dialog strings * Add confirmation sheet * Send current user along to Explore from Home Header Closes #887 * Date bottom sheets texts * Show texts in modal * Set search to worldwide on param received * Send taxon as param to Explore from Taxon details screen Closes #889 * Show all observations worldwide of project * On species view pressed should navigate to explore species view Closes #893 * Go to explore from users profile * Navigate to species view from user profile Closes #894 * Enable unclear filters * Add taxon to context * Use context for explore params further down the tree * Refactor one state * Remove unused action * Remove unused state * Refactor function * Refactor state * Refactor place_id, which concludes reducer refactor * Refactor names * Do not use key inside context's state * Add a11y label * Remove duplicate test ID * Remove superfluous component * Create ProjectListItem.test.js * Add failing filter modal test * Remove log * Rename function * Months strings * Remove todo * A11y labels * Remove TODOs * A11y label * A11y label * Refactor taxon search hook * Update FilterModal.js * A11y labels * A11y not possible in react-native-paper lead to test fails * Update TaxonSearch.test.js * Add dropshadow * Another dropshadow * Add TODO text to UI elements that are not finished * Reverse order * Refactor constants * Revert "Refactor constants" This reverts commit 2f52e936d657fe092a58845cf32abae0352abb95. * Refactor to use constants * Refactor constants use * Refactor constant use * Refactor constants use * Refactor constants use * Refactor constants use * Refactor code * Add validation of date format * Correct type for snapshot action * Add taxonomic rank enum * Taxon can be undefined * More precise type * Fix wrong string usage * Refactor radio button row component * Refactor ProjectListItem import * Example usage of new ui elements * Pull sort by sheet back inside filter modal * Rename params * Add useEffect dependency * Rename param * Fix broken function --- src/components/Explore/Explore.js | 141 ++- src/components/Explore/ExploreContainer.js | 318 +++-- src/components/Explore/Header/Header.js | 31 +- src/components/Explore/MapView.js | 13 +- src/components/Explore/Modals/FilterModal.js | 1074 +++++++++++++++++ src/components/Explore/ObservationsView.js | 7 +- .../SearchScreens/ExploreLocationSearch.js | 78 ++ .../SearchScreens/ExploreProjectSearch.js | 82 ++ .../SearchScreens/ExploreTaxonSearch.js | 61 + .../SearchScreens/ExploreUserSearch.js | 93 ++ .../MyObservations/ToolbarContainer.js | 5 +- .../ProjectDetails/ProjectDetails.js | 19 +- src/components/Projects/Projects.js | 27 +- .../SharedComponents/DisplayTaxon.js | 46 +- .../SharedComponents/IconicTaxonChooser.js | 5 +- .../SharedComponents/OverviewCounts.js | 32 +- .../SharedComponents/ProjectListItem.js | 40 + .../SharedComponents/RadioButtonRow.js | 55 + .../Sheets/RadioButtonSheet.js | 42 +- .../SharedComponents/TaxonResult.js | 41 +- src/components/SharedComponents/index.js | 2 + src/components/Suggestions/TaxonSearch.js | 2 +- src/components/TaxonDetails/TaxonDetails.js | 3 +- src/components/UiLibrary.js | 21 + src/components/UserProfile/UserProfile.js | 18 +- src/i18n/l10n/en.ftl | 151 ++- src/i18n/l10n/en.ftl.json | 75 +- src/i18n/strings.ftl | 151 ++- .../ObservationsStackNavigator.js | 47 +- src/providers/ExploreContext.tsx | 446 +++++++ .../hooks => sharedHooks}/useTaxonSearch.js | 0 .../Explore/Modals/FilterModal.test.js | 26 + .../SharedComponents/ProjectListItem.test.js | 16 + .../Sheets/RadioButtonSheet.test.js | 34 + .../Suggestions/Suggestions.test.js | 3 +- .../Suggestions/TaxonSearch.test.js | 2 +- tsconfig.json | 2 +- 37 files changed, 2846 insertions(+), 363 deletions(-) create mode 100644 src/components/Explore/Modals/FilterModal.js create mode 100644 src/components/Explore/SearchScreens/ExploreLocationSearch.js create mode 100644 src/components/Explore/SearchScreens/ExploreProjectSearch.js create mode 100644 src/components/Explore/SearchScreens/ExploreTaxonSearch.js create mode 100644 src/components/Explore/SearchScreens/ExploreUserSearch.js create mode 100644 src/components/SharedComponents/ProjectListItem.js create mode 100644 src/components/SharedComponents/RadioButtonRow.js create mode 100644 src/providers/ExploreContext.tsx rename src/{components/Suggestions/hooks => sharedHooks}/useTaxonSearch.js (100%) create mode 100644 tests/unit/components/Explore/Modals/FilterModal.test.js create mode 100644 tests/unit/components/SharedComponents/ProjectListItem.test.js create mode 100644 tests/unit/components/SharedComponents/Sheets/RadioButtonSheet.test.js diff --git a/src/components/Explore/Explore.js b/src/components/Explore/Explore.js index adc75060e..39cfa1f1a 100644 --- a/src/components/Explore/Explore.js +++ b/src/components/Explore/Explore.js @@ -17,6 +17,7 @@ import { import Header from "./Header/Header"; import IdentifiersView from "./IdentifiersView"; +import FilterModal from "./Modals/FilterModal"; import ObservationsView from "./ObservationsView"; import ObservationsViewBar from "./ObservationsViewBar"; import ObserversView from "./ObserversView"; @@ -24,26 +25,28 @@ import SpeciesView from "./SpeciesView"; type Props = { changeExploreView: Function, - exploreParams: Object, + exploreAPIParams: Object, exploreView: string, isOnline: boolean, region: Object, updateTaxon: Function, updatePlace: Function, - updatePlaceName: Function, - updateTaxonName: Function + showFiltersModal: boolean, + openFiltersModal: Function, + closeFiltersModal: Function, } const Explore = ( { changeExploreView, - exploreParams, + exploreAPIParams, exploreView, isOnline, region, updateTaxon, updatePlace, - updatePlaceName, - updateTaxonName + showFiltersModal, + openFiltersModal, + closeFiltersModal }: Props ): Node => { const theme = useTheme( ); const { t } = useTranslation( ); @@ -79,13 +82,13 @@ const Explore = ( { }; const queryParams = { - ...exploreParams, + ...exploreAPIParams, per_page: 20 }; delete queryParams.taxon_name; const paramsTotalResults = { - ...exploreParams, + ...exploreAPIParams, per_page: 0 }; @@ -106,14 +109,11 @@ const Explore = ( { const renderHeader = ( ) => (
); @@ -121,67 +121,76 @@ const Explore = ( { return ( <> - - {renderHeader( )} - {exploreView === "observations" && ( - setObservationsView( newView )} - /> + {!showFiltersModal + ? ( + + {renderHeader()} + {exploreView === "observations" && ( + setObservationsView( newView )} + /> + )} + setShowExploreBottomSheet( true )} + /> + {exploreView === "observations" && ( + + )} + {exploreView === "species" && ( + + )} + {exploreView === "observers" && ( + + )} + {exploreView === "identifiers" && ( + + )} + + ) + : ( + + + )} - setShowExploreBottomSheet( true )} - /> - {exploreView === "observations" && ( - - )} - {exploreView === "species" && ( - - )} - {exploreView === "observers" && ( - - )} - {exploreView === "identifiers" && ( - - )} - {showExploreBottomSheet && ( - + {Object.keys( exploreViewText ).map( view => (