Extract Container from index.js to pages' components

AgileVentures · Feb 19, 2019 · 9767922 · 9767922
1 parent 39d1685
commit 9767922
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 82 deletions.
diff --git a/src/containers/ProjectsList.js b/src/containers/ProjectsList.js
@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react'
-import { Card, Header, Button, Grid, Popup, Icon } from 'semantic-ui-react'
+import { Card, Header, Button, Grid, Popup, Icon, Container } from 'semantic-ui-react'
 import { connect } from 'react-redux'
 import { fetchProjects } from '../actions/getProjectsAction'
 import { setLastLocation } from '../actions/setLastLocationAction'
@@ -172,72 +172,74 @@ export class ProjectsList extends Component {
 
     return (
       <Fragment>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column width={12}>
-              <Grid columns={2}>
-                <Grid.Row>
-                  <Grid.Column floated='left' width={9}>
-                    <Header className='projects-list-header' as='h1'>
+        <Container>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width={12}>
+                <Grid columns={2}>
+                  <Grid.Row>
+                    <Grid.Column floated='left' width={9}>
+                      <Header className='projects-list-header' as='h1'>
                       List of Projects
-                    </Header>
-                  </Grid.Column>
-                  <Grid.Column floated='right' width={3}>
-                    <a href='/projects/new'>
-                      <Popup
-                        position='right center'
-                        trigger={
-                          <Button basic style={{ marginTop: '16px' }}>
-                            <Icon name='plus' id='new-proj-icon' />
-                          </Button>
-                        }
-                        content='New Project!'
-                      />
-                    </a>
-                  </Grid.Column>
-                </Grid.Row>
-              </Grid>
-              <div>
-                <p>
+                      </Header>
+                    </Grid.Column>
+                    <Grid.Column floated='right' width={3}>
+                      <a href='/projects/new'>
+                        <Popup
+                          position='right center'
+                          trigger={
+                            <Button basic style={{ marginTop: '16px' }}>
+                              <Icon name='plus' id='new-proj-icon' />
+                            </Button>
+                          }
+                          content='New Project!'
+                        />
+                      </a>
+                    </Grid.Column>
+                  </Grid.Row>
+                </Grid>
+                <div>
+                  <p>
                   To get involved in any of the projects, join one of the
-                  <Link to={`/events`}> scrums </Link>and reach out to us, or
+                    <Link to={`/events`}> scrums </Link>and reach out to us, or
                   send us an email at
-                  <a href='mailto:info@agileventures.org'>
-                    {' '}
+                    <a href='mailto:info@agileventures.org'>
+                      {' '}
                     info@agileventures.org
-                  </a>
+                    </a>
                   .
-                </p>
-              </div>
-              <div className='search-dropdown'>
-                <Select
-                  value={selectedLanguage}
-                  options={this.populateLanguagesDropdown()}
-                  onChange={this.handleFilterProjects}
-                  placeholder='Search for project by programming language...'
-                  isClearable
-                />
-              </div>
-              <Card.Group centered itemsPerRow={3}>
-                <Paginate
-                  items={filteredProjectsList || projectsList}
-                  Component={Project}
-                  pageCount={pageCount}
-                  error={error ? <ErrorBoundary /> : false}
-                />
-              </Card.Group>
-              {!(pageCount === 1) ? (
-                <PaginationLinks
-                  pageCount={pageCount}
-                  selectedPage={this.state.selectedPage}
-                  handlePageSelect={this.handlePageSelect}
-                  firstPage={this.state.firstPage}
-                  lastPage={this.state.lastPage}
-                />
-              ) : null}
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
+                  </p>
+                </div>
+                <div className='search-dropdown'>
+                  <Select
+                    value={selectedLanguage}
+                    options={this.populateLanguagesDropdown()}
+                    onChange={this.handleFilterProjects}
+                    placeholder='Search for project by programming language...'
+                    isClearable
+                  />
+                </div>
+                <Card.Group centered itemsPerRow={3}>
+                  <Paginate
+                    items={filteredProjectsList || projectsList}
+                    Component={Project}
+                    pageCount={pageCount}
+                    error={error ? <ErrorBoundary /> : false}
+                  />
+                </Card.Group>
+                {!(pageCount === 1) ? (
+                  <PaginationLinks
+                    pageCount={pageCount}
+                    selectedPage={this.state.selectedPage}
+                    handlePageSelect={this.handlePageSelect}
+                    firstPage={this.state.firstPage}
+                    lastPage={this.state.lastPage}
+                  />
+                ) : null}
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Container>
       </Fragment>
     )
   }

diff --git a/src/containers/UsersList.js b/src/containers/UsersList.js
@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react'
-import { Header, Card, Grid } from 'semantic-ui-react'
+import { Header, Card, Grid, Container } from 'semantic-ui-react'
 import Paginate from '../components/Paginate'
 import PaginationLinks from '../components/PaginationLinks'
 import { connect } from 'react-redux'
@@ -78,27 +78,29 @@ export class UsersList extends Component {
     } = 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}
+        <Container>
+          <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}
                 />
-              </Card.Group>
-              <PaginationLinks
-                handlePageSelect={this.handlePageSelect}
-                firstPage={firstPage}
-                lastPage={lastPage}
-                pageCount={pageCount}
-                selectedPage={selectedPage}
-              />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Container>
       </Fragment>
     )
   }