Feature/trainers (#29)

* chore: update Trainer component and add tests

* chore: add TrainersList tests

* Disable lint for redux devtools extension

* chore: update argument naming to be more meaningful

* Add react-svg-piechart (#24)

* Add react-svg-piechart

* Update after CR

package.json

@@ -9,6 +9,7 @@
         "react-dom": "^16.3.2",
         "react-redux": "^5.0.7",
         "react-scripts": "1.1.4",
+        "react-svg-piechart": "^2.1.1",
         "redux": "^4.0.0",
         "redux-thunk": "^2.2.0",
         "styled-components": "^3.2.6"

src/index.js

@@ -9,10 +9,8 @@ import thunk from 'redux-thunk';
 
 import './styles/reset.css';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 
 const rootReducer = combineReducers({ topic: topicReducer, auth: authReducer });
-
 const store = createStore(rootReducer, applyMiddleware(thunk));
 
 ReactDOM.render(
@@ -21,4 +19,3 @@ ReactDOM.render(
     </Provider>,
     document.getElementById('root')
 );
-registerServiceWorker();

src/settings.js

@@ -0,0 +1 @@
+export const VOTES_NEEDED = 40;

src/shared/services/TopicService.js

@@ -16,25 +16,29 @@ export default class TopicService {
                 title: 'React Basic',
                 describe: 'Lorem ipsum',
                 trainers: TopicService.people,
-                members: TopicService.people
+                members: TopicService.people,
+                likes: 10,
             }),
         TopicModel.fromBackendData({
             title: 'React Native Basic',
             describe: 'Lorem ipsum',
             trainers: TopicService.people,
-            members: TopicService.people
+            members: TopicService.people,
+            likes: 39,
         }),
         TopicModel.fromBackendData({
             title: 'React + Redux',
             describe: 'Lorem ipsum',
             trainers: TopicService.people,
-            members: TopicService.people
+            members: TopicService.people,
+            likes: 13,
         }),
         TopicModel.fromBackendData({
             title: 'React + Redux + Thunk',
             describe: 'Lorem ipsum',
             trainers: TopicService.people,
-            members: TopicService.people
+            members: TopicService.people,
+            likes: 0,
         }),
     ];
 

src/topic/components/Participants.js

@@ -1,17 +1,42 @@
 import React from 'react';
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import PieChart from 'react-svg-piechart';
+import Colors from '../../styles/Colors';
+import {VOTES_NEEDED} from '../../settings';
+
+const Participants = ({likes}) => {
+    const missingVotes = VOTES_NEEDED - likes;
+    const chartData = [
+        {title: 'Liczba głosów', value: likes, color: Colors.yellow},
+        {title: 'Brakujące Głosy', value: missingVotes, color: Colors.red},
+    ];
+
+    return (<StyledParticipants>
+        <PieChart
+            data={chartData}
+            expandOnHover
+            onSectorHover={(d, i, e) => {
+                if (d) {
+                    // eslint-disable-next-line no-console
+                    console.log('Mouse enter - Index:', i, 'Data:', d, 'Event:', e);
+                } else {
+                    // eslint-disable-next-line no-console
+                    console.log('Mouse leave - Index:', i, 'Event:', e);
+                }
+            }}
+        />
 
-const Participants = props => (
-    <StyledParticipants>
-        <img src="chart.PNG" alt="chart"/>
     </StyledParticipants>
-);
+    );
+};
 
 const StyledParticipants = styled.figure`
     flex: 1;
-    img {
-        width: 100px;
-    }
 `;
 
+Participants.propTypes = {
+    likes: PropTypes.number,
+};
+
 export default Participants;

src/topic/components/Topic.js

@@ -10,7 +10,7 @@ const Topic = props => (
     <RowWrapper>
         <TopicDescription/>
         <TrainersList trainers={props.topic.trainers}/>
-        <Participants/>
+        <Participants likes={props.topic.likes}/>
     </RowWrapper>
 );