update CategoryContainer

-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 {
+  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);
+  const [addCategory] = useMutation(ADD_CATEGORY);
 
   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}
+    />
+  );
 });