2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
minsung
19e80c60 2 parents c5e2dafa ce984f00

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

Inline Side-by-side
Showing 14 changed files with 137 additions and 72 deletions
......@@ -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,30 +186,30 @@ export default ({
</ChatMenuContainer>
<ChatScreenContainer>
<ChatScreenHeader>
<Title>Selected Menu Title</Title>
<Title>{roomName}</Title>
</ChatScreenHeader>
<ChatScreenBox>
<ul>
{messageArray &&
messageArray.seeAllMessage.map((e) => (
<Message
text={e.text}
time={e.createdAt}
key={e.id}
avatar={e.sender.avatarUrl}
/>
))}
</ul>
<InputContainer className="InputContainer">
<form onSubmit={onSubmit}>
<Input
placeholder={"Enter any words"}
type="text"
{...message}
{messageArray &&
messageArray.seeAllMessage.map((e) => (
<Message
text={e.text}
time={e.createdAt}
key={e.id}
avatar={e.sender.avatarUrl}
/>
<Button text={"Submit"} />
</form>
</InputContainer>
))}
<InputWrapper>
<InputContainer className="InputContainer">
<form onSubmit={onSubmit}>
<Input
placeholder={"Enter any words"}
type="text"
{...message}
/>
<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>
);
......