mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-23 21:29:37 +02:00
Apps actions and reducer
This commit is contained in:
parent
2acc3b72ec
commit
78acede8ab
15 changed files with 230 additions and 27 deletions
|
@ -1,32 +1,59 @@
|
|||
import { Fragment } from 'react';
|
||||
import { Fragment, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// Redux
|
||||
import { connect } from 'react-redux';
|
||||
import { getApps } from '../../store/actions';
|
||||
|
||||
// Typescript
|
||||
import { App } from '../../interfaces';
|
||||
|
||||
// CSS
|
||||
import classes from './Apps.module.css';
|
||||
|
||||
// UI
|
||||
import { Container } from '../UI/Layout/Layout';
|
||||
import Headline from '../UI/Headlines/Headline/Headline';
|
||||
import Spinner from '../UI/Spinner/Spinner';
|
||||
|
||||
// Subcomponents
|
||||
import AppCard from './AppCard/AppCard';
|
||||
|
||||
const Apps = (): JSX.Element => {
|
||||
interface ComponentProps {
|
||||
getApps: Function;
|
||||
apps: App[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const Apps = (props: ComponentProps): JSX.Element => {
|
||||
useEffect(() => {
|
||||
props.getApps()
|
||||
}, [props.getApps]);
|
||||
|
||||
return (
|
||||
<div className={classes.Apps}>
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
<AppCard />
|
||||
</div>
|
||||
<Container>
|
||||
<Headline
|
||||
title='Pinned Apps'
|
||||
subtitle={<Link to='/'>Go back</Link>}
|
||||
/>
|
||||
<Headline title='All Apps' />
|
||||
<div className={classes.Apps}>
|
||||
{props.loading
|
||||
? 'loading'
|
||||
: props.apps.map((app: App): JSX.Element => {
|
||||
return <AppCard key={app.id} app={app} />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default Apps;
|
||||
const mapStateToProps = (state: any) => {
|
||||
return {
|
||||
apps: state.app.apps,
|
||||
loading: state.app.loading
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, { getApps })(Apps);
|
Loading…
Add table
Add a link
Reference in a new issue