ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-06 02:36:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

connect developers profile to store

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-17 10:36:20 +02:00
parent cf120854ee
commit cb716e9f17
3 changed files with 54 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/DevProfile.tsx
View file

@ -26,7 +26,7 @@ const DevProfile: FC<DevSummary> = ({
</a>
</div>
<ul>
{skills.map((s, i) => (
{skills?.map((s, i) => (
<li className="text-primary" key={i}>
<FontAwesomeIcon icon={faCheck} /> {s}
</li>

23
src/models/Dev.ts
View file

@ -146,4 +146,27 @@ export const dummyDev: Dev = {
},
],
};
/** dummy devSummary profiles for debug and development only */
export const developers: DevSummary[] = [
{
id: '0',
displayName: 'John Doe',
picture:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
description: 'Developer at Microsoft',
location: 'Seattle, WA',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
},
{
id: '42',
displayName: 'Ruidy Nemausat',
picture:
'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
description: 'Fullstack Engineer at DESY',
location: 'Hamburg, DE',
skills: ['React', 'TypeScript', 'Redux', 'Nodejs'],
},
];
export default Dev;

70
src/pages/Developers.tsx
View file

@ -1,49 +1,39 @@
import React, {FC} from 'react';
// Redux
import {compose} from 'redux';
import {connect} from 'react-redux';
import {firestoreConnect} from 'react-redux-firebase';
import {RootState} from '../store';
// Style
import Header from '../components/Header';
import DevProfile from '../components/DevProfile';
import {DevSummary} from '../models/Dev';
interface IProps {
developers: DevSummary[];
}
/**
* Developers list page
*/
// const Developers: FC<DevSummary[]> = (developers) => {
const Developers: FC = () => {
const developers: DevSummary[] = [
{
id: '0',
displayName: 'John Doe',
picture:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
description: 'Developer at Microsoft',
location: 'Seattle, WA',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
},
{
id: '42',
displayName: 'Ruidy Nemausat',
picture:
'https://lh3.googleusercontent.com/a-/AOh14GhncH95MWKwPR3TRKy4eVd4n6w0-fobe4dhiam2xA',
description: 'Fullstack Engineer at DESY',
location: 'Hamburg, DE',
skills: ['React', 'TypeScript', 'Redux', 'Nodejs'],
},
];
const Developers: FC<IProps> = ({developers}) => (
<section className="container">
<Header
title="Developers"
lead="Browse and connect with developers"
icon="connectdevelop"
/>
<div className="profiles">
{developers?.map(dev => (
// use spread operator to pass props
<DevProfile key={dev.id} {...dev} />
))}
</div>
</section>
);
return (
<section className="container">
<Header
title="Developers"
lead="Browse and connect with developers"
icon="connectdevelop"
/>
<div className="profiles">
{developers.map(dev => (
// use spread operator to pass props
<DevProfile key={dev.id} {...dev} />
))}
</div>
</section>
);
};
export default Developers;
export default compose<FC>(
firestoreConnect(() => ['users']), // or { collection: 'users' }
connect((state: RootState, props) => ({
developers: state.firestore.ordered.users,
})),
)(Developers);