Add popover

@@ -14,6 +14,7 @@ export default function CategoryPage() {
     variables: {
     variables: {
       input: { category: name },
       input: { category: name },
     },
     },
+    fetchPolicy: 'network-only'
   });
   });
 
 
   if (error) console.log(JSON.stringify(error, null, 2));
   if (error) console.log(JSON.stringify(error, null, 2));

 import { useQuery } from '@apollo/client';
 import { useQuery } from '@apollo/client';
 
 
 import { GET_ALL_POSTS } from '@src/gql/get-all-posts';
 import { GET_ALL_POSTS } from '@src/gql/get-all-posts';
+import { useWindowSize } from '@src/hooks';
 
 
 import Main from '@views/Main';
 import Main from '@views/Main';
 
 
 export default function IndexPage() {
 export default function IndexPage() {
-  const { error, data } = useQuery(GET_ALL_POSTS);
+  const [width] = useWindowSize()
+  const { error, data } = useQuery(GET_ALL_POSTS, {variables: {skipContent: width < 1000}});
   if (error) console.log(JSON.stringify(error, null, 2));
   if (error) console.log(JSON.stringify(error, null, 2));
 
 
   let categories = [];
   let categories = [];

-import gql from 'graphql-tag';
+import gql from "graphql-tag";
 
 
 export const GET_ALL_POSTS = gql`
 export const GET_ALL_POSTS = gql`
-  query GetAllPosts {
+  query GetAllPosts($skipContent: Boolean! = true) {
     getAllPosts {
     getAllPosts {
       id
       id
       title
       title
       category
       category
+      content @skip(if: $skipContent)
     }
     }
   }
   }
 `;
 `;

@@ -13,8 +13,8 @@ export default function Card({ category, posts, ...rest }) {
 
 
   return (
   return (
     <CardItem title={category} extra={MoreButton(category)} {...rest}>
     <CardItem title={category} extra={MoreButton(category)} {...rest}>
-      {sliced.map(({ title, id }) => (
-        <Row key={title} category={category} title={title} id={id} />
+      {sliced.map(({ title, id, content }) => (
+        <Row key={title} category={category} title={title} id={id} content={content} />
       ))}
       ))}
       {emptyRows.map((_, idx) => (
       {emptyRows.map((_, idx) => (
         <div className={'card-row'} key={idx} />
         <div className={'card-row'} key={idx} />

 import { useRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import { makeArticleURLWithNumber } from '@src/shared/functions';
 import { makeArticleURLWithNumber } from '@src/shared/functions';
+import {  Popover } from 'antd';
 
 
-export const Row = ({ category, title, id }) => {
+
+export const Row = ({ category, title, id, content}) => {
   const router = useRouter();
   const router = useRouter();
   const sliced = title.length > 20 ? title.substr(0, 20) + '...' : title;
   const sliced = title.length > 20 ? title.substr(0, 20) + '...' : title;
 
 
@@ -11,9 +13,11 @@ export const Row = ({ category, title, id }) => {
   };
   };
 
 
   return (
   return (
-    <div className={'card-row has-content'} onClick={handleClickArticle}>
+    <Popover title={title} content={content} >
+    <div className={'card-row has-content'} onClick={handleClickArticle} >
       <h2 className={'card-row-title'}>{sliced}</h2>
       <h2 className={'card-row-title'}>{sliced}</h2>
       <span className={'card-row-recomment'}>{'?'}</span>
       <span className={'card-row-recomment'}>{'?'}</span>
     </div>
     </div>
+    </Popover>
   );
   );
 };
 };