minor ui changes

blog/schema.py

@@ -19,6 +19,7 @@ class Config:
 
 
 class BlogList(BaseModel):
+    id: int
     title: str
     content: str
     owner_id: int

client/src/components/PostItem.jsx

@@ -0,0 +1,12 @@
+const PostItem = ({ post }) => {
+  return (
+    <div className='post'>
+      <div>{post.title}</div>
+      <p>
+        {post.content}
+      </p>
+    </div>
+  )
+}
+
+export default PostItem

client/src/features/blog/blogService.js

@@ -24,7 +24,6 @@ const getPosts = async (token) => {
   }
 
   const response = await axios.get(API_URL, config)
-  console.log('Response is ', response)
   return response.data
 }
 

client/src/features/blog/blogSlice.js

@@ -15,8 +15,8 @@ export const createPost = createAsyncThunk(
   'blog/',
   async (postData, thunkAPI) => {
     try {
-      const token = thunkAPI.getState().auth.user.token
-      return await blogService.createPost(postData, token)
+      const token = thunkAPI.getState().auth.user.access_token
+      return await blogService.createBlog(postData, token)
     } catch (error) {
       const message =
         (error.response &&
@@ -35,7 +35,7 @@ export const getPosts = createAsyncThunk(
   'blog/getAll',
   async (_, thunkAPI) => {
     try {
-      const token = thunkAPI.getState().auth.user.token
+      const token = thunkAPI.getState().auth.user.access_token
       return await blogService.getPosts(token)
     } catch (error) {
       const message =

client/src/index.css

@@ -185,33 +185,39 @@ h3 {
   transform: scale(0.98);
 }
 
-.ticket-created {
+.section-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.post-created {
   border: 1px solid #e6e6e6;
   border-radius: 5px;
   padding: 50px;
 }
 
-.ticket-number {
+.post-number {
   margin-bottom: 30px;
 }
 
-.ticket-number h2 {
+.post-number h2 {
   font-size: 2.3rem;
   margin-bottom: 10px;
 }
 
-.ticket-number p {
+.post-number p {
   font-size: 1.3rem;
 }
 
-.ticket-info {
+.post-info {
   font-size: 1.3rem;
 }
 
-.ticket,
-.ticket-headings {
+.post,
+.post-headings {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   justify-content: space-between;
   align-items: center;
@@ -222,7 +228,7 @@ h3 {
   text-align: center;
 }
 
-.ticket-headings {
+.post-headings {
   font-weight: 700;
 }
 
@@ -237,45 +243,27 @@ h3 {
   text-align: center;
 }
 
-.status-new {
-  background-color: green;
-  color: #fff;
-  border-radius: 10px;
-}
-
-.status-open {
-  background-color: steelblue;
-  color: #fff;
-  border-radius: 10px;
-}
-
-.status-closed {
-  background-color: darkred;
-  color: #fff;
-  border-radius: 10px;
-}
-
-.ticket-page {
+.post-page {
   position: relative;
   text-align: left;
 }
 
-.ticket-page h2 {
+.post-page h2 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.ticket-page .btn {
+.post-page .btn {
   margin-bottom: 30px;
 }
 
-.ticket-page .btn-block {
+.post-page .btn-block {
   width: 100%;
   margin-top: 30px;
 }
 
-.ticket-desc {
+.post-desc {
   margin: 20px 0;
   font-size: 17px;
   background-color: #f4f4f4;
@@ -284,39 +272,6 @@ h3 {
   border-radius: 5px;
 }
 
-.note {
-  border: 1px solid #e6e6e6;
-  border-radius: 5px;
-  text-align: left;
-  padding: 20px;
-  margin-bottom: 20px;
-  position: relative;
-}
-
-.note-head {
-  background: #f4f4f4;
-  padding: 5px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.note-date {
-  position: absolute;
-  top: 15px;
-  right: 10px;
-  font-size: 14px;
-}
-
-.delete-note {
-  color: red;
-  cursor: pointer;
-  position: absolute;
-  bottom: 10px;
-  right: 20px;
-}
-
 .btn-close {
   background: none;
   border: none;
@@ -395,7 +350,7 @@ footer {
     width: 90%;
   }
 
-  .ticket-created h2,
+  .post-created h2,
   .heading h1 {
     font-size: 2rem;
   }

client/src/pages/Login.jsx

@@ -8,11 +8,11 @@ import Spinner from '../components/Spinner'
 
 function Login() {
   const [formData, setFormData] = useState({
-    email: '',
+    username: '',
     password: '',
   })
 
-  const { email, password } = formData
+  const { username, password } = formData
 
   const dispatch = useDispatch()
   const navigate = useNavigate()
@@ -45,7 +45,7 @@ function Login() {
     e.preventDefault()
 
     const userData = {
-      email,
+      username,
       password,
     }
 
@@ -71,9 +71,9 @@ function Login() {
             <input
               type='email'
               className='form-control'
-              id='email'
-              name='email'
-              value={email}
+              id='username'
+              name='username'
+              value={username}
               onChange={onChange}
               placeholder='Enter your email'
               required

client/src/pages/NewPost.jsx

@@ -24,6 +24,7 @@ const NewPost = () => {
     }
 
     if (isSuccess) {
+      toast.success("Added new post");
       dispatch(reset());
       navigate("/posts");
     }
@@ -42,14 +43,13 @@ const NewPost = () => {
 
   return (
     <>
-      <BackButton url="/" />
-      <section className="heading">
-        <h1>Create New Post</h1>
-      </section>
+      <div className="section-heading">
+        <BackButton url="/" />
+        <h2>Create New Post</h2>
+      </div>
 
       <section className="form">
         <form onSubmit={onSubmit}>
-        <label htmlFor="content">Title</label>
           <div className="form-group">
             <input
               type="text"

client/src/pages/Posts.jsx

@@ -3,16 +3,15 @@ import { useSelector, useDispatch } from 'react-redux'
 import { getPosts, reset } from '../features/blog/blogSlice'
 import Spinner from '../components/Spinner'
 import BackButton from '../components/BackButton'
-import TicketItem from '../components/TicketItem'
+import PostItem from '../components/PostItem'
 
 const Posts = () => {
   const { posts, isLoading, isSuccess } = useSelector(
     (state) => state.blog
   )
 
   const dispatch = useDispatch()
-
-  console.log(posts, isLoading, isSuccess)
+
   useEffect(() => {
     return () => {
       if (isSuccess) {
@@ -31,17 +30,17 @@ const Posts = () => {
 
   return (
     <>
-      <BackButton url='/' />
-      <h1>Tickets</h1>
+      <div className="section-heading">
+        <BackButton url='/' />
+        <h1>Posts</h1>
+      </div>
       <div className='posts'>
         <div className='post-headings'>
-          <div>Date</div>
-          <div>Product</div>
-          <div>Status</div>
-          <div></div>
+          <div>Title</div>
+          <div>Content</div>
         </div>
         {posts.map((post) => (
-          <TicketItem key={post.id} post={post} />
+          <PostItem key={post.id} post={post} />
         ))}
       </div>
     </>