Merge branch 'develop' of https://github.com/connect-foundation/2019-17…

… into feature-140/feed_realtime

develop과 머지
- write feed 후 pubsub으로 통지받도록 변경
- 캐시 전략  notifyOnNetworkStatusChange: true 로 설정

client/package.json

@@ -34,6 +34,7 @@
     "@types/react-textarea-autosize": "^4.3.5",
     "@types/testing-library__react": "^9.1.2",
     "apollo-boost": "^0.4.4",
+    "apollo-cache-persist": "^0.1.1",
     "apollo-client": "^2.6.4",
     "apollo-link-ws": "^1.0.19",
     "apollo-upload-client": "^11.0.0",

client/src/apollo/ApolloClient.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-boost';
+import { persistCache } from 'apollo-cache-persist';
+import { ApolloProvider } from '@apollo/react-hooks';
+import link from './Link';
+import { resolvers } from './resolvers';
+import { typeDefs } from './typeDefs';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Apollo: React.FC = ({ children }: IProps) => {
+  const [client, setClient] = useState<ApolloClient<any>>();
+  useEffect(() => {
+    const cache = new InMemoryCache();
+
+    const client = new ApolloClient({
+      cache,
+      link,
+      typeDefs,
+      resolvers
+    });
+
+    persistCache({
+      cache,
+      storage: window.localStorage
+    }).then(() => {
+      setClient(client);
+    });
+  }, []);
+  if (client === undefined) return <div>Loading...</div>;
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};
+
+export default Apollo;

client/src/resolvers.ts → client/src/apollo/resolvers.ts

@@ -1,11 +1,6 @@
-import gql from 'graphql-tag';
-
-export const typeDefs = gql`
-  extend type Query {
-    login: void
-    logout: void
-  }
-`;
+export interface IArgs {
+  content: string;
+}
 
 export const resolvers = {
   Query: {
@@ -20,8 +15,20 @@ export const resolvers = {
       const date = new Date();
       const expires = `token=; expires=${date.toUTCString()};`;
       document.cookie = expires;
-      cache.writeData({ isLoggedIn: false });
+      cache.writeData({ data: { isLoggedIn: false } });
     }
   },
-  Mutation: {}
+  Mutation: {
+    enrollWritingFeed: (
+      _: any,
+      { content }: IArgs,
+      { cache }: { cache: any }
+    ) => {
+      cache.writeData({
+        data: {
+          writingFeedContent: content
+        }
+      });
+    }
+  }
 };

client/src/apollo/typeDefs.ts

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag';
+
+export const typeDefs = gql`
+  extend type Query {
+    login: void
+    logout: void
+  }
+  extend type Mutation {
+    enrollWritingFeed: void
+  }
+`;

client/src/cache/writingFeed.gql.ts

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+export const getWritingFeedData = gql`
+  {
+    writingFeedContent @client
+  }
+`;
+
+export const enrollWritingFeedData = gql`
+  mutation enrollWritingFeed($content: String!) {
+    enrollWritingFeed(content: $content) @client
+  }
+`;

client/src/composition/Feed/Feed.tsx

@@ -58,7 +58,10 @@ function Feed({ content, createdAt, feedinfo }: Iprops) {
         <FeedContentDiv className="mainbox">
           <FeedEditDiv></FeedEditDiv>
           <FeedHeader
-            thumbnail={feedinfo.searchUser.thumbnail}
+            thumbnail={
+              feedinfo.searchUser.thumbnail ||
+              process.env.PUBLIC_URL + '/images/profile.jpg'
+            }
             nickName={feedinfo.searchUser.nickname}
             createdAt={createdAt}
           />

client/src/composition/Feed/FeedBody.tsx

@@ -12,6 +12,8 @@ const FeedText = styled.div`
   font-size: 14px;
   font-weight: normal;
   line-height: 1.38;
+  word-break: break-all;
+  white-space: pre;
 `;
 
 interface Iprops {

client/src/composition/Feed/WritingFeed/WritingFeed.query.tsx

@@ -0,0 +1,17 @@
+import { gql } from 'apollo-boost';
+
+export const ENROLL_FEED_MUTATION = gql`
+  mutation enrollFeed($content: String!, $files: [Upload]) {
+    enrollFeed(content: $content, files: $files)
+  }
+`;
+
+export const ME_QUERY = gql`
+  query me {
+    me {
+      thumbnail
+      email
+      nickname
+    }
+  }
+`;