WIP

src/actions/directory.ts

@@ -4,7 +4,7 @@ import { normalize } from 'normalizr'
 import { apiFetch } from 'src/api'
 import { setEntity, setEntities } from 'src/actions/entities'
 import { startRequest, finishRequest } from 'src/actions/requests'
-import { groupSchema, userSchema } from 'src/store/schemas'
+import { groupSchema, userSchema, logSchema } from 'src/store/schemas'
 
 import { objectToQuerystring } from 'src/utils'
 import { AppThunkAction, Entity, RequestKey, EntityType, User } from 'src/types'
@@ -110,3 +110,51 @@ export const fetchGroupMembers = (id: string, type?: string, continuation?: stri
         throw err
     }
 }
+
+interface GroupLogsResponse {
+    logs: Entity[]
+    continuation?: string
+}
+
+export const fetchLogs = (id: string, continuation?: string): AppThunkAction => async dispatch => {
+    dispatch(startRequest(RequestKey.FetchGroupLogs))
+
+    try {
+        const response = await apiFetch<GroupLogsResponse>({
+            path: `/api/group/${id}/logs?${objectToQuerystring({ continuation })}`,
+        })
+
+        const users = normalize(response.logs, [logSchema])
+
+        dispatch(setEntities(users.entities))
+        dispatch(finishRequest(RequestKey.FetchGroupLogs, true))
+    } catch (err) {
+        dispatch(finishRequest(RequestKey.FetchGroupLogs, false))
+        throw err
+    }
+}
+
+interface CreateInvitationResponse {
+    code: string
+}
+
+export const createInvitation = (id: string, expiration?: number, limit?: number): AppThunkAction<string> => async dispatch => {
+    dispatch(startRequest(RequestKey.CreateInvitation))
+
+    try {
+        const response = await apiFetch<CreateInvitationResponse>({
+            path: `/api/group/${id}/invitation`,
+            method: 'post',
+            body: {
+                expiration,
+                limit,
+            }
+        })
+
+        dispatch(finishRequest(RequestKey.CreateInvitation, true))
+        return response.code
+    } catch (err) {
+        dispatch(finishRequest(RequestKey.CreateInvitation, false))
+        throw err
+    }
+}

src/api/errors.ts

@@ -4,7 +4,7 @@ import { setFieldNotification } from 'src/actions/forms'
 import { showNotification } from 'src/actions/notifications'
 import { AppThunkDispatch, FormNotification, NotificationType } from 'src/types'
 
-export function handleApiError(err: HttpError, dispatch: AppThunkDispatch, history: History) {
+export function handleApiError(err: HttpError, dispatch: AppThunkDispatch, history?: History) {
     if (err instanceof ServerError) {
         dispatch(showNotification(NotificationType.Error, 'Server Error'))
     }
@@ -20,7 +20,7 @@ export function handleApiError(err: HttpError, dispatch: AppThunkDispatch, histo
 
     if (err instanceof UnauthorizedError) {
         dispatch(showNotification(NotificationType.Error, 'You need to be logged in.'))
-        history.push('/login')
+        if (history) history.push('/login')
     }
 
     if (err instanceof NotFoundError) {

src/components/group-logs/group-logs.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useEffect } from 'react'
+import noop from 'lodash/noop'
+import moment from 'moment'
+import { GroupLog } from 'src/types'
+
+export interface Props {
+    group: string
+    logs?: GroupLog[]
+    fetchLogs?: () => void
+}
+
+const MemberList: FC<Props> = ({ group, logs = [], fetchLogs = noop }) => {
+    useEffect(() => {
+        if (logs.length === 0) fetchLogs()
+    }, [group])
+
+    return (
+        <table className="table">
+            <thead>
+                <tr>
+                    <th>Who</th>
+                    <th>What</th>
+                    <th>When</th>
+                </tr>
+            </thead>
+            <tbody>
+                {logs.map(log => (
+                    <tr>
+                        <td>{log.user.id}</td>
+                        <td>{log.content}</td>
+                        <td>{moment(log.created).format('MMMM Do YYYY, h:mm:ss a')}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    )
+}
+
+export default MemberList

src/components/group-logs/index.tsx

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import { handleApiError } from 'src/api/errors'
+import { fetchLogs } from 'src/actions/directory'
+import { getLogs } from 'src/selectors/directory'
+import { AppState, AppThunkDispatch } from 'src/types'
+
+import GroupLogs, { Props } from './group-logs'
+
+const mapStateToProps = (state: AppState) => ({
+    logs: getLogs(state),
+})
+
+const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
+    fetchLogs: () => {
+        try {
+            dispatch(fetchLogs(ownProps.group))
+        } catch (err) {
+            handleApiError(err, dispatch)
+        }
+    },
+})
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(GroupLogs)

src/components/member-list/index.tsx

@@ -1,17 +1,26 @@
-import React, { FC } from 'react'
+import { connect } from 'react-redux'
+import { handleApiError } from 'src/api/errors'
+import { fetchGroupMembers } from 'src/actions/directory'
+import { getGroupMembers } from 'src/selectors/directory'
+import { AppState, AppThunkDispatch } from 'src/types'
 
-import { User } from 'src/types'
+import MemberList, { Props } from './member-list'
 
-import MemberListItem from './member-list-item'
+const mapStateToProps = (state: AppState, ownProps: Props) => ({
+    members: getGroupMembers(state, ownProps.group),
+})
 
-interface Props {
-    members: User[]
-}
+const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
+    fetchGroupMembers: () => {
+        try {
+            dispatch(fetchGroupMembers(ownProps.group))
+        } catch (err) {
+            handleApiError(err, dispatch)
+        }
+    },
+})
 
-const MemberList: FC<Props> = ({ members }) => (
-    <div className="is-flex">
-        {members.map(member => <MemberListItem key={member.id} member={member} />)}
-    </div>
-)
-
-export default MemberList
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(MemberList)

src/components/member-list/member-list.tsx

@@ -0,0 +1,25 @@
+import React, { FC, useEffect } from 'react'
+import noop from 'lodash/noop'
+import { User } from 'src/types'
+
+import MemberListItem from './member-list-item'
+
+export interface Props {
+    group: string
+    members?: User[]
+    fetchGroupMembers?: () => void
+}
+
+const MemberList: FC<Props> = ({ group, members = [], fetchGroupMembers = noop }) => {
+    useEffect(() => {
+        fetchGroupMembers()
+    }, [group])
+
+    return (
+        <div className="is-flex">
+            {members.map(member => <MemberListItem key={member.id} member={member} />)}
+        </div>
+    )
+}
+
+export default MemberList

src/components/pages/group-admin/group-admin.tsx

@@ -9,6 +9,8 @@ import { Group, GroupMembershipType, User } from 'src/types'
 
 import PageHeader from 'src/components/page-header'
 import MemberList from 'src/components/member-list'
+import GroupLogs from 'src/components/group-logs'
+import Loading from 'src/components/pages/loading'
 
 interface Tab {
     id: string
@@ -22,11 +24,33 @@ interface Params {
 
 export interface Props extends RouteComponentProps<Params> {
     group?: Group
-    members?: User[]
     fetchGroup: () => void
+    createInvitation: (expiration: number, limit: number) => void
 }
 
-const GroupAdmin: FC<Props> = ({ group, members = [], fetchGroup, match, history }) => {
+const GroupAdmin: FC<Props> = ({
+    group,
+    fetchGroup,
+    createInvitation,
+    match,
+    history,
+}) => {
+    const tab = match.params.tab || ''
+    const tabs: Tab[] = [
+        {
+            id: '',
+            label: 'General',
+        },
+        {
+            id: 'members',
+            label: 'Members',
+        },
+        {
+            id: 'logs',
+            label: 'Logs',
+        },
+    ]
+
     useEffect(() => {
         fetchGroup()
     }, [])
@@ -42,26 +66,7 @@ const GroupAdmin: FC<Props> = ({ group, members = [], fetchGroup, match, history
         }
     }, [group])
 
-    if (!group) {
-        return (
-            <div>
-                <PageHeader title="Group" />
-                <div className="main-content"></div>
-            </div>
-        )
-    }
-
-    const selectedTab = match.params.tab ? match.params.tab : ''
-    const tabs: Tab[] = [
-        {
-            id: '',
-            label: 'General',
-        },
-        {
-            id: 'members',
-            label: 'Members',
-        }
-    ]
+    if (!group) return <Loading />
 
     return (
         <div>
@@ -72,7 +77,7 @@ const GroupAdmin: FC<Props> = ({ group, members = [], fetchGroup, match, history
                     <div className="tabs is-large">
                         <ul>
                             {tabs.map(t => (
-                                <li key={t.id} className={selectedTab === t.id ? 'is-active': ''}>
+                                <li key={t.id} className={tab === t.id ? 'is-active': ''}>
                                     <Link to={`/c/${group.id}/admin/${t.id}`}>
                                         {t.label}
                                     </Link>
@@ -82,7 +87,7 @@ const GroupAdmin: FC<Props> = ({ group, members = [], fetchGroup, match, history
                     </div>
 
                     <div className="container">
-                        {selectedTab === '' &&
+                        {tab === '' &&
                             <div>
                                 <div className="field">
                                     <label className="label">ID</label>
@@ -117,9 +122,8 @@ const GroupAdmin: FC<Props> = ({ group, members = [], fetchGroup, match, history
                             </div>
                         }
 
-                        {match.params.tab === 'members' &&
-                            <MemberList members={members} />
-                        }
+                        {tab === 'members' && <MemberList group={match.params.id} />}
+                        {tab === 'logs' && <GroupLogs group={match.params.id} />}
                     </div>
                 </div>
             </div>

src/components/pages/group-admin/index.ts

@@ -1,7 +1,6 @@
 import { connect } from 'react-redux'
 import { handleApiError } from 'src/api/errors'
-import { fetchGroup, fetchGroupMembers } from 'src/actions/directory'
-import { getGroupMembers } from 'src/selectors/directory'
+import { fetchGroup, createInvitation } from 'src/actions/directory'
 import { getEntity } from 'src/selectors/entities'
 import { AppState, EntityType, Group, AppThunkDispatch } from 'src/types'
 
@@ -9,18 +8,23 @@ import GroupAdmin, { Props } from './group-admin'
 
 const mapStateToProps = (state: AppState, ownProps: Props) => ({
     group: getEntity<Group>(state, EntityType.Group, ownProps.match.params.id),
-    members: getGroupMembers(state, ownProps.match.params.id),
 })
 
 const mapDispatchToProps = (dispatch: AppThunkDispatch, ownProps: Props) => ({
     fetchGroup: () => {
         try {
             dispatch(fetchGroup(ownProps.match.params.id))
-            dispatch(fetchGroupMembers(ownProps.match.params.id))
         } catch (err) {
             handleApiError(err, dispatch, ownProps.history)
         }
-    }
+    },
+    createInvitation: (expiration: number, limit: number) => {
+        try {
+            dispatch(createInvitation(ownProps.match.params.id, expiration, limit))
+        } catch (err) {
+            handleApiError(err, dispatch, ownProps.history)
+        }
+    },
 })
 
 export default connect(

src/components/pages/loading/index.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react'
+import PageHeader from 'src/components/page-header'
+
+const Loading: FC = () => (
+    <div>
+        <PageHeader title="Loading..." />
+        <div className="main-content"></div>
+    </div>
+)
+
+export default Loading

src/selectors/directory.ts

@@ -2,9 +2,9 @@ import { denormalize } from 'normalizr'
 import { createSelector } from 'reselect'
 import filter from 'lodash/filter'
 
-import { groupSchema, userSchema } from '../store/schemas'
+import { groupSchema, userSchema, logSchema } from '../store/schemas'
 import { getEntityStore } from './entities'
-import { AppState, Group, User, EntityType } from 'src/types'
+import { AppState, Group, User, EntityType, GroupLog } from 'src/types'
 
 export const getGroupIds = (state: AppState) => state.directory.groups
 
@@ -17,3 +17,5 @@ export const getGroupMembers = (state: AppState, group: string) => {
     const users = state.entities[EntityType.User]
     return denormalize(filter(users, user => user.group === group), [userSchema], state.entities) as User[]
 }
+
+export const getLogs = (state: AppState) => denormalize(state.entities[EntityType.Log], [logSchema], state.entities) as GroupLog[]

src/store/schemas.ts

@@ -1,7 +1,12 @@
 import { schema } from 'normalizr'
+import { EntityType } from 'src/types'
 
-export const groupSchema = new schema.Entity('groups')
+export const groupSchema = new schema.Entity(EntityType.Group)
 
-export const userSchema = new schema.Entity('users', {
+export const userSchema = new schema.Entity(EntityType.User, {
     group: groupSchema,
 })
+
+export const logSchema = new schema.Entity(EntityType.Log, {
+    user: userSchema,
+})

src/types/entities.ts

@@ -1,6 +1,7 @@
 export enum EntityType {
     User = 'users',
     Group = 'groups',
+    Log = 'log',
 }
 
 export enum GroupMembershipType {
@@ -28,6 +29,12 @@ export type User = Entity & {
     coverImageUrl?: string
 }
 
+export type GroupLog = Entity & {
+    user: User
+    content: string
+    created: number
+}
+
 export interface EntityCollection {
     [id: string]: Entity
 }

src/types/store.ts

@@ -17,6 +17,8 @@ export enum RequestKey {
     Register = 'register',
     Authenticate = 'authenticate',
     FetchGroupMembers = 'fetch_group_members',
+    FetchGroupLogs = 'fetch_group_logs',
+    CreateInvitation = 'create_invitation',
 }
 
 export type FormValue = string | number | boolean