fixed frontend user state

Author: danyeric123

blog-frontend/src/App.tsx

@@ -4,17 +4,18 @@ import './App.css';
 import Login from './components/Login';
 import PostCard from './components/PostCard';
 import {BrowserRouter as Router} from 'react-router-dom'
-import { getAllPosts, Post, removePost } from './services/blogServices';
+import { createPost, getAllPosts, Post, removePost } from './services/blogServices';
 import NavBar from './components/NavBar';
 import SignUp from './components/SignUp';
 import { axiosInstance } from './services/authServices';
 import PostForm from './components/PostForm';
 import PostDetails from './pages/PostDetails';
 import EditPost from './pages/EditPost';
+import { getUserFromToken } from './services/userService';
 // import {getUserFromToken } from './services/userService'
 
 const App : React.FC = () => {
-  const [posts,setPosts] = useState<Post[]>()
+  const [posts,setPosts] = useState<Post[]>([])
   const [isLoading,setIsLoading] = useState(true)
   const [user, setUser] = useState('')
 
@@ -23,6 +24,7 @@ const App : React.FC = () => {
       const newPosts = await getAllPosts()
       setPosts(newPosts)
       setIsLoading(false)
+      setUser(getUserFromToken())
     }
     getPosts()
   },[])
@@ -38,9 +40,14 @@ const App : React.FC = () => {
 
   const deletePost = (title: string)=>{
     removePost(title)
-    const newPosts = posts?.filter(post=>post.title===title)
+    const newPosts = posts?.filter(post=>post.title!==title)
     setPosts(newPosts)
   }
+
+  const addPost = (post : Post) =>{
+    createPost(post)
+    setPosts([...posts,post])
+  }
 
   return (
     <>
@@ -56,7 +63,8 @@ const App : React.FC = () => {
               <PostCard 
                 key={post.id}
                 title={post.title}
-                author={post.username}
+                username={post.username}
+                content={post.content}
                 excerpt={post.excerpt}
                 status={post.status}
                 published={post.published}
@@ -74,12 +82,14 @@ const App : React.FC = () => {
           <SignUp />
         </Route>
         <Route exact path="/create">
-          <PostForm user={user} />
+          <PostForm user={user} addPost={addPost} />
         </Route>
         <Route exact path="/posts/:title">
           <PostDetails />
         </Route>
-        
+        <Route exact path="/posts/:title/edit">
+          <EditPost />
+        </Route>
       </Router>
     </>
   );

blog-frontend/src/components/PostCard.tsx

@@ -1,19 +1,14 @@
 import moment from 'moment'
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { Post } from '../services/blogServices'
 
-interface PostCardProps {
-  title: string;
-  author: string;
-  excerpt: string;
-  status:string;
-  published: string;
-  category?: string[];
+interface PostCardProps extends Post {
   deletePost: (title:string)=>void
   user: string
 }
 
-const PostCard : React.FC <PostCardProps> = ({title,author,excerpt,status,published,category, deletePost, user}) => {
+const PostCard : React.FC <PostCardProps> = ({title, content,username,excerpt,status,published,category, deletePost, user}) => {
 
   return (
     <div
@@ -27,16 +22,17 @@ const PostCard : React.FC <PostCardProps> = ({title,author,excerpt,status,publis
       <h1>{title}</h1>
       <h3>{status}</h3>
       <h4>{moment(published).format('MMMM Do YYYY, h:mm:ss a')}</h4>
-      <small>Written by {author}</small>
+      <small>Written by {username}</small>
       <p>{excerpt}</p>
       <small>Categories: {category}</small>
       </Link>
       <br/>
-      {author===user&&(
+      {username===user&&(
       <>
       <Link
         to={{
-          pathname: `posts/:title/edit`
+          pathname: `posts/${title}/edit`,
+          state: {title,status,published,content}
         }}
       >
         Edit

blog-frontend/src/components/PostForm.tsx

@@ -1,5 +1,6 @@
 import { userInfo } from 'os'
 import React, { FC, useState } from 'react'
+import { useHistory } from 'react-router'
 import { createPost, Post } from '../services/blogServices'
 
 enum Status {
@@ -8,15 +9,17 @@ enum Status {
 }
 
 interface Props {
-  user: string
+  user: string,
+  addPost: (post:Post)=>void
 }
 
-const PostForm : FC<Props> = ({user}) => {
+const PostForm : FC<Props> = ({user,addPost}) => {
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [status, setStatus] = useState(Status.DRAFT)
   const [published, setPublished] = useState('')
   const [category, setCategory] = useState<string[]>()
+  const history = useHistory()
 
   const handleSubmit = (e : React.FormEvent) => {
     e.preventDefault()
@@ -30,7 +33,8 @@ const PostForm : FC<Props> = ({user}) => {
       slug: slugiy(title),
       category
     }
-    createPost(post)
+    addPost(post)
+    history.push('/')
   }
 
   const slugiy = (string: string) : string =>{

blog-frontend/src/pages/EditPost.tsx

@@ -1,7 +1,16 @@
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
+import { useLocation } from 'react-router'
 import { Post } from '../services/blogServices'
 
-const EditPost : FC<Post> = ({title,content,status,published}) => {
+interface EditPostProps{
+  title: string;
+  content: string;
+  status:string;
+  published: string;
+}
+
+const EditPost : FC = () => {
+  
   return (
     <>