slug now identifier for individual post

Author: danyeric123

blog-frontend/src/App.tsx

@@ -65,6 +65,7 @@ const App : React.FC = () => {
                 title={post.title}
                 username={post.username}
                 content={post.content}
+                slug={post.slug}
                 excerpt={post.excerpt}
                 status={post.status}
                 published={post.published}
@@ -84,10 +85,10 @@ const App : React.FC = () => {
         <Route exact path="/create">
           <PostForm user={user} addPost={addPost} />
         </Route>
-        <Route exact path="/posts/:title">
+        <Route exact path="/posts/:slug">
           <PostDetails />
         </Route>
-        <Route exact path="/posts/:title/edit">
+        <Route exact path="/posts/:slug/edit">
           <EditPost />
         </Route>
       </Router>

blog-frontend/src/components/PostCard.tsx

@@ -8,15 +8,15 @@ interface PostCardProps extends Post {
   user: string
 }
 
-const PostCard : React.FC <PostCardProps> = ({title, content,username,excerpt,status,published,category, deletePost, user}) => {
+const PostCard : React.FC <PostCardProps> = ({title, slug,content,username,excerpt,status,published,category, deletePost, user}) => {
 
   return (
     <div
       className="post-card"
     >
       <Link
         to={{
-          pathname: `/posts/${title}`
+          pathname: `/posts/${slug}`
         }}
       >
       <h1>{title}</h1>
@@ -31,7 +31,7 @@ const PostCard : React.FC <PostCardProps> = ({title, content,username,excerpt,st
       <>
       <Link
         to={{
-          pathname: `posts/${title}/edit`,
+          pathname: `posts/${slug}/edit`,
           state: {title,status,published,content}
         }}
       >

blog-frontend/src/pages/PostDetails.tsx

@@ -4,20 +4,20 @@ import { getPost, Post } from '../services/blogServices'
 import moment from 'moment'
 
 type params = {
-  title: string
+  slug: string
 }
 
 const PostDetails = () => {
-  const {title} = useParams<params>()
+  const {slug} = useParams<params>()
   const [post, setPost] = useState<Post>()
 
   useEffect(()=>{
     const fetchPost = async ()=>{
-      const fetchedPost = await getPost(title)
+      const fetchedPost = await getPost(slug)
       setPost(fetchedPost)
     }
     fetchPost()
-  },[title])
+  },[slug])
   return (
     <>
       <h1>{post?.title}</h1>

blog-frontend/src/services/blogServices.ts

@@ -9,6 +9,7 @@ export interface Post {
   excerpt: string;
   content: string;
   status:string;
+  slug?: string
   published: string;
   category?: string[]
 }
@@ -22,8 +23,8 @@ export const createPost = async (newPost : Post) => {
   axiosInstance.post('/posts/', newPost)
 }
 
-export const getPost = async (title : string) : Promise<Post>  => {
-  return axiosInstance.get(`/posts/${title}`).then(res=>res.data)
+export const getPost = async (slug : string) : Promise<Post>  => {
+  return axiosInstance.get(`/posts/${slug}`).then(res=>res.data)
 }
 
 export const removePost = async (title: string) =>{

blog_api/views.py

@@ -24,7 +24,7 @@ class PostList(ModelViewSet):
 
   def get_object(self, queyset=None, **kwargs):
       item = self.kwargs.get('pk')
-      return get_object_or_404(Post,title=item)
+      return get_object_or_404(Post,slug=item)
 
   def create(self, request, *args, **kwargs):
       # author = User.objects.get(username=request.user)