From 4418e6d865c3fbce101f04c9671ba42dbd6c7110 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Tue, 12 Dec 2023 16:41:10 +0100
Subject: [PATCH] Add bookmarks

---
 prisma/schema.prisma             |  38 ++++++--
 src/components/header/NavBar.vue |   4 +
 src/pages/bookmarks.vue          | 148 +++++++++++++++++++++++++++++++
 src/server/api/bookmarks.get.ts  |  46 ++++++++++
 src/server/api/categories.get.ts |  11 ++-
 src/store/bookmarks.ts           |  29 ++++++
 6 files changed, 269 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/bookmarks.vue
 create mode 100644 src/server/api/bookmarks.get.ts
 create mode 100644 src/store/bookmarks.ts

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 1c358bc..0f639e0 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -24,12 +24,19 @@ model Announcement {
   content   String   @default("")
 }
 
+enum CategoryType {
+  TALENT
+  BOOKMARK
+}
+
 model Category {
-  id        Int                   @id @default(autoincrement())
-  createdAt DateTime              @default(now())
-  slug      String                @default("")
-  name      String                @default("")
-  talents   CategoriesOnTalents[]
+  id                    Int                     @id @default(autoincrement())
+  createdAt             DateTime                @default(now())
+  slug                  String                  @default("")
+  name                  String                  @default("")
+  type                  CategoryType            @default(TALENT)
+  talents               CategoriesOnTalents[]
+  CategoriesOnBookmarks CategoriesOnBookmarks[]
 }
 
 model Talent {
@@ -43,6 +50,16 @@ model Talent {
   categories CategoriesOnTalents[]
 }
 
+model Bookmark {
+  id         Int                     @id @default(autoincrement())
+  createdAt  DateTime                @default(now())
+  name       String                  @unique @default("")
+  website    String                  @default("")
+  content    String                  @default("")
+  favorite   Boolean                 @default(false)
+  categories CategoriesOnBookmarks[]
+}
+
 model CategoriesOnTalents {
   talentId   Int
   categoryId Int
@@ -54,6 +71,17 @@ model CategoriesOnTalents {
   @@index([categoryId])
 }
 
+model CategoriesOnBookmarks {
+  bookmarkId Int
+  categoryId Int
+  category   Category @relation(fields: [categoryId], references: [id])
+  bookmark   Bookmark @relation(fields: [bookmarkId], references: [id])
+
+  @@id([bookmarkId, categoryId])
+  @@index([bookmarkId])
+  @@index([categoryId])
+}
+
 model Post {
   id        Int      @id @default(autoincrement())
   slug      String   @unique @default("")
diff --git a/src/components/header/NavBar.vue b/src/components/header/NavBar.vue
index 3a72c76..c749510 100644
--- a/src/components/header/NavBar.vue
+++ b/src/components/header/NavBar.vue
@@ -9,6 +9,10 @@ const items = [
     label: 'Guestbook',
     to: '/guestbook',
     icon: 'i-material-symbols-book-2-outline',
+  }, {
+    label: 'Bookmarks',
+    to: '/bookmarks',
+    icon: 'i-material-symbols-bookmark-add-outline-rounded',
   }],
 ]
 </script>
diff --git a/src/pages/bookmarks.vue b/src/pages/bookmarks.vue
new file mode 100644
index 0000000..f31f2d0
--- /dev/null
+++ b/src/pages/bookmarks.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { Bookmark, Category } from '@prisma/client'
+import { useBookmarksStore } from '~/store/bookmarks'
+import { providers } from '~~/types'
+
+useHead({
+  title: 'Discover new talents • Arthur Danjou',
+})
+
+const categories = ref<Array<{ label: string, slug: string }>>([{ label: 'All', slug: 'all' }])
+const { getCategory, setCategory, isFavorite, toggleFavorite } = useBookmarksStore()
+
+const {
+  data: bookmarks,
+  pending,
+} = await useFetch<Array<Bookmark & { categories: Array<{ category: Category }> }>>('/api/bookmarks', {
+  method: 'get',
+  query: {
+    favorite: isFavorite,
+    category: getCategory,
+  },
+  watch: [isFavorite, getCategory],
+})
+
+function isCategory(category: string) {
+  return getCategory.value === category
+}
+
+const {
+  data: getCategories,
+} = await useFetch<Array<Category>>('/api/categories', { method: 'GET', query: { type: 'BOOKMARK' } })
+getCategories.value!.forEach((category: any) => categories.value.push({ label: category.name, slug: category.slug }))
+
+const appConfig = useAppConfig()
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
+</script>
+
+<template>
+  <section class="w-container lg:my-24 my-16">
+    <div class="max-w-2xl space-y-8 mb-16">
+      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+        My librairy where I save some ressources
+      </h1>
+      <p class="leading-relaxed text-subtitle">
+        You will find a selection of some of the most inspiring and complete content I have read through my research and work experience.
+      </p>
+    </div>
+    <div v-if="getCategories" class="sticky z-40 top-[4.8rem] pt-2 left-0 bg-white dark:bg-zinc-900 z-100 flex gap-2 w-full items-center justify-between pb-2 border-b border-zinc-100 dark:border-zinc-700/40 mb-4">
+      <div class="flex gap-2 overflow-x-scroll sm:overflow-x-hidden bg-gray-100 dark:bg-gray-800 rounded-lg p-1 relative">
+        <div
+          v-for="category in categories"
+          :key="category.slug"
+          class="relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none transition-colors duration-200 ease-out cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white"
+          :class="{ 'text-gray-900 dark:text-white relative !bg-white dark:!bg-stone-900 rounded-md shadow-sm': isCategory(category.slug) }"
+          @click.prevent="setCategory(category.slug)"
+        >
+          <p class="w-full">
+            {{ category.label }}
+          </p>
+        </div>
+      </div>
+      <UPopover>
+        <UButton
+          :icon="isFavorite ? 'i-mdi-filter-variant-remove' : 'i-mdi-filter-variant'"
+          color="primary"
+          variant="soft"
+          size="lg"
+        />
+        <template #panel>
+          <div
+            class="flex p-2 gap-2 items-center cursor-pointer select-none text-subtitle"
+            @click.prevent="toggleFavorite()"
+          >
+            <UIcon v-if="isFavorite" name="i-material-symbols-check-box-outline-rounded" />
+            <UIcon v-else name="i-material-symbols-check-box-outline-blank" />
+            <p>Show favorites only</p>
+          </div>
+        </template>
+      </UPopover>
+    </div>
+    <div v-if="bookmarks && getCategories" class="mt-8 md:mt-16">
+      <div v-if="bookmarks.length > 0 && !pending" class="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="bookmark in bookmarks"
+          :key="bookmark.name.toLowerCase().trim()"
+          class="group relative flex flex-col justify-between"
+        >
+          <div class="flex">
+            <div class="flex gap-6 items-center">
+              <div>
+                <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
+                  <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+                  <NuxtLink
+                    :href="bookmark.website"
+                    external
+                    target="_blank"
+                  >
+                    <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                    <div class="flex gap-2 items-center">
+                      <h1 class="relative z-10">
+                        {{ bookmark.name }}
+                      </h1>
+                      <UTooltip v-if="bookmark.favorite" text="You can set the filter to only show favorites.">
+                        <UIcon name="i-ic-round-star" class="z-20 text-amber-500 text-xl font-bold hover:rotate-[143deg] duration-300" />
+                      </UTooltip>
+                    </div>
+                  </NuxtLink>
+                </h2>
+                <p class="relative z-10 my-2 text-sm text-zinc-600 dark:text-zinc-400">
+                  {{ bookmark.content }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="flex gap-2 z-10">
+            <UBadge
+              v-for="category in bookmark.categories"
+              :key="category.category.slug"
+              color="primary"
+              variant="soft"
+              size="xs"
+            >
+              {{ category.category.name }}
+            </UBadge>
+          </div>
+          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
+            <UIcon name="i-ph-link-bold" />
+            <span class="ml-2">{{ bookmark.website.replace('https://', '') }}</span>
+          </p>
+        </div>
+      </div>
+      <div v-else-if="bookmarks?.length === 0 && !pending" class="my-4 text-subtitle">
+        <div class="flex gap-2 items-center">
+          <UIcon name="i-akar-icons-cross" />
+          <p>There are no talents for this category. Maybe soon...</p>
+        </div>
+      </div>
+      <div v-else class="my-4 text-subtitle">
+        <div class="flex gap-2 items-center">
+          <UIcon name="i-eos-icons-loading" />
+          <p>The bookmarks are loading...</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/src/server/api/bookmarks.get.ts b/src/server/api/bookmarks.get.ts
new file mode 100644
index 0000000..ebe4112
--- /dev/null
+++ b/src/server/api/bookmarks.get.ts
@@ -0,0 +1,46 @@
+export default defineEventHandler(async (event) => {
+  const { favorite, category } = getQuery(event)
+  const prisma = usePrisma()
+
+  let whereClause: any
+
+  if (favorite === 'true') {
+    category === 'all'
+      ? whereClause = {
+        favorite: true,
+        categories: { every: { category: {} } },
+      }
+      : whereClause = {
+        favorite: true,
+        categories: { some: { category: { slug: category } } },
+      }
+  }
+  else {
+    category === 'all'
+      ? whereClause = {
+        categories: { every: { category: {} } },
+      }
+      : whereClause = {
+        categories: { some: { category: { slug: category } } },
+      }
+  }
+
+  return await prisma.bookmark.findMany({
+    where: whereClause,
+    orderBy: {
+      name: 'asc',
+    },
+    include: {
+      categories: {
+        include: {
+          category: true,
+        },
+        orderBy: {
+          category: {
+            name: 'asc',
+          },
+        },
+      },
+    },
+  })
+})
diff --git a/src/server/api/categories.get.ts b/src/server/api/categories.get.ts
index e044b4c..0d415c0 100644
--- a/src/server/api/categories.get.ts
+++ b/src/server/api/categories.get.ts
@@ -1,3 +1,10 @@
-export default defineEventHandler(async () => {
-  return await usePrisma().category.findMany()
+import type { CategoryType } from '@prisma/client'
+
+export default defineEventHandler(async (event) => {
+  const { type } = getQuery<{ type: CategoryType }>(event)
+  return await usePrisma().category.findMany({
+    where: {
+      type,
+    },
+  })
 })
diff --git a/src/store/bookmarks.ts b/src/store/bookmarks.ts
new file mode 100644
index 0000000..3941571
--- /dev/null
+++ b/src/store/bookmarks.ts
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+
+export const useBookmarksStore = defineStore(
+  'bookmarks',
+  () => {
+    const currentCategory = ref<string>('all')
+    const currentFavorite = ref<boolean>(false)
+
+    const getCategory = computed(() => currentCategory)
+    function setCategory(newCategory: string) {
+      currentCategory.value = newCategory
+    }
+
+    const isFavorite = computed(() => currentFavorite)
+    function toggleFavorite() {
+      currentFavorite.value = !currentFavorite.value
+    }
+
+    return {
+      getCategory,
+      setCategory,
+      isFavorite,
+      toggleFavorite,
+    }
+  },
+  {
+    persist: true,
+  },
+)