Merge branch 'master' of https://bitbucket.org/vel1024/capstone

@@ -33,13 +33,13 @@ sub-subject : making chat site using JS
 - [x] Create Chat Screen View, Make Queries for Front-End
 
 - 5/25 ~ 5/31
-- [ ] Make and Test chatting using GraphQL's Subscription
+- [X] Make and Test chatting using GraphQL's Subscription
 
 - 6/1 ~ 6/7
-- [ ] Make one to one chatting, view, toggle.
+- [X] Make one to one chatting, view, toggle.
 
 - 6/8 ~ 6/14
-- [ ] Debugging for whole codes in our project
+- [X] Debugging for whole codes in our project
 
 - 6/15 ~ 6/21
 - [ ] Deploy project in AWS amplify

@@ -33,13 +33,13 @@ sub-subject : making chat site using JS
 - [x] Create Chat Screen View, Make Queries for Front-End
 
 - 5/25 ~ 5/31
-- [ ] Make and Test chatting using GraphQL's Subscription
+- [X] Make and Test chatting using GraphQL's Subscription
 
 - 6/1 ~ 6/7
-- [ ] Make one to one chatting, view, toggle.
+- [X] Make one to one chatting, view, toggle.
 
 - 6/8 ~ 6/14
-- [ ] Debugging for whole codes in our project
+- [X] Debugging for whole codes in our project
 
 - 6/15 ~ 6/21
 - [ ] Deploy project in AWS amplify

-import { prisma } from "../../../utils";
+import { prisma, isAuthenticated } from "../../../utils";
+import { NEW_CATEGORY } from "../../../topics";
 
 export default {
   Mutation: {
-    addCategory: async (_, args) => {
+    addCategory: async (_, args, { request, pubsub }) => {
+      isAuthenticated(request);
       const { name } = args;
       const newCategory = await prisma.category.create({
         data: {
           name,
         },
       });
+      if (newCategory !== undefined) {
+        pubsub.publish(NEW_CATEGORY, { subCategory: newCategory });
+      }
       return newCategory;
     },
   },

+type Subscription {
+  subCategory: Category
+}

+import { NEW_CATEGORY } from "../../../topics";
+
+export default {
+  Subscription: {
+    subCategory: {
+      subscribe: async (_, __, { pubsub }) => {
+        return pubsub.asyncIterator(NEW_CATEGORY);
+      },
+    },
+  },
+};

 export const NEW_MESSAGE = "new message";
+
+export const NEW_CATEGORY = "new category";

@@ -33,13 +33,13 @@ sub-subject : making chat site using JS
 - [x] Create Chat Screen View, Make Queries for Front-End
 
 - 5/25 ~ 5/31
-- [ ] Make and Test chatting using GraphQL's Subscription
+- [X] Make and Test chatting using GraphQL's Subscription
 
 - 6/1 ~ 6/7
-- [ ] Make one to one chatting, view, toggle.
+- [X] Make one to one chatting, view, toggle.
 
 - 6/8 ~ 6/14
-- [ ] Debugging for whole codes in our project
+- [X] Debugging for whole codes in our project
 
 - 6/15 ~ 6/21
 - [ ] Deploy project in AWS amplify

 import React from "react";
 import styled from "styled-components";
 import ProfileIcon from "./ProfileIcon";
-import moment from "moment";
 
 const MessageWrapper = styled.div`
   display: flex;
@@ -35,18 +34,7 @@ const Msg = styled.span`
   padding: 20px 10px;
 `;
 
-const TimeBox = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  opacity: 0.8;
-`;
-
-const Time = styled.span`
-  font-size: 15px;
-`;
-
-export default ({ text, avatar, time }) => {
+export default ({ text, avatar }) => {
   return (
     <MessageWrapper className="MessageWrapper">
       <MsgContainer>
@@ -55,9 +43,6 @@ export default ({ text, avatar, time }) => {
           <MsgBox>
             <Msg> {text} </Msg>
           </MsgBox>
-          <TimeBox>
-            <Time>1</Time>
-          </TimeBox>
         </ColumnBox>
       </MsgContainer>
     </MessageWrapper>

-import React from "react";
+import React, { useEffect, useState } from "react";
 import CategoryPresenter from "./CategoryPresenter";
 import { withRouter } from "react-router-dom";
-import { useQuery } from "@apollo/react-hooks";
-import { GET_CATEGORIRES } from "./CategoryQueries";
+import { useQuery, useMutation } from "@apollo/react-hooks";
+import {
+  GET_CATEGORIRES,
+  ADD_CATEGORY,
+  SUBSCRIPTION_CATEGORY,
+} from "./CategoryQueries";
 
 export default withRouter(({ location }) => {
-  const { data } = useQuery(GET_CATEGORIRES);
-  //const [addCategory] = useMutation(ADD_CATEGORY);
-  //const [editCategory] = useMutation(EDIT_CATEGORY);
-  //const [deleteCategory] = useMutation(DELETE_CATEGORY);
+  const [categoryArr, setCategoryArr] = useState([]);
+  const {
+    subscribeToMore,
+    data: categoryList,
+    error: categoryQueryError,
+    loading: categoryQueryLoading,
+  } = useQuery(GET_CATEGORIRES);
 
   let categories;
-  if (data !== undefined) {
-    const { getCategories } = data;
+  if (categoryList !== undefined) {
+    const { getCategories } = categoryList;
     categories = getCategories;
   }
 
-  return <CategoryPresenter location={location} categories={categories} />;
+  useEffect(() => {
+    if (categoryQueryError) {
+      console.error(categoryQueryError);
+    }
+    if (categoryArr) {
+      setCategoryArr(categoryArr.getCategories, [
+        categoryQueryError,
+        categoryArr,
+      ]);
+    }
+  }, [categoryQueryLoading]);
+
+  const subscribeToNewCategory = () => {
+    subscribeToMore({
+      document: SUBSCRIPTION_CATEGORY,
+      updateQuery: (currentCategories, { subscriptionData }) => {
+        if (!subscriptionData.data) return currentCategories;
+        const newCategory = subscriptionData.data.subCategory;
+        const updateCategory = currentCategories.getCategories.concat(
+          newCategory
+        );
+        setCategoryArr(updateCategory);
+        return { getCategories: updateCategory };
+      },
+    });
+  };
+
+  return (
+    <CategoryPresenter
+      location={location}
+      categories={categories}
+      subscribeToNewCategory={subscribeToNewCategory}
+    />
+  );
 });

-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -62,9 +62,10 @@ const StyledLink = styled(Link)`
   }
 `;
 
-export default ({ location, categories }) => {
+export default ({ location, categories, subscribeToNewCategory }) => {
   const { pathname } = location;
   let path;
+  useEffect(() => subscribeToNewCategory(), []);
   return (
     <>
       <CategoryContainer>

@@ -23,3 +23,12 @@ export const DELETE_CATEGORY = gql`
     deleteCategory(name: $name)
   }
 `;
+
+export const SUBSCRIPTION_CATEGORY = gql`
+  subscription {
+    subCategory {
+      id
+      name
+    }
+  }
+`;

@@ -11,7 +11,6 @@ import {
 import useInput from "../../Hooks/useInput";
 import { toast } from "react-toastify";
 
-
 export default withRouter(({ location }) => {
   const [messageArr, setMessageArr] = useState([]);
   const { pathname } = location;
@@ -20,7 +19,7 @@ export default withRouter(({ location }) => {
 
   const message = useInput("");
 
-  let messageObj, roomNum, messageArray;
+  let messageObj, roomNum, messageArray; // messageArray 는 useQuery 로 얻은 데이터 인데 undefined 가 아닌 데이터
 
   const { data: getRoom } = useQuery(GET_ROOM_BY_NAME, {
     variables: { roomName },
@@ -36,7 +35,7 @@ export default withRouter(({ location }) => {
     subscribeToMore,
     data: messageList,
     error: msgQueryError,
-    loading: msgQueryyLoading,
+    loading: msgQueryLoading,
   } = useQuery(SEE_ALL_MESSAGE, {
     variables: { roomId: roomNum },
   });
@@ -52,7 +51,7 @@ export default withRouter(({ location }) => {
     if (messageArr) {
       setMessageArr(messageArr.seeAllMessage, [msgQueryError, messageArr]);
     }
-  }, [msgQueryyLoading]);
+  }, [msgQueryLoading]);
 
   const subscribeToNewMessage = () => {
     subscribeToMore({

@@ -107,28 +107,38 @@ const ChatScreenBox = styled.div`
   }
 `;
 
+const InputWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
 const InputContainer = styled.div`
   position: fixed;
   bottom: 0;
   justify-content: center;
   align-items: center;
-  width: 70%;
-  margin: 10px;
+  width: 50%;
+  margin-bottom: 20px;
   display: flex;
   flex-direction: row;
+  background-color: #b2bec3;
+  border: none;
   form {
     width: 100%;
     button {
       background-color: #27ae60;
-      width: 10%;
+      width: 20%;
       color: white;
       border-radius: 10px;
     }
     input {
+      background-color: #b2bec3;
       width: 70%;
     }
   }
-  border: 1px solid rgba(0, 0, 0, 0.7);
   border-radius: 10px;
 `;
 
@@ -156,7 +166,7 @@ export default ({
 }) => {
   const { pathname } = location;
   const roomName = pathname.slice(1, pathname.length);
-  useEffect(() => subscribeToNewMessage());
+  useEffect(() => subscribeToNewMessage(), []);
 
   return (
     <Wrapper>
@@ -167,7 +177,7 @@ export default ({
             <Title>{roomName} Room</Title>
           </TitleContainer>
           <PeopleContainer>
-            <StyledLink to="People">
+            <StyledLink to={`/${roomName}/People`}>
               <FontAwesomeIcon icon={faAddressBook} />
               <ItemText>People</ItemText>
             </StyledLink>
@@ -176,10 +186,9 @@ export default ({
         </ChatMenuContainer>
         <ChatScreenContainer>
           <ChatScreenHeader>
-            <Title>Selected Menu Title</Title>
+            <Title>{roomName}</Title>
           </ChatScreenHeader>
           <ChatScreenBox>
-            <ul>
             {messageArray &&
               messageArray.seeAllMessage.map((e) => (
                 <Message
@@ -189,7 +198,7 @@ export default ({
                   avatar={e.sender.avatarUrl}
                 />
               ))}
-            </ul>
+            <InputWrapper>
               <InputContainer className="InputContainer">
                 <form onSubmit={onSubmit}>
                   <Input
@@ -200,6 +209,7 @@ export default ({
                   <Button text={"Submit"} />
                 </form>
               </InputContainer>
+            </InputWrapper>
           </ChatScreenBox>
         </ChatScreenContainer>
       </ChatWrapper>

@@ -9,8 +9,8 @@ const LoggedInRoutes = () => (
   <Switch>
     <Route exact path="/" component={RoomList} />
     <Route exact path="/:roomname" component={Chat} />
-    <Route path="/:roomname/People" component={Auth} />
-    <Route path="/:roomname/:categoryName" component={Auth} />
+    <Route path="/:roomname/People" component={Chat} />
+    <Route path="/:roomname/:categoryName" component={Chat} />
     <Redirect from="*" to="/" />
   </Switch>
 );