Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes issue 935 #938

Merged
merged 1 commit into from
Jun 27, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 75 additions & 55 deletions studio/src/components/Template/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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] }));
};
Expand Down Expand Up @@ -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>
);
Expand Down
Loading