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

conditional display of social links

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-14 18:35:22 +02:00
parent 3540881ec2
commit e0f20d253d
1 changed files with 63 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/pages/EditProfile.tsx
View file

@ -1,4 +1,4 @@
import React, {FC} 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';
// Style // Style
@ -33,6 +33,7 @@ interface InitFormData {
* Form to update dev's personal information. * Form to update dev's personal information.
*/ */
const EditProfile: FC = () => { const EditProfile: FC = () => {
const [showLinks, setShowLinks] = useState(false);
const initFormData = { const initFormData = {
status: '', status: '',
company: '', company: '',
@ -70,6 +71,8 @@ const EditProfile: FC = () => {
e.preventDefault(); e.preventDefault();
console.log('Submitted'); console.log('Submitted');
}; };
const revealSocialLinks = () => setShowLinks(true);
return ( return (
<section className="container"> <section className="container">
<FormHeader <FormHeader
@ -164,66 +167,74 @@ const EditProfile: FC = () => {
</div> </div>
<div className="my-2"> <div className="my-2">
<button type="button" className="btn btn-light"> <button
type="button"
className="btn btn-light"
onClick={revealSocialLinks}
>
Add Social Network Links Add Social Network Links
</button> </button>
<span>Optional</span> <span>Optional</span>
</div> </div>
<div className="form-group social-input"> {showLinks && (
<FontAwesomeIcon icon={faFacebook} size="2x" /> <>
<input <div className="form-group social-input">
type="text" <FontAwesomeIcon icon={faFacebook} size="2x" />
placeholder="Facebook URL" <input
name="facebook" type="text"
value={facebook} placeholder="Facebook URL"
onChange={handleChange} name="facebook"
/> value={facebook}
</div> onChange={handleChange}
/>
</div>
<div className="form-group social-input"> <div className="form-group social-input">
<FontAwesomeIcon icon={faInstagram} size="2x" /> <FontAwesomeIcon icon={faInstagram} size="2x" />
<input <input
type="text" type="text"
placeholder="Instagram URL" placeholder="Instagram URL"
name="instagram" name="instagram"
value={instagram} value={instagram}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="form-group social-input"> <div className="form-group social-input">
<FontAwesomeIcon icon={faLinkedin} size="2x" /> <FontAwesomeIcon icon={faLinkedin} size="2x" />
<input <input
type="text" type="text"
placeholder="Linkedin URL" placeholder="Linkedin URL"
name="linkedin" name="linkedin"
value={linkedin} value={linkedin}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="form-group social-input"> <div className="form-group social-input">
<FontAwesomeIcon icon={faTwitter} size="2x" /> <FontAwesomeIcon icon={faTwitter} size="2x" />
<input <input
type="text" type="text"
placeholder="Twitter URL" placeholder="Twitter URL"
name="twitter" name="twitter"
value={twitter} value={twitter}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
<div className="form-group social-input"> <div className="form-group social-input">
<FontAwesomeIcon icon={faYoutube} size="2x" /> <FontAwesomeIcon icon={faYoutube} size="2x" />
<input <input
type="text" type="text"
placeholder="YouTube URL" placeholder="YouTube URL"
name="youtube" name="youtube"
value={youtube} value={youtube}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</>
)}
<input type="submit" className="btn btn-primary my-1" value="Submit" /> <input type="submit" className="btn btn-primary my-1" value="Submit" />
<Link to={Routes.DASHBOARD} className="btn btn-light my-1"> <Link to={Routes.DASHBOARD} className="btn btn-light my-1">