got something working thats only a little hacky

app/web/src/components/CaptureButton/CaptureButton.tsx

@@ -5,18 +5,10 @@ import Svg from 'src/components/Svg/Svg'
 import Button from 'src/components/Button/Button'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { canvasToBlob, blobTo64 } from 'src/helpers/canvasToBlob'
-import { useUpdateProject } from 'src/helpers/hooks/useUpdateProject'
-import {
-  useUpdateSocialCard,
-  makeSocialPublicId,
-} from 'src/helpers/hooks/useUpdateSocialCard'
-import {
-  uploadToCloudinary,
-  serverVerifiedImageUpload,
-} from 'src/helpers/cloudinary'
+import { useUpdateProjectImages } from 'src/helpers/hooks/useUpdateProjectImages'
+
 import SocialCardCell from 'src/components/SocialCardCell/SocialCardCell'
 import { toJpeg } from 'html-to-image'
-import { useAuth } from '@redwoodjs/auth'
 
 const anchorOrigin = {
   vertical: 'bottom',
@@ -39,24 +31,7 @@ const CaptureButton = ({
   const [whichPopup, setWhichPopup] = useState(null)
   const { state, project } = useIdeContext()
   const ref = React.useRef<HTMLDivElement>(null)
-  const { updateProject } = useUpdateProject({
-    onCompleted: () => toast.success('Image updated'),
-  })
-  const { updateSocialCard } = useUpdateSocialCard({})
-  const { getToken } = useAuth()
-
-  const getSocialBlob = async (): Promise<string> => {
-    const tokenPromise = getToken()
-    const blob = await toJpeg(ref.current, { cacheBust: true, quality: 0.75 })
-    const token = await tokenPromise
-    const { publicId } = await serverVerifiedImageUpload(
-      blob,
-      project?.id,
-      token,
-      makeSocialPublicId(userName, projectTitle)
-    )
-    return publicId
-  }
+  const { updateProjectImages } = useUpdateProjectImages({})
 
   const onCapture = async () => {
     const threeInstance = state.threeInstance
@@ -84,29 +59,36 @@ const CaptureButton = ({
     setCaptureState(config)
 
     async function uploadAndUpdateImage() {
-      const [cloudinaryImgURL, socialCloudinaryURL] = await Promise.all([
-        uploadToCloudinary(config.image),
-        getSocialBlob(),
-      ])
+      const derp = async () => {
+        const socialCard64 = toJpeg(ref.current, {
+          cacheBust: true,
+          quality: 0.7,
+        })
 
-      updateSocialCard({
-        variables: {
-          projectId: project?.id,
-          url: socialCloudinaryURL,
-        },
-      })
-
-      // Save the screenshot as the mainImage
-      updateProject({
-        variables: {
-          id: project?.id,
-          input: {
-            mainImage: cloudinaryImgURL.public_id,
+        const promise1 = updateProjectImages({
+          variables: {
+            id: project?.id,
+            // socialCard64,
+            mainImage64: await config.image64,
           },
-        },
+        })
+        const promise2 = updateProjectImages({
+          variables: {
+            id: project?.id,
+            socialCard64: await socialCard64,
+          },
+        })
+        return Promise.all([promise2, promise1])
+      }
+      const promise = derp()
+      toast.promise(promise, {
+        loading: 'Saving Image/s',
+        success: <b>Image/s saved!</b>,
+        error: <b>Problem saving.</b>,
       })
-
-      return cloudinaryImgURL
+      const [{ data }] = await promise
+      console.log(data?.updateProjectImages)
+      return data?.updateProjectImages?.mainImage
     }
 
     // if there isn't a screenshot saved yet, just go ahead and save right away

app/web/src/helpers/canvasToBlob.ts

@@ -27,7 +27,7 @@ export const canvasToBlob = async (
         resolve(blob)
       },
       'image/jpeg',
-      1
+      0.75
     )
   })
   updateCanvasSize(oldSize)

app/web/src/helpers/cloudinary.ts

@@ -1,57 +0,0 @@
-// TODO: create a tidy util for uploading to Cloudinary and returning the public ID
-import axios from 'axios'
-
-const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
-const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
-
-export async function uploadToCloudinary(
-  imgBlob: Blob,
-  publicId?: string
-): Promise<{ public_id: string }> {
-  const imageData = new FormData()
-  imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
-  imageData.append('file', imgBlob)
-  if (publicId) {
-    imageData.append('public_id', publicId)
-  }
-  const upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
-
-  try {
-    const { data } = await upload
-    if (data && data.public_id !== '') {
-      return data
-    }
-  } catch (e) {
-    console.error('ERROR', e)
-  }
-}
-
-export async function serverVerifiedImageUpload(
-  imgBlob: string,
-  projectId: string,
-  token: string,
-  publicId?: string
-): Promise<{ publicId: string }> {
-  const imageData = {
-    image64: imgBlob,
-    upload_preset: CLOUDINARY_UPLOAD_PRESET,
-    public_id: publicId,
-    invalidate: true,
-    projectId,
-  }
-  const upload = axios.post('/.netlify/functions/image-upload', imageData, {
-    headers: {
-      'auth-provider': 'goTrue',
-      authorization: `Bearer ${token}`,
-    },
-  })
-
-  try {
-    const { data } = await upload
-    if (data && data.public_id !== '') {
-      return data
-    }
-  } catch (e) {
-    console.error('ERROR', e)
-  }
-}

app/web/src/helpers/hooks/useUpdateProjectImages.ts

@@ -0,0 +1,31 @@
+import { useMutation } from '@redwoodjs/web'
+
+const UPDATE_PROJECT_IMAGES_MUTATION_HOOK = gql`
+  mutation updateProjectImages(
+    $id: String!
+    $mainImage64: String
+    $socialCard64: String
+  ) {
+    updateProjectImages(
+      id: $id
+      mainImage64: $mainImage64
+      socialCard64: $socialCard64
+    ) {
+      id
+      mainImage
+      socialCard {
+        id
+        url
+      }
+    }
+  }
+`
+
+export const useUpdateProjectImages = ({ onCompleted = () => {} }) => {
+  const [updateProjectImages, { loading, error }] = useMutation(
+    UPDATE_PROJECT_IMAGES_MUTATION_HOOK,
+    { onCompleted }
+  )
+
+  return { updateProjectImages, loading, error }
+}

app/web/src/helpers/hooks/useUpdateSocialCard.ts

@@ -1,23 +1,3 @@
-import { useMutation } from '@redwoodjs/web'
-
-const UPDATE_SOCIAL_CARD_MUTATION_HOOK = gql`
-  mutation updateSocialCardByProjectId($projectId: String!, $url: String!) {
-    updateSocialCardByProjectId(projectId: $projectId, url: $url) {
-      id
-      url
-    }
-  }
-`
-
-export const useUpdateSocialCard = ({ onCompleted = () => {} }) => {
-  const [updateSocialCard, { loading, error }] = useMutation(
-    UPDATE_SOCIAL_CARD_MUTATION_HOOK,
-    { onCompleted }
-  )
-
-  return { updateSocialCard, loading, error }
-}
-
 export const makeSocialPublicId = (
   userName: string,
   projectTitle: string