Skip to content

Commit

Permalink
Newsletter in progress closes #115 #114
Browse files Browse the repository at this point in the history
  • Loading branch information
JPI-Tech committed Jul 27, 2020
1 parent 95d85da commit 36257fb
Show file tree
Hide file tree
Showing 8 changed files with 161 additions and 17 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
Current Sketch File: https://drive.google.com/open?id=1te2BRyotmrfZk538s-tMRWjmUR_Ue7RK
Current Sketch File: N/A

# Development

1. Clone the repo
```
git clone https://github.com/setlife-network/website
git clone https://github.com/JPI-Tech/trshmag.git
```

2. Install packages
Expand Down
Binary file modified src/.DS_Store
Binary file not shown.
Binary file modified src/components/.DS_Store
Binary file not shown.
142 changes: 142 additions & 0 deletions src/components/Calendar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import React, { Component } from 'react'

import { Container, Image, Row, Col } from 'react-bootstrap';
import moment from 'moment'

import { API_ROOT } from '../constants'


// Moment var currentYear = check.format('YYYY');
const monthCompare = (a, b) => {
const months = {
'January-2019.md': 11,
'February-2019.md': 10,
'March-2019.md': 9,
'April-2019.md': 8,
'May-2019.md': 7,
'June-2019.md': 6,
'July-2019.md': 5,
'August-2019.md': 4,
'September-2019.md': 3,
'October-2019.md': 2,
'November-2019.md': 1,
'December-2019.md': 0
}

return months[a] - months[b]
}

class Calendar extends Component {

state = {
newsletters: [],
}
componentDidMount() {

fetch(`${API_ROOT}/fetchAllNewsletters`)
.then(response => {
if (response.ok) {
return Promise.resolve(response);
} else {
return Promise.reject(new Error(response.statusText));
}
})
.then(response => response.json())
.then(response => {
const newsletters = response
this.setState({ newsletters: newsletters })
})
.catch(error => {
console.log('Looks like there was a problem!', error)
this.props.history.push('/')
})

}


renderNewsletters = () => {
// anti pattern
// this setState();
const sortedNewsletters = this.state.newsletters.sort(monthCompare)
return this.state.newsletters.map(t => {

var url = `/newsletters/${t}`
url = url.slice(0, -3)
console.log(url)
return (
// <Col>
<Row >
<Col className='p-3 border border-primary' xs={12} sm={4} >{t}</Col>
<Col className='p-3 border border-primary' xs={12} sm={4}>Feb</Col>
<Col className='p-3 border border-primary' xs={12} sm={4}>March</Col>
</Row>
// </Col>
)
});
}

render() {
const {
content,
changeLanguage,
} = this.props

return (
<Container className='' xs={12} sm={4}>
{this.renderNewsletters()}
</Container>
);
}
}

export default Calendar



// <Container className='text-center '>
// {/* <div className='text-center col-centered'> */}
// <div className='pb-2'>
// 2019
// </div>
// <Row lg={2} className='max-width-670'>
// <Col className='p-3 border border-primary' xs={12} sm={4} >January</Col>
// <Col className='p-3 border border-primary' xs={12} sm={4}>Feb</Col>
// <Col className='p-3 border border-primary' xs={12} sm={4}>March</Col>
// </Row>
// <Row lg={2} className='max-width-670'>
// <Col className='p-3' xs={12} sm={4}>April</Col>
// <Col className='p-3' xs={12} sm={4}>May</Col>
// <Col className='p-3' xs={12} sm={4}>June</Col>
// </Row>
// <Row lg={2}className='max-width-670'>
// <Col className='p-3' xs={12} sm={4}>July</Col>
// <Col className='p-3' xs={12} sm={4}>Aug</Col>
// <Col className='p-3' xs={12} sm={4}>Sep</Col>
// </Row>
// <Row lg={2} className='max-width-670'>
// <Col className='p-3' xs={12} sm={4}>Oct</Col>
// <Col className='p-3' xs={12} sm={4}>Nov</Col>
// <Col className='p-3' xs={12} sm={4}>Dec</Col>
// </Row>
// {/* </div> */}
// </Container>


// renderNewsletters = () => {

// this.state.newsletters.sort(monthCompare)
// return this.state.newsletters.map(t => {

// var url = `/newsletters/${t}`
// url = url.slice(0, -3)

// return (
// <div >
// <a href={url}>
// {moment(url.slice(13), 'MMM - Y').format('MMMM YYYY')}
// </a>
// </div>
// )
// });
// }

2 changes: 1 addition & 1 deletion src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ class Header extends Component {
</Row>

<Navbar.Collapse className='justify-content-end' style={{ }}>

{this.renderHeaderLinks()}
{/* {this.renderHeaderButton()} */}

Expand Down
3 changes: 2 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

// import Calendar from './components/Calendar.js';
import './styles/index.scss';

import App from './App';

render(
<BrowserRouter>
<App />
{/* <Calendar / > */}
</BrowserRouter>,
document.getElementById('root')
);
25 changes: 13 additions & 12 deletions src/pages/NewslettersPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import moment from 'moment'

import Header from '../components/Header'
import Footer from '../sections/Footer'
import Calendar from '../components/Calendar.js';


import { API_ROOT } from '../constants'

const Section = styled(Row)`
margin:50px;
margin:10px;
`

const monthCompare = (a, b) => {
Expand Down Expand Up @@ -68,11 +70,11 @@ class NewslettersPage extends Component {
url = url.slice(0, -3)

return (
<li>
<div>
<a href={url}>
{moment(url.slice(13), 'MMM - Y').format('MMMM YYYY')}
</a>
</li>
</div>
)
});
}
Expand All @@ -94,18 +96,17 @@ class NewslettersPage extends Component {

{this.state.newsletters
&& (
<Section>
<Row>
<Col />
<Col xs={10}>
<p>
<Section className='text-center'>

<Col className='mt-5'>
{/* <p> */}

{this.renderNewsletters()}
{/* {this.renderNewsletters()} */}
<Calendar />

</p>
{/* </p> */}
</Col>
<Col />
</Row>

</Section>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/sections/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Section = styled(Row)`


const Header = () => (
<Section>
<Section className='fixed-bottom'>

<Col md={11} className='mx-auto'>

Expand Down

0 comments on commit 36257fb

Please sign in to comment.