Newsletter in progress closes #115 #114

README.md

@@ -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

src/components/Calendar.js

@@ -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>
+//         )
+//     });
+// }
+

src/components/Header.js

@@ -95,7 +95,7 @@ class Header extends Component {
                         </Row>
 
                         <Navbar.Collapse className='justify-content-end' style={{ }}>
-
+                            
                             {this.renderHeaderLinks()}
                             {/* {this.renderHeaderButton()} */}
 

src/index.js

@@ -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')
 );

src/pages/NewslettersPage.js

@@ -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) => {
@@ -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>
             )
         });
     }
@@ -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>
                         )
                 }

src/sections/Footer.js

@@ -25,7 +25,7 @@ const Section = styled(Row)`
 
 
 const Header = () => (
-    <Section>
+    <Section className='fixed-bottom'>
 
         <Col md={11} className='mx-auto'>