From 8db31c99df668389db4c6651fa71a8c1420484cf Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 29 Jun 2023 19:45:54 +0200
Subject: [PATCH] fix(front): properly handle post not found

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/PageNotFound.vue   |  2 +-
 js/src/views/Posts/PostView.vue | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/js/src/views/PageNotFound.vue b/js/src/views/PageNotFound.vue
index 84dcd656e..ebbee571e 100644
--- a/js/src/views/PageNotFound.vue
+++ b/js/src/views/PageNotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="container mx-auto pt-4 is-max-desktop max-w-2xl">
+  <section class="container mx-auto py-4 is-max-desktop max-w-2xl">
     <div class="">
       <div class="">
         <picture>
diff --git a/js/src/views/Posts/PostView.vue b/js/src/views/Posts/PostView.vue
index 59ac9500e..c6d6e76f3 100644
--- a/js/src/views/Posts/PostView.vue
+++ b/js/src/views/Posts/PostView.vue
@@ -282,6 +282,7 @@ import Link from "vue-material-design-icons/Link.vue";
 import { Dialog } from "@/plugins/dialog";
 import { useI18n } from "vue-i18n";
 import { Notifier } from "@/plugins/notifier";
+import { AbsintheGraphQLErrors } from "@/types/errors.model";
 
 const props = defineProps<{
   slug: string;
@@ -303,10 +304,27 @@ const { result: membershipsResult, loading: membershipsLoading } = useQuery<{
 );
 const memberships = computed(() => membershipsResult.value?.person.memberships);
 
-const { result: postResult, loading: postLoading } = useQuery<{
+const {
+  result: postResult,
+  loading: postLoading,
+  onError: onFetchPostError,
+} = useQuery<{
   post: IPost;
 }>(FETCH_POST, () => ({ slug: props.slug }));
 
+const handleErrors = (errors: AbsintheGraphQLErrors): void => {
+  if (
+    errors.some((error) => error.status_code === 404) ||
+    errors.some(({ message }) => message.includes("has invalid value $uuid"))
+  ) {
+    router.replace({ name: RouteName.PAGE_NOT_FOUND });
+  }
+};
+
+onFetchPostError(({ graphQLErrors }) =>
+  handleErrors(graphQLErrors as AbsintheGraphQLErrors)
+);
+
 const post = computed(() => postResult.value?.post);
 
 usePersonStatusGroup(usernameWithDomain(post.value?.attributedTo as IGroup));