9 add user and pagination components (#16)

* Add multiple files missing on creation

- Add Issue and Pull Request template
- Add License
- Add Code Of conduct

* Add UsersList container, test

fixes #5

* Bg fix style loader (#8)

* add path module

* add build cmd

* add new line

* fix style loader

* Add new lines at end of files

* Add pagination, user component

* Remove logic for extra links, import connected component

- We don't have 42 pages right now, as we're only getting 100 users
- copy and paste mistake

* Add Grid, styling

* semantic-ui assets (#13)

* semantic-ui assets

* exclude assets folders from coverage report

* add package.json

* Remove separate components from repo

* remove unused themes

* Install semantic ui (#14)

* add path module

* add build cmd

* add new line

* fix style loader

* config files and manual for customizing semantic ui

* keep only changes in site.variables

* removed unused import

* removed unused import from tests

* add semantic folder to gitignore

* add deleted test

* exclude assets folders from coverage report

* added assets

* clean assets

* Remove package-lock

* Readme modification

* Homepage (#15)

* add path module

* add build cmd

* add new line

* fix style loader

* config files and manual for customizing semantic ui

* keep only changes in site.variables

* removed unused import

* removed unused import from tests

* add semantic folder to gitignore

* add deleted test

* exclude assets folders from coverage report

* added assets

* clean assets

* add source files

* add images files

* add fixtures files

* fix jest failing on svg import

* rename page title

* render hemepage

* cleaned tests

* remove unused import from index page

* Remove extra space

* Add UsersList container, test

fixes #5

* Bg fix style loader (#8)

* add path module

* add build cmd

* add new line

* fix style loader

* Add pagination, user component

* Remove logic for extra links, import connected component

- We don't have 42 pages right now, as we're only getting 100 users
- copy and paste mistake

* Add Grid, styling

* Install semantic ui (#14)

* add path module

* add build cmd

* add new line

* fix style loader

* config files and manual for customizing semantic ui

* keep only changes in site.variables

* removed unused import

* removed unused import from tests

* add semantic folder to gitignore

* add deleted test

* exclude assets folders from coverage report

* added assets

* clean assets

* Remove package-lock

* Readme modification

* Fix styling for users cards

.babelrc

@@ -1,3 +1,8 @@
 {
-  "presets": ["react", "env"]
+  "presets": ["react", "env"],
+  "plugins": [
+    "transform-class-properties",
+    ["transform-runtime", { "polyfill": false, "regenerator": true }],
+    ["emotion"]
+  ]
 }

package.json

@@ -13,15 +13,22 @@
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
+    "react-spinners": "^0.5.1",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0",
     "semantic-ui-react": "^0.84.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-jest": "^23.6.0",
     "babel-loader": "7",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "coveralls": "^3.0.2",
@@ -33,7 +40,9 @@
     "jest": "^23.6.0",
     "jest-transform-css": "^2.0.0",
     "mini-css-extract-plugin": "^0.5.0",
+    "moxios": "^0.4.0",
     "node-sass": "^4.11.0",
+    "redux-mock-store": "^1.5.3",
     "regenerator-runtime": "^0.13.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",

src/actions/getUsersAction.js

@@ -0,0 +1,18 @@
+import axios from "axios";
+import { GET_USERS } from "../types";
+
+export let getUsers = users => ({ type: GET_USERS, payload: users });
+
+export let fetchUsers = () => dispatch => {
+  return axios
+    .get("/api/v1/users")
+    .then(response => {
+      let { users, gravatar_url, karma_total } = response.data;
+      users = users.map(user => {
+        user.gravatar_url = gravatar_url[user.id];
+        user.karma_total = karma_total[user.id];
+        return user;
+      });
+      dispatch(getUsers(users));
+    });
+};

src/assets/PaginationLinks.css

@@ -0,0 +1,39 @@
+.center {
+  text-align: center
+}
+
+.pagination {
+  display: inline-block;
+  padding-top: 20px;
+}
+
+.pagination span {
+  color: black;
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  font-size: 16px;
+}
+
+.pagination span.active {
+  background-color: #34495E;
+  color: white;
+  border: 1px solid #34495E;
+}
+
+.pagination span:hover:not(.active) {background-color: #ddd;}
+
+.pagination span:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.pagination span:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.hide-button {
+  display: none;
+}

src/assets/User.css

@@ -0,0 +1,7 @@
+.card-footer {
+  color: #ee7335 !important;
+}
+
+.card-header {
+  color: #ee7335 !important;
+}

src/assets/UsersList.css

@@ -0,0 +1,4 @@
+h1 {
+  font-size: 50px !important;
+  padding: 20px !important;
+}

src/components/Paginate.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { RingLoader } from "react-spinners";
+
+const Paginate = ({ items, Component }) => {
+  let itemsArray;
+  if (items.length) {
+    itemsArray = items.map(item => (
+      <Component key={item.id} item={item} />
+    ));
+  }
+  return (
+    itemsArray || (
+      <RingLoader
+        sizeUnit={"px"}
+        size={200}
+        color={"#34495E"}
+      />
+    )
+  );
+};
+
+export default Paginate;

src/components/PaginationLinks.js

@@ -0,0 +1,35 @@
+import React from "react";
+import "../assets/PaginationLinks.css";
+
+const PaginationLinks = ({
+  pageCount,
+  handlePageSelect,
+  selectedPage,
+  firstPage,
+  lastPage
+}) => {
+  const pageItems = [];
+  for (let i = 1; i <= pageCount; i++) {
+    pageItems.push(
+      <span
+        onClick={handlePageSelect(i)}
+        className={selectedPage === i ? "active" : undefined}
+        key={i}
+      >
+        {i}
+      </span>
+    );
+  }
+
+  return (
+    <div className="center">
+      <div className="pagination">
+        <span onClick={handlePageSelect(selectedPage - 1)} className={firstPage ? "hide-button" : undefined} >previous</span>
+        {pageItems}
+        <span onClick={handlePageSelect(selectedPage + 1)} className={lastPage ? "hide-button" : undefined} >next</span>
+      </div>
+    </div>
+  );
+};
+
+export default PaginationLinks;

src/components/User.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Card, Image, Icon } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import "../assets/User.css";
+
+const User = ({ item: user }) => {
+  return (
+    <Card className="user-card" raised={true}>
+      <Card.Content>
+        <Link to={`/users/${user.id}`}>
+          <Image
+            src={`${user.gravatar_url}`}
+            floated="left"
+            rounded={true}
+            size="tiny"
+          />
+          <big className="card-header">
+            <Card.Header>
+              {user.first_name
+                ? fullName(user).length >= 12
+                  ? fullName(user).substring(0, 10) + "..."
+                  : fullName(user)
+                : user.slug.substring(0, 15)}
+            </Card.Header>
+          </big>
+        </Link>
+        <p>
+          {user.title_list.length
+            ? user.title_list.map(title => title + " ")
+            : null}
+        </p>
+        <p className="card-footer">
+          <Icon name="fire" /> {}
+          {user.karma_total}
+        </p>
+      </Card.Content>
+    </Card>
+  );
+};
+
+const fullName = user => {
+  return user.first_name + " " + user.last_name;
+};
+export default User;

src/containers/UsersList.js

@@ -1,8 +1,105 @@
-import React, { Component } from "react";
-import { Header } from "semantic-ui-react";
-
+import React, { Component, Fragment } from "react";
+import { Header, Card, Grid } from "semantic-ui-react";
+import Paginate from "../components/Paginate";
+import PaginationLinks from "../components/PaginationLinks";
+import { connect } from "react-redux";
+import { fetchUsers } from "../actions/getUsersAction";
+import User from "../components/User";
+import "../assets/UsersList.css";
 export class UsersList extends Component {
+  state = {
+    firstPage: true,
+    lastPage: true,
+    pageCount: null,
+    usersList: [],
+    users: {},
+    selectedPage: 1
+  };
+
+  componentDidMount() {
+    if (!this.props.users.length) {
+      this.props.fetchUsers();
+    } else {
+      this.normalizeUsers(this.props.users);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.users.length !== nextProps.users.length) {
+      this.normalizeUsers(nextProps.users);
+    }
+  }
+
+  normalizeUsers(users) {
+    let pageCount = Math.ceil(users.length / 12);
+    let normalizedUsers = {};
+    let lastIndex = 0;
+
+    for (let i = 1; i <= pageCount; i++) {
+      if (i === 1) {
+        normalizedUsers[i] = users.slice(i - 1, i + 11);
+        lastIndex = i + 11;
+      } else {
+        normalizedUsers[i] = users.slice(lastIndex, lastIndex + 12);
+        lastIndex += 12;
+      }
+    }
+    this.setState({
+      users: normalizedUsers,
+      pageCount,
+      usersList: normalizedUsers[1],
+      lastPage: false
+    });
+  }
+
+  handlePageSelect = selectedPage => e => {
+    e.preventDefault();
+    this.setState({
+      usersList: this.state.users[selectedPage],
+      selectedPage,
+      firstPage: selectedPage - 1 < 1 ? true : false,
+      lastPage: selectedPage + 1 > this.state.pageCount ? true : false
+    });
+  };
+
   render() {
-    return <Header>Volunteers Directory</Header>;
+    let {
+      firstPage,
+      lastPage,
+      pageCount,
+      usersList,
+      selectedPage
+    } = this.state;
+    return (
+      <Fragment>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column width={12}>
+              <Header as="h1">Volunteers Directory</Header>
+              <Card.Group centered itemsPerRow={3}>
+                <Paginate
+                  items={usersList}
+                  Component={User}
+                  pageCount={pageCount}
+                />
+              </Card.Group>
+              <PaginationLinks
+                handlePageSelect={this.handlePageSelect}
+                firstPage={firstPage}
+                lastPage={lastPage}
+                pageCount={pageCount}
+                selectedPage={selectedPage}
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Fragment>
+    );
   }
 }
+
+const mapStateToProps = store => ({ users: store.users });
+export default connect(
+  mapStateToProps,
+  { fetchUsers }
+)(UsersList);