Skip to content

Commit a5076b1

Browse files
urlDevurlDev
committed
Created DefaultNewsComponent for each news component I want to show. Next step is to randomize the nth-child behaviour so they wouldnt look similar next to eachother. Added new action type for different kind of news(fetches) and added related state to reducer.
1 parent 0bb7390 commit a5076b1

File tree

15 files changed

+300
-75
lines changed

15 files changed

+300
-75
lines changed

‎src/App.css

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}
1+
.App {}

‎src/App.jsx

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import { useEffect } from 'react';
2-
import { useSelector, useDispatch } from 'react-redux';
3-
41
import Nav from './components/nav/Nav';
52
import FinanceBar from './components/financeBar/FinanceBar';
63
import Home from './components/home/Home';
74

8-
import { fetchChart } from './redux/actions/chart';
9-
import { fetchTopStories } from './redux/actions/news';
10-
115
import './App.css';
126

137
const App = () => {
14-
// const { chart } = useSelector((chart) => chart.chart);
15-
// const { loading, news, error } = useSelector((news) => news.news);
16-
// const dispatch = useDispatch();
17-
18-
// useEffect(() => {
19-
// dispatch(fetchChart());
20-
// dispatch(fetchTopStories('business'));
21-
// }, [dispatch]);
22-
238
return (
249
<div className="App">
2510
<Nav />

‎src/assets/all.svg

Lines changed: 16 additions & 0 deletions
Loading

‎src/assets/numberSquare.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/defaultNewsComponent/DefaultNewsComponent.jsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
3+
import SquareSrc from '../../assets/numberSquare.svg';
4+
// import AllSrc from '../../assets/all.svg';
5+
6+
import {
7+
PopularNewsContainer,
8+
SectionTitle,
9+
SectionContainer,
10+
SectionHeader,
11+
SectionHeaderSquare,
12+
SectionContent,
13+
} from '../popularNews/PopularNews.styles.js';
14+
15+
const DefaultNewsComponent = ({ newsType, newsTitle }) => {
16+
return (
17+
<PopularNewsContainer>
18+
<div
19+
style={{
20+
display: 'flex',
21+
justifyContent: 'space-between',
22+
paddingRight: '2rem',
23+
}}
24+
>
25+
<SectionTitle>{newsTitle}</SectionTitle>
26+
</div>
27+
28+
<hr />
29+
{newsType.map((news) => {
30+
return (
31+
<>
32+
<SectionContainer
33+
url={
34+
news.media
35+
? news.media[0]['media-metadata'][2].url
36+
: news.multimedia[2].url
37+
}
38+
>
39+
<SectionHeader>
40+
<h6>{news.byline.split(',').slice(0, 1)}</h6>
41+
<SectionHeaderSquare>
42+
<p>{news.section}</p>
43+
<img src={SquareSrc} alt="" />
44+
</SectionHeaderSquare>
45+
</SectionHeader>
46+
<SectionContent>
47+
<h1>{news.title}</h1>
48+
<img
49+
url="true"
50+
src={
51+
news.media
52+
? news.media[0]['media-metadata'][2].url
53+
: news.multimedia[2].url
54+
}
55+
alt=""
56+
/>
57+
</SectionContent>
58+
</SectionContainer>
59+
<hr />
60+
</> //
61+
);
62+
})}
63+
</PopularNewsContainer>
64+
);
65+
};
66+
67+
export default DefaultNewsComponent;

‎src/components/featuredStocks/FeaturedStocks.styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22

33
export const FeaturedStocksContainer = styled.div `
4-
width: 20vw;
4+
width: 300px;
55
height: calc(100vh - 90px);
66
display: flex;
77
justify-content: center;

‎src/components/home/Home.styles.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ import styled from 'styled-components';
22

33
export const HomeContainer = styled.div `
44
display: flex;
5+
overflow-x: scroll;
56
`;

‎src/components/personalNews/PersonalNews.styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22

33
export const PersonalNewsContainer = styled.div `
4-
width: 20vw;
4+
width: 300px;
55
height: calc(100vh - 90px);
66
border-right: 1px solid black;
77
display: flex;

‎src/components/popularNews/PopularNews.jsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import { PopularNewsContainer } from './PopularNews.styles';
1+
import React from 'react';
2+
import { useDispatch, useSelector } from 'react-redux';
3+
4+
import { fetchMostPopular } from '../../redux/actions/news';
5+
6+
import DefaultNewsComponent from '../defaultNewsComponent/DefaultNewsComponent';
27

38
const PopularNews = () => {
4-
return (
5-
<PopularNewsContainer>
6-
<h1>Popular News</h1>
7-
</PopularNewsContainer>
8-
);
9+
const { popular } = useSelector((news) => news.news);
10+
const dispatch = useDispatch();
11+
12+
React.useEffect(() => {
13+
dispatch(fetchMostPopular());
14+
}, [dispatch]);
15+
16+
return <DefaultNewsComponent newsType={popular} newsTitle="Popular" />;
917
};
1018

1119
export default PopularNews;

‎src/components/popularNews/PopularNews.styles.js

Lines changed: 129 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,136 @@
11
import styled from 'styled-components';
22

3+
//prettier-ignore
4+
35
export const PopularNewsContainer = styled.div `
4-
width: 40vw;
6+
width: 650px;
57
height: calc(100vh - 90px);
68
display: flex;
7-
justify-content: center;
8-
align-items: center;
9+
flex-direction: column;
910
border-right: 1px solid black;
11+
overflow-y: scroll;
12+
/* overflow-x: hidden; */
13+
`;
14+
15+
export const SectionTitle = styled.h5 `
16+
font-family: var(--font-sub-header);
17+
font-weight: var(--weight-highlight);
18+
text-align: left;
19+
margin-left: 2rem;
20+
/* margin-bottom: 5px; */
21+
`;
22+
23+
export const SectionContent = styled.div `
24+
padding-bottom: 1.5rem;
25+
h1 {
26+
font-size: var(--size-sub-header);
27+
font-family: var(--font-header);
28+
font-weight: var(--weight-header);
29+
}
30+
`;
31+
32+
export const SectionHeader = styled.div `
33+
padding-top: 1.5rem;
34+
padding-right: 2rem;
35+
display: flex;
36+
justify-content: space-between;
37+
38+
img {
39+
width: 20px;
40+
}
41+
42+
h6 {
43+
color: var(--orange);
44+
font-family: var(--font-header);
45+
font-weight: var(--weight-regular);
46+
margin-top: 0;
47+
}
48+
`;
49+
50+
export const SectionHeaderSquare = styled.div `
51+
position: relative;
52+
53+
p {
54+
position: absolute;
55+
bottom: 10px;
56+
right: -16px;
57+
font-family: var(--font-header);
58+
font-size: 0.7rem;
59+
}
60+
61+
img {
62+
position: absolute;
63+
z-index: -1;
64+
}
65+
`;
66+
67+
export const SectionContainer = styled.div `
68+
padding: 10px 0 10px 2rem;
69+
70+
:nth-child(5n) {
71+
${SectionContent} {
72+
h1 {
73+
font-family: var(--font-rest);
74+
font-weight: var(--weight-highlight);
75+
}
76+
}
77+
}
78+
79+
:nth-child(3n) {
80+
background: black;
81+
82+
${SectionHeader} {
83+
h6 {
84+
color: white;
85+
}
86+
}
87+
88+
${SectionHeaderSquare} {
89+
p {
90+
color: white;
91+
}
92+
}
93+
94+
${SectionContent} {
95+
h1 {
96+
color: var(--orange);
97+
height: 100%;
98+
}
99+
100+
img {
101+
}
102+
}
103+
}
104+
105+
:nth-child(7n) {
106+
background: url(${(props) => props.url});
107+
background-repeat: no-repeat;
108+
background-size: cover;
109+
background-position: 50% 50%;
110+
111+
${SectionHeader} {
112+
h6 {
113+
color: white;
114+
text-shadow: 1px 1px var(--orange);
115+
}
116+
}
117+
118+
${SectionHeaderSquare} {
119+
p {
120+
color: white;
121+
text-shadow: 1px 1px var(--orange);
122+
}
123+
}
124+
${SectionContent} {
125+
h1 {
126+
font-style: italic;
127+
color: white;
128+
text-shadow: 1.5px 1.5px var(--orange);
129+
}
130+
131+
img {
132+
display: ${(props) => (props.url ? 'none' : 'block')};
133+
}
134+
}
135+
}
10136
`;

‎src/components/technologyNews/TechnologyNews.jsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
import { TechnologyNewsContainer } from './TechnologyNews.styles';
1+
import React from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
4+
import { fetchTopStories } from '../../redux/actions/news';
5+
6+
import DefaultNewsComponent from '../defaultNewsComponent/DefaultNewsComponent';
27

38
const TechnologyNews = () => {
4-
return (
5-
<TechnologyNewsContainer>
6-
<h1>TechnologyNews</h1>
7-
</TechnologyNewsContainer>
8-
);
9+
const { tech } = useSelector((news) => news.news);
10+
const dispatch = useDispatch();
11+
12+
React.useEffect(() => {
13+
dispatch(fetchTopStories('technology'));
14+
}, [dispatch]);
15+
16+
return <DefaultNewsComponent newsType={tech} newsTitle="Technology" />;
917
};
1018

1119
export default TechnologyNews;

‎src/components/technologyNews/TechnologyNews.styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22

33
export const TechnologyNewsContainer = styled.div `
4-
width: 20vw;
4+
width: 400px;
55
height: calc(100vh - 90px);
66
display: flex;
77
justify-content: center;

0 commit comments

Comments
 (0)