-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Implement new "Add team member" flow (#1581)
Commits: * feat: 'Add Team Member' screen opens with new design and does all the validation at the same time, whenever the field entry changes * feat: disable and positon Next button * feat: Do backend validation on submit, and only do frontend validation on change * fix: minor string update * refactor: refactor onNext and backend validation * feat: Implement user role selection screen * feat: on 1st screen, set form to email keyboard and autocomplete + clean up comments * refactor: Move AddTeamMemberForm to new file * fix: 2nd screen app bar button is back arrow, and Cancel button pops navigation * refactor: use UserFields type + resolve comments * fix: Implement misc PR feedback - try/catch for backend call - don't autocapitalize email - navigate to appropriate screen tab instead of two pop() calls * fix: need to dispatch to correctly specify the tab to navigate to * fix: Update strings per design input
- Loading branch information
Showing
10 changed files
with
348 additions
and
172 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
dev-client/src/screens/AddUserToProjectScreen/AddUserToProjectRoleScreen.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| /* | ||
| * Copyright © 2024 Technology Matters | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU Affero General Public License as published | ||
| * by the Free Software Foundation, either version 3 of the License, or | ||
| * (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU Affero General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. If not, see https://www.gnu.org/licenses/. | ||
| */ | ||
|
|
||
| import {useCallback, useState} from 'react'; | ||
| import {useTranslation} from 'react-i18next'; | ||
|
|
||
| import {TabActions} from '@react-navigation/native'; | ||
| import {Button} from 'native-base'; | ||
|
|
||
| import { | ||
| addUserToProject, | ||
| ProjectRole, | ||
| } from 'terraso-client-shared/project/projectSlice'; | ||
|
|
||
| import {ScreenContentSection} from 'terraso-mobile-client/components/content/ScreenContentSection'; | ||
| import { | ||
| Box, | ||
| Column, | ||
| Row, | ||
| } from 'terraso-mobile-client/components/NativeBaseAdapters'; | ||
| import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar'; | ||
| import {TabRoutes} from 'terraso-mobile-client/navigation/constants'; | ||
| import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation'; | ||
| import {MinimalUserDisplay} from 'terraso-mobile-client/screens/AddUserToProjectScreen/components/MinimalUserDisplay'; | ||
| import {ProjectRoleRadioBlock} from 'terraso-mobile-client/screens/AddUserToProjectScreen/components/ProjectRoleRadioBlock'; | ||
| import {UserFields} from 'terraso-mobile-client/screens/AddUserToProjectScreen/components/UserDisplay'; | ||
| import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold'; | ||
| import {useDispatch, useSelector} from 'terraso-mobile-client/store'; | ||
|
|
||
| type Props = { | ||
| projectId: string; | ||
| user: UserFields; | ||
| }; | ||
|
|
||
| export const AddUserToProjectRoleScreen = ({projectId, user}: Props) => { | ||
| const {t} = useTranslation(); | ||
| const dispatch = useDispatch(); | ||
| const navigation = useNavigation(); | ||
|
|
||
| const project = useSelector(state => state.project.projects[projectId]); | ||
|
|
||
| const [selectedRole, setSelectedRole] = useState<ProjectRole>('VIEWER'); | ||
|
|
||
| const onCancel = useCallback(() => { | ||
| navigation.pop(); | ||
| }, [navigation]); | ||
|
|
||
| const addUser = useCallback(async () => { | ||
| try { | ||
| dispatch( | ||
| addUserToProject({userId: user.id, role: selectedRole, projectId}), | ||
| ); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| navigation.navigate('PROJECT_VIEW', {projectId: projectId}); | ||
| navigation.dispatch(TabActions.jumpTo(TabRoutes.TEAM)); | ||
| }, [dispatch, projectId, user, selectedRole, navigation]); | ||
|
|
||
| return ( | ||
| <ScreenScaffold AppBar={<AppBar title={project?.name} />}> | ||
| <ScreenContentSection title={t('projects.add_user.heading')}> | ||
| <Column> | ||
| <Box ml="md" my="lg"> | ||
| <MinimalUserDisplay user={user} /> | ||
| </Box> | ||
|
|
||
| <ProjectRoleRadioBlock | ||
| onChange={setSelectedRole} | ||
| selectedRole={selectedRole} | ||
| /> | ||
|
|
||
| <Row | ||
| flex={0} | ||
| justifyContent="flex-end" | ||
| alignItems="center" | ||
| space="12px" | ||
| pt="md"> | ||
| <Button | ||
| onPress={onCancel} | ||
| size="lg" | ||
| variant="outline" | ||
| borderColor="action.active" | ||
| _text={{textTransform: 'uppercase', color: 'action.active'}}> | ||
| {t('general.cancel')} | ||
| </Button> | ||
| {/* FYI: The 1px border is to visually match the size of the outline | ||
| variant, which appears to be 1px bigger than the solid variant due | ||
| to its border. */} | ||
| <Button | ||
| borderWidth="1px" | ||
| borderColor="primary.main" | ||
| onPress={addUser} | ||
| size="lg" | ||
| variant="solid" | ||
| _text={{textTransform: 'uppercase'}}> | ||
| {t('general.add')} | ||
| </Button> | ||
| </Row> | ||
| </Column> | ||
| </ScreenContentSection> | ||
| </ScreenScaffold> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.