Dwayne Harris
5 years ago
9 changed files with 151 additions and 37 deletions
-
4src/actions/directory.ts
-
4src/actions/entities.ts
-
2src/components/app/app.tsx
-
49src/components/group-info/index.tsx
-
32src/components/group-list/group-list-item/index.tsx
-
63src/components/pages/group/group.tsx
-
26src/components/pages/group/index.ts
-
2src/components/pages/login/login.tsx
-
6src/components/pages/self/self.tsx
@ -0,0 +1,49 @@ |
|||
import React, { FC } from 'react' |
|||
import moment from 'moment' |
|||
|
|||
import { Group } from 'src/types' |
|||
|
|||
interface Props { |
|||
group: Group |
|||
} |
|||
|
|||
const GroupInfo: FC<Props> = ({ group }) => ( |
|||
<nav className="level"> |
|||
<div className="level-item has-text-centered"> |
|||
<div> |
|||
<p className="heading">Members</p> |
|||
<p className="title">{group.members}</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="level-item has-text-centered"> |
|||
<div> |
|||
<p className="heading">Posts</p> |
|||
<p className="title">{group.posts}</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="level-item has-text-centered"> |
|||
<div> |
|||
<p className="heading has-text-success">Awards</p> |
|||
<p className="title">{group.posts}</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="level-item has-text-centered"> |
|||
<div> |
|||
<p className="heading">Points</p> |
|||
<p className="title">{group.points}</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="level-item has-text-centered"> |
|||
<div> |
|||
<p className="heading">Created</p> |
|||
<p className="title is-size-5">{moment(group.created).format('MMMM Do, YYYY')}</p> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
) |
|||
|
|||
export default GroupInfo |
@ -0,0 +1,63 @@ |
|||
import React, { FC, useEffect } from 'react' |
|||
import { RouteComponentProps } from 'react-router-dom' |
|||
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
|||
import { faEdit } from '@fortawesome/free-solid-svg-icons' |
|||
|
|||
import { setTitle } from 'src/utils' |
|||
import { Group } from 'src/types' |
|||
|
|||
import PageHeader from 'src/components/page-header' |
|||
import GroupInfo from 'src/components/group-info' |
|||
|
|||
interface Params { |
|||
id: string |
|||
} |
|||
|
|||
export interface Props extends RouteComponentProps<Params> { |
|||
group?: Group |
|||
fetchGroup: () => void |
|||
} |
|||
|
|||
const Self: FC<Props> = ({ group, fetchGroup }) => { |
|||
useEffect(() => { |
|||
fetchGroup() |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
if (group) setTitle(group.name) |
|||
}, [group]) |
|||
|
|||
if (!group) { |
|||
return ( |
|||
<div> |
|||
<PageHeader title="Group" /> |
|||
<div className="main-content"></div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div> |
|||
<PageHeader title={group.name} /> |
|||
|
|||
<div className="main-content"> |
|||
<GroupInfo group={group} /> |
|||
<br /><br /> |
|||
|
|||
{group.membership === 'admin' && |
|||
<div> |
|||
<button className="button is-warning"> |
|||
<span className="icon is-small"> |
|||
<FontAwesomeIcon icon={faEdit} /> |
|||
</span> |
|||
<span>Edit {group.name}</span> |
|||
</button> |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default Self |
@ -0,0 +1,26 @@ |
|||
import { connect } from 'react-redux' |
|||
import { handleApiError } from 'src/api/errors' |
|||
import { fetchGroup } from 'src/actions/directory' |
|||
import { getEntity } from 'src/selectors/entities' |
|||
import { AppState, EntityType, Group, AppThunkDispatch } from 'src/types' |
|||
|
|||
import GroupPage, { Props } from './group' |
|||
|
|||
const mapStateToProps = (state: AppState, ownProps: Props) => ({ |
|||
group: getEntity<Group>(state, EntityType.Group, ownProps.match.params.id), |
|||
}) |
|||
|
|||
const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({ |
|||
fetchGroup: () => { |
|||
try { |
|||
dispatch(fetchGroup(ownProps.match.params.id)) |
|||
} catch (err) { |
|||
handleApiError(err, dispatch, ownProps.history) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
export default connect( |
|||
mapStateToProps, |
|||
mapDispatchToProps |
|||
)(GroupPage) |
Write
Preview
Loading…
Cancel
Save
Reference in new issue