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

display alert on EditProfile form submit

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-15 09:25:05 +02:00
parent 920ee01d65
commit 1b6ee31cb3
2 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Alert.tsx
View file

@ -4,10 +4,11 @@ import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
interface IProps { interface IProps {
text: string; text: string;
color?: string;
} }
const Alert: FC<IProps> = ({text}) => ( const Alert: FC<IProps> = ({text, color = 'danger'}) => (
<div className="alert alert-danger"> <div className={`alert alert-${color}`}>
<FontAwesomeIcon icon={faExclamationTriangle} /> {text} <FontAwesomeIcon icon={faExclamationTriangle} /> {text}
</div> </div>
); );

37
src/pages/EditProfile.tsx
View file

@ -1,4 +1,4 @@
import React, {FC, useState, useEffect} from 'react'; import React, {FC, useState} from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import Routes from '../constants/routes'; import Routes from '../constants/routes';
// Redux // Redux
@ -22,6 +22,7 @@ import User from '../models/User';
import Dev from '../models/Dev'; import Dev from '../models/Dev';
import Links from '../types/Links'; import Links from '../types/Links';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
import Alert from '../components/Alert';
interface FormData { interface FormData {
status: string; status: string;
@ -53,7 +54,12 @@ const EditProfile: FC<IProps> = ({
bio, bio,
}) => { }) => {
const [showLinks, setShowLinks] = useState(false); const [showLinks, setShowLinks] = useState(false);
const [variable, setVariable] = useState(useSelector(selectProfile)); const [alert, setAlert] = useState({
show: false,
color: 'danger',
text: 'Something went wrong',
});
const initFormData = { const initFormData = {
status: status ?? 'Developer', status: status ?? 'Developer',
company: company, company: company,
@ -69,9 +75,8 @@ const EditProfile: FC<IProps> = ({
youtube: links?.youtube ?? '', youtube: links?.youtube ?? '',
}; };
const {formData, handleChange, resetForm} = useForm<FormData>(initFormData); const {formData, handleChange} = useForm<FormData>(initFormData);
console.log(company, formData.company, variable, isEmpty(firebase.auth));
/** construct profile object from formData */ /** construct profile object from formData */
const makeProfile = ({ const makeProfile = ({
status, status,
@ -110,10 +115,17 @@ const EditProfile: FC<IProps> = ({
const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
e.preventDefault(); e.preventDefault();
const updatedDev = makeProfile(formData); const updatedDev = makeProfile(formData);
try {
firebase.updateProfile(updatedDev, {useSet: true, merge: true}); firebase.updateProfile(updatedDev, {useSet: true, merge: true});
console.log(`Submitted ${JSON.stringify(formData, null, 2)}`); setAlert({
resetForm(); show: true,
color: 'success',
text:
'Profile successfully updated. You may go back to your dashboard.',
});
} catch (err) {
setAlert({...alert, show: true});
}
}; };
const isDisabled: boolean = formData.status === '' || formData.skills === ''; const isDisabled: boolean = formData.status === '' || formData.skills === '';
@ -128,7 +140,12 @@ const EditProfile: FC<IProps> = ({
<form className="form" onSubmit={handleSubmit}> <form className="form" onSubmit={handleSubmit}>
<div className="form-group"> <div className="form-group">
<select name="status" required onChange={handleChange}> <select
name="status"
required
onChange={handleChange}
defaultValue={formData.status}
>
<option disabled>* Select Professional Status</option> <option disabled>* Select Professional Status</option>
{Statuses.map((s: string, i: number) => ( {Statuses.map((s: string, i: number) => (
<option value={s} key={i}> <option value={s} key={i}>
@ -282,7 +299,7 @@ const EditProfile: FC<IProps> = ({
</div> </div>
</> </>
)} )}
{alert.show && <Alert text={alert.text} color={alert.color} />}
<input <input
type="submit" type="submit"
className="btn btn-primary my-1" className="btn btn-primary my-1"