refactor(code-cleanup): post card view update

Author: rbiedrawa

.husky/pre-commit

@@ -7,6 +7,6 @@ describe('Feature - Posts', () => {
 
     cy.findByRole('button', { name: /add new post/i }).click()
 
-    cy.findByRole('heading', { name: /hello from cypress!/i }).should('exist')
+    cy.findByText(/hello from cypress!/i ).should('exist')
   })
 })

cypress/integration/posts/posts.spec.ts

@@ -1,5 +1,5 @@
 import { getPosts } from 'features/posts/api/index'
-import fixture from 'test/msw/db.initial.data.json'
+import fixture from 'test/msw/fixtures/db.initial.data.json'
 
 describe('Post API test - MSW example', () => {
   it('should fetch all Posts', async () => {

src/features/posts/api/__tests__/post.api.test.ts

@@ -1,10 +1,23 @@
-import { Button, Card, CardActions, CardContent, CardMedia } from '@mui/material'
-import Typography from '@mui/material/Typography'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import EditIcon from "@mui/icons-material/Edit";
+import { Grid, IconButton, Paper } from "@mui/material";
+import React from "react";
 
-import logoImage from 'features/posts/assets/imgs/logo192.png'
-import { Post } from 'features/posts/types'
+
+import { Post } from "features/posts/types";
+
+const styles = {
+  Icon: {
+    marginLeft: "auto"
+  },
+  Paper: {
+    margin: "auto",
+    padding: 10,
+    display: "flex",
+    alignItems: "center",
+    marginTop: 10
+  }
+};
 
 export type PostCardViewProps = {
   post: Post
@@ -13,35 +26,43 @@ export type PostCardViewProps = {
 }
 
 export const PostCardView = (props: PostCardViewProps) => {
-  const { t } = useTranslation()
 
-  const { post, onDeleteClick, onUpdateClick } = props
+  const { post, onDeleteClick, onUpdateClick } = props;
 
   const handleDeleteClick = () => {
-    onDeleteClick(post)
-  }
+    onDeleteClick(post);
+  };
 
-  const handleUpdateClick = () => onUpdateClick(post)
+  const handleUpdateClick = () => onUpdateClick(post);
 
   return (
     <>
-      <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <CardMedia component="img" src={logoImage} alt="random" />
-        <CardContent sx={{ flexGrow: 1 }}>
-          <Typography gutterBottom variant="h5" component="h2">
-            {post.title}
-          </Typography>
-          <Typography>{post.body}</Typography>
-        </CardContent>
-        <CardActions>
-          <Button size="small" onClick={handleDeleteClick}>
-            {t('home.buttons.delete')}
-          </Button>
-          <Button size="small" onClick={handleUpdateClick}>
-            {t('home.buttons.update')}
-          </Button>
-        </CardActions>
-      </Card>
+      <Grid
+        spacing={2}
+        xs={12}
+        item
+        key={post.id}
+      >
+        <Paper elevation={2} style={styles.Paper}>
+          <span><strong>{post.title}</strong> - {post.body}</span>
+          <br />
+          <IconButton
+            color="primary"
+            aria-label="Edit"
+            style={styles.Icon}
+            onClick={handleUpdateClick}
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            color="secondary"
+            aria-label="Delete"
+            onClick={handleDeleteClick}
+          >
+            <DeleteForeverIcon />
+          </IconButton>
+        </Paper>
+      </Grid>
     </>
-  )
-}
+  );
+};

src/features/posts/components/PostCardView.tsx

@@ -39,7 +39,7 @@ export const PostForm = (props: PostFormProps) => {
   const { handleSubmit, reset, control } = methods
 
   return (
-    <Stack sx={{ pt: 4 }} direction="column" spacing={1} justifyContent="center">
+    <Stack sx={{ pt: 0 }} direction="column" spacing={1} justifyContent="center">
       <FormTextField name="title" label={t('home.form.title')} control={control} />
       <FormTextField name="body" label={t('home.form.body')} control={control} />
       <Button onClick={handleSubmit(onSubmitClick)} variant={'contained'}>

src/features/posts/components/PostForm.tsx

@@ -1,9 +1,9 @@
-import { Grid } from '@mui/material'
-import React from 'react'
+import { Grid } from "@mui/material";
+import React from "react";
 
-import { PostCardView } from 'features/posts/components/PostCardView'
+import { PostCardView } from "features/posts/components/PostCardView";
 
-import { Post } from '../types'
+import { Post } from "../types";
 
 export type PostListProps = {
   posts: Post[]
@@ -12,17 +12,15 @@ export type PostListProps = {
 }
 
 export const PostList = (props: PostListProps) => {
-  const { posts, onDeletePost, onUpdatePost } = props
+  const { posts, onDeletePost, onUpdatePost } = props;
 
   return (
     <>
-      <Grid container spacing={4}>
+      <Grid container>
         {posts.map(post => (
-          <Grid item key={post.id} xs={12} sm={6} md={4}>
-            <PostCardView post={post} onDeleteClick={onDeletePost} onUpdateClick={onUpdatePost} />
-          </Grid>
+          <PostCardView data-test-id={post.title} key={post.id} post={post} onDeleteClick={onDeletePost} onUpdateClick={onUpdatePost} />
         ))}
       </Grid>
     </>
-  )
-}
+  );
+};

src/features/posts/components/PostList.tsx

@@ -2,7 +2,7 @@ import { factory, primaryKey } from '@mswjs/data'
 import { ModelDictionary } from '@mswjs/data/lib/glossary'
 
 import Env from 'config/Env'
-import initialMockedDb from 'test/msw/db.initial.data.json'
+import initialMockedDb from 'test/msw/fixtures/db.initial.data.json'
 
 const models: ModelDictionary = {
   posts: {

src/test/msw/db.initial.data.json

@@ -0,0 +1,14 @@
+{
+  "posts": [
+    {
+      "id": "v-UDRFY8Vqil3MXP0UPyE",
+      "title": "Redux-Saga",
+      "body": "An intuitive Redux side effect manager."
+    },
+    {
+      "id": "fxhwAGn0MGcQzbccTTIs5",
+      "title": "Redux Toolkit",
+      "body": "The official, opinionated, batteries-included toolset for efficient Redux development."
+    }
+  ]
+}