sdy

update CategoryContainer

1 -import React from "react"; 1 +import React, { useEffect, useState } from "react";
2 import CategoryPresenter from "./CategoryPresenter"; 2 import CategoryPresenter from "./CategoryPresenter";
3 import { withRouter } from "react-router-dom"; 3 import { withRouter } from "react-router-dom";
4 import { useQuery } from "@apollo/react-hooks"; 4 import { useQuery } from "@apollo/react-hooks";
5 -import { GET_CATEGORIRES } from "./CategoryQueries"; 5 +import {
6 + GET_CATEGORIRES,
7 + ADD_CATEGORY,
8 + SUBSCRIPTION_CATEGORY,
9 +} from "./CategoryQueries";
6 10
7 export default withRouter(({ location }) => { 11 export default withRouter(({ location }) => {
8 - const { data } = useQuery(GET_CATEGORIRES); 12 + const [categoryArr, setCategoryArr] = useState([]);
9 - //const [addCategory] = useMutation(ADD_CATEGORY); 13 + const {
10 - //const [editCategory] = useMutation(EDIT_CATEGORY); 14 + subscribeToMore,
11 - //const [deleteCategory] = useMutation(DELETE_CATEGORY); 15 + data: categoryList,
16 + error: categoryQueryError,
17 + loading: categoryQueryLoading,
18 + } = useQuery(GET_CATEGORIRES);
19 + const [addCategory] = useMutation(ADD_CATEGORY);
12 20
13 let categories; 21 let categories;
14 - if (data !== undefined) { 22 + if (categoryList !== undefined) {
15 - const { getCategories } = data; 23 + const { getCategories } = categoryList;
16 categories = getCategories; 24 categories = getCategories;
17 } 25 }
18 26
19 - return <CategoryPresenter location={location} categories={categories} />; 27 + useEffect(() => {
28 + if (categoryQueryError) {
29 + console.error(categoryQueryError);
30 + }
31 + if (categoryArr) {
32 + setCategoryArr(categoryArr.getCategories, [
33 + categoryQueryError,
34 + categoryArr,
35 + ]);
36 + }
37 + }, [categoryQueryLoading]);
38 +
39 + const subscribeToNewCategory = () => {
40 + subscribeToMore({
41 + document: SUBSCRIPTION_CATEGORY,
42 + updateQuery: (currentCategories, { subscriptionData }) => {
43 + if (!subscriptionData.data) return currentCategories;
44 + const newCategory = subscriptionData.data.subCategory;
45 + const updateCategory = currentCategories.getCategories.concat(
46 + newCategory
47 + );
48 + setCategoryArr(updateCategory);
49 + return { getCategories: updateCategory };
50 + },
51 + });
52 + };
53 +
54 + return (
55 + <CategoryPresenter
56 + location={location}
57 + categories={categories}
58 + subscribeToNewCategory={subscribeToNewCategory}
59 + />
60 + );
20 }); 61 });
......