From f5297382274bcdfcae3a9471d164bc21c16ebc30 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 13 Feb 2024 22:45:59 -0800
Subject: [PATCH] working on both platforms

---
 src/lib/api/index.ts                          |  6 ++++-
 src/screens/Onboarding/StepFinished.tsx       |  6 +++--
 ....tsx => PlaceholderCanvasDontNeed.web.tsx} | 24 ++++++++++++++-----
 src/screens/Onboarding/StepProfile/index.tsx  | 18 +++++++-------
 4 files changed, 36 insertions(+), 18 deletions(-)
 rename src/screens/Onboarding/StepProfile/{PlaceholderCanvasDontNeedThisLol.web.tsx => PlaceholderCanvasDontNeed.web.tsx} (66%)

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 440dfa5ee3..bb26407300 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -34,9 +34,13 @@ export async function uploadBlob(
 ): Promise<ComAtprotoRepoUploadBlob.Response> {
   if (isWeb) {
     // `blob` should be a data uri
-    return agent.uploadBlob(convertDataURIToUint8Array(blob), {
+    console.log(convertDataURIToUint8Array(blob))
+
+    const x = await agent.uploadBlob(convertDataURIToUint8Array(blob), {
       encoding,
     })
+
+    return x
   } else {
     // `blob` should be a path to a file in the local FS
     return agent.uploadBlob(
diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx
index 7f9c3283a1..ad2c131c13 100644
--- a/src/screens/Onboarding/StepFinished.tsx
+++ b/src/screens/Onboarding/StepFinished.tsx
@@ -78,10 +78,12 @@ export function StepFinished() {
           const res = await uploadBlob(
             getAgent(),
             profileStepResults.imageUri,
-            profileStepResults.imageUri,
+            profileStepResults.imageMime,
           )
 
-          existing.avatar = res.data.blob
+          if (res.data.blob) {
+            existing.avatar = res.data.blob
+          }
         }
 
         return existing
diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeedThisLol.web.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeed.web.tsx
similarity index 66%
rename from src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeedThisLol.web.tsx
rename to src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeed.web.tsx
index c998ea5f00..36ed073401 100644
--- a/src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeedThisLol.web.tsx
+++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvasDontNeed.web.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
+import {StyleSheet, View} from 'react-native'
 
-const CANVAS_HEIGHT = 24 * 10
-const CANVAS_OFFSET = 24 * 1.5
+const CANVAS_HEIGHT = 24 * 20
+const CANVAS_OFFSET = 24 * 3
 
-interface PlaceholderCanvasRef {
+export interface PlaceholderCanvasRef {
   capture: () => string
 }
 
@@ -16,7 +17,7 @@ export const PlaceholderCanvas = React.forwardRef(function PlaceholderCanvas(
   const canvasRef = React.useRef<HTMLCanvasElement>(null)
 
   const capture = React.useCallback(() => {
-    return ''
+    return canvasRef.current?.toDataURL('image/jpeg')
   }, [])
 
   React.useImperativeHandle(ref, () => ({
@@ -35,9 +36,20 @@ export const PlaceholderCanvas = React.forwardRef(function PlaceholderCanvas(
     ctx.fillStyle = '#fff'
     ctx.lineWidth = 0.1
     ctx?.translate(CANVAS_OFFSET, CANVAS_OFFSET)
-    ctx?.scale(7, 7)
+    ctx?.scale(14, 14)
     ctx?.fill(path)
   }, [avatar.backgroundColor, avatar.placeholder.path])
 
-  return <canvas ref={canvasRef} height={CANVAS_HEIGHT} width={CANVAS_HEIGHT} />
+  return (
+    <View style={styles.container}>
+      <canvas ref={canvasRef} height={CANVAS_HEIGHT} width={CANVAS_HEIGHT} />
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    top: -2000,
+    position: 'absolute',
+  },
 })
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 7b93d65794..e39d174a5e 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -66,15 +66,15 @@ export function StepProfile() {
 
   const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
 
-  React.useEffect(() => {
-    // TODO remove, this is for testing
-    ;(async () => {
-      const res = await canvasRef.current?.capture()
-      if (res) {
-        setUri(res)
-      }
-    })()
-  }, [avatar])
+  // React.useEffect(() => {
+  //   // TODO remove, this is for testing
+  //   ;(async () => {
+  //     const res = await canvasRef.current?.capture()
+  //     if (res) {
+  //       setUri(res)
+  //     }
+  //   })()
+  // }, [avatar])
 
   React.useEffect(() => {
     track('OnboardingV2:StepProfile:Start')