make useMutation, onSubmit function

 import React, { useState } from "react";
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery, useMutation } from "@apollo/react-hooks";
 import { withRouter } from "react-router-dom";
 import RoomPresenter from "./RoomPresenter";
-import { GET_ROOMS } from "./RoomQueries";
+import { GET_ROOMS, CREATE_ROOM } from "./RoomQueries";
+import useInput from "../../Hooks/useInput";
+import { toast } from "react-toastify";
 
 export default withRouter(() => {
   const [action, setAction] = useState("showList");
 
+  const roomName = useInput("");
+
   const { data } = useQuery(GET_ROOMS);
-  let roomArray;
+  const [createRoom] = useMutation(CREATE_ROOM);
+
+  let roomArray, newRoomObj;
   if (data !== undefined) {
     const { getRooms } = data;
     roomArray = getRooms;
   }
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    if (roomName.value !== "") {
+      try {
+        newRoomObj = await createRoom({ variables: { name: roomName.value } });
+        if (!newRoomObj) {
+          // when fail to create room
+          toast.error("fail to create new room");
+        } else {
+          // when success to make room
+          toast.success("success to make new room !");
+          setAction("showList");
+        }
+      } catch {
+        toast.error("occur unexpected error");
+      }
+    } else {
+      toast.error("room name is required !");
+    }
+  };
+
   return (
     <RoomPresenter
       roomArray={roomArray}
       action={action}
       setAction={setAction}
+      onSubmit={onSubmit}
+      roomName={roomName}
     />
   );
 });