chore: Migrate UploadProgress room to ts

This commit is contained in:
AlexAlexandre 2021-12-02 17:03:56 -03:00
parent b1d1e29d41
commit 87f7c15dfa
1 changed files with 37 additions and 21 deletions

View File

@ -1,7 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PropTypes from 'prop-types';
import { Q } from '@nozbe/watermelondb'; import { Q } from '@nozbe/watermelondb';
import { Observable, Subscription } from 'rxjs';
import Model from '@nozbe/watermelondb/Model';
import database from '../../lib/database'; import database from '../../lib/database';
import RocketChat from '../../lib/rocketchat'; import RocketChat from '../../lib/rocketchat';
@ -51,20 +52,34 @@ const styles = StyleSheet.create({
} }
}); });
class UploadProgress extends Component { interface IRoomUploadProgressProps {
static propTypes = { width: number;
width: PropTypes.number, rid: string;
rid: PropTypes.string, theme: string;
theme: PropTypes.string, user: {
user: PropTypes.shape({ id: string;
id: PropTypes.string.isRequired, username: string;
username: PropTypes.string.isRequired, token: string;
token: PropTypes.string.isRequired
}),
baseUrl: PropTypes.string.isRequired
}; };
baseUrl: string;
}
constructor(props) { interface IItem {
name: string;
error: boolean;
progress: number;
path: string;
update: Function;
destroyPermanently(): void;
}
class UploadProgress extends Component<IRoomUploadProgressProps, any> {
private mounted: boolean;
private ranInitialUploadCheck: boolean;
private uploadsSubscription?: Subscription;
private uploadsObservable?: Observable<Model>;
constructor(props: IRoomUploadProgressProps) {
super(props); super(props);
this.mounted = false; this.mounted = false;
this.ranInitialUploadCheck = false; this.ranInitialUploadCheck = false;
@ -93,10 +108,11 @@ class UploadProgress extends Component {
const db = database.active; const db = database.active;
this.uploadsObservable = db.collections.get('uploads').query(Q.where('rid', rid)).observeWithColumns(['progress', 'error']); this.uploadsObservable = db.collections.get('uploads').query(Q.where('rid', rid)).observeWithColumns(['progress', 'error']);
this.uploadsSubscription = this.uploadsObservable.subscribe(uploads => { this.uploadsSubscription = this.uploadsObservable?.subscribe(uploads => {
if (this.mounted) { if (this.mounted) {
this.setState({ uploads }); this.setState({ uploads });
} else { } else {
// @ts-ignore
this.state.uploads = uploads; this.state.uploads = uploads;
} }
if (!this.ranInitialUploadCheck) { if (!this.ranInitialUploadCheck) {
@ -108,7 +124,7 @@ class UploadProgress extends Component {
uploadCheck = () => { uploadCheck = () => {
this.ranInitialUploadCheck = true; this.ranInitialUploadCheck = true;
const { uploads } = this.state; const { uploads } = this.state;
uploads.forEach(async u => { uploads.forEach(async (u: IItem) => {
if (!RocketChat.isUploadActive(u.path)) { if (!RocketChat.isUploadActive(u.path)) {
try { try {
const db = database.active; const db = database.active;
@ -124,7 +140,7 @@ class UploadProgress extends Component {
}); });
}; };
deleteUpload = async item => { deleteUpload = async (item: IItem) => {
try { try {
const db = database.active; const db = database.active;
await db.action(async () => { await db.action(async () => {
@ -135,7 +151,7 @@ class UploadProgress extends Component {
} }
}; };
cancelUpload = async item => { cancelUpload = async (item: { path: string }) => {
try { try {
await RocketChat.cancelUpload(item); await RocketChat.cancelUpload(item);
} catch (e) { } catch (e) {
@ -143,7 +159,7 @@ class UploadProgress extends Component {
} }
}; };
tryAgain = async item => { tryAgain = async (item: IItem) => {
const { rid, baseUrl: server, user } = this.props; const { rid, baseUrl: server, user } = this.props;
try { try {
@ -159,7 +175,7 @@ class UploadProgress extends Component {
} }
}; };
renderItemContent = item => { renderItemContent = (item: IItem) => {
const { width, theme } = this.props; const { width, theme } = this.props;
if (!item.error) { if (!item.error) {
@ -196,7 +212,7 @@ class UploadProgress extends Component {
}; };
// TODO: transform into stateless and update based on its own observable changes // TODO: transform into stateless and update based on its own observable changes
renderItem = (item, index) => { renderItem = (item: IItem, index: number) => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
@ -217,7 +233,7 @@ class UploadProgress extends Component {
render() { render() {
const { uploads } = this.state; const { uploads } = this.state;
return <ScrollView style={styles.container}>{uploads.map((item, i) => this.renderItem(item, i))}</ScrollView>; return <ScrollView style={styles.container}>{uploads.map((item: IItem, i: number) => this.renderItem(item, i))}</ScrollView>;
} }
} }