ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-12 13:36:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

extract Alert component

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-14 12:40:54 +02:00
parent 252674c5bf
commit 31013d573a
3 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/Alert.tsx Normal file
View file

@ -0,0 +1,11 @@
import React, {FC} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
const Alert: FC = () => (
<div className="alert alert-danger">
<FontAwesomeIcon icon={faExclamationTriangle} /> Passwords don't match!
</div>
);
export default Alert;

0
src/hooks/index.tsx → src/hooks/index.ts
View file

15
src/pages/SignUp.tsx
View file

@ -9,10 +9,10 @@ import {withFirebase, WithFirebaseProps} from 'react-redux-firebase';
import {selectProfile} from '../store/firebase'; import {selectProfile} from '../store/firebase';
import User, {newUser} from '../models/User'; import User, {newUser} from '../models/User';
// Style // Style
import Header from '../components/Header';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
import GoogleButton from 'react-google-button'; import GoogleButton from 'react-google-button';
import Alert from '../components/Alert';
import Header from '../components/Header';
// Form
import useForm from '../hooks'; import useForm from '../hooks';
// extends withFirebaseProps type to ad profile info // extends withFirebaseProps type to ad profile info
@ -27,6 +27,7 @@ interface InitFormData {
password: string; password: string;
password2: string; password2: string;
} }
/** /**
* Sign up form recieves firebase from withFirebase HOC * Sign up form recieves firebase from withFirebase HOC
*/ */
@ -34,6 +35,7 @@ const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
const history = useHistory(); const history = useHistory();
const [error, setError] = useState(false); const [error, setError] = useState(false);
// handle form data
const initFormData: InitFormData = { const initFormData: InitFormData = {
name: '', name: '',
email: '', email: '',
@ -77,12 +79,7 @@ const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
return ( return (
<section className="container"> <section className="container">
{error && ( {error && <Alert />}
<div className="alert alert-danger">
<FontAwesomeIcon icon={faExclamationTriangle} /> Passwords don't
match!
</div>
)}
<Header title="Sign Up" lead="Create your account" /> <Header title="Sign Up" lead="Create your account" />
<GoogleButton type="light" className="my-1" onClick={loginWithGoogle} /> <GoogleButton type="light" className="my-1" onClick={loginWithGoogle} />
<form className="form" onSubmit={handleSubmit}> <form className="form" onSubmit={handleSubmit}>