Refactored Server.tsx

app/App.tsx

@@ -10,7 +10,7 @@ import * as ImageManipulator from "expo-image-manipulator";
 import { Camera } from "expo-camera";
 
 import ProgressIndicator from "./components/ProgressIndicator";
-import server from "./components/Server";
+import Server from "./components/Server";
 
 const styles = StyleSheet.create({
   resultImgView: {
@@ -54,7 +54,7 @@ export default function App() {
   useEffect(() => {
     (async () => {
       // Ping the server on startup.
-      server.ping();
+      Server.ping();
       // Request permission.
       const { status } = await Camera.requestPermissionsAsync();
       const hasPermission = status === "granted" ? true : false;
@@ -93,7 +93,7 @@ export default function App() {
     );
 
     console.log("> sending to /cut...");
-    const resp = await server.cut(uri);
+    const resp = await Server.cut(uri);
 
     console.log(`Done in ${((Date.now() - start) / 1000).toFixed(3)}s`);
     return resp;
@@ -117,7 +117,7 @@ export default function App() {
 
     console.log("> sending to /paste...");
     try {
-      const resp = await server.paste(uri);
+      const resp = await Server.paste(uri);
       if (resp.status !== "ok") {
         if (resp.status === "screen not found") {
           console.log("screen not found");

app/README.md

@@ -5,17 +5,17 @@ Please follow instructions from the [expo website](https://expo.io/learn) to see
 
 ## Setup
 
-```bash
+```console
 npm install
 ```
 
 Then update the IP address in `components/Server.tsx` to point to the IP address of the computer running the local server:
-```js
+```typescript
 3: const URL = "http://192.168.1.29:8080";
 ```
 
 ## Run
 
-```bash
+```console
 npm start
 ```

app/components/Server.tsx

@@ -2,57 +2,77 @@ import Base64 from "./Base64";
 
 const URL = "http://192.168.1.29:8080";
 
-function arrayBufferToBase64(buffer: ArrayBuffer) {
-  let binary = "";
-  const bytes = [].slice.call(new Uint8Array(buffer));
-  bytes.forEach((b) => (binary += String.fromCharCode(b)));
-  return Base64.btoa(binary);
-}
+/**
+ *class containing all the static functions used for the interaction with the server
+ *
+ * @export
+ * @class Server
+ */
+export default class Server {
 
-function ping() {
-  fetch(URL + "/ping").catch((e) => console.error(e));
-}
+  /**
+   *Transform array buffer to base64 string
+   *
+   * @param {ArrayBuffer} buffer
+   * @returns {string}
+   */
+  public static arrayBufferToBase64(buffer: ArrayBuffer): string {
+    let binary = "";
+    const bytes = [].slice.call(new Uint8Array(buffer));
+    for (const b of bytes) {
+      binary += String.fromCharCode(b);
+    }
+    return Base64.btoa(binary);
+  }
+
+  public static ping(): void {
+    fetch(URL + "/ping").catch((e) => console.error(e));
+  }
+
+  /**
+   *generate the formData object that will be send to the server
+   *
+   * @param {string} imageURI
+   * @returns {FormData}
+   */
+  public static generateFormData(imageURI: string): FormData {
+    const formData = new FormData();
+    formData.append("data", {
+      uri: imageURI,
+      name: "photo",
+      type: "image/jpg",
+    });
+    return formData;
+  }
+
+  /**
+   *cut and send the image
+   *
+   * @param {string} imageURI
+   * @returns {Promise<string>}
+   */
+  public static async cut(imageURI: string): Promise<string> {
+    const formData = this.generateFormData(imageURI);
 
-async function cut(imageURI: string) {
-  const formData = new FormData();
-  formData.append("data", {
-    uri: imageURI,
-    name: "photo",
-    type: "image/jpg",
-  });
-
-  const resp = await fetch(URL + "/cut", {
-    method: "POST",
-    body: formData,
-  }).then(async (res) => {
+    const res = await fetch(URL + "/cut", { method: "POST", body: formData })
     console.log("> converting...");
     const buffer = await res.arrayBuffer();
     const base64Flag = "data:image/png;base64,";
-    const imageStr = arrayBufferToBase64(buffer);
-    return base64Flag + imageStr;
-  });
+    const imageStr = this.arrayBufferToBase64(buffer);
+    const resp = base64Flag + imageStr;
 
-  return resp;
-}
-
-async function paste(imageURI: string) {
-  const formData = new FormData();
-  formData.append("data", {
-    uri: imageURI,
-    name: "photo",
-    type: "image/jpg",
-  });
+    return resp;
+  }
 
-  const resp = await fetch(URL + "/paste", {
-    method: "POST",
-    body: formData,
-  }).then((r) => r.json());
-
-  return resp;
+  /**
+   *paste the data from the server
+   *
+   * @param {string} imageURI
+   * @returns {Promise<any>}
+   */
+  public static async paste(imageURI: string): Promise<any> {
+    const formData = this.generateFormData(imageURI);
+    const resp = await fetch(URL + "/paste", { method: "POST", body: formData });
+    return resp.json();
+  }
 }
-
-export default {
-  ping,
-  cut,
-  paste,
-};