feat: add profile and storage settings components, integrate rich text editor, and implement image compression for uploads

src/utils/Fetcher.jsx

@@ -480,6 +480,13 @@ const PutWebhookURL = url => {
   })
 }
 
+const GetStorageUsage = () => {
+  return Fetch(`/users/storage`, {
+    method: 'GET',
+    headers: HEADERS(),
+  })
+}
+
 export {
   AcceptCircleMemberRequest,
   ArchiveChore,
@@ -509,6 +516,7 @@ export {
   GetLabels,
   GetLongLiveTokens,
   GetResource,
+  GetStorageUsage,
   GetSubscriptionSession,
   GetThingHistory,
   GetThings,

src/utils/Helpers.jsx

@@ -1,7 +1,18 @@
 import moment from 'moment'
+import { getAssetURL } from './TokenManager'
 
 const isPlusAccount = userProfile => {
   return userProfile?.expiration && moment(userProfile?.expiration).isAfter()
 }
 
-export { isPlusAccount }
+const resolvePhotoURL = url => {
+  if (!url) return ''
+  if (url.startsWith('http') || url.startsWith('https')) {
+    return url
+  }
+  if (url.startsWith('assets')) {
+    return getAssetURL(url)
+  }
+  return url
+}
+export { isPlusAccount, resolvePhotoURL }

src/utils/imageCropUtils.js

@@ -0,0 +1,45 @@
+// Utility to crop and resize an image to a square (e.g. 320x320) and return a JPEG Blob
+// Usage: await getCroppedImg(imageSrc, croppedAreaPixels, width, height, mimeType)
+export async function getCroppedImg(
+  imageSrc,
+  crop,
+  width,
+  height,
+  mimeType = 'image/jpeg',
+) {
+  return new Promise((resolve, reject) => {
+    const image = new window.Image()
+    image.crossOrigin = 'anonymous'
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      // Draw the cropped image to the canvas
+      ctx.drawImage(
+        image,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        width,
+        height,
+      )
+      canvas.toBlob(
+        blob => {
+          if (!blob) {
+            reject(new Error('Canvas is empty'))
+            return
+          }
+          resolve(blob)
+        },
+        mimeType,
+        0.92,
+      )
+    }
+    image.onerror = error => reject(error)
+    image.src = imageSrc
+  })
+}