cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Alterações para página dinâmica se é página do próprio usuário ou de outro usuário

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-05-28 17:19:26 -05:00
parent e9cc78d2d3
commit 4c6aacfd12
3 changed files with 55 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.tsx
View File

@@ -12,8 +12,9 @@ import {
import { IonReactRouter } from '@ionic/react-router'; import { IonReactRouter } from '@ionic/react-router';
// importação das páginas // importação das páginas
import Login from './pages/Login';
import Cadastro from './pages/Cadastro/Cadastro'; import Cadastro from './pages/Cadastro/Cadastro';
import Login from './pages/Login';
import Home from './pages/Home';
import CadastroVan from './pages/CadastroVan'; import CadastroVan from './pages/CadastroVan';
/* Core CSS required for Ionic components to work properly */ /* Core CSS required for Ionic components to work properly */
@@ -46,11 +47,13 @@ const routes = (
<> <>
<Route exact path="/cadastro" component={Cadastro}></Route> <Route exact path="/cadastro" component={Cadastro}></Route>
<Route exact path="/login" component={Login}></Route> <Route exact path="/login" component={Login}></Route>
<Route exact path="/home" component={Home}></Route>
<Route exact path="/perfil" component={Perfil}></Route> <Route exact path="/perfil" component={Perfil}></Route>
<Route exact path="/perfil/editar" component={PerfilEditar}></Route> <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
<Route exact path="/perfil/:id" component={Perfil}></Route>
<Route exact path="/cadastro-van" component={CadastroVan}></Route> <Route exact path="/cadastro-van" component={CadastroVan}></Route>
<Route exact path="/"> <Route exact path="/">
<Redirect to="/cadastro" /> <Redirect to="/login" />
</Route> </Route>
</>) </>)

52
src/pages/Home.tsx
View File

@@ -1,56 +1,14 @@
import { IonItem, IonLabel, IonInput, IonButton, IonCardTitle, IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react'; import { IonItem, IonLabel, IonInput, IonButton, IonCardTitle, IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react';
import { useHistory } from 'react-router';
import { Action } from '../components/Action'; import { Action } from '../components/Action';
const Home: React.FC = () => { const Home: React.FC = () => {
const history = useHistory()
return ( return (
<IonPage> <IonPage>
<IonContent fullscreen> <IonContent>
<IonGrid className="ion-padding"> <IonButton onClick={() => { history.push({ pathname: '/perfil/1' }); }}>Ir para o perfil de outra pessoa</IonButton>
<IonRow>
<IonCol size="12">
<IonCardTitle>Como você deseja se cadastrar?</IonCardTitle>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<div id='nome-sobrenome'>
<IonItem>
<IonLabel position='floating'>Nome</IonLabel>
<IonInput clearInput></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Sobrenome</IonLabel>
<IonInput clearInput></IonInput>
</IonItem>
</div>
<IonItem>
<IonLabel position='floating'>E-mail</IonLabel>
<IonInput clearInput type='email'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='stacked'>Data de nascimento</IonLabel>
<IonInput type='date'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Senha</IonLabel>
<IonInput clearInput type='password'></IonInput>
</IonItem>
<IonItem>
<IonLabel position='floating'>Confirme a senha</IonLabel>
<IonInput clearInput type='password'></IonInput>
</IonItem>
<IonButton className="ion-margin-top" expand="block">Cadastrar-se</IonButton>
</IonCol>
</IonRow>
<small className='ion-margin-top'>
Ao se cadastrar, você aceita nossos <a href="">Termos e Condições</a> e nossa <a href=""> Política de Privacidade</a>.
</small>
<Action message="Já tem conta?" text="Login" link="/login" />
</IonGrid>
</IonContent> </IonContent>
</IonPage> </IonPage>
); );

78
src/pages/Perfil.tsx
View File

@@ -27,9 +27,19 @@ import sessionsService from '../services/functions/sessionsService'
import usersService from '../services/functions/usersService' import usersService from '../services/functions/usersService'
import { UserContext } from "../App"; import { UserContext } from "../App";
const Perfil: React.FC = () => { interface ScanNewProps {
match: {
params: {
id: string;
}
}
}
const Perfil: React.FC<ScanNewProps> = (props) => {
const user = useContext(UserContext); const user = useContext(UserContext);
const [isVisitor, setIsVisitor] = useState(true)
const [showToast, setShowToast] = useState(false); const [showToast, setShowToast] = useState(false);
const [messageToast, setMessageToast] = useState(''); const [messageToast, setMessageToast] = useState('');
@@ -96,6 +106,10 @@ const Perfil: React.FC = () => {
'birth_date': userData.birth_date, 'birth_date': userData.birth_date,
'bio': userData.bio 'bio': userData.bio
}); });
if (!props.match.params.id) {
setIsVisitor(false)
}
} }
} }
} }
@@ -155,39 +169,37 @@ const Perfil: React.FC = () => {
</IonCardContent> </IonCardContent>
</IonCard> </IonCard>
{/* <IonCard> {/* // TODO, card de informações de contato */}
<IonCardContent>
</IonCardContent>
</IonCard> */}
<IonList> { !isVisitor ?
<IonListHeader>Configurações</IonListHeader> <IonList>
<IonItem button onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> <IonListHeader>Configurações</IonListHeader>
<IonIcon icon={createOutline} slot="start" /> <IonItem button onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
<IonLabel>Editar perfil</IonLabel> <IonIcon icon={createOutline} slot="start" />
</IonItem> <IonLabel>Editar perfil</IonLabel>
<IonItem> </IonItem>
<IonIcon icon={shieldCheckmarkOutline} slot="start" /> <IonItem>
<IonLabel>Completar perfil</IonLabel> <IonIcon icon={shieldCheckmarkOutline} slot="start" />
</IonItem> <IonLabel>Completar perfil</IonLabel>
<IonItem button onClick={() => history.push({ pathname: '/cadastro-van'})}> </IonItem>
<IonIcon icon={carOutline} slot="start" /> <IonItem button onClick={() => history.push({ pathname: '/cadastro-van'})}>
<IonLabel>Cadastrar Van</IonLabel> <IonIcon icon={carOutline} slot="start" />
</IonItem> <IonLabel>Cadastrar Van</IonLabel>
<IonItem> </IonItem>
<IonIcon icon={cardOutline} slot="start" /> <IonItem>
<IonLabel>Pagamentos</IonLabel> <IonIcon icon={cardOutline} slot="start" />
</IonItem> <IonLabel>Pagamentos</IonLabel>
<IonItem> </IonItem>
<IonIcon icon={starOutline} slot="start" /> <IonItem>
<IonLabel>Avaliações</IonLabel> <IonIcon icon={starOutline} slot="start" />
</IonItem> <IonLabel>Avaliações</IonLabel>
<IonItem button onClick={logoff}> </IonItem>
<IonIcon icon={exitOutline} slot="start" /> <IonItem button onClick={logoff}>
<IonLabel>Sair da conta</IonLabel> <IonIcon icon={exitOutline} slot="start" />
</IonItem> <IonLabel>Sair da conta</IonLabel>
</IonList> </IonItem>
</IonList> : <></>
}
<IonToast <IonToast
color='danger' color='danger'