diff --git a/src/app/settings/App/Subscriptions/Wrapper.ts b/src/app/settings/App/ScreenWrapper.ts similarity index 100% rename from src/app/settings/App/Subscriptions/Wrapper.ts rename to src/app/settings/App/ScreenWrapper.ts diff --git a/src/app/settings/App/Settings.tsx b/src/app/settings/App/Settings.tsx deleted file mode 100644 index d7fda6425..000000000 --- a/src/app/settings/App/Settings.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { Contributor } from 'app/lmem/contributor'; -import ContributorNav from 'components/organisms/ContributorNav/ContributorNav'; -import ContributorComponent from 'components/organisms/Contributor/ContributorLarge'; -import { SettingsState } from '../store/reducers'; -import { getContributors } from '../store/selectors/contributors.selectors'; -import { connect } from 'react-redux'; - -const mapStateToProps = (state: SettingsState) => ({ - contributors: getContributors(state) -}); - -interface Props { - contributors: Contributor[]; -} - -const Settings = ({ contributors }: Props) => ( - <> - - {contributors.map(contributor => ( - - ))} - -); - -export default connect(mapStateToProps)(Settings); diff --git a/src/app/settings/App/Subscriptions/Subscriptions.stories.tsx b/src/app/settings/App/Subscriptions/Subscriptions.stories.tsx deleted file mode 100644 index ab68c9960..000000000 --- a/src/app/settings/App/Subscriptions/Subscriptions.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import Subscriptions from './Subscriptions'; -import SubscriptionsEmpty from './SubscriptionsEmpty'; -import Suggestions from './Suggestions'; - -storiesOf('screens/SubscriptionsScreen', module) - .add('subcriptions', () => ) - .add('subcriptions empty', () => ) - .add('suggestions', () => ); diff --git a/src/app/settings/App/Subscriptions/Subscriptions.tsx b/src/app/settings/App/Subscriptions/Subscriptions.tsx deleted file mode 100644 index 87d3cd6d8..000000000 --- a/src/app/settings/App/Subscriptions/Subscriptions.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import Wrapper from './Wrapper'; -import Logo from 'components/atoms/icons/Logo'; -import Button from 'components/atoms/Button'; -import CenterContainer from 'components/atoms/CenterContainer'; -import ContributorNav from 'components/organisms/ContributorNav/ContributorNav'; -import Contributor from 'components/organisms/Contributor/ContributorLarge'; -import ContributorCompact from 'components/organisms/Contributor/ContributorCompact'; -import { generateContributor } from '../../../../../test/fakers/generateContributor'; - -const BullesLogo = styled.div` - width: 90px; - height: auto; - margin-top: 30px; - margin-bottom: 30px; -`; - -const ContributorsWidth = styled.section``; - -const Contributors2col = styled.div` - display: grid; - grid-column-gap: 55px; - grid-template-columns: auto 290px; -`; - -const ContributorsList = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-column-gap: 40px; - grid-row-gap: 40px; -`; - -const ContributorsAside = styled.aside` - ${Button} { - margin-top: 10px; - } -`; -const ContributorsAsideTitle = styled.h2` - margin: 0 0 5px; - font-size: 20px; - color: ${props => props.theme.activeColor}; - font-weight: bold; -`; - -const Settings = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - Suggestions - - - - - - - - - - - - - - -); - -export default Settings; diff --git a/src/app/settings/App/Subscriptions/SubscriptionsEmpty.tsx b/src/app/settings/App/Subscriptions/SubscriptionsEmpty.tsx deleted file mode 100644 index 618e266d5..000000000 --- a/src/app/settings/App/Subscriptions/SubscriptionsEmpty.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import BackgroundButton from 'components/atoms/Button/BackgroundButton/BackgroundButton'; -import Logo from 'components/atoms/icons/Logo'; -import ContributorNav from 'components/organisms/ContributorNav/ContributorNav'; -import Wrapper from './Wrapper'; - -const BullesLogo = styled.div` - width: 90px; - height: auto; - margin-top: 30px; - margin-bottom: 30px; -`; - -const SubscriptionsEmpty = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 100px; - color: #66696a; -`; - -const EmptyTitle = styled.h1` - margin: 0 0 3px; - font-size: 24px; -`; - -const EmptyText = styled.p` - margin: 0 0 20px; - font-size: 18px; - text-align: center; -`; - -const EmptyButton = styled(BackgroundButton)` - height: auto; - padding: 10px 25px; - font-size: 20px; - text-transform: uppercase; -`; - -const Settings = () => ( - - - - - - - - - Aucun abonnement. - - - Veuillez vous abonner à des contributeurs dans la -
partie “Suggestions” - - - Choisir mes contributeurs - - -); - -export default Settings; diff --git a/src/app/settings/App/Subscriptions/Suggestions.tsx b/src/app/settings/App/Subscriptions/Suggestions.tsx deleted file mode 100644 index 027d7f49d..000000000 --- a/src/app/settings/App/Subscriptions/Suggestions.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; - -import styled from 'styled-components'; -import Logo from 'components/atoms/icons/Logo'; -import ContributorNav from 'components/organisms/ContributorNav/ContributorNav'; -import Contributor from 'components/organisms/Contributor/ContributorLarge'; -import Wrapper from './Wrapper'; -import BottomLine from './BottomLine'; -import { generateContributor } from '../../../../../test/fakers/generateContributor'; - -const BullesLogo = styled.div` - width: 90px; - height: auto; - margin-top: 30px; - margin-bottom: 30px; -`; - -const ContributorsWidth = styled.section` - padding-bottom: 250px; -`; - -const ContributorsList = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-column-gap: 40px; - grid-row-gap: 40px; -`; - -const Settings = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default Settings; diff --git a/src/app/settings/App/SubscriptionsScreen/Empty.tsx b/src/app/settings/App/SubscriptionsScreen/Empty.tsx new file mode 100644 index 000000000..bb2a361bd --- /dev/null +++ b/src/app/settings/App/SubscriptionsScreen/Empty.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import styled from 'styled-components'; +import BackgroundButton from 'components/atoms/Button/BackgroundButton/BackgroundButton'; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 100px; + color: #66696a; +`; + +const EmptyTitle = styled.h1` + margin: 0 0 3px; + font-size: 24px; +`; + +const EmptyText = styled.p` + margin: 0 0 20px; + font-size: 18px; + text-align: center; +`; + +const EmptyButton = styled(BackgroundButton)` + height: auto; + padding: 10px 25px; + font-size: 20px; + text-transform: uppercase; +`; + +const Empty = () => ( + + Aucun abonnement. + + + Veuillez vous abonner à des contributeurs dans la +
partie “Suggestions” + + + Choisir mes contributeurs + +); + +export default Empty; diff --git a/src/app/settings/App/SubscriptionsScreen/Subscriptions.stories.tsx b/src/app/settings/App/SubscriptionsScreen/Subscriptions.stories.tsx new file mode 100644 index 000000000..e7699006a --- /dev/null +++ b/src/app/settings/App/SubscriptionsScreen/Subscriptions.stories.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import Subscriptions from './SubscriptionsScreen'; +import SubscriptionsEmpty from './Empty'; + +storiesOf('screens/SubscriptionsScreen', module) + .add('subcriptions', () => ) + .add('subcriptions empty', () => ); diff --git a/src/app/settings/App/SubscriptionsScreen/SubscriptionsScreen.tsx b/src/app/settings/App/SubscriptionsScreen/SubscriptionsScreen.tsx new file mode 100644 index 000000000..684036777 --- /dev/null +++ b/src/app/settings/App/SubscriptionsScreen/SubscriptionsScreen.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Contributor } from 'app/lmem/contributor'; +import Logo from 'components/atoms/icons/Logo'; +import Button from 'components/atoms/Button'; +import CenterContainer from 'components/atoms/CenterContainer'; +import ContributorNav from 'components/organisms/ContributorNav/ContributorNav'; +import ContributorLarge from 'components/organisms/Contributor/ContributorLarge'; +import ContributorCompact from 'components/organisms/Contributor/ContributorCompact'; +import Wrapper from '../ScreenWrapper'; +import withConnect from './withConnect'; +import Empty from './Empty'; + +const BullesLogo = styled.div` + width: 90px; + height: auto; + margin-top: 30px; + margin-bottom: 30px; +`; + +const ContributorsWidth = styled.section``; + +const Contributors2col = styled.div` + display: grid; + grid-column-gap: 55px; + grid-template-columns: auto 290px; +`; + +const ContributorsList = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-column-gap: 40px; + grid-row-gap: 40px; +`; + +const ContributorsAside = styled.aside` + ${Button} { + margin-top: 10px; + } +`; +const ContributorsAsideTitle = styled.h2` + margin: 0 0 5px; + font-size: 20px; + color: ${props => props.theme.activeColor}; + font-weight: bold; +`; + +interface Props { + subscriptions: Contributor[]; + suggestions6: Contributor[]; +} + +const SubscriptionsScreen = ({ subscriptions, suggestions6 }: Props) => ( + + + + + + + + {subscriptions.length ? ( + + + + {subscriptions.map(contributor => ( + + ))} + + + + + Suggestions + + {suggestions6.map(contributor => ( + + ))} + + + + + + + ) : ( + + )} + +); + +export default withConnect(SubscriptionsScreen); diff --git a/src/app/settings/App/SubscriptionsScreen/withConnect.ts b/src/app/settings/App/SubscriptionsScreen/withConnect.ts new file mode 100644 index 000000000..41dfbe7f5 --- /dev/null +++ b/src/app/settings/App/SubscriptionsScreen/withConnect.ts @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { SettingsState } from '../../store/reducers'; +import { + getSubscriptions, + makeGetNContributorsSuggestions +} from '../../store/selectors/contributors.selectors'; + +const get6Suggestions = makeGetNContributorsSuggestions(6); + +const mapStateToProps = (state: SettingsState) => ({ + subscriptions: getSubscriptions(state), + suggestions6: get6Suggestions(state) +}); + +export default connect(mapStateToProps); diff --git a/src/app/settings/App/Subscriptions/BottomLine.tsx b/src/app/settings/App/SuggestionsScreen/BottomLine.tsx similarity index 100% rename from src/app/settings/App/Subscriptions/BottomLine.tsx rename to src/app/settings/App/SuggestionsScreen/BottomLine.tsx diff --git a/src/app/settings/App/SuggestionsScreen/Subscriptions.stories.tsx b/src/app/settings/App/SuggestionsScreen/Subscriptions.stories.tsx new file mode 100644 index 000000000..4c2619ae3 --- /dev/null +++ b/src/app/settings/App/SuggestionsScreen/Subscriptions.stories.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import Suggestions from './SuggestionsScreen'; + +storiesOf('screens/SuggestionsScreen', module).add('suggestions', () => ( + +)); diff --git a/src/app/settings/App/SuggestionsScreen/SuggestionsScreen.tsx b/src/app/settings/App/SuggestionsScreen/SuggestionsScreen.tsx new file mode 100644 index 000000000..919223f66 --- /dev/null +++ b/src/app/settings/App/SuggestionsScreen/SuggestionsScreen.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Contributor } from 'app/lmem/contributor'; +import Logo from 'components/atoms/icons/Logo'; +import ContributorNav from 'components/organisms/ContributorNav/ContributorNav'; +import ContributorLarge from 'components/organisms/Contributor/ContributorLarge'; +import Wrapper from '../ScreenWrapper'; +import BottomLine from './BottomLine'; +import withConnect from './withConnect'; + +const BullesLogo = styled.div` + width: 90px; + height: auto; + margin-top: 30px; + margin-bottom: 30px; +`; + +const ContributorsWidth = styled.section` + padding-bottom: 250px; +`; + +const ContributorsList = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-column-gap: 40px; + grid-row-gap: 40px; +`; + +interface Props { + suggestions: Contributor[]; +} + +const Settings = ({ suggestions }: Props) => ( + + + + + + + + + + {suggestions.map(contributor => ( + + ))} + + + + + +); + +export default withConnect(Settings); diff --git a/src/app/settings/App/SuggestionsScreen/withConnect.ts b/src/app/settings/App/SuggestionsScreen/withConnect.ts new file mode 100644 index 000000000..24e7adb29 --- /dev/null +++ b/src/app/settings/App/SuggestionsScreen/withConnect.ts @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { SettingsState } from '../../store/reducers'; +import { + getContributorsSuggestions, + makeGetNContributorsSuggestions +} from '../../store/selectors/contributors.selectors'; + +const get6Suggestions = makeGetNContributorsSuggestions(6); + +const mapStateToProps = (state: SettingsState) => ({ + suggestions: getContributorsSuggestions(state), + suggestions6: get6Suggestions(state) +}); + +export default connect(mapStateToProps); diff --git a/src/app/settings/App/index.tsx b/src/app/settings/App/index.tsx index 7b84af9d2..0929798e2 100644 --- a/src/app/settings/App/index.tsx +++ b/src/app/settings/App/index.tsx @@ -4,13 +4,13 @@ import { ConnectedRouter } from 'connected-react-router'; import { ThemeProvider } from 'styled-components'; import theme from '../../theme'; import store, { history } from '../store'; -import Content from './Subscriptions/Subscriptions'; +import SubscriptionsScreen from './SubscriptionsScreen/SubscriptionsScreen'; const App = () => ( - + diff --git a/src/app/settings/store/sagas/index.ts b/src/app/settings/store/sagas/index.ts index a98ef08c9..59ebc94c7 100644 --- a/src/app/settings/store/sagas/index.ts +++ b/src/app/settings/store/sagas/index.ts @@ -1,5 +1,6 @@ +import { fork } from 'redux-saga/effects'; import createBackgroundChannelSaga from 'app/sagas/backgroundChannel'; export default function* rootSaga() { - yield createBackgroundChannelSaga('settings'); + yield fork(createBackgroundChannelSaga('settings')); } diff --git a/src/app/settings/store/selectors/contributors.selectors.ts b/src/app/settings/store/selectors/contributors.selectors.ts index 517d907ff..d8ed22e94 100644 --- a/src/app/settings/store/selectors/contributors.selectors.ts +++ b/src/app/settings/store/selectors/contributors.selectors.ts @@ -1,5 +1,15 @@ import { Contributor } from 'app/lmem/contributor'; import { SettingsState } from '../reducers'; +import { createSelector } from 'reselect'; +import * as R from 'ramda'; -export const getContributors = (state: SettingsState): Contributor[] => +export const getSubscriptions = (state: SettingsState): Contributor[] => state.contributors; + +export const getContributorsSuggestions = getSubscriptions; + +export const makeGetNContributorsSuggestions = (n: number) => + createSelector( + [getContributorsSuggestions], + R.take(n) + ); diff --git a/src/components/organisms/Contributor/Contributor.stories.tsx b/src/components/organisms/Contributor/Contributor.stories.tsx index 7af9f911c..249205983 100644 --- a/src/components/organisms/Contributor/Contributor.stories.tsx +++ b/src/components/organisms/Contributor/Contributor.stories.tsx @@ -6,4 +6,6 @@ import { generateContributor } from '../../../../test/fakers/generateContributor storiesOf('organisms/Contributor', module) .add('large', () => ) - .add('compact', () => ); + .add('compact', () => ( + + )); diff --git a/src/components/organisms/Contributor/ContributorCompact.tsx b/src/components/organisms/Contributor/ContributorCompact.tsx index 3759f8b3c..87bd74490 100644 --- a/src/components/organisms/Contributor/ContributorCompact.tsx +++ b/src/components/organisms/Contributor/ContributorCompact.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { Contributor } from 'app/lmem/contributor'; import Avatar from 'components/atoms/Avatar/Avatar'; import UserName from 'components/atoms/UserName/UserName'; import Stat from 'components/atoms/Stat/Stat'; @@ -47,15 +48,18 @@ const StatsWrapper = styled.div` } `; -export const Contributor = () => ( +interface Props { + contributor: Contributor; +} +export const ContributorCompact = ({ contributor }: Props) => ( - Jean Michel + {contributor.name} - 120 Bulles + {contributor.contributions} @@ -63,4 +67,4 @@ export const Contributor = () => ( ); -export default Contributor; +export default ContributorCompact; diff --git a/src/components/organisms/Contributor/ContributorLarge.tsx b/src/components/organisms/Contributor/ContributorLarge.tsx index 28c5a55ed..194c8915a 100644 --- a/src/components/organisms/Contributor/ContributorLarge.tsx +++ b/src/components/organisms/Contributor/ContributorLarge.tsx @@ -80,12 +80,7 @@ export const ContributorLarge = ({ contributor }: Props) => ( Voir un exemple de ses bulles - - Passionné d’infos et s’intox, je vous préviens parfois (mais pas toujours - ^^) quand vous êtes en train de consulter un hoax, c’est-à-dire un message - poignant, révoltant ou alarmant… mais faux ! Mes sources : Hoaxbuster, - HoaxKiller, Hoaxteam, Secuser.com. - + {contributor.intro} );