From 50e9ac61f8f4531533ee4a1d8724370afe9b0586 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Fri, 13 Aug 2021 06:38:15 +1000 Subject: [PATCH 1/4] 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) + } />
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 && ( ( setComment(target.value)} + onChange={({ target }) => + setComment(target.value) + } />
) : (
@@ -187,6 +207,20 @@ const CaptureButton = ({ canEdit, TheButton, shouldUpdateImage }) => {
)} +
+
+
+ +
+
+
diff --git a/app/web/src/components/SocialCardCell/SocialCardCell.tsx b/app/web/src/components/SocialCardCell/SocialCardCell.tsx index 151bef7..cb63267 100644 --- a/app/web/src/components/SocialCardCell/SocialCardCell.tsx +++ b/app/web/src/components/SocialCardCell/SocialCardCell.tsx @@ -37,12 +37,13 @@ export const Failure = ({ error }: CellFailureProps) => ( export const Success = ({ userProject, + variables: { image64 }, }: CellSuccessProps) => { const image = userProject?.Project?.mainImage const gravatar = userProject?.image return (
)} -
+
{userProject?.userName}
@@ -86,13 +87,19 @@ export const Success = ({
- + {image64 ? ( +
+ ) : ( +
+ )}
@@ -133,7 +140,7 @@ export const Success = ({ CadHub
pre-alpha diff --git a/app/web/src/helpers/canvasToBlob.ts b/app/web/src/helpers/canvasToBlob.ts index 27a6d8e..f991200 100644 --- a/app/web/src/helpers/canvasToBlob.ts +++ b/app/web/src/helpers/canvasToBlob.ts @@ -33,3 +33,16 @@ export const canvasToBlob = async ( updateCanvasSize(oldSize) return imgBlobPromise } + +export const blobTo64 = async (blob: Blob): Promise => { + return new Promise(async (resolve, reject) => { + const reader = new FileReader() + reader.onloadend = () => { + if (typeof reader.result === 'string') { + resolve(reader.result) + } + } + reader.onerror = reject + reader.readAsDataURL(blob) + }) +} diff --git a/app/web/src/helpers/cloudinary.js b/app/web/src/helpers/cloudinary.js deleted file mode 100644 index ff1767c..0000000 --- a/app/web/src/helpers/cloudinary.js +++ /dev/null @@ -1,21 +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) { - const imageData = new FormData() - imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET) - imageData.append('file', imgBlob) - let 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) - } -} diff --git a/app/web/src/helpers/cloudinary.ts b/app/web/src/helpers/cloudinary.ts new file mode 100644 index 0000000..d203eb6 --- /dev/null +++ b/app/web/src/helpers/cloudinary.ts @@ -0,0 +1,57 @@ +// 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) + } +} diff --git a/app/web/src/helpers/hooks/useUpdateSocialCard.ts b/app/web/src/helpers/hooks/useUpdateSocialCard.ts new file mode 100644 index 0000000..5759191 --- /dev/null +++ b/app/web/src/helpers/hooks/useUpdateSocialCard.ts @@ -0,0 +1,24 @@ +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 +): string => `u-${userName}-slash-p-${projectTitle}` diff --git a/app/web/src/pages/ProjectPage/ProjectPage.tsx b/app/web/src/pages/ProjectPage/ProjectPage.tsx index 187db51..81309db 100644 --- a/app/web/src/pages/ProjectPage/ProjectPage.tsx +++ b/app/web/src/pages/ProjectPage/ProjectPage.tsx @@ -5,16 +5,15 @@ import Seo from 'src/components/Seo/Seo' import { useIdeState } from 'src/helpers/hooks/useIdeState' import { IdeContext } from 'src/helpers/hooks/useIdeContext' import { Toaster } from '@redwoodjs/web/toast' +import { makeSocialPublicId } from 'src/helpers/hooks/useUpdateSocialCard' const ProjectPage = ({ userName, projectTitle }) => { const { currentUser } = useAuth() const [state, thunkDispatch] = useIdeState() - const cacheInvalidator = new Date() - .toISOString() - .split('-') - .slice(0, 2) - .join('-') - const socialImageUrl = `/.netlify/functions/og-image-generator/${userName}/${projectTitle}/og-image-${cacheInvalidator}.jpg` + const socialImageUrl = `http://res.cloudinary.com/irevdev/image/upload/c_scale,w_1200/v1/CadHub/${makeSocialPublicId( + userName, + projectTitle + )}` return ( <> Date: Sat, 14 Aug 2021 15:31:04 +1000 Subject: [PATCH 3/4] add card to ide too --- app/web/src/pages/IdeProjectPage/IdeProjectPage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/web/src/pages/IdeProjectPage/IdeProjectPage.tsx b/app/web/src/pages/IdeProjectPage/IdeProjectPage.tsx index 49825c1..083568c 100644 --- a/app/web/src/pages/IdeProjectPage/IdeProjectPage.tsx +++ b/app/web/src/pages/IdeProjectPage/IdeProjectPage.tsx @@ -1,10 +1,15 @@ import IdeProjectCell from 'src/components/IdeProjectCell' import Seo from 'src/components/Seo/Seo' +import { makeSocialPublicId } from 'src/helpers/hooks/useUpdateSocialCard' const IdeProjectPage = ({ userName, projectTitle }) => { + const socialImageUrl = `http://res.cloudinary.com/irevdev/image/upload/c_scale,w_1200/v1/CadHub/${makeSocialPublicId( + userName, + projectTitle + )}` return ( <> - + ) From 224eb1d3ba1f0c70c5e1f79ab80d5ceb480847e6 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Sat, 14 Aug 2021 15:49:35 +1000 Subject: [PATCH 4/4] Give some TLC the meta tags --- app/web/src/components/Seo/Seo.tsx | 25 +++++++++++++++++++------ app/web/src/index.html | 6 +++++- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/app/web/src/components/Seo/Seo.tsx b/app/web/src/components/Seo/Seo.tsx index 7c8adc5..9a951bc 100644 --- a/app/web/src/components/Seo/Seo.tsx +++ b/app/web/src/components/Seo/Seo.tsx @@ -1,9 +1,9 @@ import { Helmet } from 'react-helmet' const Seo = ({ - title, - description, - lang, + title = "CadHub", + description = "Edit this part of CadHub", + lang = 'en-US', socialImageUrl, }: { title: string @@ -20,12 +20,25 @@ const Seo = ({ title={title} titleTemplate={`Cadhub - ${title}`} > - + {title || 'cadhub'} + + + {/* Facebook Meta Tags */} + + - - Cadhub - {title} + + {/* Twitter Meta Tags */} + + + + + + + + ) diff --git a/app/web/src/index.html b/app/web/src/index.html index a8dc4ed..ea5a410 100644 --- a/app/web/src/index.html +++ b/app/web/src/index.html @@ -6,7 +6,11 @@ - <%= htmlWebpackPlugin.options.title %> + CadHub + + + +