From adf4a966c88a7cf8a0f3d500df45158c5977e980 Mon Sep 17 00:00:00 2001 From: Dwayne Harris Date: Mon, 23 Sep 2019 16:51:22 -0400 Subject: [PATCH] WIP --- src/actions/directory.ts | 4 +- src/actions/entities.ts | 4 +- src/components/app/app.tsx | 2 + src/components/group-info/index.tsx | 49 +++++++++++++++ .../group-list/group-list-item/index.tsx | 32 +--------- src/components/pages/group/group.tsx | 63 +++++++++++++++++++ src/components/pages/group/index.ts | 26 ++++++++ src/components/pages/login/login.tsx | 2 +- src/components/pages/self/self.tsx | 6 +- 9 files changed, 151 insertions(+), 37 deletions(-) create mode 100644 src/components/group-info/index.tsx create mode 100644 src/components/pages/group/group.tsx create mode 100644 src/components/pages/group/index.ts diff --git a/src/actions/directory.ts b/src/actions/directory.ts index d868323..8baf098 100644 --- a/src/actions/directory.ts +++ b/src/actions/directory.ts @@ -7,7 +7,7 @@ import { startRequest, finishRequest } from 'src/actions/requests' import { groupSchema } from 'src/store/schemas' import { objectToQuerystring } from 'src/utils' -import { AppThunkAction, Entity, RequestKey } from 'src/types' +import { AppThunkAction, Entity, RequestKey, EntityType } from 'src/types' export interface SetGroupsAction extends Action { type: 'DIRECTORY_SET_GROUPS' @@ -50,7 +50,7 @@ export const fetchGroup = (id: string): AppThunkAction => { path: `/api/group/${id}` }) - dispatch(setEntity('group', group)) + dispatch(setEntity(EntityType.Group, group)) dispatch(finishRequest(RequestKey.FetchGroup, true)) } catch (err) { dispatch(finishRequest(RequestKey.FetchGroup, false)) diff --git a/src/actions/entities.ts b/src/actions/entities.ts index dfde283..4a1aa2e 100644 --- a/src/actions/entities.ts +++ b/src/actions/entities.ts @@ -1,5 +1,5 @@ import { Action } from 'redux' -import { Entity, EntityStore } from '../types' +import { Entity, EntityStore, EntityType } from '../types' export interface SetEntityAction extends Action { type: 'ENTITIES_SET_ENTITY' @@ -18,7 +18,7 @@ export interface SetEntitiesAction extends Action { export type EntitiesActions = SetEntityAction | SetEntitiesAction -export const setEntity = (type: string, entity: Entity): SetEntityAction => ({ +export const setEntity = (type: EntityType, entity: Entity): SetEntityAction => ({ type: 'ENTITIES_SET_ENTITY', payload: { type, diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx index f399d8e..ba56605 100644 --- a/src/components/app/app.tsx +++ b/src/components/app/app.tsx @@ -12,6 +12,7 @@ import UserInfo from '../user-info' import About from '../pages/about' import Developers from '../pages/developers' import Directory from '../pages/directory' +import Group from '../pages/group' import Home from '../pages/home' import Login from '../pages/login' import Register from '../pages/register' @@ -59,6 +60,7 @@ const App: FC = ({ collapsed, fetching, fetchSelf, setChecked }) => { + diff --git a/src/components/group-info/index.tsx b/src/components/group-info/index.tsx new file mode 100644 index 0000000..6574350 --- /dev/null +++ b/src/components/group-info/index.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 = ({ group }) => ( + +) + +export default GroupInfo diff --git a/src/components/group-list/group-list-item/index.tsx b/src/components/group-list/group-list-item/index.tsx index 67feece..d6c3fba 100644 --- a/src/components/group-list/group-list-item/index.tsx +++ b/src/components/group-list/group-list-item/index.tsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom' import { Group } from 'src/types' +import GroupInfo from 'src/components/group-info' + interface Props { group: Group } @@ -14,35 +16,7 @@ const GroupListItem: FC = ({ group }) => ( {group.about &&

{group.about}

}

- + ) diff --git a/src/components/pages/group/group.tsx b/src/components/pages/group/group.tsx new file mode 100644 index 0000000..4402f1e --- /dev/null +++ b/src/components/pages/group/group.tsx @@ -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 { + group?: Group + fetchGroup: () => void +} + +const Self: FC = ({ group, fetchGroup }) => { + useEffect(() => { + fetchGroup() + }, []) + + useEffect(() => { + if (group) setTitle(group.name) + }, [group]) + + if (!group) { + return ( +
+ +
+
+ ) + } + + return ( +
+ + +
+ +

+ + {group.membership === 'admin' && +
+ +
+ } +
+
+ ) +} + +export default Self diff --git a/src/components/pages/group/index.ts b/src/components/pages/group/index.ts new file mode 100644 index 0000000..62cffb2 --- /dev/null +++ b/src/components/pages/group/index.ts @@ -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(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) diff --git a/src/components/pages/login/login.tsx b/src/components/pages/login/login.tsx index 19a7741..8ada18a 100644 --- a/src/components/pages/login/login.tsx +++ b/src/components/pages/login/login.tsx @@ -61,7 +61,7 @@ const Login: FC = ({
- + diff --git a/src/components/pages/self/self.tsx b/src/components/pages/self/self.tsx index 1eee1e0..24e29f5 100644 --- a/src/components/pages/self/self.tsx +++ b/src/components/pages/self/self.tsx @@ -4,14 +4,14 @@ import moment from 'moment' import { useAuthenticationCheck } from 'src/hooks' import { setTitle } from 'src/utils' -import { Entity } from 'src/types' +import { User } from 'src/types' import PageHeader from 'src/components/page-header' export interface Props extends RouteComponentProps { checked: boolean authenticated: boolean - user?: Entity + user?: User logout: () => void } @@ -33,7 +33,7 @@ const Self: FC = ({ checked, authenticated, user, logout, history }) => { return (
- +