API changes

app/Http/Controllers/API/RecentArticles.php

@@ -16,8 +16,10 @@ final class RecentArticles extends Controller
      */
     public function __invoke()
     {
-        return Article::with('source', 'topics')
-                ->latest("published_date")
-                ->paginate(20);
+        return [
+            "articles" => Article::with('source', 'topics')
+            ->latest("published_date")
+            ->paginate(20)
+        ];
     }
 }

app/Http/Controllers/API/TopicsAPIController.php

@@ -26,13 +26,12 @@ class TopicsAPIController extends Controller
      *  Load all the articles for a given topics
      *
      * @param  mixed $topic
-     * @return JsonResponse
      */
-    public function show(Topic $topic) : JsonResponse
+    public function show(Topic $topic)
     {
-        return response()->json([
+        return [
             'topic' => new TopicResource($topic),
-            'articles' => ArticleResource::collection($topic->articles()->paginate(8))
-        ]);
+            'articles' => $topic->articles()->paginate(8)
+        ];
     }
 }

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=f11fe4d9c19ff901ee13",
+    "/js/app.js": "/js/app.js?id=09b46e62c208db633001",
     "/css/app.css": "/css/app.css?id=772ee94750ef3193cc32",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
     "/js/vendor.js": "/js/vendor.js?id=968f85387c9bab0e92d2"

resources/js/components/RecentStories.vue

@@ -84,7 +84,7 @@ export default {
         axios
             .get("api/recent")
             .then(response => {
-                this.recentStories = response.data.data;
+                this.recentStories = response.data.articles.data;
             })
             .catch(error => {
                 console.log(error);

resources/js/components/TodaysPick.vue

@@ -23,6 +23,7 @@
                       <p
                         class="ml-1 mb-4 text-gray-600 text-right MvTyper"
                         style="direction:rtl;"
+                        v-if="article.body"
                     >
                         {{ article.body[0].slice(0,200) }}...
                     </p>
@@ -33,6 +34,7 @@
                     <div>
                         <a
                             :href="'/source/' + article.source.slug"
+                            v-if="article.source"
                             class="hover:underline"
                         >
                             <p
@@ -44,6 +46,7 @@
 
                     <img
                         :src="article.source.logo"
+                         v-if="article.source"
                         class="h-10 w-10 rounded-full ml-1 object-cover"
                     />
                 </div>