Break sections out into files
This commit is contained in:
Adam Butterworth
committed by
Adam Butterworth
Adam Butterworth
parent
1f1ecef6fc
commit
103d05a4fe
88
src/components/UserProfile/Bio.jsx
Normal file
88
src/components/UserProfile/Bio.jsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Input } from 'reactstrap';
|
||||
|
||||
import EditControls from './elements/EditControls';
|
||||
import EditableItemHeader from './elements/EditableItemHeader';
|
||||
import EmptyContent from './elements/EmptyContent';
|
||||
import SwitchContent from './elements/SwitchContent';
|
||||
|
||||
|
||||
function Bio({
|
||||
bio,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="About Me" />
|
||||
<Input
|
||||
type="textarea"
|
||||
name="bio"
|
||||
defaultValue={bio}
|
||||
onChange={e => onChange('bio', e.target.value)}
|
||||
/>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('bio')}
|
||||
onSave={() => onSave('bio')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('bio', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="About Me"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('bio')}
|
||||
showVisibility={Boolean(bio)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<p className="lead">{bio}</p>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('bio')}>Add a short bio</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="About Me" />
|
||||
<p className="lead">{bio}</p>,
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Bio.propTypes = {
|
||||
editMode: PropTypes.string,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onVisibilityChange: PropTypes.func.isRequired,
|
||||
saveState: PropTypes.string,
|
||||
bio: PropTypes.string,
|
||||
};
|
||||
|
||||
Bio.defaultProps = {
|
||||
editMode: 'static',
|
||||
saveState: null,
|
||||
bio: null,
|
||||
};
|
||||
|
||||
|
||||
export default Bio;
|
||||
95
src/components/UserProfile/Education.jsx
Normal file
95
src/components/UserProfile/Education.jsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Input } from 'reactstrap';
|
||||
|
||||
import EditControls from './elements/EditControls';
|
||||
import EditableItemHeader from './elements/EditableItemHeader';
|
||||
import EmptyContent from './elements/EmptyContent';
|
||||
import SwitchContent from './elements/SwitchContent';
|
||||
|
||||
import EDUCATION from '../../constants/education';
|
||||
|
||||
|
||||
function Education({
|
||||
education,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Education" />
|
||||
<Input
|
||||
type="select"
|
||||
name="education"
|
||||
className="w-100"
|
||||
defaultValue={education}
|
||||
onChange={e => onChange('education', e.target.value)}
|
||||
>
|
||||
{Object.keys(EDUCATION).map(key => (
|
||||
<option key={key} value={key}>{EDUCATION[key]}</option>
|
||||
))}
|
||||
</Input>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('education')}
|
||||
onSave={() => onSave('education')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('education', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="Education"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('education')}
|
||||
showVisibility={Boolean(education)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<h5>{EDUCATION[education]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('education')}>Add education</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Education" />
|
||||
<h5>{EDUCATION[education]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Education.propTypes = {
|
||||
editMode: PropTypes.string,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onVisibilityChange: PropTypes.func.isRequired,
|
||||
saveState: PropTypes.string,
|
||||
education: PropTypes.string,
|
||||
};
|
||||
|
||||
Education.defaultProps = {
|
||||
editMode: 'static',
|
||||
saveState: null,
|
||||
education: null,
|
||||
};
|
||||
|
||||
|
||||
export default Education;
|
||||
89
src/components/UserProfile/FullName.jsx
Normal file
89
src/components/UserProfile/FullName.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Input } from 'reactstrap';
|
||||
|
||||
import EditControls from './elements/EditControls';
|
||||
import EditableItemHeader from './elements/EditableItemHeader';
|
||||
import EmptyContent from './elements/EmptyContent';
|
||||
import SwitchContent from './elements/SwitchContent';
|
||||
|
||||
|
||||
function FullName({
|
||||
fullName,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Full Name" />
|
||||
<Input
|
||||
type="text"
|
||||
name="fullName"
|
||||
defaultValue={fullName}
|
||||
onChange={e => onChange('fullName', e.target.value)}
|
||||
/>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('fullName')}
|
||||
onSave={() => onSave('fullName')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('fullName', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="Full Name"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('fullName')}
|
||||
showVisibility={Boolean(fullName)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<h5>{fullName}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('fullName')}>Add name</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Full Name" />
|
||||
<h5>{fullName}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
FullName.propTypes = {
|
||||
editMode: PropTypes.string,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onVisibilityChange: PropTypes.func.isRequired,
|
||||
saveState: PropTypes.string,
|
||||
fullName: PropTypes.string,
|
||||
};
|
||||
|
||||
FullName.defaultProps = {
|
||||
editMode: 'static',
|
||||
saveState: null,
|
||||
fullName: null,
|
||||
};
|
||||
|
||||
|
||||
export default FullName;
|
||||
102
src/components/UserProfile/MyCertificates.jsx
Normal file
102
src/components/UserProfile/MyCertificates.jsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row, Col, Card, CardBody, CardTitle } from 'reactstrap';
|
||||
|
||||
import EditControls from './elements/EditControls';
|
||||
import EditableItemHeader from './elements/EditableItemHeader';
|
||||
import SwitchContent from './elements/SwitchContent';
|
||||
|
||||
function MyCertificates({
|
||||
certificates,
|
||||
editMode,
|
||||
onEdit,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
const renderCertificates = () => {
|
||||
if (!certificates) return null;
|
||||
|
||||
return (
|
||||
<Row>
|
||||
{certificates.map(({ title }) => (
|
||||
<Col key={title} sm={6}>
|
||||
<Card className="mb-4">
|
||||
<CardBody>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="My Certificates" />
|
||||
{renderCertificates()}
|
||||
<EditControls
|
||||
onCancel={() => onCancel('certificates')}
|
||||
onSave={() => onSave('certificates')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('certificates', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="My Certificates"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('certificates')}
|
||||
showVisibility={Boolean(certificates)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
{renderCertificates()}
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<div>
|
||||
You don’t have any certificates yet. Find a course.
|
||||
</div>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="My Certificates" />
|
||||
{renderCertificates()}
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
MyCertificates.propTypes = {
|
||||
editMode: PropTypes.string,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onVisibilityChange: PropTypes.func.isRequired,
|
||||
saveState: PropTypes.string,
|
||||
certificates: PropTypes.arrayOf(PropTypes.shape({
|
||||
title: PropTypes.string,
|
||||
})),
|
||||
};
|
||||
|
||||
MyCertificates.defaultProps = {
|
||||
editMode: 'static',
|
||||
saveState: null,
|
||||
certificates: null,
|
||||
};
|
||||
|
||||
|
||||
export default MyCertificates;
|
||||
95
src/components/UserProfile/UserLocation.jsx
Normal file
95
src/components/UserProfile/UserLocation.jsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Input } from 'reactstrap';
|
||||
|
||||
import EditControls from './elements/EditControls';
|
||||
import EditableItemHeader from './elements/EditableItemHeader';
|
||||
import EmptyContent from './elements/EmptyContent';
|
||||
import SwitchContent from './elements/SwitchContent';
|
||||
|
||||
import { ALL_COUNTRIES } from '../../constants/countries';
|
||||
|
||||
|
||||
function UserLocation({
|
||||
userLocation,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Location" />
|
||||
<Input
|
||||
type="select"
|
||||
name="userLocation"
|
||||
className="w-100"
|
||||
defaultValue={userLocation}
|
||||
onChange={e => onChange('userLocation', e.target.value)}
|
||||
>
|
||||
{Object.keys(ALL_COUNTRIES).map(key => (
|
||||
<option key={key} value={key}>{ALL_COUNTRIES[key]}</option>
|
||||
))}
|
||||
</Input>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('userLocation')}
|
||||
onSave={() => onSave('userLocation')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('userLocation', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="Location"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('userLocation')}
|
||||
showVisibility={Boolean(userLocation)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<h5>{ALL_COUNTRIES[userLocation]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('userLocation')}>Add location</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Location" />
|
||||
<h5>{ALL_COUNTRIES[userLocation]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
UserLocation.propTypes = {
|
||||
editMode: PropTypes.string,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onVisibilityChange: PropTypes.func.isRequired,
|
||||
saveState: PropTypes.string,
|
||||
userLocation: PropTypes.string,
|
||||
};
|
||||
|
||||
UserLocation.defaultProps = {
|
||||
editMode: 'static',
|
||||
saveState: null,
|
||||
userLocation: null,
|
||||
};
|
||||
|
||||
|
||||
export default UserLocation;
|
||||
@@ -1,16 +1,14 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Row, Col, Input, Card, CardBody, CardTitle } from 'reactstrap';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
|
||||
import EditControls from './elements/EditControls';
|
||||
import EditableItemHeader from './elements/EditableItemHeader';
|
||||
import EmptyContent from './elements/EmptyContent';
|
||||
import SwitchContent from './elements/SwitchContent';
|
||||
import ProfileAvatar from './ProfileAvatar';
|
||||
import FullName from './FullName';
|
||||
import UserLocation from './UserLocation';
|
||||
import Education from './Education';
|
||||
import SocialLinks from './SocialLinks';
|
||||
|
||||
import { ALL_COUNTRIES } from '../../constants/countries';
|
||||
import EDUCATION from '../../constants/education';
|
||||
import Bio from './Bio';
|
||||
import MyCertificates from './MyCertificates';
|
||||
|
||||
|
||||
class UserProfile extends React.Component {
|
||||
@@ -204,395 +202,3 @@ UserProfile.defaultProps = {
|
||||
certificates: null,
|
||||
saveUserProfile: null,
|
||||
};
|
||||
|
||||
|
||||
const sectionPropTypes = {
|
||||
editMode: PropTypes.string,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onVisibilityChange: PropTypes.func.isRequired,
|
||||
saveState: PropTypes.string,
|
||||
};
|
||||
|
||||
const sectionDefaultProps = {
|
||||
editMode: 'static',
|
||||
saveState: null,
|
||||
};
|
||||
|
||||
|
||||
function FullName({
|
||||
fullName,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Full Name" />
|
||||
<Input
|
||||
type="text"
|
||||
name="fullName"
|
||||
defaultValue={fullName}
|
||||
onChange={e => onChange('fullName', e.target.value)}
|
||||
/>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('fullName')}
|
||||
onSave={() => onSave('fullName')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('fullName', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="Full Name"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('fullName')}
|
||||
showVisibility={Boolean(fullName)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<h5>{fullName}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('fullName')}>Add name</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Full Name" />
|
||||
<h5>{fullName}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
FullName.propTypes = {
|
||||
...sectionPropTypes,
|
||||
fullName: PropTypes.string,
|
||||
};
|
||||
|
||||
FullName.defaultProps = {
|
||||
...sectionDefaultProps,
|
||||
fullName: null,
|
||||
};
|
||||
|
||||
|
||||
function UserLocation({
|
||||
userLocation,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Location" />
|
||||
<Input
|
||||
type="select"
|
||||
name="userLocation"
|
||||
className="w-100"
|
||||
defaultValue={userLocation}
|
||||
onChange={e => onChange('userLocation', e.target.value)}
|
||||
>
|
||||
{Object.keys(ALL_COUNTRIES).map(key => (
|
||||
<option key={key} value={key}>{ALL_COUNTRIES[key]}</option>
|
||||
))}
|
||||
</Input>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('userLocation')}
|
||||
onSave={() => onSave('userLocation')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('userLocation', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="Location"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('userLocation')}
|
||||
showVisibility={Boolean(userLocation)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<h5>{ALL_COUNTRIES[userLocation]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('userLocation')}>Add location</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Location" />
|
||||
<h5>{ALL_COUNTRIES[userLocation]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
UserLocation.propTypes = {
|
||||
...sectionPropTypes,
|
||||
userLocation: PropTypes.string,
|
||||
};
|
||||
|
||||
UserLocation.defaultProps = {
|
||||
...sectionDefaultProps,
|
||||
userLocation: null,
|
||||
};
|
||||
|
||||
|
||||
function Education({
|
||||
education,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Education" />
|
||||
<Input
|
||||
type="select"
|
||||
name="education"
|
||||
className="w-100"
|
||||
defaultValue={education}
|
||||
onChange={e => onChange('education', e.target.value)}
|
||||
>
|
||||
{Object.keys(EDUCATION).map(key => (
|
||||
<option key={key} value={key}>{EDUCATION[key]}</option>
|
||||
))}
|
||||
</Input>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('education')}
|
||||
onSave={() => onSave('education')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('education', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="Education"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('education')}
|
||||
showVisibility={Boolean(education)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<h5>{EDUCATION[education]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('education')}>Add education</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="Education" />
|
||||
<h5>{EDUCATION[education]}</h5>
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Education.propTypes = {
|
||||
...sectionPropTypes,
|
||||
education: PropTypes.string,
|
||||
};
|
||||
|
||||
Education.defaultProps = {
|
||||
...sectionDefaultProps,
|
||||
education: null,
|
||||
};
|
||||
|
||||
|
||||
function Bio({
|
||||
bio,
|
||||
editMode,
|
||||
onEdit,
|
||||
onChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="About Me" />
|
||||
<Input
|
||||
type="textarea"
|
||||
name="bio"
|
||||
defaultValue={bio}
|
||||
onChange={e => onChange('bio', e.target.value)}
|
||||
/>
|
||||
<EditControls
|
||||
onCancel={() => onCancel('bio')}
|
||||
onSave={() => onSave('bio')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('bio', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="About Me"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('bio')}
|
||||
showVisibility={Boolean(bio)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
<p className="lead">{bio}</p>
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<EmptyContent onClick={() => onEdit('bio')}>Add a short bio</EmptyContent>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="About Me" />
|
||||
<p className="lead">{bio}</p>,
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Bio.propTypes = {
|
||||
...sectionPropTypes,
|
||||
bio: PropTypes.string,
|
||||
};
|
||||
|
||||
Bio.defaultProps = {
|
||||
...sectionDefaultProps,
|
||||
bio: null,
|
||||
};
|
||||
|
||||
|
||||
function MyCertificates({
|
||||
certificates,
|
||||
editMode,
|
||||
onEdit,
|
||||
onSave,
|
||||
onCancel,
|
||||
onVisibilityChange,
|
||||
saveState,
|
||||
}) {
|
||||
const renderCertificates = () => {
|
||||
if (!certificates) return null;
|
||||
|
||||
return (
|
||||
<Row>
|
||||
{certificates.map(({ title }) => (
|
||||
<Col key={title} sm={6}>
|
||||
<Card className="mb-4">
|
||||
<CardBody>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SwitchContent
|
||||
className="mb-4"
|
||||
expression={editMode}
|
||||
cases={{
|
||||
editing: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="My Certificates" />
|
||||
{renderCertificates()}
|
||||
<EditControls
|
||||
onCancel={() => onCancel('certificates')}
|
||||
onSave={() => onSave('certificates')}
|
||||
saveState={saveState}
|
||||
visibility="Everyone"
|
||||
onVisibilityChange={e => onVisibilityChange('certificates', e.target.value)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
),
|
||||
editable: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader
|
||||
content="My Certificates"
|
||||
showEditButton
|
||||
onClickEdit={() => onEdit('certificates')}
|
||||
showVisibility={Boolean(certificates)}
|
||||
visibility="Everyone"
|
||||
/>
|
||||
{renderCertificates()}
|
||||
</React.Fragment>
|
||||
),
|
||||
empty: (
|
||||
<div>
|
||||
You don’t have any certificates yet. Find a course.
|
||||
</div>
|
||||
),
|
||||
static: (
|
||||
<React.Fragment>
|
||||
<EditableItemHeader content="My Certificates" />
|
||||
{renderCertificates()}
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
MyCertificates.propTypes = {
|
||||
...sectionPropTypes,
|
||||
certificates: PropTypes.arrayOf(PropTypes.shape({
|
||||
title: PropTypes.string,
|
||||
})),
|
||||
};
|
||||
|
||||
MyCertificates.defaultProps = {
|
||||
...sectionDefaultProps,
|
||||
certificates: null,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user