Skip to content
This repository was archived by the owner on Feb 21, 2020. It is now read-only.

Commit 9ea867f

Browse files
kazup01kazup01
authored
Merge pull request #157 from BoostIO/some-refactor
Some refactor
2 parents 579ee38 + 1416a77 commit 9ea867f

File tree

6 files changed

+271
-265
lines changed

6 files changed

+271
-265
lines changed

‎app/App.js‎

Lines changed: 71 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import DropboxNoteList from './views/DropboxNoteList'
2222
import SideBar from './components/SideBar'
2323
import NoteModal from './views/note/NoteModal'
2424
import NoteListItem from './components/NoteList/NoteListItem'
25+
import styles from './AppStyle'
2526

2627
import AwsMobileAnalyticsConfig from './lib/AwsMobileAnalytics'
2728
import { makeRandomHex } from './lib/Strings'
@@ -34,59 +35,66 @@ const MARKDOWN_NOTE = 'MARKDOWN_NOTE'
3435
// const SNIPPET_NOTE = 'SNIPPET_NOTE'
3536
const DEFAULT_FOLDER = 'DEFAULT_FOLDER'
3637

37-
const styles = {
38-
iosHeader: {
39-
backgroundColor: '#f9f9f9'
40-
},
41-
androidHeader: {
42-
backgroundColor: '#f9f9f9',
43-
height: 70
44-
},
45-
iOsAppName: {
46-
color: '#1ec38b',
47-
fontSize: 18,
48-
fontWeight: '600'
49-
},
50-
androidAppName: {
51-
color: '#1ec38b',
52-
fontSize: 18,
53-
fontWeight: '600'
54-
},
55-
headerMenuButton: {
56-
color: '#1ec38b',
57-
fontSize: 24
58-
},
59-
headerRightMenuButton: {
60-
color: '#FED530',
61-
fontSize: 21
62-
},
63-
newPostButtonWrap: {
64-
position: 'absolute',
65-
right: 30,
66-
bottom: 30,
67-
width: 60,
68-
height: 60,
69-
borderRadius: 50,
70-
shadowOffset: {
71-
width: 0,
72-
height: 3
73-
},
74-
shadowColor: '#282C34',
75-
shadowOpacity: 0.4,
76-
shadowRadius: 6
77-
},
78-
newPostButton: {
79-
display: 'flex',
80-
alignItems: 'center',
81-
justifyContent: 'center',
82-
backgroundColor: '#1ec38b',
83-
width: 60,
84-
height: 60,
85-
borderRadius: 50,
86-
overflow: 'hidden',
87-
position: 'absolute'
88-
}
89-
}
38+
const HeaderLeft = ({openDrawer}) => (
39+
<Left>
40+
<View>
41+
<Button transparent onPress={openDrawer}>
42+
<Icon name='md-reorder' style={styles.headerMenuButton} />
43+
</Button>
44+
</View>
45+
</Left>
46+
)
47+
48+
const HeaderBody = ({mode}) => (
49+
<Body>
50+
<View>
51+
<Title style={Platform.OS === 'android' ? styles.androidAppName : styles.iOsAppName}>
52+
{
53+
mode === 0
54+
? 'All Notes'
55+
: 'Dropbox'
56+
}
57+
</Title>
58+
</View>
59+
</Body>
60+
)
61+
62+
const HeaderRight = ({onFilterFavorites, filterFavorites}) => (
63+
<Right>
64+
<View>
65+
<TouchableOpacity onPress={onFilterFavorites}>
66+
<Icon name={filterFavorites ? 'md-star' : 'md-star-outline'}
67+
style={styles.headerRightMenuButton} />
68+
</TouchableOpacity>
69+
</View>
70+
</Right>
71+
)
72+
73+
const NoteList = ({noteList, filterFavorites, onStarPress, setNoteModalIsOpen}) => (
74+
<Content contentContainerStyle={{ display: 'flex' }}>
75+
{
76+
noteList.map((note) => {
77+
if (filterFavorites && !note.isStarred) return null
78+
return <NoteListItem
79+
note={note}
80+
onStarPress={onStarPress}
81+
onNotePress={setNoteModalIsOpen}
82+
key={note.fileName} />
83+
})
84+
}
85+
</Content>
86+
)
87+
88+
const CreateNewNoteButton = ({onPressActionButton}) => (
89+
<Button
90+
transparent
91+
onPress={() => onPressActionButton()}
92+
style={styles.newPostButtonWrap}>
93+
<View style={styles.newPostButton}>
94+
<Icon name='md-add' style={{color: '#fff'}} />
95+
</View>
96+
</Button>
97+
)
9098

9199
export default class App extends Component {
92100
constructor () {
@@ -332,55 +340,22 @@ export default class App extends Component {
332340
panOpenMask={0.05}>
333341
<Container>
334342
<Header style={Platform.OS === 'android' ? styles.androidHeader : styles.iosHeader} androidStatusBarColor='#239F85'>
335-
<Left>
336-
<View>
337-
<Button transparent onPress={this.openDrawer}>
338-
<Icon name='md-reorder' style={styles.headerMenuButton} />
339-
</Button>
340-
</View>
341-
</Left>
342-
343-
<Body>
344-
<View>
345-
<Title style={Platform.OS === 'android' ? styles.androidAppName : styles.iOsAppName}>
346-
{
347-
mode === 0
348-
? 'All Notes'
349-
: 'Dropbox'
350-
}
351-
</Title>
352-
</View>
353-
</Body>
354-
355-
<Right>
356-
<View>
357-
<TouchableOpacity onPress={this.onFilterFavorites}>
358-
<Icon name={filterFavorites ? 'md-star' : 'md-star-outline'} style={styles.headerRightMenuButton} />
359-
</TouchableOpacity>
360-
</View>
361-
</Right>
343+
<HeaderLeft openDrawer={this.openDrawer} />
344+
<HeaderBody mode={mode} />
345+
<HeaderRight onFilterFavorites={this.onFilterFavorites}
346+
filterFavorites={filterFavorites} />
362347
</Header>
363348
{
364349
mode === 0
365-
? <Content contentContainerStyle={{ display: 'flex' }}>
366-
{
367-
noteList.map((note) => {
368-
if (filterFavorites && !note.isStarred) return null
369-
return <NoteListItem note={note} onStarPress={this.onStarPress} onNotePress={this.setNoteModalIsOpen} key={note.fileName} />
370-
})
371-
}
372-
</Content> : <DropboxNoteList ref='dropboxNoteList' />
350+
? <NoteList noteList={noteList}
351+
filterFavorite={filterFavorites}
352+
onStarPress={this.onStarPress}
353+
setNoteModalIsOpen={this.setNoteModalIsOpen} />
354+
: <DropboxNoteList ref='dropboxNoteList' />
373355
}
374356
</Container>
375357
<View>
376-
<Button
377-
transparent
378-
onPress={() => this.onPressActionButton()}
379-
style={styles.newPostButtonWrap}>
380-
<View style={styles.newPostButton}>
381-
<Icon name='md-add' style={{color: '#fff'}} />
382-
</View>
383-
</Button>
358+
<CreateNewNoteButton onPressActionButton={this.onPressActionButton} />
384359
<NoteModal setIsOpen={this.setNoteModalIsOpen}
385360
isNoteOpen={isNoteOpen}
386361
fileName={fileName}

‎app/AppStyle.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
export default {
2+
iosHeader: {
3+
backgroundColor: '#f9f9f9'
4+
},
5+
androidHeader: {
6+
backgroundColor: '#f9f9f9',
7+
height: 70
8+
},
9+
iOsAppName: {
10+
color: '#1ec38b',
11+
fontSize: 18,
12+
fontWeight: '600'
13+
},
14+
androidAppName: {
15+
color: '#1ec38b',
16+
fontSize: 18,
17+
fontWeight: '600'
18+
},
19+
headerMenuButton: {
20+
color: '#1ec38b',
21+
fontSize: 24
22+
},
23+
headerRightMenuButton: {
24+
color: '#FED530',
25+
fontSize: 21
26+
},
27+
newPostButtonWrap: {
28+
position: 'absolute',
29+
right: 30,
30+
bottom: 30,
31+
width: 60,
32+
height: 60,
33+
borderRadius: 50,
34+
shadowOffset: {
35+
width: 0,
36+
height: 3
37+
},
38+
shadowColor: '#282C34',
39+
shadowOpacity: 0.4,
40+
shadowRadius: 6
41+
},
42+
newPostButton: {
43+
display: 'flex',
44+
alignItems: 'center',
45+
justifyContent: 'center',
46+
backgroundColor: '#1ec38b',
47+
width: 60,
48+
height: 60,
49+
borderRadius: 50,
50+
overflow: 'hidden',
51+
position: 'absolute'
52+
}
53+
}

0 commit comments

Comments
 (0)