Merge pull request velopert#349 from velopert/feature/cloudflare

Feature/cloudflare

Author: velopert

.env

@@ -1,2 +1,4 @@
 REACT_APP_API_HOST=http://localhost:5000/
-PUBLIC_URL=/
+PUBLIC_URL=/
+REACT_APP_GRAPHQL_HOST=https://v2cdn.velog.io/
+REACT_APP_GRAPHQL_HOST_NOCDN=https://v2.velog.io/

src/components/setting/SettingUserProfile.tsx

@@ -17,6 +17,7 @@ export type SettingUserProfileProps = {
   thumbnail: string | null;
   displayName: string;
   shortBio: string;
+  loading: boolean;
 };
 
 function SettingUserProfile({
@@ -26,6 +27,7 @@ function SettingUserProfile({
   thumbnail,
   displayName,
   shortBio,
+  loading,
 }: SettingUserProfileProps) {
   const [edit, onToggleEdit] = useToggle(false);
   const [inputs, onChange] = useInputs({
@@ -45,7 +47,9 @@ function SettingUserProfile({
           src={optimizeImage(thumbnail || userThumbnail, 400)}
           alt="profile"
         />
-        <Button onClick={onUpload}>이미지 업로드</Button>
+        <Button onClick={onUpload} disabled={loading}>
+          {loading ? '업로드중...' : '이미지 업로드'}
+        </Button>
         <Button color="transparent" onClick={onClearThumbnail}>
           이미지 제거
         </Button>

src/components/write/WriteMarkdownEditor.tsx

@@ -34,6 +34,7 @@ export interface MarkdownEditorProps {
   lastUploadedImage: string | null;
   initialBody: string;
   theme: 'light' | 'dark';
+  tempBlobImage: string | null;
 }
 
 type MarkdownEditorState = {
@@ -239,7 +240,29 @@ export default class WriteMarkdownEditor extends React.Component<
       return;
     }
     if (!this.codemirror) return;
-    this.codemirror.getDoc().replaceSelection(`![](${encodeURI(image)})`);
+    const lines = this.codemirror.getValue().split('\n');
+    const lineIndex = lines.findIndex((l) => l.includes('![업로드중..]'));
+    if (lineIndex === -1) return;
+
+    const startCh = lines[lineIndex].indexOf('![업로드중..]');
+    this.codemirror
+      .getDoc()
+      .replaceRange(
+        `![](${encodeURI(image)})`,
+        { line: lineIndex, ch: startCh },
+        { line: lineIndex, ch: lines[lineIndex].length },
+      );
+    // this.codemirror.getDoc().replaceSelection(`![](${encodeURI(image)})`);
+  };
+
+  addTempImageBlobToEditor = (blobUrl: string) => {
+    const imageMarkdown = `![업로드중..](${blobUrl})\n`;
+
+    if (this.isIOS) {
+      return;
+    }
+    if (!this.codemirror) return;
+    this.codemirror.getDoc().replaceSelection(imageMarkdown);
   };
 
   componentDidUpdate(prevProps: MarkdownEditorProps) {
@@ -255,6 +278,13 @@ export default class WriteMarkdownEditor extends React.Component<
     ) {
       this.addImageToEditor(lastUploadedImage);
     }
+
+    if (
+      this.props.tempBlobImage &&
+      this.props.tempBlobImage !== prevProps.tempBlobImage
+    ) {
+      this.addTempImageBlobToEditor(this.props.tempBlobImage);
+    }
   }
 
   componentDidMount() {

src/containers/setting/SettingUserProfileContainer.tsx

@@ -1,25 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import SettingUserProfile from '../../components/setting/SettingUserProfile';
 import useUpload from '../../lib/hooks/useUpload';
-import useS3Upload from '../../lib/hooks/useS3Upload';
 import useUserProfile from './hooks/useUserProfile';
 import useUpdateThumbnail from './hooks/useUpdateThumbnail';
 import useUser from '../../lib/hooks/useUser';
 import RequireLogin from '../../components/common/RequireLogin';
+import { useCFUpload } from '../../lib/hooks/useCFUpload';
 
 export type SettingUserProfileContainerProps = {};
 
 function SettingUserProfileContainer(props: SettingUserProfileContainerProps) {
   const user = useUser();
-  const { profile,  update } = useUserProfile();
+  const { profile, update } = useUserProfile();
   const [upload] = useUpload();
-  const [s3Upload] = useS3Upload();
+  const { upload: cfUpload } = useCFUpload();
   const updateThumbnail = useUpdateThumbnail();
+  const [imageBlobUrl, setImageBlobUrl] = React.useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
   const uploadThumbnail = async () => {
     const file = await upload();
     if (!file) return;
-    const image = await s3Upload(file, { type: 'profile' });
+    setLoading(true);
+    setImageBlobUrl(URL.createObjectURL(file));
+    const image = await cfUpload(file, { type: 'profile' });
+    setLoading(false);
     if (!image) return;
     updateThumbnail(image);
   };
@@ -45,7 +50,8 @@ function SettingUserProfileContainer(props: SettingUserProfileContainerProps) {
       onClearThumbnail={clearThumbnail}
       displayName={profile.display_name}
       shortBio={profile.short_bio}
-      thumbnail={profile.thumbnail}
+      thumbnail={imageBlobUrl || profile.thumbnail}
+      loading={loading}
     />
   );
 }

src/containers/write/MarkdownEditorContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import MarkdownEditor from '../../components/write/WriteMarkdownEditor';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { RootState } from '../../modules';
@@ -21,7 +21,6 @@ import strip from 'strip-markdown';
 import TagInputContainer from './TagInputContainer';
 import WriteFooter from '../../components/write/WriteFooter';
 import useUpload from '../../lib/hooks/useUpload';
-import useS3Upload from '../../lib/hooks/useS3Upload';
 import DragDropUpload from '../../components/common/DragDropUpload';
 import PasteUpload from '../../components/common/PasteUpload';
 import { bindActionCreators } from 'redux';
@@ -43,6 +42,7 @@ import { toast } from 'react-toastify';
 import { usePrevious } from 'react-use';
 import { useTheme } from '../../lib/hooks/useTheme';
 import { useUncachedApolloClient } from '../../lib/graphql/UncachedApolloContext';
+import { useCFUpload } from '../../lib/hooks/useCFUpload';
 
 export type MarkdownEditorContainerProps = {};
 
@@ -64,6 +64,9 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
   const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
     client: uncachedClient,
   });
+
+  const bodyRef = useRef(initialBody);
+  const titleRef = useRef(title);
   const [createPostHistory] =
     useMutation<CreatePostHistoryResponse>(CREATE_POST_HISTORY);
   const [editPost] = useMutation<EditPostResult>(EDIT_POST, {
@@ -132,31 +135,17 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
   }, [actionCreators, markdown]);
 
   const [upload, file] = useUpload();
-  const [s3Upload, image] = useS3Upload();
-  const prevImage = usePrevious(image);
 
-  useEffect(() => {
-    if (!file) return;
-    s3Upload(file, {
-      type: 'post',
-    });
-  }, [file, s3Upload]);
+  const { upload: cfUpload, image } = useCFUpload();
+  const prevImage = usePrevious(image);
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
 
   useEffect(() => {
     if (image !== prevImage && !thumbnail && image) {
       actionCreators.setThumbnail(image);
     }
   }, [actionCreators, image, prevImage, thumbnail]);
 
-  const onDragDropUpload = useCallback(
-    (file: File) => {
-      s3Upload(file, {
-        type: 'post',
-      });
-    },
-    [s3Upload],
-  );
-
   const onTempSave = useCallback(
     async (notify?: boolean) => {
       if (!title || !markdown) {
@@ -189,7 +178,6 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
         dispatch(setWritePostId(id));
         history.replace(`/write?id=${id}`);
         notifySuccess();
-        return;
       }
       // tempsaving unreleased post:
       if (isTemp) {
@@ -246,6 +234,57 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
     ],
   );
 
+  const uploadWithPostId = useCallback(
+    async (file: File) => {
+      if (!file) return;
+      let id = postId;
+      if (!id) {
+        const title = titleRef.current || 'Temp Title';
+        const body = bodyRef.current || 'Temp Body';
+
+        const response = await writePost({
+          variables: {
+            title,
+            body,
+            tags: [],
+            is_markdown: true,
+            is_temp: true,
+            is_private: false,
+            url_slug: escapeForUrl(title),
+            thumbnail: null,
+            meta: {},
+            series_id: null,
+          },
+        });
+        if (!response || !response.data) return;
+        id = response.data.writePost.id;
+        dispatch(setWritePostId(id));
+        history.replace(`/write?id=${id}`);
+      }
+      if (!id) return;
+
+      const url = URL.createObjectURL(file);
+      setImageBlobUrl(url);
+
+      cfUpload(file, { type: 'post', refId: id }).catch((e) => {
+        toast.error('이미지 업로드 실패! 잠시 후 다시 시도하세요.');
+      });
+    },
+    [postId, cfUpload, writePost, dispatch, history],
+  );
+
+  const onDragDropUpload = useCallback(
+    (file: File) => {
+      uploadWithPostId(file);
+    },
+    [uploadWithPostId],
+  );
+
+  useEffect(() => {
+    if (!file) return;
+    uploadWithPostId(file);
+  }, [file, uploadWithPostId]);
+
   useEffect(() => {
     const changed = !shallowEqual(lastSavedData, { title, body: markdown });
     if (changed) {
@@ -267,6 +306,11 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
   );
   const theme = useTheme();
 
+  useEffect(() => {
+    bodyRef.current = markdown;
+    titleRef.current = title;
+  }, [markdown, title]);
+
   if (!isReady) return null;
 
   return (
@@ -276,6 +320,7 @@ const MarkdownEditorContainer: React.FC<MarkdownEditorContainerProps> = () => {
       </Helmet>
       <MarkdownEditor
         onUpload={upload}
+        tempBlobImage={imageBlobUrl}
         lastUploadedImage={image}
         initialBody={initialBody}
         title={title}

src/containers/write/PublishPreviewContainer.tsx

@@ -1,10 +1,18 @@
 import React, { useEffect, useCallback, useRef } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../modules';
 import PublishPreview from '../../components/write/PublishPreview';
-import { changeDescription, setThumbnail } from '../../modules/write';
+import {
+  changeDescription,
+  setThumbnail,
+  setWritePostId,
+} from '../../modules/write';
 import useUpload from '../../lib/hooks/useUpload';
-import useS3Upload from '../../lib/hooks/useS3Upload';
+import { useCFUpload } from '../../lib/hooks/useCFUpload';
+import { useMutation } from '@apollo/react-hooks';
+import { WritePostResponse, WRITE_POST } from '../../lib/graphql/post';
+import { useUncachedApolloClient } from '../../lib/graphql/UncachedApolloContext';
+import { escapeForUrl } from '../../lib/utils';
 
 const mapStateToProps = (state: RootState) => ({
   title: state.write.title,
@@ -38,9 +46,16 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
     (description: string) => changeDescription(description),
     [changeDescription],
   );
-
+  const uncachedClient = useUncachedApolloClient();
+  const [writePost] = useMutation<WritePostResponse>(WRITE_POST, {
+    client: uncachedClient,
+  });
   const [upload, file] = useUpload();
-  const [s3Upload, image] = useS3Upload();
+  const { upload: cfUpload, image } = useCFUpload();
+
+  const { markdown, postId, tags } = useSelector(
+    (state: RootState) => state.write,
+  );
 
   // fills description with defaultDescription when it is empty
   useEffect(() => {
@@ -57,12 +72,48 @@ const PublishPreviewContainer: React.FC<PublishPreviewContainerProps> = ({
     upload();
   };
 
+  const dispatch = useDispatch();
+
+  const getValidPostId = useCallback(async () => {
+    if (postId) return postId;
+    const validTitle = title || 'Temp Title';
+    const validBody = markdown || 'Temp Body';
+
+    const response = await writePost({
+      variables: {
+        title: validTitle,
+        body: validBody,
+        tags,
+        is_markdown: true,
+        is_temp: true,
+        is_private: false,
+        url_slug: escapeForUrl(validTitle),
+        thumbnail: null,
+        meta: {},
+        series_id: null,
+      },
+    });
+
+    if (!response || !response.data) return null;
+    const id = response.data.writePost.id;
+    dispatch(setWritePostId(id));
+    return id;
+  }, [postId, writePost, markdown, tags, title, dispatch]);
+
+  const uploadWithPostId = useCallback(
+    async (file: File) => {
+      const id = await getValidPostId();
+      if (!id) return;
+      cfUpload(file, { type: 'post', refId: id });
+    },
+    [cfUpload, getValidPostId],
+  );
+
   useEffect(() => {
     if (!file) return;
-    s3Upload(file, {
-      type: 'post',
-    });
-  }, [file, s3Upload]);
+    uploadWithPostId(file);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [file]);
 
   useEffect(() => {
     if (!image) return;