Merge pull request #22 from netwerk-digitaal-erfgoed/fix/GH-21

Fix: Navigation issues

nuxt/components/Atoms/Image.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script setup lang="ts">
-const config = useRuntimeConfig();
 const { supportIIIF } = storeToRefs(useFlixStore());
 const props = withDefaults(
   defineProps<{

nuxt/components/Atoms/Navigation.vue

@@ -9,7 +9,7 @@
 <script setup lang="ts">
 const router = useRouter();
 const { $navigate } = useNuxtApp();
-const { currentFlix, isPreview } = useFlixStore();
+const { currentFlix, isPreview } = storeToRefs(useFlixStore());
 
 const props = withDefaults(
   defineProps<{
@@ -37,10 +37,10 @@ const route = computed(() => {
 });
 
 const animateNavigation = () => {
-  if (isPreview) {
+  if (isPreview.value) {
     return;
   }
-  return $navigate(route.href, props.direction);
+  return $navigate(route.value, props.direction);
 };
 </script>
 

nuxt/middleware/redirect-without-artwork.ts

@@ -8,16 +8,16 @@ export default defineNuxtRouteMiddleware(to => {
   const artworkStore = useArtworkStore();
   const currentArtwork = artworkStore.findBySlug(artwork);
 
+  // If we have a current artwork, do nothing
   if (currentArtwork) {
     return;
   }
 
-  // Note: We add the flix here since it's not going through AtomsNavigation
-  return navigateTo({
-    name: 'flix-category',
-    params: {
-      flix: currentFlix!.id,
-      category,
-    },
-  });
+  // If we have a currentFlix and a category, navigate to that
+  if (currentFlix && category) {
+    return navigateTo(`${currentFlix!.uri}/${category}`, { external: true });
+  }
+
+  // Worst case scenario, navigate to the home page
+  return '/';
 });

nuxt/server/api/images/[...].get.ts

@@ -1,7 +1,10 @@
-export default defineEventHandler((event) => {
+export default defineEventHandler(event => {
   const {
     public: { backendUrl },
   } = useRuntimeConfig();
-  const url = `${backendUrl}/images/${event.context.params._}`;
-  return event.$fetch(url);
-})
+  const url = `${backendUrl}/images/${event.context.params!._}`;
+  // Note use the normal fetch instead of $fetch, so 302 from strapi are correctly handled
+  return fetch(url, {
+    redirect: 'manual',
+  });
+});

nuxt/stores/flix.ts

@@ -5,7 +5,7 @@ export const useFlixStore = defineStore('flix', () => {
   const currentFlix = ref<Flix>();
   const currentToken = ref<string>();
   const currentViewport = ref<PreviewMediaQuery>('laptop');
-  const isPreview = ref(true);
+  const isPreview = ref(false);
 
   /**
    * Computed Properties
@@ -39,7 +39,7 @@ export const useFlixStore = defineStore('flix', () => {
     // Reset the values back to default
     currentFlix.value = undefined;
     currentToken.value = undefined;
-    isPreview.value = true;
+    isPreview.value = false;
     currentViewport.value = 'laptop';
 
     // Also clean up other stores