Fix lint and add CI workflow (#2)

* Fix lint issues

* Remove lefthook yml

* Add actions workflow

* Update readme

* JSX nits

* Bump package

.github/workflows/build.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: 'npm'
+      - name: Install dependencies
+        run: yarn
+      - name: Lint
+        run: yarn lint
+      - name: Build package
+        run: yarn prepare

README.md

@@ -37,7 +37,7 @@ const { startUpload, abortUpload } = useFileUpload({
 });
 
 const onPressUpload = async () => {
-  const promises = data.map(item => startUpload(item));
+  const promises = data.map((item) => startUpload(item));
   // Use Promise.all instead if you want to throw an error from a timeout or error.
   // As of October 2022 you have to polyfill allSettled in React Native.
   const result = await Promise.allSettled(promises);
@@ -209,7 +209,7 @@ Another downside is fault tolerance. By splitting the files into separate reques
 
 ### How does the local node server throttle the upload requests?
 
-The local node server throttles the upload requests to simulate a real world scenario on a cellular connection or slower network. This helps test out the progress and timeout handling on the client. It does this by using the node `throttle` library. See the `/upload` route in [here](example/server/server.ts) for the details.
+The local node server throttles the upload requests to simulate a real world scenario on a cellular connection or slower network. This helps test out the progress and timeout handling on the client. It does this by using the [node-throttle](https://github.com/TooTallNate/node-throttle) library. See the `/upload` route in [here](example/server/server.ts) for the details.
 
 ### How do I bypass the throttling on the local node server?
 

example/server/server.ts

@@ -46,7 +46,7 @@ const upload = multer({
           method: 'POST',
           headers: req.headers,
         },
-        requestResp => {
+        (requestResp) => {
           requestResp.pipe(res);
         }
       )

example/src/App.tsx

@@ -50,27 +50,27 @@ export default function App() {
         keysAndValues: [{ key: 'progress', value: progress }],
       });
     },
-    onDone: data => {
-      console.log('onDone, data: ', data);
+    onDone: (_data) => {
+      //console.log('onDone, data: ', data);
       updateItem({
-        item: data.item,
+        item: _data.item,
         keysAndValues: [{ key: 'completed', value: true }],
       });
     },
-    onError: data => {
-      console.log('onError, data: ', data);
+    onError: (_data) => {
+      //console.log('onError, data: ', data);
       updateItem({
-        item: data.item,
+        item: _data.item,
         keysAndValues: [
           { key: 'progress', value: undefined },
           { key: 'failed', value: true },
         ],
       });
     },
-    onTimeout: data => {
-      console.log('onTimeout, data: ', data);
+    onTimeout: (_data) => {
+      //console.log('onTimeout, data: ', data);
       updateItem({
-        item: data.item,
+        item: _data.item,
         keysAndValues: [
           { key: 'progress', value: undefined },
           { key: 'failed', value: true },
@@ -80,7 +80,7 @@ export default function App() {
   });
 
   const isUploading = useMemo(() => {
-    return data.some(item => {
+    return data.some((item) => {
       return (
         typeof item.progress === 'number' &&
         item.progress > 0 &&
@@ -96,9 +96,9 @@ export default function App() {
     item: Item;
     keysAndValues: { key: K; value: Item[K] }[];
   }) => {
-    setData(prevState => {
+    setData((prevState) => {
       const newState = [...prevState];
-      const itemToUpdate = newState.find(s => s.uri === item.uri);
+      const itemToUpdate = newState.find((s) => s.uri === item.uri);
 
       if (itemToUpdate) {
         keysAndValues.forEach(({ key, value }) => {
@@ -118,36 +118,36 @@ export default function App() {
     });
 
     const items: Item[] =
-      response?.assets?.map(a => ({
+      response?.assets?.map((a) => ({
         name: a.fileName!,
         type: a.type!,
         uri: a.uri!,
       })) ?? [];
 
-    setData(prevState => [...prevState, ...items]);
+    setData((prevState) => [...prevState, ...items]);
   };
 
   const onPressUpload = async () => {
     // allow uploading any that previously failed
-    setData(prevState =>
-      [...prevState].map(item => ({
+    setData((prevState) =>
+      [...prevState].map((item) => ({
         ...item,
         failed: false,
       }))
     );
 
     const promises = data
-      .filter(item => typeof item.progress !== 'number') // leave out any in progress
-      .map(item => startUpload(item));
+      .filter((item) => typeof item.progress !== 'number') // leave out any in progress
+      .map((item) => startUpload(item));
     // use Promise.all here if you want an error from a timeout or error
     const result = await allSettled(promises);
     console.log('result: ', result);
   };
 
   const onPressDeleteItem = (item: Item) => () => {
-    setData(prevState => {
+    setData((prevState) => {
       const newState = [...prevState];
-      const deleteIndex = prevState.findIndex(s => s.uri === item.uri);
+      const deleteIndex = prevState.findIndex((s) => s.uri === item.uri);
 
       if (deleteIndex > -1) {
         newState.splice(deleteIndex, 1);
@@ -226,12 +226,10 @@ export default function App() {
         ) : null}
         {item.failed ? (
           <Pressable onPress={onPressRetry(item)}>
-            <Text style={styles.refreshIconText}>&#x21bb;</Text>
+            <Text style={styles.iconText}>&#x21bb;</Text>
           </Pressable>
         ) : null}
-        {item.completed ? (
-          <Text style={styles.refreshIconText}>&#10003;</Text>
-        ) : null}
+        {item.completed ? <Text style={styles.iconText}>&#10003;</Text> : null}
         <Pressable style={styles.deleteIcon} onPress={onPressDeleteItem(item)}>
           <Text style={styles.deleteIconText}>&#x2717;</Text>
         </Pressable>
@@ -250,13 +248,13 @@ export default function App() {
           onDragRelease={onDragRelease}
           dragStartAnimation={getDragStartAnimation()}
         >
-          {data.map(d => renderItem(d))}
+          {data.map((d) => renderItem(d))}
         </SortableGrid>
 
         <View style={styles.flexContainer} />
         <View style={styles.row}>
           <Button title="Upload" onPress={onPressUpload} />
-          {isUploading && <ActivityIndicator />}
+          {isUploading ? <ActivityIndicator /> : null}
         </View>
       </View>
     </SafeAreaView>
@@ -302,7 +300,7 @@ const styles = StyleSheet.create({
   deleteIconText: {
     fontWeight: '800',
   },
-  refreshIconText: {
+  iconText: {
     fontSize: 64,
     color: '#fff',
     fontWeight: '800',

example/src/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 type Props = {
@@ -12,20 +12,20 @@ export default function ProgressBar({
   style,
   progressColor = '#3880ff',
 }: Props) {
-  const valueAnimated = React.useRef(new Animated.Value(0)).current;
+  const valueAnimated = useRef(new Animated.Value(0)).current;
   const width = valueAnimated.interpolate({
     inputRange: [0, 100],
     outputRange: ['0%', '100%'],
     extrapolate: 'clamp',
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     Animated.timing(valueAnimated, {
       toValue: value,
       duration: 500,
       useNativeDriver: false,
     }).start();
-  }, [value]);
+  }, [value, valueAnimated]);
 
   return (
     <View style={[styles.progressBar, style]}>

example/src/util/allSettled.ts

@@ -1,9 +1,9 @@
 export const allSettled = (promises: Promise<any>[]) => {
   return Promise.all(
-    promises.map(promise =>
+    promises.map((promise) =>
       promise
-        .then(value => ({ status: 'fulfilled', value }))
-        .catch(reason => ({ status: 'rejected', reason }))
+        .then((value) => ({ status: 'fulfilled', value }))
+        .catch((reason) => ({ status: 'rejected', reason }))
     )
   );
 };