Merge pull request #938 from factly/fix/935

fixes issue 935
factly · Jun 27, 2024 · 86c191c · 86c191c
2 parents b3f0431 + a66abee
commit 86c191c
Showing 1 changed file with 75 additions and 55 deletions.
diff --git a/studio/src/components/Template/index.js b/studio/src/components/Template/index.js
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import PlaceholderImage from '../ErrorsAndImage/PlaceholderImage';
 import useNavigation from '../../utils/useNavigation';
+import RecordNotFound from '../ErrorsAndImage/RecordNotFound';
 
 function Template({ format }) {
   const dispatch = useDispatch();
@@ -43,6 +44,7 @@ function Template({ format }) {
     fetchTemplates();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page]);
+
   const fetchTemplates = () => {
     dispatch(getPosts({ page: page, status: 'template', format: [format.id] }));
   };
@@ -77,63 +79,81 @@ function Template({ format }) {
     }
   };
 
-  if (loading) return <Spin style={{ marginLeft: '50%' }} />;
-
-  if (posts.length === 0) return null;
+  const handleChange = (nextkeys) => {
+    console.log(nextkeys);
+    if (nextkeys.includes('1')) {
+      setShow(true);
+      return;
+    }
+    setShow(false);
+  };
 
   return (
-    <Collapse defaultActiveKey={[]} style={{ marginBottom: '0.75rem' }}>
-      <Panel header="Templates" key="1" extra={genExtra()}>
-        <List
-          grid={{ gutter: 16, column: 5 }}
-          dataSource={show ? posts : posts.slice(0, 5)}
-          renderItem={(item) => (
-            <List.Item>
-              <Card
-                cover={
-                  item.medium ? (
-                    <img
-                      style={{ cursor: 'pointer' }}
-                      alt="example"
-                      src={item.medium.url?.[window.REACT_APP_ENABLE_IMGPROXY ? 'proxy' : 'raw']}
-                      height="230"
-                      onClick={() => handleAddPost(item)}
-                    />
-                  ) : (
-                    <button style={{ border: 'none' }} onClick={() => handleAddPost(item)}>
-                      <PlaceholderImage />
-                    </button>
-                  )
-                }
-                actions={[
-                  <Link
-                    to={
-                      format.slug === 'article'
-                        ? `/posts/${item.id}/edit`
-                        : `/fact-checks/${item.id}/edit`
-                    }
-                  >
-                    <EditOutlined key="edit" />
-                  </Link>,
-                  <Popconfirm
-                    title="Are you sure you want to delete this?"
-                    onConfirm={() =>
-                      dispatch(deletePost(item.id))
-                        .then(() => {
-                          fetchTemplates();
-                        })
-                        .then(() => dispatch(getPosts({ page: 1, limit: 5, format: [format.id] })))
-                    }
-                  >
-                    <DeleteOutlined key="delete" danger />
-                  </Popconfirm>,
-                ]}
-              >
-                <Meta description={item.title} onClick={() => handleAddPost(item)} />
-              </Card>
-            </List.Item>
-          )}
-        />
+    <Collapse
+      defaultActiveKey={[]}
+      activeKey={show ? ['1'] : []}
+      style={{ marginBottom: '0.75rem' }}
+      onChange={handleChange}
+    >
+      <Panel header="Templates" key="1" extra={genExtra()} isActive={show}>
+        {loading ? (
+          <Spin style={{ marginLeft: '50%' }} />
+        ) : posts.length === 0 ? (
+          <RecordNotFound status="info" title="No Templates found" />
+        ) : (
+          <List
+            grid={{ gutter: 16, column: 5 }}
+            dataSource={show ? posts : posts.slice(0, 5)}
+            renderItem={(item) => (
+              <List.Item>
+                <Card
+                  cover={
+                    item.medium ? (
+                      <img
+                        style={{ cursor: 'pointer' }}
+                        alt="example"
+                        src={item.medium.url?.[window.REACT_APP_ENABLE_IMGPROXY ? 'proxy' : 'raw']}
+                        height="230"
+                        onClick={() => handleAddPost(item)}
+                      />
+                    ) : (
+                      <button style={{ border: 'none' }} onClick={() => handleAddPost(item)}>
+                        <PlaceholderImage />
+                      </button>
+                    )
+                  }
+                  actions={[
+                    <Link
+                      to={
+                        format.slug === 'article'
+                          ? `/posts/${item.id}/edit`
+                          : `/fact-checks/${item.id}/edit`
+                      }
+                    >
+                      <EditOutlined key="edit" />
+                    </Link>,
+                    <Popconfirm
+                      title="Are you sure you want to delete this?"
+                      onConfirm={() =>
+                        dispatch(deletePost(item.id))
+                          .then(() => {
+                            fetchTemplates();
+                          })
+                          .then(() =>
+                            dispatch(getPosts({ page: 1, limit: 5, format: [format.id] })),
+                          )
+                      }
+                    >
+                      <DeleteOutlined key="delete" danger />
+                    </Popconfirm>,
+                  ]}
+                >
+                  <Meta description={item.title} onClick={() => handleAddPost(item)} />
+                </Card>
+              </List.Item>
+            )}
+          />
+        )}
       </Panel>
     </Collapse>
   );