From a4e3732911c9a6c3a55038c34a2f8d50a50f9fb3 Mon Sep 17 00:00:00 2001
From: Giacomo Baggio <giacomobaggio13@gmail.com>
Date: Thu, 2 Sep 2021 09:03:18 +0200
Subject: [PATCH] Create image project block

---
 frontend/features/project/ImageBlock.tsx | 67 ++++++++++++++++++++++++
 frontend/pages/[[...slug]].tsx           |  3 --
 frontend/pages/projects/[...handle].tsx  |  9 +---
 3 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 frontend/features/project/ImageBlock.tsx

diff --git a/frontend/features/project/ImageBlock.tsx b/frontend/features/project/ImageBlock.tsx
new file mode 100644
index 0000000..55de904
--- /dev/null
+++ b/frontend/features/project/ImageBlock.tsx
@@ -0,0 +1,67 @@
+import { Box, Img } from "@chakra-ui/react";
+import { STRAPI_URL } from "@config/env";
+import React from "react";
+import {
+  Block,
+  BlockComponentProps,
+  BlocksControls,
+} from "react-tinacms-inline";
+
+export type ImageBlockData = BlockTemplateData<
+  "image",
+  {
+    id: string;
+    url: string;
+    alternativeText: Nullable<string>;
+  }
+>;
+
+interface ImageBlockProps {
+  url: string;
+}
+
+export function ImageBlock({ url }: ImageBlockProps) {
+  return (
+    <Box mx="auto" my="8" w={{ base: "full", md: "container.md" }}>
+      <Img
+        href={`${STRAPI_URL}${url}`}
+        w={{
+          base: "full",
+          md: "calc(100vw - 80px)",
+          xl: "container.lg",
+        }}
+        ml={{
+          base: "0",
+          md: "calc((-100vw + 780px) / 2)",
+          xl: "64",
+        }}
+        display="block"
+        my="10"
+        boxShadow="rgb(0 0 0 / 15%) 0px 4px 20px 0px"
+      ></Img>
+    </Box>
+  );
+}
+
+function BlockComponent({ index, data }: BlockComponentProps) {
+  return (
+    <BlocksControls index={index} focusRing={{ offset: 0 }} insetControls>
+      <ImageBlock {...data} />
+    </BlocksControls>
+  );
+}
+
+export const imageBlock: Block = {
+  Component: BlockComponent,
+  template: {
+    label: "Image block",
+    defaultItem: {},
+    fields: [
+      {
+        name: "image",
+        component: "Image",
+        label: "Image",
+      },
+    ],
+  },
+};
diff --git a/frontend/pages/[[...slug]].tsx b/frontend/pages/[[...slug]].tsx
index 6cfa93c..e07858f 100644
--- a/frontend/pages/[[...slug]].tsx
+++ b/frontend/pages/[[...slug]].tsx
@@ -57,9 +57,6 @@ const StyledInlineBlocks = chakra(InlineBlocks);
 
 export default function DynamicPage({ data: data, preview }: DynamicPageProps) {
   const { colorMode } = useColorMode();
-
-  console.log("data slug", data);
-
   const itemProps = React.useMemo<BlockItemProps>(() => {
     return {
       isPreview: preview,
diff --git a/frontend/pages/projects/[...handle].tsx b/frontend/pages/projects/[...handle].tsx
index 1b40117..6a4f5be 100644
--- a/frontend/pages/projects/[...handle].tsx
+++ b/frontend/pages/projects/[...handle].tsx
@@ -54,7 +54,7 @@ interface ProjectData {
   projectType: Nullable<string>;
   image: Nullable<ProjectImage>;
   localizations?: LocalizationsData[];
-  blocks: string;
+  blocks: null;
 }
 
 interface ProjectImage {
@@ -73,7 +73,6 @@ interface DynamicPageProps {
 }
 
 export default function DynamicPage({ data: data }: DynamicPageProps) {
-  console.log("data", JSON.stringify(data, null, " "));
   const [_, form] = useProjectPlugin(data);
   const router = useRouter();
 
@@ -237,8 +236,6 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
     const slugArray: any =
       pagePath.length > 0 ? pagePath.split("/") : undefined;
 
-    console.log("slugArray", slugArray);
-
     return {
       params: { handle: slugArray },
       locale: page.locale!,
@@ -259,8 +256,6 @@ export const getStaticProps: GetStaticProps<
   }
   const preview = context.preview === true;
 
-  console.log("path", path);
-
   const availableProjects = await fetchGraphQL<
     GetProjectsQuery,
     GetProjectsQueryVariables
@@ -349,7 +344,7 @@ function getProjectData(
     linkPath: project.linkPath || null,
     path: project.path,
     locale: project.locale || null,
-    blocks: "aa",
+    blocks: null,
     image: project.image
       ? {
           id: project.image.id,