refactored code, added async and altered text to make it more user fr…

client/public/manifest.json

@@ -1,5 +1,5 @@
 {
-    "short_name": "Brick",
+    "short_name": "Brickworks",
     "name": "Brickworks-Tollington Project"
 
 }

client/public/style.css

@@ -412,4 +412,13 @@ hr.style2 {
 }
 *:focus {
   border: 5px solid orangered;
+}
+.grey {
+  color: grey;
+  text-shadow: 1px 1px black;
+  font-weight: 400;
+}
+.shadow {
+  text-shadow: 1px 1px lightgrey;
+  font-weight: 400;
 }

client/src/components/mainPageComponents/list.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import {textAlt} from '../utils/textAlt';
+import { render } from 'react-testing-library';
+
+class List extends React.Component {
+    componentDidMount=()=>{
+    const list = Array.from(document.getElementById("list").children);
+    textAlt(list);
+}
+    render(){
+    return (
+        <React.Fragment>
+            <h1 data-testid="resources-page">Resources</h1> 
+            <p className="question">Engaging in social action takes time, energy and passion.
+            <br/>
+            Here are our top 10 tips to get you started.</p>
+            <ol id="list">
+                <li className='top-ten-li'>
+                Identify a problem, challenge or issue in your neighbourhood and be specific about what you want to tackle.
+                </li>
+                <li className='top-ten-li'>
+                Do some research so that you have a good picture of the current situation, then develop and plan how to go about tackling the problem.
+                </li>
+                <li className='top-ten-li'>
+                Get together with others to share your research and explore the problem and potential solutions.
+                </li>
+                <li className='top-ten-li'>
+                Build a wider, more diverse community of collaborators who support your aims.
+                </li>
+                <li className='top-ten-li'>
+                Collaborate with those who might not share your opinions or support your aims so that you can overcome objections and gain different perspectives.           
+                </li>
+                <li className='top-ten-li'>
+                Promote your social action in your community and through the media; create a video and post it on the Brickworks website.
+                </li>
+                <li className='top-ten-li'>
+                Take action!
+                </li>
+                <li className='top-ten-li'>
+                Evaluate, reflect and record the impact of your action on the community.
+                </li>
+                <li className='top-ten-li'>
+                Share the impact of your action in creative and imaginative ways to capture attention.
+                </li>
+                <li className='top-ten-li'>Don't give up, have patience and be committed.</li>
+            </ol>
+        </React.Fragment>
+    )
+}
+}
+
+export default List;

client/src/components/pages/eventComp.js

@@ -119,6 +119,7 @@ const PastEvents = ({ pastEvents}) => {
   if(pastEvents.length !== 0){
     return (
       <React.Fragment>
+        <h2>Past Events</h2>
         {pastEvents.map( event => (
               <EventComp key={event.fields.event_id} {...event.fields} /> 
             ))} 

client/src/components/pages/inspirations.js

@@ -1,40 +1,47 @@
 import React from 'react';
+import {textAlt} from '../utils/textAlt'
 
 class Inspiration extends React.Component {
 
 componentDidMount = () => {
     if(process.env.NODE_ENV !== "test"){
     window.scrollTo(0,0);
     }
+    const list = Array.from(document.getElementById("s1").children).concat(Array.from(document.getElementById("s2").children))
+    textAlt(list);
 }
 
     render(){
         return(
     <main data-testid="inspirations-page" className='wrapper'>
     <h1>Local Inspirational Stories</h1>
         <h2> Building a community: The story of Brickworks</h2>
-            <p>
-                The Hanley Crouch Community Association (HCCA) has strong roots in social action and this culture of 'making a difference through social change' remains at our core - stimulating connectivity across our local community and feeding our sustainability. 
-            </p>
-            <p>
-                The HCCA was established in 1972 by a group of local residents who needed somewhere for their children to play - in a disused building that used to be a public laundry for people living on local estates, which was referred to locally and fondly as 'The Laundry'. Over the past forty years we have successfully facilitated provision of a diverse and inclusive multi-purpose community centre. Now, 'The Laundry' no longer exists but our commitment to grass-roots social action continues through our brand-new, purpose built community centre 'Brickworks'.
-            </p>
-            <p>
-                Even before moving into the building we began to foster local relationships and build a sense of power, purpose and capability, so that local people feel that they can make a difference in their neighbourhood. Together with Islington Council we are now exploring how we can work more closely to involve local people in decisions that inpact where they live. We've also trained around 30 local Community Organisers, including local people, volunteers and community-sector workers, as well as staff within the Homes and Communities team in Islington Council.
-            </p>
-            <p>
-                We are now supporting local people to develop their own social actions, to increase the sense of power and forge relationships with those providing public services to explore how local people can be more involved in local decision making and how they might better influence service provision.
-            </p>
+            <section id="s1">
+                <p>
+                    The Hanley Crouch Community Association (HCCA) has strong roots in social action and this culture of 'making a difference through social change' remains at our core - stimulating connectivity across our local community and feeding our sustainability. 
+                </p>
+                <p>
+                    The HCCA was established in 1972 by a group of local residents who needed somewhere for their children to play - in a disused building that used to be a public laundry for people living on local estates, which was referred to locally and fondly as 'The Laundry'. Over the past forty years we have successfully facilitated provision of a diverse and inclusive multi-purpose community centre. Now, 'The Laundry' no longer exists but our commitment to grass-roots social action continues through our brand-new, purpose built community centre 'Brickworks'.
+                </p>
+                <p>
+                    Even before moving into the building we began to foster local relationships and build a sense of power, purpose and capability, so that local people feel that they can make a difference in their neighbourhood. Together with Islington Council we are now exploring how we can work more closely to involve local people in decisions that inpact where they live. We've also trained around 30 local Community Organisers, including local people, volunteers and community-sector workers, as well as staff within the Homes and Communities team in Islington Council.
+                </p>
+                <p>
+                    We are now supporting local people to develop their own social actions, to increase the sense of power and forge relationships with those providing public services to explore how local people can be more involved in local decision making and how they might better influence service provision.
+                </p>
+            </section>
 
         <hr className="style2"></hr>
 
         <h2 className='h2-two'>The 'locality' initiative in Tollington</h2>
-            <p>
-                Islington Council has chosen the ward of Tollington to explore and develop a 'Locality' initiative that aims to develop, define, and test the 'community' aspect of the Homes and Communities offer. A team of 11 staff from Homes and Communities and key local partner are engaging and collaborating to ensure that Homes and Communities are connected to and knowledgeable about the communities that they work in.
-            </p>
-            <p>
-                The first phase of 'Locality' has focused on Insights and Data Gathering, which has revealed some interesting facts and statistics and this combined with the engagement of local organisations, businesses and residents has identified some key areas of concerns linked to poverty, isolation and health and well-being, which are now the key focus for collective social action with Brickworks being developed, supported and promoted as the heart of the community.
-            </p>
+            <section id="s2">
+                <p>
+                    Islington Council has chosen the ward of Tollington to explore and develop a 'Locality' initiative that aims to develop, define, and test the 'community' aspect of the Homes and Communities offer. A team of 11 staff from Homes and Communities and key local partner are engaging and collaborating to ensure that Homes and Communities are connected to and knowledgeable about the communities that they work in.
+                </p>
+                <p>
+                    The first phase of 'Locality' has focused on Insights and Data Gathering, which has revealed some interesting facts and statistics and this combined with the engagement of local organisations, businesses and residents has identified some key areas of concerns linked to poverty, isolation and health and well-being, which are now the key focus for collective social action with Brickworks being developed, supported and promoted as the heart of the community.
+                </p>
+            </section>
     </main>
     )}
 }

client/src/components/pages/resources.js

@@ -1,50 +1,19 @@
 import React from 'react';
- 
+import List from '../mainPageComponents/list'
 class Resources extends React.Component {
 
 componentDidMount = () => {
     if(process.env.NODE_ENV !=="test"){
     window.scrollTo(0,0);
     }
+
+
 }
 
 render() {
     return(
     <main className='wrapper'>
-        <h1 data-testid="resources-page">Resources</h1> 
-        <p className="question">Engaging in social action takes time, energy and passion.
-        <br/>
-        Here are our top 10 tips to get you started.</p>
-        <ol>
-            <li className='top-ten-li'>
-            Identify a problem, challenge or issue in your neighbourhood and be specific about what you want to tackle.
-            </li>
-            <li className='top-ten-li'>
-            Do some research so that you have a good picture of the current situation, then develop and plan how to go about tackling the problem.
-            </li>
-            <li className='top-ten-li'>
-            Get together with others to share your research and explore the problem and potential solutions.
-            </li>
-            <li className='top-ten-li'>
-            Build a wider, more diverse community of collaborators who support your aims.
-            </li>
-            <li className='top-ten-li'>
-            Collaborate with those who might not share your opinions or support your aims so that you can overcome objections and gain different perspectives.           
-            </li>
-            <li className='top-ten-li'>
-            Promote your social action in your community and through the media; create a video and post it on the Brickworks website.
-            </li>
-            <li className='top-ten-li'>
-            Take action!
-            </li>
-            <li className='top-ten-li'>
-            Evaluate, reflect and record the impact of your action on the community.
-            </li>
-            <li className='top-ten-li'>
-            Share the impact of your action in creative and imaginative ways to capture attention.
-            </li>
-            <li className='top-ten-li'>Don't give up, have patience and be committed.</li>
-        </ol>
+        <List />
         <div className='resource-links'> 
 
         <hr className="style2"></hr>

client/src/components/pages/social-actions.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-import getAllEvents from '../utils/utilsgetAllEvent';
-import getPastEvents from '../utils/utilsgetPastEvent';
 import {EventComp, UpcomingEvents, PastEvents} from './eventComp';
+import "babel-polyfill"
 
 
 class SocialActions extends React.Component {
@@ -16,29 +15,26 @@ constructor(props){
     pastEvntLoading: true,
   }
 }
-componentDidMount() {
+async componentDidMount() {
   if(process.env.NODE_ENV !== 'test'){
   window.scrollTo(0,0);
-
-  getAllEvents()
-  .then(response => {
-    //set allEvents state
-    this.setState( { allEvents: response, allEvntLoading: false});
-    //pass data to parent
-
-  })
-
-  .catch(err => console.log(err));
-
-  getPastEvents()
-  .then(response => {
-
-  this.setState( { pastEvents : response, pastEvntLoading:false});
-
+try{
+  const response = await fetch(`/api/getAllEventsAirTable`)
+  if(!response.ok){
+    throw Error(response.statusText);
+  }
+  const json = await response.json();
+  this.setState({allEvents: json, allEvntLoading: false})
 
-})
-
-.catch(err => console.log(err));
+  const pastResponse = await fetch(`/api/getPastEventsAirTable`)
+  if(!pastResponse.ok){
+    throw Error(pastResponse.statusText)
+  }
+  const jsonPast = await pastResponse.json();
+  this.setState( { pastEvents : jsonPast, pastEvntLoading:false});
+} catch(e){
+  console.log(e);
+}
   }
 }
 

client/src/components/pages/topten.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from "react-router-dom";
-
+import List from '../mainPageComponents/list';
 class TopTen extends React.Component {
 
 componentDidMount = () => {
@@ -12,20 +12,7 @@ componentDidMount = () => {
 render() {
     return (
     <main data-testid="topten-page" className='wrapper'>
-        <h1>Top Ten Tips</h1>
-            <p className='question'>Engaging in social action takes time, energy and passion, here are our top 10 tips to get you started:</p>
-            <ol>
-                <li className='top-ten-li'>Identify a problem, challenge or issue in your neighbourhood and be specific about what you want to tackle.</li>
-                <li className='top-ten-li'>Do some research so that you have a good picture of the current situation, then develop and plan how to go about tackling the problem.</li>
-                <li className='top-ten-li'>Get together with others to share your research and explore the problem and potential solutions.</li>
-                <li className='top-ten-li'>Build a wider, more diverse community of collaborators who support your aims.</li>
-                <li className='top-ten-li'>Collaborate with those who might not share your opinions or support your aims so that you can overcome objections and gain different perspectives.</li>
-                <li className='top-ten-li'>Promote your social action in your community and through the media; create a video and post it on the Brickworks website.</li>
-                <li className='top-ten-li'>Take action!</li>
-                <li className='top-ten-li'>Evaluate, reflect and record the impact of your action on the community.</li>
-                <li className='top-ten-li'>Share the impact of your action in creative and imaginative ways to capture attention.</li>
-                <li className='top-ten-li'>Don't give up, have patience and be committed.</li>
-            </ol>
+            <List />
             <hr className="style2"></hr>
             <div className='top-ten-links'>
             <label htmlFor="all-events">

client/src/components/utils/textAlt.js

@@ -0,0 +1,12 @@
+const textAlt = (list)=> {
+    for(let i=0;i<list.length; i++){
+        if(i%2===0){
+            list[i].classList.add("grey");
+        }
+        else {
+            list[i].classList.add("shadow");
+        }
+    }
+}
+
+export { textAlt }

client/src/components/utils/utilsgetAllEvent.js

@@ -1,31 +1,31 @@
 
- const checkResponse = response => {
-  if(response.status !== 200) {
-    console.log(`Error with the request! ${response.status}`);
-    return;
-  }
-  // response.forEach( (val) => console.log(val.fields));
-  console.log('response is response is ', response);
-  return response.json();
-}
-// getAllEventsAirTable
-//   .then(res => { //res is an array of objects
-//     res.forEach((val) => console.log(val.fields));
+//  const checkResponse = response => {
+//   if(response.status !== 200) {
+//     console.log(`Error with the request! ${response.status}`);
+//     return;
+//   }
+//   // response.forEach( (val) => console.log(val.fields));
+//   console.log('response is response is ', response);
+//   return response.json();
+// }
+// // getAllEventsAirTable
+// //   .then(res => { //res is an array of objects
+// //     res.forEach((val) => console.log(val.fields));
+// //   })
+// //   .catch(err => console.log(err)); 
+// export const getAllEvents = () => {
+//   console.log('INSIDE UTILS222');
+//   return fetch(`/api/getAllEventsAirTable`)
+//   .then(checkResponse)
+//   .catch(err => {
+//     throw new Error(`fetch getAllEvents failed ${err}`);
 //   })
-//   .catch(err => console.log(err)); 
-export const getAllEvents = () => {
-  console.log('INSIDE UTILS222');
-  return fetch(`/api/getAllEventsAirTable`)
-  .then(checkResponse)
-  .catch(err => {
-    throw new Error(`fetch getAllEvents failed ${err}`);
-  })
-}
+// }
 
-// getAllEventsAirTable
-//   .then(res => { //res is an array of objects
-//     res.forEach((val) => console.log(val.fields));
-//   })
-//   .catch(err => console.log(err)); 
+// // getAllEventsAirTable
+// //   .then(res => { //res is an array of objects
+// //     res.forEach((val) => console.log(val.fields));
+// //   })
+// //   .catch(err => console.log(err)); 
 
-export default getAllEvents;
+// export default getAllEvents;