Merge pull request #74 from ES2-UFPI/samuel#62

Desenvolvendo Issue #62

frontend/.gitignore

@@ -11,3 +11,7 @@ web-build/
 
 # macOS
 .DS_Store
+
+yarn.lock
+package-lock.json
+

frontend/package.json

@@ -13,7 +13,6 @@
     "@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",

frontend/src/routes.tsx

@@ -4,6 +4,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import EditProfile from './views/editProfile';
 import Registration from './views/Registration';
 import BottomNavigation from './components/BottomNavigation';
+import ProfessionalAssociationCode from './views/ProfessionalAssociationCode';
 import GerenciarProfessional from './views/GerenciarProfessional';
 
 const Stack = createStackNavigator<RootStackParamList>();
@@ -18,6 +19,7 @@ export default function Routes() {
       >
         <Stack.Screen name='BottomNavigation' component={BottomNavigation} />
         <Stack.Screen name='EditProfile' component={EditProfile} />
+        <Stack.Screen name='GenerateAssociationCode' component={ProfessionalAssociationCode} />
         <Stack.Screen name='GerenciarProfessional' component={GerenciarProfessional} />
         <Stack.Screen name='Registration' component={Registration} />
       </Stack.Navigator>
@@ -28,6 +30,7 @@ export default function Routes() {
 type RootStackParamList = {
   BottomNavigation: undefined
   EditProfile: undefined
+  GenerateAssociationCode: undefined
   GerenciarProfessional:undefined
   Registration: undefined
 };

frontend/src/views/ProfessionalAssociationCode/index.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { 
+    Container,
+    GoBackContainer,
+    GoBackText,
+    GoBackButton,
+    TextWarning,
+    CodeContainer,
+    GenerateButtonText,
+    GenerateButton,
+    CodeText,
+    CodeNumbersContainer,
+    CodeNumber,
+    ContainerAll
+} from './styles';
+import { Dimensions,ActivityIndicator } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Clipboard from 'expo-clipboard';
+
+import api from '../../services/api'
+
+
+export default function ProfessionalAssociationCode({ navigation }: any) {
+    const iconColor = '#212325';
+    const SCREEN_WIDTH = Dimensions.get("window").width;
+    const iconSize = SCREEN_WIDTH * 0.075;
+    const [code, setCode] = useState<string[]|[]>([])
+    const [loading, setLoading] = useState<boolean>(false)
+
+    function copyCOodeToClipboard() {
+
+        Clipboard.setString("Este é o meu código de profissional no e-motion: "+code.join("") + "." + "\n\nUse ele para se associar a mim e permitir que lhe acompanhe pelo app.");
+
+    }
+
+    function goBack( ){
+        navigation.goBack()
+   }
+
+    function genereteNewCode(){
+        setLoading(true);
+        const code_chars = [] as string[];
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+
+        while(code_chars.length < 5) {
+            const newChar =  characters.charAt(Math.floor(Math.random() * charactersLength)).toUpperCase();
+
+            if(code_chars.indexOf(newChar) == -1 ){
+                code_chars.push(newChar) ;  
+            }
+
+        }
+
+        //fazer req para atualizar o codigo no back
+        setCode(code_chars);
+        setLoading(false);
+    }
+
+
+    return (
+        <ContainerAll>
+            <Container>
+                <GoBackContainer>
+
+                    <GoBackButton onPress={goBack}>
+
+                        <MaterialCommunityIcons  name="chevron-left" color={iconColor} size={iconSize}  />
+                        <GoBackText> Voltar </GoBackText>
+
+                    </GoBackButton>
+
+                </GoBackContainer>
+
+                <TextWarning>
+                    Este código deve ser usado pelo seu paciente para que ele se vincule a sua conta e para que você tenha acesso aos registros
+                </TextWarning>
+
+                {(code.length > 0 || loading ) &&  
+
+                <CodeContainer>
+
+                {loading ?
+                    <ActivityIndicator size="large" color="#fad2d2"/>
+                    :
+                    <CodeNumbersContainer>  
+                        {code.map((number) => {
+                            return (
+                                <CodeNumber key={number}>
+                                    <CodeText>
+                                        {number}
+                                    </CodeText>
+                                </CodeNumber>
+                            )
+                        })}
+
+                        <GoBackButton onPress={copyCOodeToClipboard}> 
+                            <MaterialCommunityIcons  
+                                name="content-copy" 
+                                color={iconColor} 
+                                size={iconSize} 
+                                style={{marginLeft:10,marginBottom:5}}/>
+
+                        </GoBackButton>
+
+                    </CodeNumbersContainer>
+                }
+
+                </CodeContainer>}
+
+                <GenerateButton onPress={genereteNewCode}>
+                <GenerateButtonText>
+                    {code.length > 0 ? "Gerar novo código": "Gerar código"}
+                </GenerateButtonText>
+                </GenerateButton>
+
+            </Container>
+        </ContainerAll>
+    );
+}

frontend/src/views/ProfessionalAssociationCode/styles.ts

@@ -0,0 +1,96 @@
+import styled from 'styled-components/native';
+import { Dimensions } from 'react-native';
+import Constants from 'expo-constants';
+
+const { width, height } = Dimensions.get('window');
+
+
+export const ContainerAll = styled.View`
+    height: 100%;
+    background: #E1948B;
+    flex: 1;
+    
+`
+
+export const Container = styled.View`
+    flex: 1;
+    backgroundColor: #FCFCFF;
+    alignItems: center;
+    justifyContent: flex-start;
+    paddingTop:10px;
+    paddingHorizontal:10px;
+    borderTopLeftRadius:30px;
+    borderTopRightRadius:30px;
+    margin-top: ${Constants.statusBarHeight +9}px;
+    
+`
+
+export const GoBackContainer = styled.View`
+    width:100%;
+`
+
+export const GoBackButton = styled.TouchableOpacity`
+    flex-direction:row;
+    alignItems: center;
+`
+
+export const GoBackText = styled.Text`
+    color: #212325;
+    margin-left:5px;
+    font-size: ${width/26}px;
+`
+
+export const TextWarning = styled.Text`
+    color:#292B2D;
+    font-size: ${width/18}px;
+    text-align:center;
+    margin:10px;
+    margin-top:20px;
+    font-weight: 600;
+`
+
+export const CodeContainer = styled.View`
+    width:100%;
+    margin:20px;
+    alignItems: center;
+`
+
+
+export const CodeTexttWarning = styled.Text`
+    color:#292B2D;
+    font-size: ${width/25}px;
+    text-align:center;      
+`
+
+export const CodeText = styled.Text`
+    color:#292B2D;  
+    font-size: ${width/25}px;
+    text-align:center;       
+    font-weight: bold;
+`
+
+export const CodeNumbersContainer = styled.View`
+    flex-direction:row;
+    alignItems: center;
+`
+
+export const CodeNumber = styled.View`
+    backgroundColor: #FFE9E9;
+    padding:15px;
+    margin-left:11px;
+    margin-bottom:8px;
+`
+
+export const GenerateButton = styled.TouchableOpacity`
+    backgroundColor: #E1948B;   
+    height:${height/15}px;
+    width:${width/1.4}px;
+    alignItems: center;
+    justifyContent: center;
+    border-radius: 10px;
+`
+export const GenerateButtonText = styled.Text`
+    color: #FCFCFF;
+    font-weight: bold;   
+    font-size: ${width/22}px;
+`

frontend/src/views/profile/index.tsx

@@ -18,11 +18,14 @@ export default function Profile({ navigation }: any) {
     const [isEnabled, setIsEnabled] = useState(false);
     const toggleSwitch = () => setIsEnabled(previousState => !previousState);
 
-    const isProfissional = false;
+    const isProfissional = true;
     const name = 'Lulu';
     const email = 'julia_silva@mail.com';
     const profilePicture = require('../../assets/profile.png');
 
+    function navigateToGenerateCode( ){
+         navigation.navigate('GenerateAssociationCode')
+    }
     function navigateToAssociateCode( ){
         navigation.navigate('GerenciarProfessional')
    }
@@ -66,7 +69,7 @@ export default function Profile({ navigation }: any) {
                                 <Text style={styles.optionText}>Editar perfil</Text>
                                 <MaterialCommunityIcons style={styles.optionIcon} name="chevron-right" color={iconColor} size={iconSize} />
                             </TouchableOpacity>
-                            <TouchableOpacity style={styles.optionContainer}>
+                            <TouchableOpacity style={styles.optionContainer} onPress={navigateToGenerateCode}>
                                 <Text style={styles.optionText}>Código de vinculação</Text>
                                 <MaterialCommunityIcons style={styles.optionIcon} name="chevron-right" color={iconColor} size={iconSize} />
                             </TouchableOpacity>