|
@ -1,9 +1,8 @@ |
|
|
import React, { FC } from 'react' |
|
|
import React, { FC } from 'react' |
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
import { Link, useParams, useHistory } from 'react-router-dom' |
|
|
|
|
|
import moment from 'moment' |
|
|
|
|
|
|
|
|
import { Link, useHistory } from 'react-router-dom' |
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
|
|
import { faDoorOpen, faCheckCircle, faPlusCircle, faIdCard, faEnvelope, faUserShield } from '@fortawesome/free-solid-svg-icons' |
|
|
|
|
|
|
|
|
import { faDoorOpen, faCheckCircle, faIdCard, faEnvelope, faUserShield } from '@fortawesome/free-solid-svg-icons' |
|
|
|
|
|
|
|
|
import { unauthenticate, updateSelf } from 'src/actions/authentication' |
|
|
import { unauthenticate, updateSelf } from 'src/actions/authentication' |
|
|
import { initForm, initField } from 'src/actions/forms' |
|
|
import { initForm, initField } from 'src/actions/forms' |
|
@ -26,18 +25,7 @@ import CheckboxField from 'src/components/forms/checkbox-field' |
|
|
import ImageField from 'src/components/forms/image-field' |
|
|
import ImageField from 'src/components/forms/image-field' |
|
|
import CoverImageField from 'src/components/forms/cover-image-field' |
|
|
import CoverImageField from 'src/components/forms/cover-image-field' |
|
|
|
|
|
|
|
|
interface Params { |
|
|
|
|
|
tab: string |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const tabs: Tab[] = [ |
|
|
|
|
|
{ id: '', label: 'Posts' }, |
|
|
|
|
|
{ id: 'settings', label: 'Settings' }, |
|
|
|
|
|
{ id: 'apps', label: 'Apps' }, |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
const Self: FC = () => { |
|
|
const Self: FC = () => { |
|
|
const { tab = '' } = useParams<Params>() |
|
|
|
|
|
const dispatch = useDispatch() |
|
|
const dispatch = useDispatch() |
|
|
const history = useHistory() |
|
|
const history = useHistory() |
|
|
|
|
|
|
|
@ -98,106 +86,69 @@ const Self: FC = () => { |
|
|
<UserInfo user={user} /> |
|
|
<UserInfo user={user} /> |
|
|
|
|
|
|
|
|
<div className="centered-content"> |
|
|
<div className="centered-content"> |
|
|
<div className="tabs is-large"> |
|
|
|
|
|
<ul> |
|
|
|
|
|
{tabs.map(t => ( |
|
|
|
|
|
<li key={t.id} className={tab === t.id ? 'is-active': ''}> |
|
|
|
|
|
<Link to={`/self/${t.id}`}> |
|
|
|
|
|
{t.label} |
|
|
|
|
|
</Link> |
|
|
|
|
|
</li> |
|
|
|
|
|
))} |
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
<Link to={`/u/${user.id}`}>View Your Page</Link> |
|
|
|
|
|
<br /><br /> |
|
|
|
|
|
|
|
|
|
|
|
<div className="field"> |
|
|
|
|
|
<label className="label">ID</label> |
|
|
|
|
|
<div className="control has-icons-left"> |
|
|
|
|
|
<input className="input" type="text" value={user.id} readOnly /> |
|
|
|
|
|
<span className="icon is-small is-left"> |
|
|
|
|
|
<FontAwesomeIcon icon={faIdCard} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div className="container"> |
|
|
|
|
|
{tab === '' && |
|
|
|
|
|
<p>No Posts.</p> |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
{tab === 'settings' && |
|
|
|
|
|
<div> |
|
|
|
|
|
<Link to={`/u/${user.id}`}>View Your Page</Link> |
|
|
|
|
|
<br /><br /> |
|
|
|
|
|
|
|
|
|
|
|
<div className="field"> |
|
|
|
|
|
<label className="label">ID</label> |
|
|
|
|
|
<div className="control has-icons-left"> |
|
|
|
|
|
<input className="input" type="text" value={user.id} readOnly /> |
|
|
|
|
|
<span className="icon is-small is-left"> |
|
|
|
|
|
<FontAwesomeIcon icon={faIdCard} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
|
|
|
|
<div className="field"> |
|
|
|
|
|
<label className="label">Email</label> |
|
|
|
|
|
<div className="control has-icons-left"> |
|
|
|
|
|
<input className="input" type="email" value={user.email} readOnly /> |
|
|
|
|
|
<span className="icon is-small is-left"> |
|
|
|
|
|
<FontAwesomeIcon icon={faEnvelope} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
|
|
|
|
<TextField name="name" label="Name" placeholder="Your Display Name" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<TextareaField name="about" label="About" placeholder="Your Bio" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<SelectField name="privacy" label="Privacy" options={PRIVACY_OPTIONS} icon={faUserShield} /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<ImageField name="image" label="Avatar" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<CoverImageField name="coverImage" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<CheckboxField name="requiresApproval"> |
|
|
|
|
|
You must approve each Subscription request from other users. |
|
|
|
|
|
</CheckboxField> |
|
|
|
|
|
<br /><br /> |
|
|
|
|
|
|
|
|
|
|
|
<nav className="level"> |
|
|
|
|
|
<div className="level-left"> |
|
|
|
|
|
<p className="level-item"> |
|
|
|
|
|
<button className="button is-primary" onClick={() => handleUpdate()}> |
|
|
|
|
|
<span className="icon is-small"> |
|
|
|
|
|
<FontAwesomeIcon icon={faCheckCircle} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span>Save</span> |
|
|
|
|
|
</button> |
|
|
|
|
|
</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div className="level-right"> |
|
|
|
|
|
<p className="level-item"> |
|
|
|
|
|
<button className="button is-danger" onClick={() => handleLogout()}> |
|
|
|
|
|
<span className="icon is-small"> |
|
|
|
|
|
<FontAwesomeIcon icon={faDoorOpen} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span>Log Out</span> |
|
|
|
|
|
</button> |
|
|
|
|
|
</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</nav> |
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
{tab === 'apps' && |
|
|
|
|
|
<div> |
|
|
|
|
|
<p>No Apps.</p> |
|
|
|
|
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
|
|
|
|
<Link to="/developers/create" className="button is-primary"> |
|
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
|
|
|
|
<div className="field"> |
|
|
|
|
|
<label className="label">Email</label> |
|
|
|
|
|
<div className="control has-icons-left"> |
|
|
|
|
|
<input className="input" type="email" value={user.email} readOnly /> |
|
|
|
|
|
<span className="icon is-small is-left"> |
|
|
|
|
|
<FontAwesomeIcon icon={faEnvelope} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
|
|
|
|
<TextField name="name" label="Name" placeholder="Your Display Name" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<TextareaField name="about" label="About" placeholder="Your Bio" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<SelectField name="privacy" label="Privacy" options={PRIVACY_OPTIONS} icon={faUserShield} /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<ImageField name="image" label="Avatar" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<CoverImageField name="coverImage" /> |
|
|
|
|
|
<br /> |
|
|
|
|
|
<CheckboxField name="requiresApproval"> |
|
|
|
|
|
You must approve each Subscription request from other users. |
|
|
|
|
|
</CheckboxField> |
|
|
|
|
|
<br /><br /> |
|
|
|
|
|
|
|
|
|
|
|
<nav className="level"> |
|
|
|
|
|
<div className="level-left"> |
|
|
|
|
|
<p className="level-item"> |
|
|
|
|
|
<button className="button is-primary" onClick={() => handleUpdate()}> |
|
|
<span className="icon is-small"> |
|
|
<span className="icon is-small"> |
|
|
<FontAwesomeIcon icon={faPlusCircle} /> |
|
|
|
|
|
|
|
|
<FontAwesomeIcon icon={faCheckCircle} /> |
|
|
</span> |
|
|
</span> |
|
|
<span>Create a new App</span> |
|
|
|
|
|
</Link> |
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<span>Save</span> |
|
|
|
|
|
</button> |
|
|
|
|
|
</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div className="level-right"> |
|
|
|
|
|
<p className="level-item"> |
|
|
|
|
|
<button className="button is-danger" onClick={() => handleLogout()}> |
|
|
|
|
|
<span className="icon is-small"> |
|
|
|
|
|
<FontAwesomeIcon icon={faDoorOpen} /> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span>Log Out</span> |
|
|
|
|
|
</button> |
|
|
|
|
|
</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|