Fix/date query

app/components/gallery/GalleryImages.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import dayjs from "dayjs";
 
 const { userAuth } = useAuthState();
-const imageUrls = ref([]);
-const dates = ref([]);
+const imageUrls = ref<T>([]);
+const dates = ref<T>([]);
 
 onMounted(async () => {
   const results = await useFetchImage();
-  const date_results = await useFetchDimDate();
+  const date_results = await useFetchDimDateFilter(["2025-02-14"]);
 
   if (!userAuth.value) {
     imageUrls.value = getMockImages();
@@ -19,20 +19,41 @@ onMounted(async () => {
 </script>
 
 <template>
-  <ul v-if="!userAuth" class="flex flex-row flex-wrap w-full object-cover gap-5 lg:gap-2 px-6 lg:px-24">
+  <ul 
+    v-if="!userAuth"
+    class="flex flex-row flex-wrap w-full object-cover gap-5 lg:gap-2 px-6 lg:px-24"
+  >
     <li v-for="(image, index) in imageUrls" :key="index">
-      <img v-if="!userAuth" :src="image" alt="It is an image" class="flex-1 w-full lg:w-64 h-96 rounded-md">
+      <img
+        v-if="!userAuth" 
+        :src="image"
+        alt="It is an image"
+        class="flex-1 w-full lg:w-64 h-96 rounded-md"
+      >
     </li>
   </ul>
   <!-- FIXME: Layout shuffling when adding gap or any space between <NuxtImg/> -->
-  <ul v-else class="flex flex-col w-full object-cover gap-5 lg:gap-24 px-6 lg:px-24">
-    <li v-for="(date, dateIndex) in dates" :key="dateIndex" class="flex flex-col gap-10">
+  <ul 
+    v-else 
+    class="flex flex-col w-full object-cover gap-5 lg:gap-24 px-6 lg:px-24"
+  >
+    <li 
+      v-for="(date, dateIndex) in dates"
+      :key="dateIndex"
+      class="flex flex-col gap-10"
+    >
       <h2 class="font-bold lg:text-4xl text-2xl">
         {{ dayjs(date.date).format("MMMM DD, YYYY") }}
       </h2>
       <ul class="flex justify-start flex-wrap px-6 lg:px-0">
-        <li v-for="(imageUrl, imageUrlIndex) in imageUrls" :key="imageUrlIndex">
-          <img v-if="imageUrl.date_id === date.id" :src="imageUrl.image_url" alt="It is an image"
+        <li 
+          v-for="(imageUrl, imageUrlIndex) in imageUrls"
+          :key="imageUrlIndex"
+        >
+          <img
+            v-if="imageUrl.date_id === date.date" 
+            :src="imageUrl.image_url"
+            alt="It is an image"
             class="w-full lg:w-64 h-96 rounded-md">
         </li>
       </ul>

app/composables/fetch/useFetchDimDate.ts

@@ -6,10 +6,23 @@ export async function useFetchDimDate() {
   const { data, error } = await client
     .from("dim_date")
     .select("*")
-    .order("date", { ascending: true });
+    .order("date", { ascending: false });
 
   if (error) throw error;
 
   return data;
 }
 
+export async function useFetchDimDateFilter(date: string[]) {
+  const client = useSupabaseClient<Database>();
+
+  const { data, error } = await client
+    .from("dim_date")
+    .select("*")
+    .neq("date", date)
+    .order("date", { ascending: false });
+
+  if (error) throw error;
+
+  return data;
+}

app/composables/fetch/useFetchImage.ts

@@ -19,8 +19,8 @@ export async function useFetchImageWithDate(date: string) {
   const { data, error } = await client
     .from("images")
     .select("*")
-    .eq("date", date)
-    .order("id", { ascending: true });
+    .eq("date_id", date)
+    .order("date_id", { ascending: true });
 
   if (error) throw error;
 

app/composables/index.ts

@@ -1,5 +1,5 @@
 export { useFetchImage, useFetchImageWithDate } from "./fetch/useFetchImage";
-export { useFetchDimDate } from "./fetch/useFetchDimDate";
+export { useFetchDimDate , useFetchDimDateFilter} from "./fetch/useFetchDimDate";
 export { useFetchRoadmap, useFetchRoadmapRange } from "./fetch/useFetchRoadmap";
 export { useFetchMemories } from "./fetch/useFetchMemories";
 

types/database.types.ts

@@ -90,7 +90,7 @@ export type Database = {
             columns: ["date_id"]
             isOneToOne: false
             referencedRelation: "dim_date"
-            referencedColumns: ["id"]
+            referencedColumns: ["date"]
           },
         ]
       }
@@ -134,7 +134,7 @@ export type Database = {
           done: boolean | null
           id: string
           image_id: string | null
-          index: number | null
+          index: number
           title: string | null
         }
         Insert: {
@@ -144,7 +144,7 @@ export type Database = {
           done?: boolean | null
           id?: string
           image_id?: string | null
-          index?: number | null
+          index?: number
           title?: string | null
         }
         Update: {
@@ -154,7 +154,7 @@ export type Database = {
           done?: boolean | null
           id?: string
           image_id?: string | null
-          index?: number | null
+          index?: number
           title?: string | null
         }
         Relationships: [
@@ -165,6 +165,13 @@ export type Database = {
             referencedRelation: "images"
             referencedColumns: ["unique_id"]
           },
+          {
+            foreignKeyName: "roadmap_date_fkey"
+            columns: ["date"]
+            isOneToOne: false
+            referencedRelation: "dim_date"
+            referencedColumns: ["date"]
+          },
         ]
       }
     }