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