chore: formatted code using prettier

5 files changed, 338 insertions, 316 deletions

diff --git a/client/.prettierrc b/client/.prettierrc
new file mode 100644
index 0000000..fe82409
--- /dev/null
+++ b/client/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true
+}
diff --git a/client/assets/fonts.css b/client/assets/fonts.css
index 53f8738..7918c13 100644
--- a/client/assets/fonts.css
+++ b/client/assets/fonts.css
@@ -1,21 +1,22 @@
 /* latin-ext */
 @font-face {
-    font-family: "JetBrains Mono";
-    font-style: normal;
-    font-weight: 100 800;
-    font-display: swap;
-    src: url(/assets/fonts/JetBrains_Mono_latin-ext.woff2) format("woff2");
-    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
-      U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-  }
-  /* latin */
-  @font-face {
-    font-family: "JetBrains Mono";
-    font-style: normal;
-    font-weight: 100 800;
-    font-display: swap;
-    src: url(/assets/fonts/JetBrains_Mono_latin.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
\ No newline at end of file
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url(/assets/fonts/JetBrains_Mono_latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url(/assets/fonts/JetBrains_Mono_latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
diff --git a/client/assets/index.js b/client/assets/index.js
index 0e9d61a..dcf7f25 100644
--- a/client/assets/index.js
+++ b/client/assets/index.js
@@ -1,177 +1,183 @@
 document.addEventListener('DOMContentLoaded', async () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const fileId = urlParams.get('id');
-    const key = urlParams.get('key');
+  const urlParams = new URLSearchParams(window.location.search)
+  const fileId = urlParams.get('id')
+  const key = urlParams.get('key')
 
-    if (fileId && key) {
-        displayFileDetails(fileId, key);
-    } else {
-        document.getElementById('upload__form').style.display = 'block';
-        setupUploadForm();
-    }
-});
+  if (fileId && key) {
+    displayFileDetails(fileId, key)
+  } else {
+    document.getElementById('upload__form').style.display = 'block'
+    setupUploadForm()
+  }
+})
 
-const baseUrl = window.location.origin;
-const CHUNK_SIZE = 100 * 1024 * 1024; // 100 MB
+const baseUrl = window.location.origin
+const CHUNK_SIZE = 100 * 1024 * 1024 // 100 MB
 
 async function displayFileDetails(fileId, key) {
-    try {
-        const response = await fetch(`${baseUrl}/get/${fileId}?key=${key}`, {
-            method: 'GET',
-        });
-
-        const fileDetails = document.getElementById('file__details');
-        const fileNameElement = document.getElementById('file__name');
-        const fileSizeElement = document.getElementById('file__size');
-        const downloadButton = document.getElementById('download__btn');
-        const copyButton = document.getElementById('copy__btn');
-
-        if (!response.ok) {
-            fileDetails.textContent = `Error: ${response.statusText}`;
-            fileDetails.style.display = 'flex';
-            return;
-        }
-
-        const contentType = response.headers.get('Content-Type');
-        
-        if (contentType && contentType.includes('application/json')) {
-            const result = await response.json();
-            const downloadUrl = `${baseUrl}/download/${fileId}?key=${key}`;
-            const pageUrl = `${baseUrl}/?id=${fileId}&key=${key}`;
-            fileNameElement.textContent = `${result.fileName}`;
-            fileSizeElement.textContent = `${result.fileSize}`;
-            downloadButton.innerHTML = `<a href="${downloadUrl}">Download</a>`;
-            copyButton.onclick = () => {
-                navigator.clipboard.writeText(pageUrl);
-                copyButton.textContent = 'Copied!';
-            };
-        } else {
-            const result = await response.text();
-            fileDetails.textContent = result;
-        }
-
-        fileDetails.style.display = 'flex';
-    } catch (error) {
-        console.error('Error:', error);
-        document.getElementById('file__details').textContent = 'An error occurred. Please try again.';
-        document.getElementById('file__details').style.display = 'flex';
+  try {
+    const response = await fetch(`${baseUrl}/get/${fileId}?key=${key}`, {
+      method: 'GET'
+    })
+
+    const fileDetails = document.getElementById('file__details')
+    const fileNameElement = document.getElementById('file__name')
+    const fileSizeElement = document.getElementById('file__size')
+    const downloadButton = document.getElementById('download__btn')
+    const copyButton = document.getElementById('copy__btn')
+
+    if (!response.ok) {
+      fileDetails.textContent = `Error: ${response.statusText}`
+      fileDetails.style.display = 'flex'
+      return
+    }
+
+    const contentType = response.headers.get('Content-Type')
+
+    if (contentType && contentType.includes('application/json')) {
+      const result = await response.json()
+      const downloadUrl = `${baseUrl}/download/${fileId}?key=${key}`
+      const pageUrl = `${baseUrl}/?id=${fileId}&key=${key}`
+      fileNameElement.textContent = `${result.fileName}`
+      fileSizeElement.textContent = `${result.fileSize}`
+      downloadButton.innerHTML = `<a href="${downloadUrl}">Download</a>`
+      copyButton.onclick = () => {
+        navigator.clipboard.writeText(pageUrl)
+        copyButton.textContent = 'Copied!'
+      }
+    } else {
+      const result = await response.text()
+      fileDetails.textContent = result
     }
+
+    fileDetails.style.display = 'flex'
+  } catch (error) {
+    console.error('Error:', error)
+    document.getElementById('file__details').textContent =
+      'An error occurred. Please try again.'
+    document.getElementById('file__details').style.display = 'flex'
+  }
 }
 
 function setupUploadForm() {
-    const fileInput = document.querySelector('.upload__input');
-    const overlayText = document.querySelector('.upload__input__overlay__text');
-
-    fileInput.addEventListener('change', () => {
-        if (fileInput.files.length > 0) {
-            overlayText.textContent = fileInput.files[0].name;
-        } else {
-            overlayText.textContent = 'Choose a file or drag it here';
-        }
-    });
-
-    document.getElementById('upload__form').addEventListener('submit', async (event) => {
-        event.preventDefault();
-
-        const file = fileInput.files[0];
-
-        if (!file) {
-            console.log('No file selected.');
-            return;
-        }
-
-        const progressBar = document.getElementById('upload__progress');
-        const progressFill = document.getElementById('progress__fill');
-        const uploadButton = document.getElementById('upload__btn');
-
-        uploadButton.style.display = 'none';
-        progressBar.style.display = 'block';
-        fileInput.disabled = true;
-
-        try {
-            await uploadFileInChunks(file, progressFill);
-        } catch (error) {
-            console.error('Error:', error);
-            document.getElementById('upload__result').textContent = 'An error occurred. Please try again.';
-            document.getElementById('upload__result').classList.add('upload__result__visible');
-        } finally {
-            progressBar.style.display = 'none';
-            uploadButton.style.display = 'inline-block';
-            fileInput.disabled = false;
-        }
-    });
-}
+  const fileInput = document.querySelector('.upload__input')
+  const overlayText = document.querySelector('.upload__input__overlay__text')
 
-async function uploadFileInChunks(file, progressFill) {
-    const fileSize = file.size;
-    const chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
-    const uploadId = generateUploadId();
-    let uploadedSize = 0;
-
-    for (let chunkIndex = 0; chunkIndex < chunkCount; chunkIndex++) {
-        const start = chunkIndex * CHUNK_SIZE;
-        const end = Math.min(start + CHUNK_SIZE, fileSize);
-        const chunk = file.slice(start, end);
-
-        const formData = new FormData();
-        formData.append('chunk', chunk);
-        formData.append('uploadId', uploadId);
-        formData.append('chunkIndex', chunkIndex);
-        formData.append('chunkCount', chunkCount);
-        formData.append('fileName', file.name);
-
-        await uploadChunk(formData, progressFill, uploadedSize, fileSize);
-
-        uploadedSize += chunk.size;
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files.length > 0) {
+      overlayText.textContent = fileInput.files[0].name
+    } else {
+      overlayText.textContent = 'Choose a file or drag it here'
     }
+  })
+
+  document
+    .getElementById('upload__form')
+    .addEventListener('submit', async (event) => {
+      event.preventDefault()
+
+      const file = fileInput.files[0]
+
+      if (!file) {
+        console.log('No file selected.')
+        return
+      }
+
+      const progressBar = document.getElementById('upload__progress')
+      const progressFill = document.getElementById('progress__fill')
+      const uploadButton = document.getElementById('upload__btn')
+
+      uploadButton.style.display = 'none'
+      progressBar.style.display = 'block'
+      fileInput.disabled = true
+
+      try {
+        await uploadFileInChunks(file, progressFill)
+      } catch (error) {
+        console.error('Error:', error)
+        document.getElementById('upload__result').textContent =
+          'An error occurred. Please try again.'
+        document
+          .getElementById('upload__result')
+          .classList.add('upload__result__visible')
+      } finally {
+        progressBar.style.display = 'none'
+        uploadButton.style.display = 'inline-block'
+        fileInput.disabled = false
+      }
+    })
+}
 
-    // Call upload_complete endpoint
-    const completeFormData = new FormData();
-    completeFormData.append('uploadId', uploadId);
-    completeFormData.append('chunkCount', chunkCount);
-    completeFormData.append('fileName', file.name);
+async function uploadFileInChunks(file, progressFill) {
+  const fileSize = file.size
+  const chunkCount = Math.ceil(fileSize / CHUNK_SIZE)
+  const uploadId = generateUploadId()
+  let uploadedSize = 0
+
+  for (let chunkIndex = 0; chunkIndex < chunkCount; chunkIndex++) {
+    const start = chunkIndex * CHUNK_SIZE
+    const end = Math.min(start + CHUNK_SIZE, fileSize)
+    const chunk = file.slice(start, end)
+
+    const formData = new FormData()
+    formData.append('chunk', chunk)
+    formData.append('uploadId', uploadId)
+    formData.append('chunkIndex', chunkIndex)
+    formData.append('chunkCount', chunkCount)
+    formData.append('fileName', file.name)
+
+    await uploadChunk(formData, progressFill, uploadedSize, fileSize)
+
+    uploadedSize += chunk.size
+  }
+
+  // Call upload_complete endpoint
+  const completeFormData = new FormData()
+  completeFormData.append('uploadId', uploadId)
+  completeFormData.append('chunkCount', chunkCount)
+  completeFormData.append('fileName', file.name)
+
+  const completeResponse = await fetch(`${baseUrl}/upload_complete`, {
+    method: 'POST',
+    body: completeFormData
+  })
+
+  if (!completeResponse.ok) {
+    throw new Error(`Error completing upload: ${completeResponse.statusText}`)
+  }
+
+  const result = await completeResponse.json()
+  const pageUrl = `${baseUrl}/?id=${result.id}&key=${result.key}`
+  window.location.href = pageUrl
+}
 
-    const completeResponse = await fetch(`${baseUrl}/upload_complete`, {
-        method: 'POST',
-        body: completeFormData,
-    });
+async function uploadChunk(formData, progressFill, uploadedSize, fileSize) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('POST', `${baseUrl}/upload_chunk`, true)
+
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) {
+        const totalUploaded = uploadedSize + event.loaded
+        const progress = Math.round((totalUploaded / fileSize) * 100)
+        progressFill.style.width = `${progress}%`
+      }
+    }
 
-    if (!completeResponse.ok) {
-        throw new Error(`Error completing upload: ${completeResponse.statusText}`);
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        resolve()
+      } else {
+        reject(new Error(`Error uploading chunk: ${xhr.statusText}`))
+      }
     }
 
-    const result = await completeResponse.json();
-    const pageUrl = `${baseUrl}/?id=${result.id}&key=${result.key}`;
-    window.location.href = pageUrl;
-}
+    xhr.onerror = () => reject(new Error('Network error occurred'))
 
-async function uploadChunk(formData, progressFill, uploadedSize, fileSize) {
-    return new Promise((resolve, reject) => {
-        const xhr = new XMLHttpRequest();
-        xhr.open('POST', `${baseUrl}/upload_chunk`, true);
-
-        xhr.upload.onprogress = (event) => {
-            if (event.lengthComputable) {
-                const totalUploaded = uploadedSize + event.loaded;
-                const progress = Math.round((totalUploaded / fileSize) * 100);
-                progressFill.style.width = `${progress}%`;
-            }
-        };
-
-        xhr.onload = () => {
-            if (xhr.status === 200) {
-                resolve();
-            } else {
-                reject(new Error(`Error uploading chunk: ${xhr.statusText}`));
-            }
-        };
-
-        xhr.onerror = () => reject(new Error('Network error occurred'));
-
-        xhr.send(formData);
-    });
+    xhr.send(formData)
+  })
 }
 
 function generateUploadId() {
-    return Math.random().toString(36).substr(2, 9);
+  return Math.random().toString(36).substr(2, 9)
 }
diff --git a/client/assets/styles.css b/client/assets/styles.css
index c5b1dcc..6332760 100644
--- a/client/assets/styles.css
+++ b/client/assets/styles.css
@@ -1,162 +1,162 @@
 @import url('fonts.css');
 
 body {
-    background-color: #282828;
-    color: #ebdbb2;
-    margin: 0;
-    padding: 0;
-    font-family: 'JetBrains Mono', monospace;
+  background-color: #282828;
+  color: #ebdbb2;
+  margin: 0;
+  padding: 0;
+  font-family: 'JetBrains Mono', monospace;
 }
 
 #root {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    width: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: auto;
 }
 
 .header {
-    display: flex;
-    justify-content: center;
-    padding: 1rem;
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
 }
 
 .upload__container,
 .file__details {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 600px;
-    min-width: 600px;
-    border-radius: 2rem;
-    gap: 1rem;
-    padding: 1rem;
-    background-color: #ebdbb2;
-    color: #282828;
-    overflow-wrap: anywhere;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 600px;
+  min-width: 600px;
+  border-radius: 2rem;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #ebdbb2;
+  color: #282828;
+  overflow-wrap: anywhere;
+  position: relative;
 }
 
 .file__details__text {
-    font-size: 1.5rem;
+  font-size: 1.5rem;
 }
 
 .file__details__button__container {
-    display: flex;
-    gap: 1rem;
+  display: flex;
+  gap: 1rem;
 }
 
 .upload__button,
 .download__button {
-    font-size: 1.5rem;
-    padding: 1rem;
-    background-color: #282828;
-    border-radius: 16px;
-    border: 1px solid #282828;
-    color: #ebdbb2;
-    cursor: pointer;
-    transition: transform 0.3s ease-in-out;
+  font-size: 1.5rem;
+  padding: 1rem;
+  background-color: #282828;
+  border-radius: 16px;
+  border: 1px solid #282828;
+  color: #ebdbb2;
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out;
 }
 
 .upload__button:hover,
 .download__button:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 .upload__button {
-    position: absolute;
-    bottom: 5%;
+  position: absolute;
+  bottom: 5%;
 }
 
 .upload__input {
-    color: #282828;
-    border: 2px solid #282828;
-    padding: 2rem;
-    border-radius: 0.5rem;
-    min-height: 300px;
-    min-width: 300px;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 0;
-    z-index: 2;
-    cursor: pointer;
+  color: #282828;
+  border: 2px solid #282828;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  min-height: 300px;
+  min-width: 300px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  z-index: 2;
+  cursor: pointer;
 }
 
 .upload__input__overlay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    color: #282828;
-    border: 2px solid #282828;
-    padding: 2rem;
-    border-radius: 0.5rem;
-    min-height: 300px;
-    min-width: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #282828;
+  border: 2px solid #282828;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  min-height: 300px;
+  min-width: 300px;
 }
 
 .upload__result {
-    opacity: 0;
-    padding: 1rem;
+  opacity: 0;
+  padding: 1rem;
 }
 
 .upload__result__visible {
-    opacity: 1;
+  opacity: 1;
 }
 
 .upload__progress {
-    width: 90%;
-    height: 20px;
-    background-color: #a89984;
-    border-radius: 8px;
-    overflow: hidden;
-    margin: 1rem;
-    position: absolute;
-    bottom: 5%;
+  width: 90%;
+  height: 20px;
+  background-color: #a89984;
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 1rem;
+  position: absolute;
+  bottom: 5%;
 }
 
 .upload__progress__fill {
-    height: 100%;
-    width: 0;
-    background-color: #504945;
-    transition: width 0.2s ease-in-out;
+  height: 100%;
+  width: 0;
+  background-color: #504945;
+  transition: width 0.2s ease-in-out;
 }
 
 a {
-    text-decoration: none;
-    color: inherit;
+  text-decoration: none;
+  color: inherit;
 }
 
 @media (max-width: 768px) {
+  .upload__container,
+  .file__details {
+    min-height: 400px;
+    min-width: 300px;
+    max-height: 400px;
+    max-width: 300px;
+  }
+
+  .upload__input,
+  .upload__input__overlay {
+    min-height: 100px;
+    min-width: 250px;
+    max-width: 250px;
+    padding: 0.5rem;
+  }
+
+  .upload__button,
+  .download__button {
+    font-size: 1.2rem;
+  }
+
+  .file__details__text {
+    font-size: 1.2rem;
+  }
+}
 
-    .upload__container,
-    .file__details {
-        min-height: 400px;
-        min-width: 300px;
-        max-height: 400px;
-        max-width: 300px;
-    }
-
-    .upload__input,
-    .upload__input__overlay {
-        min-height: 100px;
-        min-width: 250px;
-        max-width: 250px;
-        padding: 0.5rem;
-    }
-
-    .upload__button,
-    .download__button {
-        font-size: 1.2rem;
-    }
-
-    .file__details__text {
-        font-size: 1.2rem;
-    }
-}
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 4cec1db..8c433ab 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,42 +1,48 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>File Share</title>
+    <link rel="stylesheet" href="assets/styles.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>File Share</title>
-  <link rel="stylesheet" href="assets/styles.css">
-</head>
-
-<body>
-  <div id="root">
-    <div class="header">
-      <h2 class="header__title">File Share</h2>
-    </div>
-    <form id="upload__form" style="display: none;">
-      <div class="upload__container">
-        <div class="upload__input__overlay">
-          <p class="upload__input__overlay__text">Choose a file or drag it here</p>
+  <body>
+    <div id="root">
+      <div class="header">
+        <h2 class="header__title">File Share</h2>
+      </div>
+      <form id="upload__form" style="display: none">
+        <div class="upload__container">
+          <div class="upload__input__overlay">
+            <p class="upload__input__overlay__text">
+              Choose a file or drag it here
+            </p>
+          </div>
+          <input type="file" class="upload__input" name="file" />
+          <div
+            class="upload__progress"
+            id="upload__progress"
+            style="display: none"
+          >
+            <div class="upload__progress__fill" id="progress__fill"></div>
+          </div>
+          <button type="submit" class="upload__button" id="upload__btn">
+            Upload
+          </button>
         </div>
-        <input type="file" class="upload__input" name="file">
-        <div class="upload__progress" id="upload__progress" style="display: none;">
-          <div class="upload__progress__fill" id="progress__fill"></div>
+      </form>
+      <div class="file__details" id="file__details" style="display: none">
+        <p class="file__details__text" id="file__name"></p>
+        <p class="file__details__text" id="file__size"></p>
+        <div class="file__details__button__container">
+          <button class="download__button" id="download__btn">Download</button>
+          <button class="download__button" id="copy__btn">Copy Link</button>
         </div>
-        <button type="submit" class="upload__button" id="upload__btn">Upload</button>
-      </div>
-    </form>
-    <div class="file__details" id="file__details" style="display: none;">
-      <p class="file__details__text" id="file__name"></p>
-      <p class="file__details__text" id="file__size"></p>
-      <div class="file__details__button__container">
-        <button class="download__button" id="download__btn">Download</button>
-        <button class="download__button" id="copy__btn">Copy Link</button>
       </div>
+      <div class="upload__result" id="upload__result">Error Placeholder</div>
     </div>
-    <div class="upload__result" id="upload__result">Error Placeholder</div>
-  </div>
-
-  <script src="assets/index.js"></script>
-</body>
 
+    <script src="assets/index.js"></script>
+  </body>
 </html>