-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #25 from LatestPrivacy/news-page
Merge news-page branch and extras
- Loading branch information
Showing
16 changed files
with
7,504 additions
and
5,616 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,6 +17,7 @@ | |
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
| /.idea | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
|
|
||
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,75 @@ | ||
| import React, { useState, useEffect } from 'react' | ||
| import React, { useState, useEffect } from 'react'; | ||
| import axios from 'axios'; | ||
|
|
||
| import axios from 'axios' | ||
| import BodyTextAnimation from '../components/BodyTextAnimation'; | ||
| import HeadingAnimation from './HeadingAnimation'; | ||
| import ButtonExternal from '../components/ButtonExternal'; | ||
| import InViewMonitor from 'react-inview-monitor'; | ||
|
|
||
| import BodyTextAnimation from '../components/BodyTextAnimation' | ||
| import HeadingAnimation from './HeadingAnimation' | ||
| import InViewMonitor from 'react-inview-monitor' | ||
| import ButtonExternal from '../components/ButtonExternal' | ||
|
|
||
| import Style from './HomeDonate.module.scss' | ||
| import Style from './HomeDonate.module.scss'; | ||
|
|
||
| const HomeDonate = () => { | ||
|
|
||
| const [data, setData] = useState({}) | ||
| const [loading, setLoading] = useState(true) | ||
| const [ data, setData ] = useState( [] ); | ||
|
|
||
| useEffect( () => { | ||
| const fetchData = async () => { | ||
| try { | ||
| const response = await axios.get( '/donate/latestprivacy.json' ); | ||
|
|
||
| useEffect(() => { | ||
| axios.get("/donate/latestprivacy.json") | ||
| .then(res => { | ||
| setData(res.data) | ||
| setLoading(false) | ||
| //setTimeout(() => setLoading(false), 3000) | ||
| }) | ||
| .catch(err => { | ||
| console.log(err) | ||
| }) | ||
| }, []) | ||
| setData( data => response.data ); | ||
| } catch( err ) { | ||
| setData( { 'balance': 0, 'backersCount': 0 } ); | ||
| }; | ||
| }; | ||
|
|
||
| if (!data) { | ||
| return <div style={{ 'textAlign': 'center'}}>didn't get a news data</div>; | ||
| } | ||
| fetchData(); | ||
| }, [] ); | ||
|
|
||
| return ( | ||
| <InViewMonitor classNameInView="animated-in"> | ||
| <div className={`${Style.donate} container`} id="donate"> | ||
| <div className={Style.donateLeft}> | ||
| <HeadingAnimation className={Style.title} delay={0} duration={0.7} color="#ffffff"> | ||
| <h3>Our Balance</h3> | ||
| </HeadingAnimation> | ||
| <br /> | ||
| <HeadingAnimation className={Style.amount} delay={0.2} duration={0.7} color="#ffffff"> | ||
| <h1>£{data.balance / 100}</h1> | ||
| </HeadingAnimation> | ||
|
|
||
| <div className="donate__status"> | ||
| <BodyTextAnimation delay={0.4} duration={0.7}> | ||
| <div className="donate__status__item"> | ||
| <span>{data.backersCount}</span> | ||
| <span>Donators</span> | ||
| </div> | ||
| </BodyTextAnimation> | ||
| <BodyTextAnimation delay={0.6} duration={0.7}> | ||
| <div className="donate__status__item"> | ||
| <span>0</span> | ||
| <span>Sponsors</span> | ||
| </div> | ||
| </BodyTextAnimation> | ||
| </div> | ||
| </div> | ||
| <div className={Style.donateRight}> | ||
| <HeadingAnimation className={Style.titleRight} delay={0.8} duration={0.7} color="#ffffff"> | ||
| <h2>Public Funding Transparency</h2> | ||
| </HeadingAnimation> | ||
| <BodyTextAnimation delay={1} duration={0.7}> | ||
| <p>We believe in being open about the public funds we receive. You can see where it's from and also where it's being spent.</p> | ||
| </BodyTextAnimation> | ||
|
|
||
| <div className="donate__button"> | ||
| <BodyTextAnimation delay={1.2} duration={0.7}> | ||
| <ButtonExternal url="https://opencollective.com/latestprivacy/updates" value="Our Blogs"/> | ||
| </BodyTextAnimation> | ||
| <BodyTextAnimation delay={1.4} duration={0.7}> | ||
| <ButtonExternal url="https://opencollective.com/latestprivacy#section-contribute" value="Support Us" type="line" /> | ||
| </BodyTextAnimation> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </InViewMonitor> | ||
| ) | ||
| return ( | ||
| <InViewMonitor classNameInView="animated-in"> | ||
| <div className={`${Style.donate} container`} id="donate"> | ||
| <div className={Style.donateLeft}> | ||
| <HeadingAnimation className={Style.title} delay={0} duration={0.7} color="#ffffff"> | ||
| <h3>Our Balance</h3> | ||
| </HeadingAnimation> | ||
| <br /> | ||
| <HeadingAnimation className={Style.amount} delay={0.2} duration={0.7} color="#ffffff"> | ||
| <h1>£{data.balance / 100}</h1> | ||
| </HeadingAnimation> | ||
| <div className="donate__status"> | ||
| <BodyTextAnimation delay={0.4} duration={0.7}> | ||
| <div className="donate__status__item"> | ||
| <span>{data.backersCount}</span> | ||
| <span>Donators</span> | ||
| </div> | ||
| </BodyTextAnimation> | ||
| <BodyTextAnimation delay={0.6} duration={0.7}> | ||
| <div className="donate__status__item"> | ||
| <span>0</span> | ||
| <span>Sponsors</span> | ||
| </div> | ||
| </BodyTextAnimation> | ||
| </div> | ||
| </div> | ||
| <div className={Style.donateRight}> | ||
| <HeadingAnimation className={Style.titleRight} delay={0.8} duration={0.7} color="#ffffff"> | ||
| <h2>Public Funding Transparency</h2> | ||
| </HeadingAnimation> | ||
| <BodyTextAnimation delay={1} duration={0.7}> | ||
| <p>We believe in being open about the public funds we receive. You can see where it's from and also where it's being spent.</p> | ||
| </BodyTextAnimation> | ||
| <div className="donate__button"> | ||
| <BodyTextAnimation delay={1.2} duration={0.7}> | ||
| <ButtonExternal url="https://opencollective.com/latestprivacy/updates" value="Our Blogs"/> | ||
| </BodyTextAnimation> | ||
| <BodyTextAnimation delay={1.4} duration={0.7}> | ||
| <ButtonExternal url="https://opencollective.com/latestprivacy#section-contribute" value="Support Us" type="line" /> | ||
| </BodyTextAnimation> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </InViewMonitor> | ||
| ) | ||
| } | ||
|
|
||
| export default HomeDonate |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,72 @@ | ||
| import React, { useState, useEffect } from 'react' | ||
|
|
||
| import axios from 'axios' | ||
| import React, { useState, useEffect } from 'react'; | ||
| import axios from 'axios'; | ||
|
|
||
| import HeadingAnimation from './HeadingAnimation'; | ||
| import BodyTextAnimation from '../components/BodyTextAnimation'; | ||
| import NewsItem from '../components/NewsItem'; | ||
| import Button from '../components/Button'; | ||
| import InViewMonitor from 'react-inview-monitor'; | ||
| import BodyTextAnimation from '../components/BodyTextAnimation' | ||
| import NewsItem from '../components/NewsItem' | ||
| import Button from '../components/Button' | ||
|
|
||
| import Style from './HomeNews.module.scss' | ||
| import SyncLoader from 'react-spinners/SyncLoader'; | ||
|
|
||
| const HomeNews = () => { | ||
| import Style from './HomeNews.module.scss'; | ||
|
|
||
| const [data, setData] = useState({}) | ||
| const [loading, setLoading] = useState(true) | ||
| const limit = 8; | ||
|
|
||
| useEffect(() => { | ||
| axios.get("/api/articles?limit=8") | ||
| .then(res => { | ||
| setData(res.data) | ||
| setLoading(false) | ||
| //setTimeout(() => setLoading(false), 3000) | ||
| }) | ||
| .catch(err => { | ||
| console.log(err) | ||
| }) | ||
| }, []) | ||
| const HomeNews = () => { | ||
| const [ data, setData ] = useState( [] ); | ||
| const [ loading, setLoading ] = useState( true ); | ||
|
|
||
| /* | ||
| async componentDidMount(){ | ||
| const url = "/articles?limit=4" | ||
| const response = await fetch(url) | ||
| const data = await response.json() | ||
| console.log(data) | ||
| this.setState({ | ||
| loading: false, | ||
| newsData: data | ||
| }) | ||
| } | ||
| */ | ||
| useEffect( () => { | ||
| const fetchArticles = async () => { | ||
| try { | ||
| const response = await axios.get( `/api/articles?limit=${limit}` ); | ||
|
|
||
| if (!data) { | ||
| return <div style={{ 'textAlign': 'center'}}>didn't get a news data</div>; | ||
| } | ||
| setData( data => response.data ); | ||
| setLoading( false ); | ||
| } catch( err ) { | ||
| console.log( err ); | ||
| }; | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={`${Style.container} container`} id="news"> | ||
| <InViewMonitor classNameInView="animated-in"> | ||
| <HeadingAnimation className={Style.title} delay={0} duration={0.7} color="#ffffff"> | ||
| <h3>Latest News</h3> | ||
| </HeadingAnimation> | ||
| fetchArticles(); | ||
| }, [] ); | ||
|
|
||
| <div className={Style.newsWrapper}> | ||
| { | ||
| loading ? <div style={{ 'gridColumn': 'span 12', 'textAlign': 'center'}}>loading...</div> : | ||
| data.map((news, i) => { | ||
| return( | ||
| <NewsItem | ||
| author = {news.publisher} | ||
| date = {news.published_on} | ||
| /*timetoread = {news.read_time}*/ /*NewsItem.js: Line 35*/ /*NewsDetail.js: Line 72*/ | ||
| slug = {news.slug} | ||
| delay = { 0.6 + (i * 0.3) } | ||
| > | ||
| {news.title} | ||
| </NewsItem> | ||
| ) | ||
| }) | ||
| } | ||
| </div> | ||
| <div className={Style.buttonWrapper}> | ||
| <BodyTextAnimation duration={0.7} delay={2.7}> | ||
| <Button url="#" value="Coming Soon" /> | ||
| </BodyTextAnimation> | ||
| </div> | ||
| </InViewMonitor> | ||
| </div> | ||
| ) | ||
| return ( | ||
| <div className={`${Style.container} container`} id="news"> | ||
| <InViewMonitor classNameInView="animated-in"> | ||
| <HeadingAnimation className={Style.title} delay={0} duration={0.7} color="#ffffff"> | ||
| <h3>Latest News</h3> | ||
| </HeadingAnimation> | ||
| <div className={Style.newsWrapper}> | ||
| {loading | ||
| ? <div style={{'gridColumn': 'span 12', 'textAlign': 'center'}}> | ||
| <SyncLoader | ||
| size={8} | ||
| color={'#656565'} | ||
| loading={loading} | ||
| /> | ||
| </div> | ||
| : data.map((item, index) => ( | ||
| <NewsItem | ||
| author={item.publisher} | ||
| date={item.published_on} | ||
| /*timetoread={item.read_time}*/ /*NewsItem.js: Line 35*/ /*NewsDetail.js: Line 72*/ | ||
| slug={item.slug} | ||
| delay={0.6 + (index * 0.3)} | ||
| > | ||
| {item.title} | ||
| </NewsItem> | ||
| )) | ||
| } | ||
| </div> | ||
| <div className={Style.buttonWrapper}> | ||
| <BodyTextAnimation duration={0.7} delay={2.7}> | ||
| <Button url="/news" value="Explore More" /> | ||
| </BodyTextAnimation> | ||
| </div> | ||
| </InViewMonitor> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default HomeNews; |
Oops, something went wrong.