-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.tsx
134 lines (116 loc) · 4.78 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
// @ts-ignore
import Gallery from '../../shared/custom/react-native-photo-gallery';
import React, { Component } from 'react';
import { Container } from 'native-base';
import Modal from 'react-native-modalbox';
import { View } from 'react-native';
import { Subscription } from 'rxjs';
import { skip } from 'rxjs/operators';
import { UploadDto } from '@points/shared';
import Permissions from 'react-native-permissions'
import { Toolbar } from '../../shared/components/header';
import { IUploadState, initialState, IUserUpload } from '../reducers';
import { IUploadProps } from '../containers';
import { completedUploadListRequest, completedUserUploadRequest } from '../selectors';
import { IPhotoData } from '../../core/camera';
import { UploadPreview } from './upload-preview';
import { API_URL } from '../../App';
export class Upload extends Component<IUploadProps, IUploadState> {
public state: IUploadState = initialState.condition
? initialState.condition
: {} as IUploadState;
private uploadPreview?: Modal;
private completedUploadListRequestSubscription?: Subscription;
private completedUserUploadRequestSubscription?: Subscription;
public componentWillMount() {
if (!this.props.uploadList.length) {
this.props.getUploadList();
}
this.completedUploadListRequestSubscription =
completedUploadListRequest()
.pipe(skip(1))
.subscribe((requestCompleted) => this.setState({
refreshing: !requestCompleted
}));
this.completedUserUploadRequestSubscription =
completedUserUploadRequest()
.pipe(skip(1))
.subscribe((requestCompleted) => {
// TODO we should have to set refreshing in this block
// TODO seperate reducers for list and user-upload?
this.setState({
refreshing: !requestCompleted
});
this.uploadPreview!.close();
});
}
public componentWillUnmount() {
this.completedUploadListRequestSubscription!.unsubscribe();
this.completedUserUploadRequestSubscription!.unsubscribe();
}
public componentDidMount() {
// @ts-ignore
this.uploadPreview = this.refs.uploadPreview.refs.uploadPreviewModal;
Permissions.request('camera');
Permissions.request('photo');
}
public showPhotoPreview(photoData: IPhotoData) {
const userPhoto: IUserUpload = {
photoData,
userName: this.props.currentUser.userName,
userId: this.props.currentUser.userId!
};
this.setState({
userUpload: userPhoto
});
this.uploadPreview!.open();
}
public updateTitle = (title: string) => this.setState((prevState) => {
prevState.userUpload.title = title;
})
public updateDescription = (description: string) => this.setState((prevState) => {
prevState.userUpload.description = description;
})
public render(): JSX.Element {
// TODO stop hardcoding URLs
const imageURLs: object[] = this.props.uploadList.map(
(img: UploadDto, index: number) => ({
id: img.photo,
image: { uri: API_URL + 'uploads/medium/' + img.photo },
thumb: { uri: API_URL + 'uploads/thumb/' + img.photo }
})
);
return (
<Container>
<Toolbar
{...this.props}
refresh
refreshHandler={this.props.getUploadList}
camera
cameraHandler={(photoData: IPhotoData) =>
this.showPhotoPreview(photoData)} />
<View
onLayout={() => {
this.forceUpdate();
}}
style={{
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
zIndex: -1
}}>
<Gallery data={imageURLs && imageURLs.length
? imageURLs
: [{ id: 'loading', image: { uri: 'http://www.1x1px.me/FFFFFF-1.png' } }]} />
</View>
<UploadPreview
ref='uploadPreview'
updateDescription={((event: any) => this.updateDescription(event.nativeEvent.text))}
updateTitle={((event: any) => this.updateTitle(event.nativeEvent.text))}
photo={this.state.userUpload.photoData}
uploadHandler={() => this.props.upload(this.state.userUpload)} />
</Container>
);
}
}