Dwayne Harris
5 years ago
14 changed files with 317 additions and 57 deletions
-
87src/actions/apps.ts
-
7src/actions/registration.ts
-
4src/components/app.tsx
-
2src/components/create-group-form.tsx
-
21src/components/create-group-step.tsx
-
35src/components/create-user-step.tsx
-
84src/components/pages/create-app.tsx
-
6src/components/pages/developers.tsx
-
91src/components/pages/view-app.tsx
-
6src/selectors/entities.ts
-
2src/styles/app.scss
-
3src/types/entities.ts
-
5src/types/index.ts
-
21src/types/store.ts
@ -0,0 +1,91 @@ |
|||||
|
import React, { FC, useEffect } from 'react' |
||||
|
import { useSelector, useDispatch } from 'react-redux' |
||||
|
import { useParams, useHistory } from 'react-router-dom' |
||||
|
import moment from 'moment' |
||||
|
|
||||
|
import { handleApiError } from 'src/api/errors' |
||||
|
import { fetchApp } from 'src/actions/apps' |
||||
|
import { getAuthenticatedUserId } from 'src/selectors/authentication' |
||||
|
import { getEntity } from 'src/selectors/entities' |
||||
|
|
||||
|
import { setTitle } from 'src/utils' |
||||
|
import { AppState, AppThunkDispatch, EntityType, App } from 'src/types' |
||||
|
|
||||
|
import PageHeader from 'src/components/page-header' |
||||
|
import Loading from 'src/components/pages/loading' |
||||
|
|
||||
|
interface Params { |
||||
|
id: string |
||||
|
} |
||||
|
|
||||
|
const ViewApp: FC = () => { |
||||
|
const { id } = useParams<Params>() |
||||
|
const app = useSelector<AppState, App | undefined>(state => getEntity<App>(state, EntityType.App, id)) |
||||
|
const selfId = useSelector<AppState, string | undefined>(getAuthenticatedUserId) |
||||
|
const dispatch = useDispatch<AppThunkDispatch>() |
||||
|
const history = useHistory() |
||||
|
|
||||
|
useEffect(() => { |
||||
|
try { |
||||
|
dispatch(fetchApp(id)) |
||||
|
} catch (err) { |
||||
|
handleApiError(err, dispatch, history) |
||||
|
} |
||||
|
}, []) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (app) setTitle(app.name) |
||||
|
}, [app]) |
||||
|
|
||||
|
if (!app) return <Loading /> |
||||
|
|
||||
|
const isCreator = app.user.id === selfId |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<PageHeader title={app.name} /> |
||||
|
|
||||
|
<div className="main-content"> |
||||
|
<nav className="level"> |
||||
|
<div className="level-item has-text-centered"> |
||||
|
<div> |
||||
|
<p className="heading">Users</p> |
||||
|
<p className="title">0</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="level-item has-text-centered"> |
||||
|
<div> |
||||
|
<p className="heading">Rating</p> |
||||
|
<p className="title">{app.rating || '0'}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{app.companyName && |
||||
|
<div className="level-item has-text-centered"> |
||||
|
<div> |
||||
|
<p className="heading">Company</p> |
||||
|
<p className="title">{app.companyName}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<div className="level-item has-text-centered"> |
||||
|
<div> |
||||
|
<p className="heading">Updated</p> |
||||
|
<p className="title">{moment(app.updated).format('MMMM Do, YYYY')}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<div className="centered-content"> |
||||
|
<p>{app.about}</p> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default ViewApp |
Write
Preview
Loading…
Cancel
Save
Reference in new issue