From 50e9ac61f8f4531533ee4a1d8724370afe9b0586 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Fri, 13 Aug 2021 06:38:15 +1000
Subject: [PATCH] formatting and helpers

---
 .../EditableProjecTitle.tsx                   | 10 ++--
 .../src/components/IdeHeader/IdeHeader.tsx    |  2 +
 .../src/components/LoginModal/LoginModal.tsx  |  2 +-
 .../ProjectProfile/ProjectProfile.tsx         | 48 ++++++++++---------
 app/web/src/helpers/canvasToBlob.ts           | 35 ++++++++++++++
 5 files changed, 70 insertions(+), 27 deletions(-)
 create mode 100644 app/web/src/helpers/canvasToBlob.ts

diff --git a/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx b/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
index fdb7102..ccc0333 100644
--- a/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
+++ b/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
@@ -76,10 +76,12 @@ const EditableProjectTitle = ({
               value={newTitle}
               onChange={onTitleChange}
               ref={inputRef}
-              onBlur={() => setTimeout(() => {
-                setInEditMode(false)
-                setNewTitle(projectTitle)
-              }, 300)}
+              onBlur={() =>
+                setTimeout(() => {
+                  setInEditMode(false)
+                  setNewTitle(projectTitle)
+                }, 300)
+              }
             />
           </span>
           <div className="flex items-center h-full">
diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx
index bd61ea6..0b077b8 100644
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/app/web/src/components/IdeHeader/IdeHeader.tsx
@@ -95,6 +95,8 @@ const IdeHeader = ({
         {canEdit && !projectTitle && (
           <CaptureButton
             canEdit={canEdit}
+            projectTitle={project?.title}
+            userName={project?.user?.userName}
             shouldUpdateImage={!project?.mainImage}
             TheButton={({ onClick }) => (
               <TopButton
diff --git a/app/web/src/components/LoginModal/LoginModal.tsx b/app/web/src/components/LoginModal/LoginModal.tsx
index 1b83f8b..d83b76c 100644
--- a/app/web/src/components/LoginModal/LoginModal.tsx
+++ b/app/web/src/components/LoginModal/LoginModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles'
 import Dialog from '@material-ui/core/Dialog'
 import Tab from '@material-ui/core/Tab'
 import Tabs from '@material-ui/core/Tabs'
diff --git a/app/web/src/components/ProjectProfile/ProjectProfile.tsx b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
index 9f378eb..00a3e4b 100644
--- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx
+++ b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
@@ -208,7 +208,9 @@ const ProjectProfile = ({
                               className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
                               placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
                               value={comment}
-                              onChange={({ target }) => setComment(target.value)}
+                              onChange={({ target }) =>
+                                setComment(target.value)
+                              }
                             />
                           </div>
                           <Button
@@ -226,28 +228,30 @@ const ProjectProfile = ({
                         </>
                       )}
                       <ul>
-                        {project?.Comment.map(({ text, user, id, createdAt }) => (
-                          <li key={id} className="mb-5">
-                            <div className="flex justify-between">
-                              <Link
-                                className="flex items-center"
-                                to={routes.user({ userName: user?.userName })}
-                              >
-                                <Gravatar
-                                  image={user?.image}
-                                  className="w-10 h-10 mr-4"
-                                />
-                                {user?.userName}
-                              </Link>
-                              <div className="font-fira-code text-ch-blue-600 flex items-center">
-                                {new Date(createdAt).toDateString()}
+                        {project?.Comment.map(
+                          ({ text, user, id, createdAt }) => (
+                            <li key={id} className="mb-5">
+                              <div className="flex justify-between">
+                                <Link
+                                  className="flex items-center"
+                                  to={routes.user({ userName: user?.userName })}
+                                >
+                                  <Gravatar
+                                    image={user?.image}
+                                    className="w-10 h-10 mr-4"
+                                  />
+                                  {user?.userName}
+                                </Link>
+                                <div className="font-fira-code text-ch-blue-600 flex items-center">
+                                  {new Date(createdAt).toDateString()}
+                                </div>
                               </div>
-                            </div>
-                            <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
-                              {text}
-                            </div>
-                          </li>
-                        ))}
+                              <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
+                                {text}
+                              </div>
+                            </li>
+                          )
+                        )}
                       </ul>
                     </>
                   )}
diff --git a/app/web/src/helpers/canvasToBlob.ts b/app/web/src/helpers/canvasToBlob.ts
new file mode 100644
index 0000000..27a6d8e
--- /dev/null
+++ b/app/web/src/helpers/canvasToBlob.ts
@@ -0,0 +1,35 @@
+export const canvasToBlob = async (
+  threeInstance,
+  { width, height }: { width: number; height: number }
+): Promise<Blob> => {
+  const updateCanvasSize = ({
+    width,
+    height,
+  }: {
+    width: number
+    height: number
+  }) => {
+    threeInstance.camera.aspect = width / height
+    threeInstance.camera.updateProjectionMatrix()
+    threeInstance.gl.setSize(width, height)
+    threeInstance.gl.render(
+      threeInstance.scene,
+      threeInstance.camera,
+      null,
+      false
+    )
+  }
+  const oldSize = threeInstance.size
+  updateCanvasSize({ width, height })
+  const imgBlobPromise: Promise<Blob> = new Promise((resolve, reject) => {
+    threeInstance.gl.domElement.toBlob(
+      (blob) => {
+        resolve(blob)
+      },
+      'image/jpeg',
+      1
+    )
+  })
+  updateCanvasSize(oldSize)
+  return imgBlobPromise
+}