Skip to content

Commit a44e327

Browse files
lukemoraleslukemorales
committed
Reestructured App
1 parent ff00102 commit a44e327

33 files changed

+896
-844
lines changed

‎App.js

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,11 @@
11
import React from 'react';
2-
import { createStore } from 'redux';
32
import { Provider } from 'react-redux';
4-
import ApolloClient from 'apollo-boost';
53
import { ApolloProvider } from 'react-apollo';
64

7-
import AppNavigator from '~/navigator/AppNavigator';
8-
9-
const client = new ApolloClient({
10-
uri: 'https://graphql.contentful.com/content/v1/spaces/ldcl3ayg0mhx/',
11-
credentials: 'same-origin',
12-
headers: {
13-
Authorization: `Bearer 93f3808c25c1f5bdb95476ca8576c6eaa12b5587efb956efb242ceead7cb3840`,
14-
},
15-
});
16-
17-
const INITIAL_STATE = {
18-
action: '',
19-
};
5+
import client from '~/services/client';
6+
import store from '~/store';
207

21-
const reducer = (state = INITIAL_STATE, action) => {
22-
switch (action.type) {
23-
case 'OPEN_MENU':
24-
return { action: 'openMenu' };
25-
case 'CLOSE_MENU':
26-
return { action: 'closeMenu' };
27-
case 'OPEN_CARD':
28-
return { action: 'openCard' };
29-
case 'CLOSE_CARD':
30-
return { action: 'closeCard' };
31-
default:
32-
return state;
33-
}
34-
};
35-
36-
const store = createStore(reducer);
8+
import AppNavigator from '~/navigator/AppNavigator';
379

3810
export default function App() {
3911
return (

‎jsconfig.json

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
"compilerOptions": {
33
"baseUrl": "src",
44
"paths": {
5-
"~/*": ["*"],
6-
"@components": ["./src/components"],
7-
"@screens": ["./src/screens"],
8-
"@stores": ["./src/stores"],
9-
"@services": ["./src/services"],
10-
"@assets": ["./src/assets"]
5+
"~/*": ["*"]
116
}
127
}
138
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@expo/vector-icons": "^10.0.0",
1212
"apollo-boost": "^0.4.3",
1313
"expo": "^33.0.0",
14+
"expo-linear-gradient": "~5.0.1",
1415
"graphql": "^14.4.2",
1516
"graphql-tag": "^2.10.1",
1617
"prop-types": "^15.7.2",

‎src/components/Card/Card.js

Lines changed: 3 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import styled from 'styled-components/native';
43
import { Dimensions } from 'react-native';
4+
import { Container, Cover, Image, Title, Content, Logo, Wrapper, Caption, Subtitle } from './Card_Styles';
55

66
const screenWidth = Dimensions.get('window').width;
77

8-
export default function Card(props) {
9-
const { hero, title, logo, caption, subtitle } = props;
10-
8+
export default function Card({ hero, title, logo, caption, subtitle }) {
119
return (
12-
<Container>
10+
<Container screenWidth={screenWidth}>
1311
<Cover>
1412
<Image source={{ uri: hero.url }} />
1513
<Title>{title}</Title>
@@ -36,64 +34,3 @@ Card.propTypes = {
3634
caption: PropTypes.string.isRequired,
3735
subtitle: PropTypes.string.isRequired,
3836
};
39-
40-
const Container = styled.View`
41-
background: white;
42-
width: ${screenWidth - 100};
43-
height: 280px;
44-
`;
45-
46-
const Cover = styled.View`
47-
width: 100%;
48-
height: 200px;
49-
overflow: hidden;
50-
border-top-left-radius: 14px;
51-
border-top-right-radius: 14px;
52-
`;
53-
54-
const Image = styled.Image`
55-
width: 100%;
56-
height: 100%;
57-
background: #3c4560;
58-
position: absolute;
59-
top: 0;
60-
left: 0;
61-
`;
62-
63-
const Title = styled.Text`
64-
color: white;
65-
font-size: 24px;
66-
font-weight: bold;
67-
margin: 20px 0 0 20px;
68-
width: 170px;
69-
`;
70-
71-
const Content = styled.View`
72-
padding: 0 0 0 20px;
73-
flex-direction: row;
74-
align-items: center;
75-
height: 80px;
76-
`;
77-
78-
const Logo = styled.Image`
79-
width: 44px;
80-
height: 44px;
81-
`;
82-
83-
const Wrapper = styled.View`
84-
margin-left: 10px;
85-
`;
86-
87-
const Caption = styled.Text`
88-
color: #3c4560;
89-
font-size: 20px;
90-
font-weight: 600;
91-
`;
92-
93-
const Subtitle = styled.Text`
94-
color: #b8bece;
95-
font-weight: 600;
96-
font-size: 15px;
97-
text-transform: uppercase;
98-
margin-top: 2px;
99-
`;

‎src/components/Card/Card_Styles.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import styled from 'styled-components/native';
2+
3+
export const Container = styled.View`
4+
background: white;
5+
width: ${({ screenWidth }) => screenWidth - 100};
6+
height: 280px;
7+
`;
8+
9+
export const Cover = styled.View`
10+
width: 100%;
11+
height: 200px;
12+
overflow: hidden;
13+
border-top-left-radius: 14px;
14+
border-top-right-radius: 14px;
15+
`;
16+
17+
export const Image = styled.Image`
18+
width: 100%;
19+
height: 100%;
20+
background: #3c4560;
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
`;
25+
26+
export const Title = styled.Text`
27+
color: white;
28+
font-size: 24px;
29+
font-weight: bold;
30+
margin: 20px 0 0 20px;
31+
width: 170px;
32+
`;
33+
34+
export const Content = styled.View`
35+
padding: 0 0 0 20px;
36+
flex-direction: row;
37+
align-items: center;
38+
height: 80px;
39+
`;
40+
41+
export const Logo = styled.Image`
42+
width: 44px;
43+
height: 44px;
44+
`;
45+
46+
export const Wrapper = styled.View`
47+
margin-left: 10px;
48+
`;
49+
50+
export const Caption = styled.Text`
51+
color: #3c4560;
52+
font-size: 20px;
53+
font-weight: 600;
54+
`;
55+
56+
export const Subtitle = styled.Text`
57+
color: #b8bece;
58+
font-weight: 600;
59+
font-size: 15px;
60+
text-transform: uppercase;
61+
margin-top: 2px;
62+
`;

‎src/components/Course/Course.js

Lines changed: 4 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import styled from 'styled-components/native';
43
import { Dimensions } from 'react-native';
4+
import { Container, Cover, Hero, Logo, Title, Subtitle, Content, Avatar, Caption, Author } from './Course_Styles';
55

66
const screenWidth = Dimensions.get('window').width;
77

8-
export default function Course(props) {
9-
const { hero, logo, subtitle, title, avatar, caption, author } = props;
10-
8+
export default function Course({ hero, logo, subtitle, title, avatar, caption, author }) {
119
return (
12-
<Container>
10+
<Container screenWidth={screenWidth}>
1311
<Cover>
14-
<Hero source={hero} />
12+
<Hero source={hero} resizeMode="cover" />
1513
<Logo source={logo} />
1614
<Subtitle>{subtitle}</Subtitle>
1715
<Title>{title}</Title>
@@ -34,83 +32,3 @@ Course.propTypes = {
3432
caption: PropTypes.string.isRequired,
3533
author: PropTypes.string.isRequired,
3634
};
37-
38-
const Container = styled.View`
39-
width: ${screenWidth - 40};
40-
height: 335px;
41-
border-radius: 14px;
42-
background: white;
43-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
44-
elevation: 10;
45-
margin: 15px 20px;
46-
`;
47-
48-
const Cover = styled.View`
49-
height: 260px;
50-
border-top-right-radius: 14px;
51-
border-top-left-radius: 14px;
52-
overflow: hidden;
53-
justify-content: flex-end;
54-
`;
55-
56-
const Hero = styled.Image`
57-
position: absolute;
58-
width: 100%;
59-
height: 100%;
60-
`;
61-
62-
const Logo = styled.Image`
63-
width: 48px;
64-
height: 48px;
65-
position: absolute;
66-
top: 90px;
67-
left: 50%;
68-
margin-left: -24px;
69-
`;
70-
71-
const Title = styled.Text`
72-
font-size: 24px;
73-
color: white;
74-
font-weight: 600;
75-
margin-top: 4px;
76-
width: 170px;
77-
margin-bottom: 20px;
78-
margin-left: 20px;
79-
`;
80-
81-
const Subtitle = styled.Text`
82-
font-size: 15px;
83-
color: rgba(255, 255, 255, 0.8);
84-
font-weight: 500;
85-
text-transform: uppercase;
86-
margin-left: 20px;
87-
`;
88-
89-
const Content = styled.View`
90-
padding-left: 62px;
91-
justify-content: center;
92-
height: 75px;
93-
`;
94-
95-
const Avatar = styled.Image`
96-
width: 32px;
97-
height: 32px;
98-
position: absolute;
99-
top: 20px;
100-
left: 20px;
101-
border-radius: 16px;
102-
`;
103-
104-
const Caption = styled.Text`
105-
font-size: 14px;
106-
color: #3c4560;
107-
font-weight: 500;
108-
max-width: 260px;
109-
`;
110-
111-
const Author = styled.Text`
112-
font-size: 13px;
113-
color: #b8bece;
114-
font-weight: 500;
115-
margin-top: 4px;
116-
`;

0 commit comments

Comments
 (0)