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
-
33src/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