1
0
Fork 0
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:
unknown 2021-05-10 19:02:16 +02:00
parent 2acc3b72ec
commit 78acede8ab
15 changed files with 230 additions and 27 deletions

View file

@ -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);