From e4bf8f5e81799608fe59ce2788a21bfe14a99216 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Fri, 30 Jul 2021 21:04:28 +1000 Subject: [PATCH] Add social preview page --- app/web/src/Routes.js | 1 + app/web/src/components/Gravatar/Gravatar.tsx | 5 +- .../src/components/IdeWrapper/useSaveCode.ts | 2 +- .../SocialCardCell/SocialCardCell.tsx | 144 ++++++++++++++++++ app/web/src/components/Svg/Svg.tsx | 49 ++++++ .../pages/SocialCardPage/SocialCardPage.tsx | 13 ++ app/web/tailwind.config.js | 2 + 7 files changed, 213 insertions(+), 3 deletions(-) create mode 100644 app/web/src/components/SocialCardCell/SocialCardCell.tsx create mode 100644 app/web/src/pages/SocialCardPage/SocialCardPage.tsx diff --git a/app/web/src/Routes.js b/app/web/src/Routes.js index 665ad9d..4279d72 100644 --- a/app/web/src/Routes.js +++ b/app/web/src/Routes.js @@ -55,6 +55,7 @@ const Routes = () => { + diff --git a/app/web/src/components/Gravatar/Gravatar.tsx b/app/web/src/components/Gravatar/Gravatar.tsx index 58ea606..08603f5 100644 --- a/app/web/src/components/Gravatar/Gravatar.tsx +++ b/app/web/src/components/Gravatar/Gravatar.tsx @@ -4,9 +4,10 @@ import { Image as CloudinaryImage } from 'cloudinary-react' interface Props { image: string className?: string + size?: number } -const Gravatar = ({ image, className = '' }: Props) => { +const Gravatar = ({ image, size = 40, className = '' }: Props) => { return (
{
diff --git a/app/web/src/components/IdeWrapper/useSaveCode.ts b/app/web/src/components/IdeWrapper/useSaveCode.ts index 8a26161..69dcd71 100644 --- a/app/web/src/components/IdeWrapper/useSaveCode.ts +++ b/app/web/src/components/IdeWrapper/useSaveCode.ts @@ -19,7 +19,7 @@ export const useSaveCode = () => { setNowError(!!error) } if (!currentUser || project?.user?.id !== currentUser?.sub) { - return () => console.log('not your project') + return () => {} } return (input: Prisma.ProjectUpdateInput) => { updateProject({ variables: { id: project.id, input } }) diff --git a/app/web/src/components/SocialCardCell/SocialCardCell.tsx b/app/web/src/components/SocialCardCell/SocialCardCell.tsx new file mode 100644 index 0000000..8182221 --- /dev/null +++ b/app/web/src/components/SocialCardCell/SocialCardCell.tsx @@ -0,0 +1,144 @@ +import type { FindSocialCardQuery } from 'types/graphql' +import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web' +import Svg from 'src/components/Svg/Svg' +import { Image as CloudinaryImage } from 'cloudinary-react' +import Gravatar from 'src/components/Gravatar/Gravatar' +import CadPackage from 'src/components/CadPackage/CadPackage' + +export const QUERY = gql` + query FindSocialCardQuery($userName: String!, $projectTitle: String) { + userProject: userName(userName: $userName) { + userName + image + Project(projectTitle: $projectTitle) { + id + title + description + mainImage + createdAt + updatedAt + userId + cadPackage + Reaction { + emote + } + } + } + } +` + +export const Loading = () =>
Loading...
+ +export const Empty = () =>
Empty
+ +export const Failure = ({ error }: CellFailureProps) => ( +
Error: {error.message}
+) + +export const Success = ({ + userProject, +}: CellSuccessProps) => { + const image = userProject?.Project?.mainImage + const gravatar = userProject?.image + return ( +
+
+
+
+ {/* */} +
+ +
+
+
+ {gravatar && ( + + )} +
+ {userProject?.userName} +
+
+ +
+ +

+ {userProject?.Project?.title.replace(/-/g, ' ')} +

+ +

+ {(userProject?.Project?.description || '').slice(0, 150)} +

+
+
+
+
+ +
+
+
+
+
+ {[ + { + svg: 'reactions', + title: 'Reactions', + count: userProject?.Project?.Reaction?.length, + }, + { + svg: 'fork-new', + title: 'Forks', + count: 0, + }, + ].map(({ svg, title, count }, index) => ( +
+ +
+
{count}
+
{title}
+
+
+ ))} +
+
+ +
+ {/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */} +

+ CadHub +

+
+ pre-alpha +
+
+
+
+
+
+ ) +} diff --git a/app/web/src/components/Svg/Svg.tsx b/app/web/src/components/Svg/Svg.tsx index 2313dff..f21612d 100644 --- a/app/web/src/components/Svg/Svg.tsx +++ b/app/web/src/components/Svg/Svg.tsx @@ -13,6 +13,7 @@ type SvgNames = | 'flag' | 'floppy-disk' | 'fork' + | 'fork-new' | 'gear' | 'lightbulb' | 'logout' @@ -22,6 +23,7 @@ type SvgNames = | 'photograph' | 'plus' | 'plus-circle' + | 'reactions' | 'refresh' | 'save' | 'share' @@ -294,6 +296,39 @@ const Svg = ({ /> ), + 'fork-new': ( + + + + + + + ), gear: ( ), + reactions: ( + + + + + ), refresh: ( { + return +} + +export default SocialCardPage diff --git a/app/web/tailwind.config.js b/app/web/tailwind.config.js index e492a68..e1dca04 100644 --- a/app/web/tailwind.config.js +++ b/app/web/tailwind.config.js @@ -22,6 +22,7 @@ module.exports = { 700: '#2A3038', 600: '#3B3E4B', 500: '#9F9FB4', + 400: '#A4A4B0', 300: '#CFCFD8', }, 'ch-purple': { @@ -31,6 +32,7 @@ module.exports = { }, 'ch-blue': { 600: '#79B2F8', + 500: '5098F1', 300: '#08466F' }, 'ch-pink': {