From 39505cc46e8930f5ccd48b686edfa6321ebf5527 Mon Sep 17 00:00:00 2001 From: lucasdanillo Date: Thu, 17 Jun 2021 21:09:08 -0300 Subject: [PATCH] close issue #29, navigation between screens improvement --- frontend/package-lock.json | 113 +++++++++++++ frontend/package.json | 5 + .../src/components/{ => Avatar}/avatar.tsx | 0 .../src/components/BottomNavigation/index.tsx | 56 +++++++ frontend/src/routes.tsx | 58 ++----- frontend/src/views/editProfile/index.tsx | 149 ++++++++++++++++++ frontend/src/views/profile/index.tsx | 10 +- 7 files changed, 341 insertions(+), 50 deletions(-) rename frontend/src/components/{ => Avatar}/avatar.tsx (100%) create mode 100644 frontend/src/components/BottomNavigation/index.tsx create mode 100644 frontend/src/views/editProfile/index.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4a0fa6b..a21480b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1138,6 +1138,14 @@ "minimist": "^1.2.0" } }, + "@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "requires": { + "@types/hammerjs": "^2.0.36" + } + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -2210,6 +2218,11 @@ "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.10.1.tgz", "integrity": "sha512-ael2f1onoPF3vF7YqHGWy7NnafzGu+yp88BbFbP0ydoCP2xGSUzmZVw0zakPTC040Id+JQ9WeFczujMkDy6jYQ==" }, + "@react-native-community/masked-view": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.11.tgz", + "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==" + }, "@react-navigation/core": { "version": "5.15.3", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.15.3.tgz", @@ -2264,6 +2277,20 @@ "nanoid": "^3.1.15" } }, + "@react-navigation/stack": { + "version": "5.14.5", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.14.5.tgz", + "integrity": "sha512-hpdn1SS0tc3/3atkV2Q2y++n5B4e0rUcCj4W43PODMu72yX2m0LkKAAcpkPDCWAvwnLLIoLAEl5BEifZigl/6A==", + "requires": { + "color": "^3.1.3", + "react-native-iphone-x-helper": "^1.3.0" + } + }, + "@types/hammerjs": { + "version": "2.0.39", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.39.tgz", + "integrity": "sha512-lYR2Y/tV2ujpk/WyUc7S0VLI0a9hrtVIN9EwnrNo5oSEJI2cK2/XrgwOQmXLL3eTulOESvh9qP6si9+DWM9cOA==" + }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -3340,6 +3367,14 @@ "object-assign": "^4.1.1" } }, + "cross-fetch": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz", + "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==", + "requires": { + "node-fetch": "2.6.1" + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -5907,6 +5942,11 @@ "minimist": "^1.2.5" } }, + "mockdate": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/mockdate/-/mockdate-3.0.5.tgz", + "integrity": "sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -6948,6 +6988,34 @@ } } }, + "react-native-gesture-handler": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz", + "integrity": "sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==", + "requires": { + "@egjs/hammerjs": "^2.0.17", + "fbjs": "^3.0.0", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "prop-types": "^15.7.2" + }, + "dependencies": { + "fbjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", + "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", + "requires": { + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + } + } + }, "react-native-iphone-x-helper": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz", @@ -6963,11 +7031,46 @@ "react-native-iphone-x-helper": "^1.3.1" } }, + "react-native-reanimated": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz", + "integrity": "sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w==", + "requires": { + "@babel/plugin-transform-object-assign": "^7.10.4", + "fbjs": "^3.0.0", + "mockdate": "^3.0.2", + "string-hash-64": "^1.0.3" + }, + "dependencies": { + "fbjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", + "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", + "requires": { + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + } + } + }, "react-native-safe-area-context": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz", "integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==" }, + "react-native-screens": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.4.0.tgz", + "integrity": "sha512-cg+q9MRnVdeOcJyvJtqffoXLur/C2wHA/7IO2+FAipzTlgHbbM1mTuSM7qG+SeiQjoIs4mHOEf7A0ziPKW04sA==", + "requires": { + "warn-once": "^0.1.0" + } + }, "react-native-vector-icons": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz", @@ -7792,6 +7895,11 @@ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" }, + "string-hash-64": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz", + "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==" + }, "string-width": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz", @@ -8205,6 +8313,11 @@ "makeerror": "1.0.x" } }, + "warn-once": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz", + "integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA==" + }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 0b5ffad..7ec3de2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,15 +10,20 @@ "dependencies": { "@react-native-async-storage/async-storage": "^1.15.4", "@react-native-community/checkbox": "^0.5.8", + "@react-native-community/masked-view": "^0.1.11", "@react-navigation/material-bottom-tabs": "^5.3.15", "@react-navigation/native": "^5.9.4", + "@react-navigation/stack": "^5.14.5", "axios": "^0.21.1", "expo": "~41.0.1", "expo-status-bar": "~1.0.4", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz", + "react-native-gesture-handler": "^1.10.3", "react-native-paper": "^4.9.1", + "react-native-reanimated": "^2.2.0", + "react-native-screens": "^3.4.0", "react-native-vector-icons": "^8.1.0", "react-native-web": "~0.13.12", "react-redux": "^7.2.4", diff --git a/frontend/src/components/avatar.tsx b/frontend/src/components/Avatar/avatar.tsx similarity index 100% rename from frontend/src/components/avatar.tsx rename to frontend/src/components/Avatar/avatar.tsx diff --git a/frontend/src/components/BottomNavigation/index.tsx b/frontend/src/components/BottomNavigation/index.tsx new file mode 100644 index 0000000..c7df55e --- /dev/null +++ b/frontend/src/components/BottomNavigation/index.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import Home from '../../views/home'; +import Profile from '../../views/profile'; +import { Dimensions } from 'react-native' +import RecordsList from '../../views/RecordsList'; + +const Tab = createMaterialBottomTabNavigator(); +const SCREEN_WIDTH = Dimensions.get("window").width; +const iconSize = SCREEN_WIDTH * 0.07; + +export default function BottomNavigation() { + return ( + + ( + + ), + }} /> + ( + + ), + }} /> + ( + + ), + }} /> + + ); +} + +type RoutesList = { + Home: undefined; + History: undefined; + Profile: undefined; +}; \ No newline at end of file diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx index 43e83fa..6ae17f0 100644 --- a/frontend/src/routes.tsx +++ b/frontend/src/routes.tsx @@ -1,59 +1,27 @@ import React from 'react'; -import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; -import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import Home from './views/home' -import Profile from './views/profile'; import { NavigationContainer } from '@react-navigation/native'; -import { Dimensions } from 'react-native' -import RecordsList from './views/RecordsList'; +import { createStackNavigator } from '@react-navigation/stack'; +import EditProfile from './views/editProfile'; +import BottomNavigation from './components/BottomNavigation'; -const Tab = createMaterialBottomTabNavigator(); -const SCREEN_WIDTH = Dimensions.get("window").width; -const iconSize = SCREEN_WIDTH * 0.07; +const Stack = createStackNavigator(); export default function Routes() { return ( - - ( - - ), - }} /> - ( - - ), - }} /> - ( - - ), - }} /> - + + + ); } -type RoutesList = { - Home: undefined; - History: undefined; - Profile: undefined; +type RootStackParamList = { + BottomNavigation: undefined + EditProfile: undefined }; \ No newline at end of file diff --git a/frontend/src/views/editProfile/index.tsx b/frontend/src/views/editProfile/index.tsx new file mode 100644 index 0000000..ff41caa --- /dev/null +++ b/frontend/src/views/editProfile/index.tsx @@ -0,0 +1,149 @@ +import React, { useState } from 'react'; +import { + View, + Text, + StyleSheet, + TouchableOpacity, + TextInput +} from 'react-native'; +import { Dimensions } from 'react-native'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; + +const SCREEN_WIDTH = Dimensions.get("window").width; +const iconColor = '#212325'; +const iconSize = SCREEN_WIDTH * 0.075; + +export default function EditProfile({ navigation, route }: any) { + + const { isProfissional } = route.params; + + const [nome, onChangeNome] = useState(""); + const [telefone, onChangeTelefone] = useState(""); + const [email, onChangeEmail] = useState(""); + const [endereco, onChangeEndereco] = useState(""); + + return ( + + navigation.goBack()}> + + Voltar + + + {isProfissional ? 'Perfil Profissional' : 'Editar Perfil'} + + + + + + + + + + + + {isProfissional ? + + : <>} + + Salvar Alterações + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#FCFCFF', + paddingHorizontal: SCREEN_WIDTH * 0.06, + }, + titleContainer: { + // marginTop: SCREEN_WIDTH * 0.15, + alignItems: 'center' + }, + text: { + marginTop: SCREEN_WIDTH * 0.1, + color: '#161719', + fontSize: 20, + fontWeight: 'bold' + }, + inputsContainer: { + marginTop: SCREEN_WIDTH * 0.085, + + }, + input: { + borderColor: '#91919F', + backgroundColor: '#FCFCFF', + borderWidth: 1, + borderRadius: 10, + height: SCREEN_WIDTH * 0.13, + elevation: 5, + paddingHorizontal: SCREEN_WIDTH * 0.02, + fontSize: 14, + color: '#91919F' + }, + inputContainer: { + justifyContent: 'space-between', + marginBottom: SCREEN_WIDTH * 0.08, + }, + buttonContainer: { + backgroundColor: '#E1948B', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 10, + height: SCREEN_WIDTH * 0.13, + marginTop: SCREEN_WIDTH * 0.12, + + }, + buttonText: { + color: '#FCFCFF', + fontSize: 14 + }, + optionContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingVertical: SCREEN_WIDTH * 0.01, + }, + optionIcon: { + textAlign: 'center' + }, + goBackText: { + color: '#000000', + fontSize: 16, + // borderWidth: 1, + borderColor: 'red', + alignSelf: 'center', + paddingLeft: 10, + }, + goBack: { + marginTop: SCREEN_WIDTH * 0.15, + flexDirection: 'row', + // borderWidth: 1, + borderColor: 'blue', + }, + goBackIcon: { + textAlign: 'center', + // borderWidth: 1, + borderColor: 'black', + + } +}); diff --git a/frontend/src/views/profile/index.tsx b/frontend/src/views/profile/index.tsx index 1f6a7f7..436057e 100644 --- a/frontend/src/views/profile/index.tsx +++ b/frontend/src/views/profile/index.tsx @@ -7,18 +7,18 @@ import { Switch } from 'react-native'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import Avatar from '../../components/avatar'; +import Avatar from '../../components/Avatar/avatar'; import { Dimensions } from 'react-native'; const SCREEN_WIDTH = Dimensions.get("window").width; const iconColor = '#91919F'; const iconSize = SCREEN_WIDTH * 0.075; -export default function Profile() { +export default function Profile({ navigation }: any) { const [isEnabled, setIsEnabled] = useState(false); const toggleSwitch = () => setIsEnabled(previousState => !previousState); - const isProfissional = true; + const isProfissional = false; const name = 'Lulu'; const email = 'julia_silva@mail.com'; const profilePicture = require('../../assets/profile.png'); @@ -38,7 +38,7 @@ export default function Profile() { Configurações da conta {!isProfissional ? - + navigation.navigate('EditProfile', { isProfissional: isProfissional })} > Editar perfil @@ -58,7 +58,7 @@ export default function Profile() { : - + navigation.navigate('EditProfile', { isProfissional: isProfissional })}> Editar perfil