Develop

backend/src/resolvers/review.ts

@@ -4,9 +4,9 @@ import Review from "../models/Review";
 import { bucket } from "../utils/firebase";
 import { ObjectId } from "bson";
 
-const upload = (file, uid) => {
+const upload = (file, path) => {
   const { createReadStream, mimetype } = file;
-  const newFileName = `review-detail/${Date.now()}`;
+  const newFileName = `${path}/${Date.now()}`;
 
   return new Promise((resolve, reject) => {
     createReadStream()
@@ -19,14 +19,10 @@ const upload = (file, uid) => {
         })
       )
       .on("error", reject)
-      .on(
-        "finish",
-        resolve(
-          `https://firebasestorage.googleapis.com/v0/b/${
-            bucket.name
-          }/o/${encodeURIComponent(newFileName)}?alt=media&token=${uid}`
-        )
-      );
+      .on("finish", () => {
+        const url = `https://storage.googleapis.com/${bucket.name}/${newFileName}`; //image url from firebase server
+        resolve(url);
+      });
   });
 };
 
@@ -42,7 +38,7 @@ const resolver = {
       const { uid } = await context?.user;
       const userId = await User.findOne({ uid }).select("_id");
       const file = await args.imageCover;
-      const downloadUrl = await upload(file, uid);
+      const downloadUrl = await upload(file, "review-image-cover");
 
       const review = await Review.create({
         ...args,
@@ -59,7 +55,14 @@ const resolver = {
         { $set: { body } },
         { new: true }
       );
+
       return review;
+    },
+    uploadImageReviewDetail: async (_, { file: imageReviewDetail }) => {
+      const file = await imageReviewDetail;
+      const urlImage = await upload(file, "review-image-detail");
+
+      return { urlImage };
     }
   }
 };

backend/src/types/review.ts

@@ -12,9 +12,15 @@ export default gql`
       imageCover: Upload
     ): Review
 
+    uploadImageReviewDetail(file: Upload): ImageUrl!
+
     updateReviewDetail(_id: ID!, body: String): Review
   }
 
+  type ImageUrl {
+    urlImage: String
+  }
+
   type Review {
     _id: String!
     titleReview: String

frontend/components/ImageOptimized/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface Props {
+  imgPath: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+}
+
+export const ImageOptimized: React.FC<Props> = ({ imgPath, width, height, alt = '' }) => {
+  let dataSrc = `https://revhere.gumlet.com/fetch/${imgPath}`;
+  if (width) {
+    dataSrc += `?w=${width}`;
+  }
+
+  if (height) {
+    dataSrc += `?h=${height}`;
+  }
+
+  if (width && height) {
+    dataSrc += `&h=${height}`;
+  }
+
+  return <img data-src={dataSrc} alt={alt} />;
+};

frontend/containers/create-review-detail/Components/editor/index.tsx

@@ -2,10 +2,10 @@
 /* eslint-disable indent */
 import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
-// import firebase from 'firebase';
 
+import { useMutation } from '@apollo/react-hooks';
+import { UPLOAD_IMAGE_REVIEW_DETAIL } from '../../graphql';
 import { IAllProps } from '@tinymce/tinymce-react';
-import { useFirebase } from 'hooks/useFirebase';
 import { useDebounce } from 'hooks/useDebounce';
 
 const TinyMceEditor = dynamic<IAllProps>(() => import('@tinymce/tinymce-react').then(mod => mod.Editor) as any, {
@@ -19,9 +19,9 @@ interface Props {
 }
 
 export const Editor: React.FC<Props> = ({ setFieldValue, values, body }) => {
-  const firebaseAuth = useFirebase();
   const [content, setContent] = useState();
   const debounceValue = useDebounce(content, 300);
+  const [uploadImageReviewDetail] = useMutation(UPLOAD_IMAGE_REVIEW_DETAIL);
 
   const handleEditorChange = (content, editor) => {
     setContent(content);
@@ -48,23 +48,10 @@ export const Editor: React.FC<Props> = ({ setFieldValue, values, body }) => {
           'undo redo | image code | formatselect | bold italic backcolor |  alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | removeformat | help',
         branding: false,
         images_upload_handler: async (blobInfo, success, failure) => {
-          const storageRef = firebaseAuth.storage.ref();
-          const uploadTask = storageRef.child(`reviews/${Date.now()}`).put(blobInfo.blob());
-          uploadTask.on(
-            'state_changed',
-            snapshot => {
-              const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
-            },
-            error => {
-              console.log(error);
-              failure(error);
-            },
-            () => {
-              uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
-                success(downloadURL);
-              });
-            },
-          );
+          const { data } = await uploadImageReviewDetail({ variables: { file: blobInfo.blob() } });
+          const { imageReviewDetail } = data;
+
+          success(imageReviewDetail.urlImage);
         },
       }}
       onEditorChange={handleEditorChange}

frontend/containers/create-review-detail/graphql.ts

@@ -25,3 +25,11 @@ export const UPDATE_REVIEW_DETAIL = gql`
     }
   }
 `;
+
+export const UPLOAD_IMAGE_REVIEW_DETAIL = gql`
+  mutation UplaodImageReviewDetail($file: Upload) {
+    imageReviewDetail: uploadImageReviewDetail(file: $file) {
+      urlImage
+    }
+  }
+`;

frontend/containers/create-review-detail/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, Fragment, useState, useEffect } from 'react';
+import React, { FunctionComponent, Fragment, useState } from 'react';
 import styled from 'styled-components';
 import BreadCrumb from 'components/ฺBreadcrumb';
 
@@ -8,6 +8,7 @@ import { Formik, Field } from 'formik';
 import { Editor } from './Components/editor';
 import { GET_REVIEW, UPDATE_REVIEW_DETAIL } from './graphql';
 import { useQuery, useMutation } from '@apollo/react-hooks';
+import { ImageOptimized } from 'components/ImageOptimized';
 
 const Container = styled.div`
   width: 1000px;
@@ -100,7 +101,7 @@ export const CreateReviewDetail: FunctionComponent<Props> = ({ reviewId }) => {
                 <Row gutter={16}>
                   <Col className="gutter-row">
                     <FormItem label="รูปภาพปก">
-                      <img src={data?.review?.imageCover} alt="imageCover" width="200" />
+                      <ImageOptimized imgPath={data?.review?.imageCover} width={200} height={200} alt="imageCover" />
                     </FormItem>
                   </Col>
                   <Col className="gutter-row" flex="auto">

frontend/pages/_document.tsx

@@ -37,6 +37,22 @@ export default class MyDocument extends Document<any> {
           <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png" />
           <meta name="msapplication-TileColor" content="#cdaa04" />
           <meta name="theme-color" content="#ffffff" />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.GUMLET_CONFIG = {
+                  hosts: [{
+                      current: "storage.googleapis.com",
+                      gumlet: "revhere.gumlet.com"
+                  }],
+                  lazy_load: true,
+                  proxy: true,
+                  auto_webp: true
+                };
+                `,
+            }}
+          />
+          <script async src="https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js"></script>
         </Head>
         <body>
           <link rel="stylesheet" type="text/css" href="/static/nprogress.css" />