Replaces IDs with slugs

Author: huwcarwyn

app/Api/Controllers/PostController.php

@@ -107,8 +107,10 @@ public function update(Request $request, $slug)
      * @param  int  $id
      * @return \Illuminate\Http\Response
      */
-    public function destroy($id)
+    public function destroy($slug)
     {
+        $id = $this->repository->decodeSlug($slug);
+
         $deletedPost = $this->repository->skipPresenter(false)->delete($id);
 
         return $this->response->success(['message' => 'post deleted']);

resources/assets/js/pages/Overview/Overview.jsx

@@ -97,29 +97,29 @@ const OverviewComponent = ({ getPosts, deletePost, posts }) => {
           <table className="w-full text-left mb-4">
             <thead>
               <tr>
-                <th>id</th>
+                <th>slug</th>
                 <th>title</th>
                 <th>body</th>
               </tr>
             </thead>
             <tbody>
-              {posts.map(({ id, title, body }) => (
-                <tr key={id}>
-                  <td>{id}</td>
+              {posts.map(({ slug, title, body }) => (
+                <tr key={slug}>
+                  <td>{slug}</td>
                   <td>{title}</td>
                   <td>{body}</td>
                   <td>
                     <span
                       className="text-red inline-block mr-6"
-                      onClick={() => deletePost(id)}
+                      onClick={() => deletePost(slug)}
                     >
                       delete
                     </span>
                     <ModalConsumer>
                       {({ showModal }) => (
                         <span
                           onClick={() =>
-                            showModal(UpdatePostModal, { id, title, body })
+                            showModal(UpdatePostModal, { slug, title, body })
                           }
                           className="text-green"
                         >

resources/assets/js/store/action-creators/posts/posts.js

@@ -27,8 +27,8 @@ export const createPost = data => async dispatch => {
 
 export const updatePost = data => async dispatch => {
   const response = await dispatch(
-    makeRequest(`update-post-${data.id}`, () =>
-      axios.put(`/api/posts/${data.id}`, data)
+    makeRequest(`update-post-${data.slug}`, () =>
+      axios.put(`/api/posts/${data.slug}`, data)
     )
   )
 

resources/assets/js/store/reducers/entities/entities.reducer.js

@@ -5,11 +5,13 @@ import { initialState } from 'store/initialState'
 import { createReducer } from 'store/reducers/utilities'
 
 import { usersReducer } from './users.reducer'
+import { postsReducer } from './posts.reducer'
 
 const { entities } = initialState
 
 const singleEntitiesReducer = combineReducers({
-  users: usersReducer
+  users: usersReducer,
+  posts: postsReducer
 })
 
 const wholeEntitiesReducer = createReducer(entities, {})