move useQuery to RoomPresenter

 import React, { useState } from "react";
 import React, { useState } from "react";
-import { useQuery, useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/react-hooks";
 import { withRouter } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import RoomPresenter from "./RoomPresenter";
 import RoomPresenter from "./RoomPresenter";
-import { GET_ROOMS, CREATE_ROOM } from "./RoomQueries";
+import { CREATE_ROOM } from "./RoomQueries";
 import useInput from "../../Hooks/useInput";
 import useInput from "../../Hooks/useInput";
 import { toast } from "react-toastify";
 import { toast } from "react-toastify";
 
 
@@ -11,14 +11,9 @@ export default withRouter(() => {
 
 
   const roomName = useInput("");
   const roomName = useInput("");
 
 
-  const { data } = useQuery(GET_ROOMS);
   const [createRoom] = useMutation(CREATE_ROOM);
   const [createRoom] = useMutation(CREATE_ROOM);
 
 
-  let roomArray, newRoomObj;
-  if (data !== undefined) {
-    const { getRooms } = data;
-    roomArray = getRooms;
-  }
+  let newRoomObj;
 
 
   const onSubmit = async (e) => {
   const onSubmit = async (e) => {
     e.preventDefault();
     e.preventDefault();
@@ -43,7 +38,6 @@ export default withRouter(() => {
 
 
   return (
   return (
     <RoomPresenter
     <RoomPresenter
-      roomArray={roomArray}
       action={action}
       action={action}
       setAction={setAction}
       setAction={setAction}
       onSubmit={onSubmit}
       onSubmit={onSubmit}

@@ -6,6 +6,8 @@ import { Link } from "react-router-dom";
 import Header from "../../Components/Header";
 import Header from "../../Components/Header";
 import Input from "../../Components/Input";
 import Input from "../../Components/Input";
 import Button from "../../Components/Button";
 import Button from "../../Components/Button";
+import { useQuery } from "@apollo/react-hooks";
+import { GET_ROOMS } from "./RoomQueries";
 
 
 const Wrapper = styled.div`
 const Wrapper = styled.div`
   display: flex;
   display: flex;
@@ -85,7 +87,7 @@ const RoomContainer = styled.div`
   flex-direction: column;
   flex-direction: column;
   width: 100%;
   width: 100%;
   overflow-y: scroll;
   overflow-y: scroll;
-  min-height: 70px;
+  max-height: 85px;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   &::-webkit-scrollbar {
   &::-webkit-scrollbar {
@@ -134,6 +136,9 @@ const StyledLink = styled(Link)`
   text-decoration: none;
   text-decoration: none;
   cursor: pointer;
   cursor: pointer;
   color: #079992;
   color: #079992;
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
   svg {
   svg {
     color: #079992;
     color: #079992;
     &:hover {
     &:hover {
@@ -153,7 +158,15 @@ const StyledLink = styled(Link)`
   }
   }
 `;
 `;
 
 
-export default ({ roomArray, action, setAction, onSubmit, roomName }) => {
+export default ({ action, setAction, onSubmit, roomName }) => {
+  const { data } = useQuery(GET_ROOMS);
+
+  let roomArray;
+  if (data !== undefined) {
+    const { getRooms } = data;
+    roomArray = getRooms;
+  }
+
   return (
   return (
     <Wrapper>
     <Wrapper>
       <Header text={"KhuChat"}></Header>
       <Header text={"KhuChat"}></Header>